h5优秀控件_聊聊h5中的媒体播放器（定制播放器播放控件）

在开发中，如果我们的网页要播放媒体(音频或者视频)之类的，那么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;

let second = parseInt(time);

if (secondType === "number" || secondType === "string") {

var hours = Math.floor(second / 3600);

second = second - hours * 3600;

var mimute = Math.floor(second / 60);

second = second - mimute * 60;

return (

hours +

":" +

("0" + mimute).slice(-2) +

":" +

("0" + second).slice(-2)

);

} else {

return "0:00:00";

}

},

复制代码

音频的播放与暂停

通过play和pause事件我们可以控制媒体的播放和暂停，并通过一个变量感知音频是否在播放，通过这个变量我们就可以变换我们的播放和停止图标了。

this.playing ? this.pausePlay() : this.startPlay();

复制代码

音频播放进度

通过timeupdate可以实时获取音频播放时的进度，从而改变我们自己定制的进度条,timeupdate调用时会返回媒体的已经播放的时长和播放总时长，单位是秒。

onTimeupdate(res) {

this.currentTime = res.target.currentTime;

this.sliderTime = parseInt(

(this.currentTime / res.target.duration) * 100

);

},

复制代码

音频的音量

我们可以通过volume属性控制音频的音量的大小。

如：myvideo.volume=20，音量改变时会触发volumechange事件

倍速

playbackRate属性可以获取和设置媒体的倍速播放，如myvideo.playbackRate=2。

自定义进度条的控制

具体可以查看源码，主要是利用(播放进度条/总进度条)=(播放时长currentTime/总时长duration)这公式进行进度条进度的控制。

其他

demo中的模拟了平时看视频时可以全屏和退出全屏显示的功能。

//全屏事件

requestFullScreen(element) {

var requestMethod =

element.requestFullscreen ||

element.webkitRequestFullScreen ||

element.mozRequestFullScreen ||

element.msRequestFullScreen;

if (requestMethod) {

requestMethod.call(element);

} else if (typeof window.ActiveXObject !== "undefined") {

//for Internet Explorer

var wscript = new ActiveXObject("WScript.Shell");

if (wscript !== null) {

wscript.SendKeys("{F11}");

}

}

},

复制代码exitFullScreen() {

//退出全屏

var exitMethod =

document.exitFullscreen ||

document.mozCancelFullScreen ||

document.webkitExitFullscreen ||

document.webkitExitFullscreen;

if (exitMethod) {

exitMethod.call(document);

} else if (typeof window.ActiveXObject !== "undefined") {

//for Internet Explorer

var wscript = new ActiveXObject("WScript.Shell");

if (wscript !== null) {

wscript.SendKeys("{F11}");

}

}

}

复制代码