聊聊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}");
    }
  }
}
复制代码