完成了这样一个自定义的视频播放栏以及视频暂停页
视频播放页
视频暂停页.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
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
