参考文章：https://css-tricks.com/custom...https://blog.hellojs.org/crea...原生用户控件为但是原生控件往往不能满足我们的一些需求，所以自定义用户控件还是很有必要的。首先声明一个变量，我们定义如下自定义用户控件自定义控件的实现说起来也很简单，只需要用到H5播放器的几个事件和属性：pause和startPause和start是最基本的功能，实现起来也很简单Start:videoElement.play()Pause:videoElement.pause()所以只需要在当前视频暂停的时候调用play()方法就可以继续播放了。同样，在播放视频时调用pause()。里面提到“判断当前视频是否暂停”如果只用videoElement.paused判断视频是否暂停，可能会报错play()请求被pause()调用打断了。经过查询，最终使用isPlaying变量判断视频是否暂停letisPlaying=videoElement.currentTime>0&&!videoElement.paused&&!videoElement.ended&&videoElement.readyState>2;最后暂停/启动事件的方法如下：if(!isPlaying){videoElement.play();}else{videoElement.pause();}返回假；}video当前时长/总时长很容易，只需要使用两个参数；duration可以得到视频的总时长；currentTime可以获取当前视频的时长。视频的总时长可以在视频加载完成后获取一次。当视频进度更新一次时，视频的当前时间需要相应更新。loadedmetadata事件：获取视频元数据。timeupdate事件：视频播放完毕后，更新播放进度的事件。会有明显的进度变化，可以获取到currentTime。值得一提的是，使用duration和currentTime得到的数据格式保留了小数位数和一个以秒为单位的值。通常，需要根据需要进行格式化。我为了把“十分二十四秒”格式化成类似10:24的格式，创建了下面的方法letnumberToTime=function(number){number=parseInt(number,10);让分钟=0；让秒=0;minues=parseInt(number/60,10);second=number%60if(minues<10){minues='0'+minues}if(second<10){second='0'+second}returnminues+':'+second;}而监听对应事件并更新当前时间的代码如下$videoElement.on('loadedmetadata',function(){$('.duration').text(numberToTime(videoElement.duration));});$videoElement.on('timeupdate',function(){$('.current').text(numberToTime(videoElement.currentTime));});00:00/00:00</div>进度条没有进度条的视频不是好视频。实现一个进度条是非常重要的。重要声明：这里进度条的样式是bootstrapdom的样式。dom结构如下
