h5+video+progress自定义播放

最近做一个移动端H5,需要播放视频，h5放在客户端webview里面之后需要检测网络状态，如果非WiFi状态，提示用户会消耗流量之类，询问用户是否继续，使用h5标签video可以很好的兼容大多数手机浏览器，但是在控制视频播放这里不是很理想。

最初想使用在video标签上监听一个点击的事件，无线和PC上调试都没有问题，能够很好的控制播放，一旦切换到手机移动网络就出现失效的情况，点击事件在触发播放之后不生效，或者间隔事件较长，视频播放一段时间之后就出现提示。效果不是很好，而且利用视频本身的control带来的播放控制很难控制住视频播放，为此很是发愁，后来灵机一动，使用video自身属性和方法来控制播放。去掉本身的control自带播放控制。

---

video自身属性和方法
事件
loadeddata –加载完成
play –开始播放
pause –暂停播放
ended –播放完成
属性
currentTime –获取播放当前时间
paused –视频是否暂停播放
duration –视频播放总时间

---

我的思路是这样的：去掉video默认的control属性，自定义播放控制，添加播放（暂停）按钮，设计显示时间，显示进度，一个粗糙的播放控制就这样。先看效果：

我的部分html

视频部分是一个简单的 < video> < / video >,带上SRC属性，定义一个ID，然后默认只预加载元数据（减少流量）。另外增加自定义播放控制栏，包括播放按钮，剩余、总时间显示，进度条。

我的部分CSS

最后关键就是js控制视频播放，获取视频播放进度

function VideoPlayer(ele){
    this.video = ele;
    this.init();
}
VideoPlayer.prototype = {
    constructor:VideoPlayer,
    init:function(){
        this.bindEvent();
        this.showProgress();
    },
    bindEvent:function(){
        var self = this;
        $(".navbar").on("click",".play",function(e){
            if(!Utils.isNetworkWifi()){
                if(self.video.paused){
                    e.preventDefault();
                    //非WiFi状态下提示                            
                    Tips.playtip();
                    return false;
                }else{
                    self.changeState(0);
                }               
            }else{
                if(self.video.paused)
                    self.changeState(1);
                else
                    self.changeState(0);                
            }
        });
    },
    showProgress:function(){ 
        var self = this;
        this.video.onloadeddata=function(e){
            //
            var total = parseInt(self.video.duration);
            $('.navbar .total').html(self.formatTime(total));
        };
        var timer = 0;
        this.video.onplay = function(e){
            timer = setInterval(function(){             
                $('.navbar .left').html(self.formatTime(parseInt(self.video.currentTime)))
                var percent = self.video.currentTime*100/self.video.duration;
                $(".progressbar>.progress")[0].style.width = percent+"%";
            },60);
        };
        this.video.onpause = function(e){
            clearInterval(timer);
        };
        this.video.onended = function(e){
            $('.navbar .left').html(self.formatTime(0));
            $(".progressbar>.progress")[0].style.width = "0%";
            $(".play>img").attr("src",config.href+"images/reserve/icon-play.png");
        };
    },
    changeState:function(state){
        //0 1
        if(state==0){
            this.video.pause();
            $(".play>img").attr("src",config.href+"images/reserve/icon-play.png");
        }else if(state==1){
            if(this.video.paused)
                this.video.play();
            $(".play>img").attr("src",config.href+"images/reserve/icon-pause.png");
        }       
    },
    formatTime:function(time){
        var res = "00";
        if(time>60){
            var mi = time/60;
            if(mi<10){
                res = "0"+mi;
            }else{
                res = mi;
            }
            res = res +":";
            var s = time%60;
            if(s<10){
                res += "0"+s;
            }else{
                res += s;
            }
        }else{
            res = res +":";
            s = time;
            if(s<10){
                res += "0"+s;
            }else{
                res += s;
            }
        }
        return res;
    }
}

这里主要监听.play所表示的播放按钮的点击事件，这样就能很好的利用play(),pause()等方法控制视频播放，另外主要注册视频的loadeddata,play,pause,ended事件分别来获取视频播放进度(video.currentTime)稍作简单的计算就可以算出进度。

最后贴出一个在webview里面播放的样子（这是示例，主要关注视频播放）