使用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的草案有两个主要的不同点：
- 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;
}
