自定义视频播放条样式

这几天在写公司的h5视频播放页面，收获了不少东西。

首先，我需要支持flv和mp4格式的视频。本来想用开源插件flv.js把flv的转换成手机浏览器mp4格式视频，结果不幸的是，两月以前各大手机浏览器更新了内核，不支持flv.js这个插件了(除了chrome浏览器)。但PC端还是可用的。

下面说重点，怎么自定义播放条样式。

首先放出成品图：

html代码：

<video  data-icon="0" src="" data-state="a" style="width:100%;height:13.1875rem;" id="videoBox" webkit-playsinline playsinline></video>//video标签
<div class="btnPlay"><img class="left" src="images/playBagin.png" alt="" data-icon="0"><p class="progressTime left">0:00</p></div>//开始按钮div
<div class="progressBox" id="progressBox_special">
<div class="progressBar"></div>//蓝条进度条div
<div class="imgBox"><img id="progressImg" src="images/progressPointer.png" alt=""></div></div>//进度条拖拉图片divBox
<div class="biggerBtn" data-icon="0"><img class="right" src="images/allBigger.png" alt=""><p class="allTime right"></p></div></div>//全屏div

注：<video>标签之所以加上webkit-playsinline，playsinline两个属性，就是为了保证不同浏览器支持视频在h5页面中播放，不用手机浏览器自动托管视频。

css一些问题：

由于<video>标签默认层级最高，可设置播放条div的z-index在最上面。

用的是jQuery库,下面放js代码：

<video>标签的API还是很全面的,不过需要通过dom本身调用。

把时间秒转换成分钟：

//分割时间函数        
function timeStamp( second_time ){  
  var time1 = ((parseInt(second_time)/100)).toString();
  var time2 = time1.split(".")[1]? (time1.split(".")[1].length == 1 ? time1.split(".")[1]+\'0\' : time1.split(".")[1]) :\'00\';       
  var time =00 + \':\' + time2;  
  if( parseInt(second_time )>= 60){
    var second = ((parseInt(second_time) % 60)/100).toString();  
    var min = (parseInt(second_time / 60)/100).toString();
    var time3 = second.split(".")[1]? (second.split(".")[1].length == 1 ? second.split(".")[1]+\'0\' : second.split(".")[1]) :\'00\'; 
    var time4 = min.split(".")[1]? (min.split(".")[1].length == 1 ? min.split(".")[1]+\'0\' : min.split(".")[1]) :\'00\'; 
    time = time4 + ":" + time3;       
}  
return time;          
} 

视频总时间和播放的时间：

var  video  =  document.getElementById("video");
var video2 = $("#video");
video.load();//一开始进入页面video不是白屏
//视频总时间
video2.on(\'loadedmetadata\', function() {
   var time = video.duration;
   var allTime = timeStamp(time);
   $(\'.allTime\').text(allTime);
});
//视频进度时间
video2.on(\'timeupdate\', function() {
   var time = video.currentTime,alltime = video.duration;    
   var percentage = 100 *(time / alltime); 
   $(\'.progressTime\').text(timeStamp(time));
   $(\'.progressBar\').css({\'width\':percentage + \'%\'});
   $(\'.stateBox .progressBox .imgBox img\').css({\'margin-left\':percentage +\'%\'});
   if(time == alltime){
          $(\'.btnPlay img\').attr(\'src\',\'images/playBagin.png\'); //如果播放时间到总时间播放按钮图片换成停止图片
   }
});

 

点击播放按钮：

//视频开始按钮事件
$(\'.btnPlay img\').on(\'touchend\',function(){
        if(video.paused) {
        video.play();
        $(this).attr(\'src\',\'images/pause_btn.png\');
        }else {
        video.pause();
        $(this).attr(\'src\',\'images/playBagin.png\');
        }
        return false;
        }) 

拖拉进度条：

//拖拉函数
function changeBar(item){
   var progress = $(\'.progressBox\');
   var maxduration = video.duration; //视频总时间
   var barIcon = $(\'.nav .biggerBtn\').attr(\'data-icon\'),position,percentage;
   if(barIcon == 0){
        position = item - progress.offset().left; //横屏模式
   }else{
        position = item - progress.offset().top; //全屏竖屏模式
   }
   percentage = 100 * (position / progress.width());
   if(percentage > 100) {
      percentage = 100;
   }
   if(percentage < 0) {
      percentage = 0;
   }
   $(\'.progressBar\').css(\'width\', percentage+\'%\');
   $(\'.stateBox .progressBox .imgBox img\').css({\'margin-left\':percentage +\'%\'});
   video.currentTime = maxduration * (percentage / 100);//视频进度时间传给当前时间
   video.play();
   $(\'.btnPlay img\').attr(\'src\',\'images/pause_btn.png\'); 
}
//视频拖拉按钮事件
var progressBox = document.getElementById(\'progressBox_special\');
progressBox.addEventListener(\'touchstart\', progressBox_item, false);
function progressBox_item(e){
         var barIcon = $(\'.nav .biggerBtn\').attr(\'data-icon\');
         var point = fristPoint(e);
         if(barIcon == 0){
            changeBar(point.pageX);
         }else{
              changeBar(point.pageY);     
         }
};
//拖拉按钮
var statePic = document.getElementById(\'progressImg\');
statePic.addEventListener(\'touchmove\', itemMove, false);//发现h5的touchmove行为要通过addEventListener注册
function itemMove(e){
    e.stopPropagation();//阻止默认行为
    var barIcon = $(\'.nav .biggerBtn\').attr(\'data-icon\');
    var point = fristPoint(e);
      if(barIcon == 0){
            changeBar(point.pageX);//横屏
         }else{
              changeBar(point.pageY); //全屏竖屏    
         }
};
//第一个手指为准
function fristPoint(e){
        return e.touches ? e.touches[0] : e;
}

点击全屏：

 //点击全屏
var itemHeight = document.documentElement.clientHeight;//获取手机高度
var itemWidth = document.documentElement.clientWidth;//手机宽度
$(\'.biggerBtn img\').on(\'touchend\',function(event){
        event.stopPropagation();
        var dataIcon = $(this).parent().attr(\'data-icon\');
        if(dataIcon == 0){
                        $(\'.nav\').css({\'-webkit-transform\':\'rotate(90deg)\'});//直接把视频旋转90°，给video高度宽度重新赋值。
                        $(\'.nav video\').css({\'width\':itemHeight,\'height\':itemWidth});
                        $(\'.stateBox\').css({\'width\':itemHeight});
                        $(\'.biggerBtn\').attr(\'data-icon\',\'1\');
                        $(\'.nav video\').attr(\'data-icon\',\'1\');
                }else{
                        $(\'.nav\').css({\'-webkit-transform\':\'rotate(0deg)\'});
                        $(\'.nav video\').css({\'width\':itemWidth,\'height\':\'13.1875rem\'});
                        $(\'.stateBox\').css({\'width\':itemWidth});
                        $(\'.biggerBtn\').attr(\'data-icon\',\'0\');
                        $(\'.nav video\').attr(\'data-icon\',\'0\');
                }
});

注：可用video.js和videojs-contrib-hls.js插件,覆盖video-js.min.css的原生样式也可以。（但点击放大就是原生的，不可以自定义旋转横放了）

补充一点关于手机端ios系统的video标签自动播放的小知识：

app里的html5页面，让ios开发同学在app里加：

self.wView.allowsInlineMediaPlayback = YES;self.wView.mediaPlaybackRequiresUserAction = NO;

除了safari10+支持无声自动播放（video标签加muted属性：默认视频为无声），其余非app内的浏览器自身不能设置自动播放，只支持手动点击事件。

app内的浏览器自动播放需要自己的bridge桥梁，比如微信内打开，可用微信的WeiixinJSBridgeReady()

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>  
<script>
document.addEventListener(\'WeixinJSBridgeReady\',function(){  
    $(\'#video\').play(); },false); 
</script>