一、video的js知識(shí)點(diǎn)：
controls(控制器)城舞、autoplay(自動(dòng)播放)、loop(循環(huán))==video默認(rèn)的寞酿；
自定義播放器中一些JS中提供的方法和屬性的記錄：
1家夺、play()控制視頻的播放
2、pause()控制視頻的停止
3伐弹、currentTime控制視頻的當(dāng)前時(shí)間
4拉馋、muted控制視頻是否靜音(賦值true or false)
5、volume控制音量的大小(賦值0-1)
6、duration視頻的總時(shí)間
7煌茴、ontimeupdate事件(當(dāng)前播放位置改變時(shí)執(zhí)行随闺，使用時(shí)要綁定addEventListener)
8、requestFullscreen全屏
二蔓腐、全屏API介紹
瀏覽器全屏API簡史
1矩乐、第一個(gè)實(shí)現(xiàn)瀏覽器原生全屏API的是在Safari 5.0（和iOS）中添加的webkitEnterFullScreen()函數(shù)，不過它只能在Safar的<video>標(biāo)簽的controls中回论。
2散罕、在Safari 5.1中，蘋果更新了這個(gè)API使它更接近于Mozilla的全屏API草案(實(shí)際上這要比蘋果實(shí)現(xiàn)的更早)傀蓉，現(xiàn)在欧漱，所有的DOM元素都可以調(diào)用webkitRequestFullScreen()函數(shù)使HTML頁面進(jìn)入到全屏模式。
3葬燎、Firefox和Chome宣布它們將會(huì)添加原生的全屏API支持误甚，而且這個(gè)特性已經(jīng)在Chome 15+以及Firefox10+中實(shí)現(xiàn),Mozilla團(tuán)隊(duì)已經(jīng)發(fā)布了一些。
4谱净、在2011年10月15日窑邦，W3C發(fā)布了一份全屏API草案（由Opera團(tuán)隊(duì)的一名成員編寫），它跟Mozilla的草案有兩個(gè)主要的不同點(diǎn)：
- Mozilla/Webkit使用大寫字母’S'（FullScreen）岳遥，但W3C則不是（Fullscreen）
- Mozilla/Webkit使用cancelFullScreen奕翔，W3C使用exitFullscreen
5、更新 (11/15/2011)：來自IEBlog的Ted Johnson說IE10將不會(huì)支持全屏API (12/05/2011: 我對(duì)Ted的第一封email理解錯(cuò)了)IE10的開發(fā)團(tuán)隊(duì)還沒有決定是否要實(shí)現(xiàn)全屏API浩蓉。不過派继，他指出：Win8的 Metro風(fēng)格的Internet Explorer始終是全屏狀態(tài)，正如以前那樣捻艳，按F11鍵即可進(jìn)入全屏模式驾窟。
瀏覽器全屏API
要進(jìn)入全屏模式，可以調(diào)用需要進(jìn)入全屏元素的requestFullScreen（或者W3C的 requestFullscreen）方法认轨。绅络。要退出全屏，則調(diào)用document對(duì)象的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();
}
監(jiān)聽是否全屏
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);
全屏是的樣式設(shè)置
html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}
html:fullscreen {
background: red;
}
