html全屏播放js,使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍
一、video的js知识点:
controls(控制器)、autoplay(自动播放)、loop(循环)==video默认的;
自定义播放器中一些JS中提供的方法和属性的记录:
1、play()控制视频的播放
2、pause()控制视频的停止
3、currentTime控制视频的当前时间
4、muted控制视频是否静音(赋值true or false)
5、volume控制音量的大小(赋值0-1)
6、duration视频的总时间
7、ontimeupdate事件(当前播放位置改变时执行,使用时要绑定addEventListener)
8、requestFullscreen全屏
二、全屏API介绍
浏览器全屏API简史
1、第一个实现浏览器原生全屏API的是在Safari 5.0(和iOS)中添加的webkitEnterFullScreen()函数,不过它只能在Safar的标签的controls中。
2、在Safari 5.1中,苹果更新了这个API使它更接近于Mozilla的全屏API草案(实际上这要比苹果实现的更早),现在,所有的DOM元素都可以调用webkitRequestFullScreen()函数使HTML页面进入到全屏模式。
3、Firefox和Chome宣布它们将会添加原生的全屏API支持,而且这个特性已经在Chome 15+以及Firefox10+中实现,Mozilla团队已经发布了一些。
4、在2011年10月15日,W3C发布了一份全屏API草案(由Opera团队的一名成员编写),它跟Mozilla的草案有两个主要的不同点:
Mozilla/Webkit使用大写字母’S'(FullScreen),但W3C则不是(Fullscreen)
Mozilla/Webkit使用cancelFullScreen,W3C使用exitFullscreen
5、更新 (11/15/2011):来自IEBlog的Ted Johnson说IE10将不会支持全屏API (12/05/2011: 我对Ted的第一封email理解错了)IE10的开发团队还没有决定是否要实现全屏API。不过,他指出:Win8的 Metro风格的Internet Explorer始终是全屏状态,正如以前那样,按F11键即可进入全屏模式。
浏览器全屏API
要进入全屏模式,可以调用需要进入全屏元素的requestFullScreen(或者W3C的 requestFullscreen)方法。。要退出全屏,则调用document对象的cancelFullScreen(或者W3C的exitFullscreen)方法。
代码:
全屏
var docElm = document.documentElement;
//W3C
if(docElm.requestFullscreen){
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
退出全屏
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
监听是否全屏
document.addEventListener("fullscreenchange", function(){
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false);
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false);
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false);
document.addEventListener("msfullscreenchange", function () {
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);
全屏是的样式设置
html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}
html:fullscreen {
background: red;
}
html全屏播放js,使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍相关推荐
- php video标签使用方法,HTML_HTML5 video标签(播放器)学习笔记(一):使用入门,近有在学习html5中video标签(播 - phpStudy...
HTML5 video标签(播放器)学习笔记(一):使用入门 近有在学习html5中video标签(播放器)的使用,这里做一些学习笔记,方便自己查阅和记录,本文是第一篇,将介绍的是使用该标签初始化该做 ...
- 解决html5中video标签无法播放mp4问题的办法
解决html5中video标签无法播放mp4问题的办法 参考文章: (1)解决html5中video标签无法播放mp4问题的办法 (2)https://www.cnblogs.com/it-tsz/p ...
- vue3-video-play视频组件的使用(一)——基本使用 HTML5中Video标签的属性、方法和事件汇总
vue3-video-play视频组件的使用(一)--基本使用 & HTML5中Video标签的属性.方法和事件汇总 npm地址:https://www.npmjs.com/package/v ...
- HTML5新增的video标签,HTML5中video标签的使用方法
HTML5中video标签的使用方法 发布时间:2020-08-27 11:33:56 来源:亿速云 阅读:100 作者:小新 这篇文章将为大家详细讲解有关HTML5中video标签的使用方法,小编觉 ...
- 如何将uni-app中video标签播放按钮隐藏
uni-app中video标签播放按钮隐藏的坑... 项目需求是将视频放在展示列表上,刚开始的思路是直接将视频的首帧截取出来放在列表上,后来发现此方法实在太过麻烦.于是直接使用了video标签,将视频 ...
- 在html5代码中加个时间,HTML5中video标签“事件”详解(实时监测当前播放时间)代码...
1.html代码:video后边几个元素,可处理ios 系统的兼容性 2.Js代码: //获取视频DOM元素 var myVideo = document.getElementById("m ...
- 关于HTML5中Video标签无法播放mp4的解决办法
1.首先先排除掉代码问题.路径问题.浏览器不支持问题等常规问题,这些问题另行百度. <video width="500px" height="300px" ...
- html5(mp4)无法播放,关于HTML5中Video标签无法播放mp4的解决办法
1.首先先排除掉代码问题.路径问题.浏览器不支持问题等常规问题,这些问题另行百度. 2.首先我自己从网上下载的一个MP4文件,IE10和谷歌都能正常播放.然后自己用格式化工厂转换了一个RMVB文件为M ...
- html mp4无法播放,关于HTML5中Video标签无法播放mp4的解决办法
1.首先先排除掉代码问题.路径问题.浏览器不支持问题等常规问题,这些问题另行百度. 2.首先我自己从网上下载的一个MP4文件,IE10和谷歌都能正常播放.然后自己用格式化工厂转换了一个RMVB文件为M ...
最新文章
- vector机器人 PHOTOS TAKEN BY VECTOR 由 VECTOR 拍摄的照片
- 使用node https module创建服务器遇到的mac verify failure错误消息
- springmvc常用注解
- linux下文件颜色说明
- Python小白的数学建模课-23.数据拟合全集
- [转载]JS语法字典
- python中的struct
- Kafka权威指南-学习笔记---第四章
- VS2010的详细安装
- python 汉诺塔问题_Python汉诺塔问题
- P2P风控措施和风控流程
- 数据分析师岗位 分析可视化
- WebSphere性能调优
- idea下载postgresql的驱动失败Failed to download ,报connect timed out的解决方法
- java读书网站课程设计_Java课程设计
- 计算机毕业设计Java房屋租赁管理系统(源码+系统+mysql数据库+lW文档)
- meiyouyingjian------cnclsnvcnsdnvk
- k折交叉验证(k-fold Cross-validation)
- java 电子围栏_电子围栏
- “F5G+EIoT“构建能源物联网,助力电力物联网数据服务