HTML5之video播放器

效果展示

video播放器案例效果图如下：

说明：本案例并没有写浏览器兼容性，采用的是本地视频，使用火狐浏览器才能正常使用。谷歌浏览器必须用远程视频才行。

思路分析

1.首先添加 playing事件，在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发，使用duration 属性返回当前视频的长度，赋给进度条的最大值。

2.添加timeupdate 事件，在音频/视频（audio/video）的播放位置发生改变时触发，使用currentTime 属性设置或返回音频播放的当前位置，赋给进度条的当前值

3.设置播放暂停事件，play()属性和pause(),在点击播放时要清除计时器

    //设置播放暂停
    start.addEventListener("click", function () {
        if (this.innerHTML == "播放") {
            vedio.play();
            this.innerHTML = "暂停";
            clearInterval(time);
        }
        else {
            vedio.pause();
            this.innerHTML = "播放";
        }
    });

4.设置进度条事件,鼠标按下拖动，将当前进度条的value赋给video的currentTime属性，鼠标松开，清空事件，视频播放

5.设置快进，倒退事件，使用计时器进行倒退快进，

注意：点击该该事件时首先要清空计时器，避免出现先点击快进后点击倒退，进度条出现bug的情况，

在进行倒退的的时候要判断是否回到视频起点，若回到就要调用视频播放方法

    btnback.addEventListener("click", function () {
        clearInterval(time);
        vedio.pause();
        start.innerHTML = "播放";
        time = setInterval(function () {
            vedio.currentTime -= 5;
            if (vedio.currentTime <= 0) {
                vedio.play();  //视频回到原点，重新开始播放
                clearInterval(time);
            }
        }, 1000);