Implementierungsbeispiel eines Videoplayers basierend auf Vue

/** HTML **/
<div Klasse="Video">
 <!-- Videoplayer -->
 <Video
  Klasse="Video__Player"
  ref="Videoplayer"
  vorladen="auto"
  :autoplay="Optionen.autoplay"
  :gedämpft="Optionen.gedämpft"
  webkit-playsinline="true"
  spielt inline = "true"
  x-webkit-airplay="erlauben"
  x5-video-player-type="h5-Seite"
  x5-video-orientation="Porträt"
  Stil="Objekt-Fit:Cover;"
 >
  <Quelle: src="Optionen.src" />
 </video>

 <!-- Videoposter -->
 <div
  v-show="Poster anzeigen"
  Klasse="video__poster"
  :style="{'Hintergrundbild': 'url(' + options.pic + ')'}"
 ></div>

 <!-- Video wird geladen -->
 <div v-show="showLoading" class="video__Loading">
  <span class="video__Loading-icon"></span>
 </div>

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

/**js**/
Requisiten: {
 Optionen:
  Typ: Objekt,
  Standard: () => {}
 }
},
Daten() {
 zurückkehren {
  videoPlay: false, // Wird das Video gerade abgespielt? videoEnd: false, // Ist das Video zu Ende? showPoster: true, // Wird das Video-Cover angezeigt? showLoading: false, // Wird geladen currentTime: 0, // Aktuelle Abspielposition currentVideo: {
   Dauer: this.options.duration
  },

 }
},
montiert() {
 dieser.videoPlayer = dieser.$refs.videoPlayer;
 dieser.videoPlayer.aktuelleZeit = 0;
 
 this.videoPlayer.addEventListener("loadstart", e => {
   this.videoPlayer.currentTime = (this.options.playProcess > 0) ? this.options.playProcess : 0;
 });
 
  // Videolänge abrufen this.videoPlayer.addEventListener("durationchange", e => {
  dieses.aktuelleVideo.dauer = dieses.videoPlayer.dauer;
  // Wiedergabeverlauf vorhanden this.videoPlayer.currentTime = (this.options.playProcess > 0) ? this.options.playProcess : 0;
 });
 
 this.videoPlayer.addEventListener("wird abgespielt", e => {
  dies.showPoster = falsch;
  dieses.videoPlay = true;
  Dies.showLoading = falsch;
  this.videoEnd = falsch;
 });
 
 // Pause this.videoPlayer.addEventListener("pause", () => {
  dieses.videoPlay = falsch;
  wenn (this.videoPlayer.currentTime < 0.1) {
   dies.showPoster = wahr;
  }
  Dies.showLoading = falsch;
 });
 
 // Wiedergabefortschritt aktualisieren this.videoPlayer.addEventListener("timeupdate", e => {
   diese.aktuelleZeit = diese.videoPlayer.aktuelleZeit;
  },
  FALSCH
 );

 // Geben Sie die Wiedergabeposition an this.videoPlayer.addEventListener("seeked", e => {
 });

 // Pufferung this.videoPlayer.addEventListener("waiting", e => {
  Dies.showLoading = wahr;
 });
 
 // Wiedergabe endet this.videoPlayer.addEventListener("ended", e => {
  // Status zurücksetzen this.videoPlay = false;
  dies.showPoster = wahr;
  this.videoEnd = wahr;
  diese.aktuelleZeit = diese.aktuelleVideodauer;
 });
 
 // Achten Sie auf das Ereignis weixinJSBridgeReady, um das Problem zu beheben, dass WeChat nicht automatisch abgespielt werden kann. Dies ist jedoch nicht auf alle anwendbar. Für die manuelle Wiedergabe wurde eine Pausentaste hinzugefügt.
 document.addEventListener('WeixinJSBridgeReady', () => { 
  dieses.videoPlayer.play();
 }, FALSCH);
},
Methoden: {
 handleVideoPlay() {
  if (this.videoPlayer.paused) { // Abspielen if (this.videoEnd) { // Erneut abspielen this.currentTime = 0;
    dieser.videoPlayer.aktuelleZeit = 0;
   }
   dies.videoPlayer.play();
   dieses.videoPlay = true;
  } sonst { // diesen.videoPlayer.pause() anhalten;
   dieses.videoPlay = falsch;
  }
 }
}