使用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的<video>标签的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的草案有两个主要的不同点:

  1. Mozilla/Webkit使用大写字母’S'(FullScreen),但W3C则不是(Fullscreen)
  2. 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;
}

https://www.cnblogs.com/duanlianjiang/p/5557015.html

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 我们首先要明白,我们给页面添加效果用到的js到底是什么?js其实包含三部分:dom 文档对象模型 bom 浏览...
    一直以来都很好阅读 819评论 0 0
  • 小孩到了一定年龄,父母会教孩子认钱,这是很寻常的事情。 看到一位母亲为了教她8岁的女儿认钱,用水把钱洗干净后又晾干...
    靈魂在遠走阅读 518评论 0 0
  • 一路风雨一路搀扶四十年 当我问起当初怎么在一起 他说母亲走的早 家里需要一个女人 她说二十该嫁人 他个头挺大挺结实...
    张安松阅读 385评论 0 2
  • 不知从什么时候,竞养成了"开车散步"的坏习惯,浪费汽油不说,还无端地增加了许多事情。 但是,我喜欢。 想问题想到头...
    心影梦画阅读 855评论 0 5
  • 很多关于自杀的新闻底下的评论,都是一片声讨自杀者脆弱自私的声音,很多人会说,“这么点事就自杀,我遇到这种事,肯定不...
    小素晴阅读 2,807评论 3 14