視頻Video 自定義控件

這次關於<video>的操作中，主要用到的是關於視頻的ontimeupdate函數、video.currentTime（視頻當前播放時間）、以及video.duration（視頻總長）。

具體代碼：

HTML部分

首先 創建一個video控件

<video id="videoContent"  autoplay controls width="750px" height="450px">
<source src="視頻地址" type="video/mp4">
</video>

其中
autoplay說明視頻加載完自動播放
controls表示顯示視頻播放控件,由於我們是自定義播放控件，此處controls
width和height確定視頻播放窗口大小
<source>確定視頻播放內容

定義一個div將控制視頻播放的按鈕、進度條和視頻播放時間都包含在這個div中

<div id="myControls">
     <div id="videoBtn"><div>       //控制播放按鈕
     <div id="timeBar">                  //進度條總長
             <div id="currentBar"><div>       //當前播放進度
     <div>
     <div id="playTime"><div>        //視頻播放時間   
<div>

CSS部分

這部分就不具體展示代碼了
主要就是控制按鈕的大小，進度條的長度、顏色以及播放時間的樣式
自定義部分按照自己的喜好來！！！

js部分（重點！！）

js部分主要由jQuery完成

首先我們獲取兩個視頻對象

var video=document.getElementById('videoContent');      //獲取video的DOM對象
var video2=$('#videoContent');                                       //獲得一個jq對象

注意：video和video1不是同一個對象，html5中關於video控件的操作只能存在於video中（比如video.paly()、video.pause()、video.currentTime.....）

視頻的暫停與播放

$('#playBtn').click(function(){
//播放
if(video.paused){
 
   //其中可以填寫播放時你所需餓css樣式（如按鈕變換、背景顏色等）
        video.play();
    }
    //暫停
    else{
     //同理
        video.pause();
    }
    return false;
});

視頻播放時間（這里要用到我們的ontimeUpdate）

video1.on('timeupdate',function(){
 $('#timePass').text(video.currentTime);
});

由於$('').on()是jq特有的函數，所以要用到jq對象選擇video1

注意:僅僅是這樣的話 會出現這樣的情況，顯示的是視頻播放的總秒數

　　 13.686567

所以我們要對這一串總秒數進行一些操作，如下：

 video1.on('timeupdate',function(){
        var s=parseInt(video.currentTime);   //秒
        var m=0;                         //分
        if (s >= 60) {
            m = parseInt(s / 60);
            s = parseInt(s % 60);


        }
        s=s<10?"0"+s:s;
        m=m<10?"0"+m:m;
        $('#timePass').text(m+":"+s);
        //console.log(video.currentTime)
    });

這樣以來我們就得到了正常的分：秒數

　　03:26

進度條js部分

主要是百分比的計算，利用公式現長=（總長/總時）現時；*

具體代碼

video1.on('timeupdate',function(){
        var r=255;
        var g=118;
        var b=39;
        var currentColor;
       var nowTime=video.currentTime;   //獲得現時長
       var maxDuration=video.duration;   //獲得總時長
        var current=($('#timeBar').width()/maxDuration)*nowTime;    //獲得現px
        currentColor=g+(60/maxDuration)*nowTime;
        $('#currentBar').css(           //修改長度和顏色
            {
                'width': current + "px",
                'background-color':"rgb("+r+","+currentColor+","+b+")"
            }
        )
    });

主要利用：
var nowTime=video.currentTime; //獲得現時長
var maxDuration=video.duration; //獲得總時長
var current=($('#timeBar').width()/maxDuration)*nowTime; //獲得現px
注意獲得進度條的長度 用$('#").width()width后的()別忘了，否則會NAN

這樣一來進度條就會隨時間的的變化而變化啦！！

作者：Mercy1998
鏈接：https://www.jianshu.com/p/abe36b858ce4
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。