vue制作自定义媒体播放器控件

在开发中，如果我们的网页要播放媒体（音频或者视频）之类的，那么h5中的媒体播放器必然是最好的选择（flash时代已经过去）。但是h5中的播放器播放控件很多时候不是我们需要的，这时候我们要改变播放控件就需要我们去了解h5中video标签的一些事件属性,具体可以查看MDN上的介绍。根据这些属性，我弄了一个vue的组件的demo，具体可查看源码这里，demo可查看这里

那么定制媒体播放控件就可以通过一些属性来控制媒体播放、暂停还是播放进度之类的。

媒体加载后获取媒体播放时长

loadedmetadata媒体加载完成后返回媒体的一些有效信息，如：媒体播放总时长duration

onLoadedmetadata(res) {
  this.maxTime = this.formatTime(parseInt(res.target.duration));
},

因为返回的duration是秒，所以用formatTime转化为00:00:00的格式

formatTime(time) {
  let secondType = typeof time