聊聊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，只支持0.5 ，1 ，1.5， 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}");
    }
  }
}