乐趣区

聊聊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";}
},

音频的播放与暂停

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

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}");
    }
  }
}
退出移动版