Video控件（自定义播放栏）

完成了这样一个自定义的视频播放栏以及视频暂停页

视频播放页
视频暂停页.png

昨天暂时只做了视频的播放与暂停功能，实时运动心率检测以及视频运动难度这块等接口

这次关于<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

注意:仅仅是这样的话 会出现这样的情况，显示的是视频播放的总秒数 video.currentTime.png

所以我们要对这一串总秒数进行一些操作，如下：

 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)
    });

这样以来我们就得到了正常的分：秒数

normal.png

进度条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

这样一来进度条就会随时间的的变化而变化啦！！