Implementation example of video player based on Vue

/** HTML **/
<div class="video">
 <!-- video player -->
 <video
  class="video__player"
  ref="videoPlayer"
  preload="auto"
  :autoplay="options.autoplay"
  :muted="options.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="options.src" />
 </video>

 <!-- video poster -->
 <div
  v-show="showPoster"
  class="video__poster"
  :style="{'background-image': 'url(' + options.pic + ')'}"
 ></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 the video currently playing videoEnd: false, // Has the video ended? showPoster: true, // Is the video cover displayed? showLoading: false, // Loading currentTime: 0, // Current playback position currentVideo: {
   duration: this.options.duration
  },

 }
},
mounted() {
 this.videoPlayer = this.$refs.videoPlayer;
 this.videoPlayer.currentTime = 0;
 
 this.videoPlayer.addEventListener("loadstart", e => {
   this.videoPlayer.currentTime = (this.options.playProcess > 0) ? this.options.playProcess : 0;
 });
 
  // Get the video length this.videoPlayer.addEventListener("durationchange", e => {
  this.currentVideo.duration = this.videoPlayer.duration;
  // Playback history exists this.videoPlayer.currentTime = (this.options.playProcess > 0) ? this.options.playProcess : 0;
 });
 
 this.videoPlayer.addEventListener("playing", e => {
  this.showPoster = false;
  this.videoPlay = true;
  this.showLoading = false;
  this.videoEnd = false;
 });
 
 // Pause this.videoPlayer.addEventListener("pause", () => {
  this.videoPlay = false;
  if (this.videoPlayer.currentTime < 0.1) {
   this.showPoster = true;
  }
  this.showLoading = false;
 });
 
 // Playback progress update this.videoPlayer.addEventListener("timeupdate", e => {
   this.currentTime = this.videoPlayer.currentTime;
  },
  false
 );

 // Specify the playback position this.videoPlayer.addEventListener("seeked", e => {
 });

 // Buffering this.videoPlayer.addEventListener("waiting", e => {
  this.showLoading = true;
 });
 
 // Playback ends this.videoPlayer.addEventListener("ended", e => {
  // Reset state this.videoPlay = false;
  this.showPoster = true;
  this.videoEnd = true;
  this.currentTime = this.currentVideo.duration;
 });
 
 // Listen for the weixinJSBridgeReady event to handle the problem of WeChat not being able to play automatically. But it is not applicable to all of them. A pause button is added for manual playback.
 document.addEventListener('WeixinJSBridgeReady', () => { 
  this.videoPlayer.play();
 }, false);
},
methods: {
 handleVideoPlay() {
  if (this.videoPlayer.paused) { // Play if (this.videoEnd) { // Replay this.currentTime = 0;
    this.videoPlayer.currentTime = 0;
   }
   this.videoPlayer.play();
   this.videoPlay = true;
  } else { // Pause this.videoPlayer.pause();
   this.videoPlay = false;
  }
 }
}