自定义video的controls（播放暂停按钮、进度条、快进快退等）

　　视频标签<video></video>是H5中新增的标签，它自带播放按钮等控件，但在实际开发中我们是不会用标签中自带的控件属性的，一般我们都会自定义控件。

　　首先我们来看看视频标签自带的控件效果：

　　　　

　　　虽然总体来说，这些控件都有，但是往往我们见到的都不会是这样的，一般我们都会自己设计。

　　　　以下是我自己做的一个简单的案例，自定义一些控件并实现它的功能，效果如下：

　　　　

　　　　　现在我们可以来具体讲讲以上这些播放暂停全屏按钮都是如何自定义实现其功能的：

　　　　步骤：

　　　　　　1、首先我们把所需要的素材准备好：一个简短视频，播放按钮的图片，暂停按钮的图片，全屏按钮的图片

　　　　　　2、播放暂停全屏等按钮是图片，进度条使用的是progress标签，视屏总时长和播放的当前时间是用span标签装的，内容先初始化为0。这些排列的顺序可以自己调整摆放，这里我　　　　　　　使用的是定位

　　　　　　布局代码：

　　　　<div id="container">
            <video poster="img/oceans-clip.png">
                <source src="video/oceans-clip.mp4"></source>
                <source src="video/oceans-clip.ogv"></source>
                <source src="video/oceans-clip.webm"></source>
            </video>
            <div class="pos">
                <img src=" img/on.png" width="40px" id="playBtn" />
                <progress  value="0" id="progress"></progress>
                <div class="timebox">
                    <span id="time1">
                        00:00:00
                    </span>/
                    <span id="time2">
                        00:00:00
                    </span>
                </div>
                <img src="img/expand.jpg" width="35px" id="full"/>
            </div>
        </div>

　　　　　　CSS样式：

<style type="text/css">
            body,div,img{
                margin: 0;
                padding: 0;
                border: 0;
            }
            #container{
                width: 640px;
                /*height: 400px;*/
                border: 1px solid pink;
                /*position: relative;*/
            }
            
            .pos{
                width: 640px;
                height: 60px;
                background: #242424;
                margin-top: -7px;
                position: relative;
                
            }
            #playBtn{
                position:absolute;
                top: 10px;
                left: 20px;
                cursor: pointer;
            }
            #progress{
                height: 12px;
                width: 320px;
                position:absolute;
                top: 24px;
                left: 80px;
                cursor: pointer;
                
            }
            .timebox{
                position:absolute;
                top: 20px;
                left: 420px;
                cursor: pointer;
                color: white;
            }
            
            #full{
                position:absolute;
                top: 12px;
                right: 20px;
                cursor: pointer;
            }
            
        </style>

　　3.实现播放按钮功能：播放按钮绑定点击事件，视屏状态为暂停时，点击播放，状态为播放时，点击暂停，同时切换按钮背景图片，

　　　　实现代码如下：

var video = document.querySelector("video");
            var playBtn = document.getElementById("playBtn");
            playBtn.onclick = function(){
                if(video.paused){
                    video.play();
                    playBtn.src = "img/pause.png";
                }else{
                    video.pause();
                    playBtn.src = "img/on.png";
                }
            }

　　4.实现全屏效果，因为浏览器的内核不同，所以会加一些浏览器内核前缀，代码也会很多：

var full = document.getElementById("full");
            var container = document.getElementById("container");
            var i = 1;//定义一个变量，用于记录是否为全屏状态
            full.onclick = function(){
                i++；
　　　　　　　　　　　//对2取余，为0则全屏，否则关闭全屏
                if(i%2==0){
　　　　　　　　　　　　　　//点击开启全屏
                    if(container.requestFullScreen){
                     container.requestFullScreen()
                    }else if(container.webkitRequestFullScreen){
                         container.webkitRequestFullScreen()//谷歌
                    }else if(container.mozRequestFullScreen){
                         container.mozRequestFullScreen()//火狐
                    }else if(div01.msRequestFullscreen){
                         container.msRequestFullscreen()//ie
                    }
                }else{
　　　　　　　　　　　　　　//关闭全屏
                    if(document.cancelFullscreen){
                         document.cancelFullscreen();
                    }else if(document.webkitCancelFullScreen){
                         document.webkitCancelFullScreen();
                    }else if(document.mozCancelFullScreen){
                         document.mozCancelFullScreen();
                    }else if(document.msExitFullscreen){
                         document.msExitFullscreen();
                    }
                }
                 
            }

　　5、视频播放时间进行一个简单的修改，构造一个函数，使其标准化，当时间为个位数时，加一个字符串“0”，两位数时，添加空串

　　　　

1 function number1(s){
2                 if(s<10){
3                     s="0"+s
4                 }else{
5                     s=""+s
6                 }
7                 return s;
8             }

　　　　

　6、动态获取视频总时长，和显示当前视频播放时间，并同时付给进度条的value，方法：oncanplay，ontimeupdate，代码如下：

var time1 = document.getElementById("time1");
            var time2 = document.getElementById("time2");
            var t1;
            //视频获取时间单位为秒，要对它进行一些数据的处理
            video.oncanplay = function(){
　　　　　　　　　　　　//获取视频总时长
                t1 = video.duration;
                var h = parseInt(t1/3600);
                var m = parseInt(t1%3600/60);
                var s = parseInt(t1%60);
　　　　　　　　　　　　//值显示在span标签中
                time2.innerHTML = number1(h) + ":"+ number1(m) + ":" + number1(s);
            }

video.ontimeupdate = function(){
　　　　　　　　　　　　//获取当前视频播放的时间
                var t2 = video.currentTime;
                var h = parseInt(t2/3600);
                var m = parseInt(t2%3600/60);
                var s = parseInt(t2%60);
                time1.innerHTML = number1(h) + ":"+ number1(m) + ":" + number1(s);
                progress.max = t2;
                progress.value = t2/t1*progress.max;
            }

　　　　7、进度条点击事件，及视频结束的处理：

video.onended = function(){
                progress.value = 0;
　　　　　　　　　　　　//结束时清0；
                time1.innerHTML = "00"+":"+"00"+":"+"00";
            }
            
            progress.onclick = function(e){
                    //获取当前位置距离父级最左边的距离
                    //left = progress.offsetLeft;
                    //获取鼠标距离屏幕最左边的距离
                    //e.clientX
                    //获取鼠标距离当前元素最左边的距离
                    var left  = e.offsetX;
                    console.log(left);
                    console.log(t1);
                    video.currentTime = left/320*t1;
                }

　　　　大概步骤就是这样了，一个简单的视屏自定义控件功能就做好了。