In development, if our web pages are going to play media (audio or video), then the media player in H5 is definitely the best choice (the flash era is over). However, the player player control in H5 is often not what we need. At this time, when we want to change the player control, we need to understand some event attributes of the video tag in H5. For details, please refer to the introduction on MDN. According to these properties, I got a VUE component of the demo, the specific source can be viewed here, demo can be viewed here

The custom media playback control can control media playback, pause, progress, and so on through properties.

Obtain the media playback duration after the media is loaded

Loadedmetadata Returns valid media information after the media is loaded, for example, duration

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

Since the duration returned is seconds, convert it to the 00:00:00 format using formatTime

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"; }},Copy the code

Play and pause audio

We control the play and pause of media through play and pause events, and sense whether the audio is playing through a variable that allows us to change our play and stop ICONS.

this.playing ? this.pausePlay() : this.startPlay();
Copy the code

Audio Playback Progress

Timeupdate allows us to change our own custom progress bar by getting the progress of audio playback in real time. When called,timeupdate returns the duration of media playback and the total duration of playback, in seconds.

onTimeupdate(res) {
  this.currentTime = res.target.currentTime;
  this.sliderTime = parseInt(
    (this.currentTime / res.target.duration) * 100
  );
},
Copy the code

Audio volume

We can use the volume property to control the volume of the audio. For example, myVideo.volume =20. Volumechange is triggered when the volume changes

Times the speed

The playbackRate property gets and sets the playback speed of media, such as myVideo.playbackRate =2.

Customize progress bar control

For details, you can view the source code. It mainly uses the formula (playing progress bar/total progress bar) = (Playing duration currentTime/ Total duration Duration) to control the progress bar.

other

The demo simulates the full-screen display and exit function when watching videos.

/ / full screen event 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}"); }}},Copy the code
exitFullScreen() {// Exit full-screen varexitMethod =
    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}"); }}}Copy the code