自定義視頻 播放條樣式

這幾天在寫公司的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>