Implementation example of a video player based on vue

When the existing video player cannot meet the needs, you need to encapsulate the video by yourself.

video event

• loadstart: Triggered when the video starts loading, assigning a value to currentTime (historical playback record or 0).
• durationchange: The meta information has been loaded or changed, and the length of the video has changed. Get the video length (duration, and assign a value to the currentTime (historical playback record or 0)).
• playing: Triggered when the video starts playing (whether it is first playback, resumes after pause, or restarts after ending).
• pause: Triggered when playback is paused.
• timeupdate: currentTime changes, update playback progress. Process the playback progress bar
• Seeked: Specify the playback location
• waiting: buffering
• ended: playback ends, reset status
• WeixinJSBridgeReady: When using video in WeChat, you need to listen to the weixinJSBridgeReady event and execute the play() command in the callback function.

Live broadcast agreement

HLS (HTTP Live Streaming) Live Streaming protocol proposed by Apple. Both IOS and higher versions of Android support HLS. HLS mainly plays files from .m3u8 and .ts. HLS is highly compatible and scalable, but can live broadcast delay. The HLS protocol divides the live stream into small videos in segments for download and playback. So assuming that the list contains 5 ts files, each ts file contains 5 seconds of video content, then the overall delay is 25 seconds.

RTMP (Real Time Messaging Protocol) is a set of live video protocols developed by Macromedia, which now belongs to Adobe. RTMP based on flash cannot be played in IOS browsers, but its real-time performance is better than HLS.

HTTP-FLV is aimed at live broadcast distribution streams made in FLV video format, with low delay. But the mobile side does not support it.

Conclusion: HTTP-FLV has low delay and is preferred. If the device does not support HTTP-FLV, use it. If the device does not support it, HLS is used, but the HLS delay is large.

Encapsulation video

/** HTML **/
<div class="video">
 <!-- video player -->
 <video
  class="video__player"
  ref="videoPlayer"
  preload="auto"
  :autoplay=""
  :muted=""
  webkit-playsinline="true"
  playsinline="true"
  x-webkit-airplay="allow"
  x5-video-player-type="h5-page"
  x5-video-orientation="portraint"
  style="object-fit:cover;"
 >
  <source :src="" />
 </video>

 <!-- video poster -->
 <div
  v-show="showPoster"
  class="video__poster"
  :style="{'background-image': 'url(' +  + ')'}"
 ></div>

 <!-- video loading -->
 <div v-show="showLoading" class="video__Loading">
  <span class="video__Loading-icon"></span>
 </div>

 <!-- video pause -->
 <div @click="handleVideoPlay" class="video__pause">
  <span v-show="!videoPlay" class="video__pause-icon"></span>
 </div>
</div>

/** js**/
props: {
 options: {
  type: Object,
  default: () => {}
 }
},
data() {
 return {
  videoPlay: false, // Is it playing  videoEnd: false, // Whether the playback is over  showPoster: true, // Whether to display the video cover  showLoading: false, // loading  currentTime: 0, // Current playback location  currentVideo: {
   duration: 
  },

 }
},
mounted() {
  = this.$;
  = 0;
 
 ("loadstart", e => {
    = ( > 0) ?  : 0;
 });
 
  // Get the video length ("durationchange", e => {
   = ;
  // There is a playback history   = ( > 0) ?  : 0;
 });
 
 ("playing", e => {
   = false;
   = true;
   = false;
   = false;
 });
 
 // pause ("pause", () => {
   = false;
  if ( < 0.1) {
    = true;
  }
   = false;
 });
 
 // Playback progress update ("timeupdate", e => {
    = ;
  },
  false
 );

 // Specify the playback location ("seeked", e => {
 });

 // Buffer ("waiting", e => {
   = true;
 });
 
 // Playback ends ("ended", e => {
  // Reset status   = false;
   = true;
   = true;
   = ;
 });
 
 // Listen to the weixinJSBridgeReady event, and cannot automatically play with WeChat.  But not all of them apply. The pause button is added and played manually. ('WeixinJSBridgeReady', () => { 
  ();
 }, false);
},
methods: {
 handleVideoPlay() {
  if () { // Play   if() { // Replay     = 0;
     = 0;
   }
   ();
    = true;
  } else { // pause   ();
    = false;
  }
 }
}

[Reference article]:

• X5 core video playback mode
• H5 Live Video Tag Pit Summary
• Introduction to H5 Live Broadcast (Theory)
• Fully advanced H5 live broadcast

This is the end of this article about the implementation example of a vue-based video player. For more related vue video player content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!