Detaillierte Erläuterung der Schritte zur Implementierung der HLS-Wiedergabe mit vue-dplayer

Dieses Mal werde ich Ihnen die Schritte zum Implementieren der HLS-Wiedergabe mit vue-dplayer ausführlich erläutern. Werfen wir einen Blick darauf.

Ursache

Ich habe zuvor einen Artikel „vue2.0+vue-video-player implementiert hls-Wiedergabe“ geschrieben, in dem erwähnt wurde, dass ich vor der Verwendung von vue-video-player versucht habe, vue-dplayer zu verwenden, um die hls-Wiedergabe zu implementieren, aber die Zeit war damals knapp und ich konnte es immer noch nicht. Wenn es nicht fertig ist, wird der Plan geändert. Nehmen Sie sich jetzt die Zeit, es fertigzustellen.

Starten

Abhängigkeiten installieren

Schreiben Sie die Komponente HelloWorld.vue

npm install vue-dplayer -S

Stellen Sie hls.js vor

<template>
 <p>
  <d-player></d-player>
 </p>
</template>
<script>
import VueDPlayer from &#39;./VueDPlayerHls&#39;;
export default {
 name: &#39;HelloWorld&#39;,
 data () {
  return {
   msg: &#39;Welcome to Your Vue.js App&#39;,
   video: {
     url: &#39;https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/chunklist_w630020335.m3u8&#39;,
     pic: &#39;http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg&#39;,
     type: &#39;hls&#39;
    },
    autoplay: false,
    player: null,
    contextmenu: [
      {
        text: &#39;GitHub&#39;,
        link: &#39;https://github.com/MoePlayer/vue-dplayer&#39;
      }
    ]
  }
 },
 components: {
  &#39;d-player&#39;: VueDPlayer
 },
 methods: {
  play() {
    console.log(&#39;play callback&#39;)
   }
 },
 mounted() {
  this.player = this.$refs.player.dp;
  // console.log(this.player);
  var hls = new Hls();
  hls.loadSource(&#39;https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/chunklist_w630020335.m3u8&#39;);
  hls.attachMedia(this.player);
 }
}
</script>
<!-- Add "scoped" attribute to limit css to this component only -->
<style>
</style>

Es wurde ursprünglich mit Import eingeführt, bei der Ausführung wurde jedoch ein Fehler gemeldet. Führen Sie es also zunächst mit dem script-Tag in index.html ein.

nbsp;html>

 
  <meta>
  <meta>
  <title>vue-dplayer-hls</title>
 
 
  <p></p>
  <!-- built files will be auto injected -->
  <script></script>
 

Hinweis:

Laut dem Code der DPlayer-Demoseite müssen Sie video.type auf „hls“ setzen, wenn Sie hls unterstützen möchten. Nachdem ich es jedoch geändert habe, stellte ich fest, dass es nicht abgespielt werden konnte. Also habe ich mir den Quellcode angesehen und diese Stelle im Quellcode gefunden:

Mit anderen Worten: Unabhängig davon, was Sie in Ihre Komponente eingeben, verwenden Sie tatsächlich „normal“, um eine neue Dplayer-Instanz zu erstellen.

Quellcode ändern

Passen Sie eine Komponente VueDPlayerHls.vue an, kopieren Sie dann den Quellcode und ändern Sie das Problem wie folgt: Typ: this.video.type

Importieren Sie die neue Komponente

<template>
 <p></p>
</template>
<script>
 require(&#39;../../node_modules/dplayer/dist/DPlayer.min.css&#39;);
 import DPlayer from &#39;DPlayer&#39;
 export default {
  props: {
   autoplay: {
    type: Boolean,
    default: false
   },
   theme: {
    type: String,
    default: &#39;#FADFA3&#39;
   },
   loop: {
    type: Boolean,
    default: true
   },
   lang: {
    type: String,
    default: &#39;zh&#39;
   },
   screenshot: {
    type: Boolean,
    default: false
   },
   hotkey: {
    type: Boolean,
    default: true
   },
   preload: {
    type: String,
    default: &#39;auto&#39;
   },
   contextmenu: {
    type: Array
   },
   logo: {
    type: String
   },
   video: {
    type: Object,
    required: true,
    validator(value) {
     return typeof value.url === &#39;string&#39;
    }
   }
  },
  data() {
   return {
    dp: null
   }
  },
  mounted() {
   const player = this.dp = new DPlayer({
    element: this.$el,
    autoplay: this.autoplay,
    theme: this.theme,
    loop: this.loop,
    lang: this.lang,
    screenshot: this.screenshot,
    hotkey: this.hotkey,
    preload: this.preload,
    contextmenu: this.contextmenu,
    logo: this.logo,
    video: {
     url: this.video.url,
     pic: this.video.pic,
     type: this.video.type
    }
   })
   player.on(&#39;play&#39;, () => {
    this.$emit(&#39;play&#39;)
   })
   player.on(&#39;pause&#39;, () => {
    this.$emit(&#39;pause&#39;)
   })
   player.on(&#39;canplay&#39;, () => {
    this.$emit(&#39;canplay&#39;)
   })
   player.on(&#39;playing&#39;, () => {
    this.$emit(&#39;playing&#39;)
   })
   player.on(&#39;ended&#39;, () => {
    this.$emit(&#39;ended&#39;)
   })
   player.on(&#39;error&#39;, () => {
    this.$emit(&#39;error&#39;)
   })
  }
 }
</script>

in die Originalkomponente (HelloWorld.vue) Wiedergabe realisieren

import VueDPlayer from './VueDPlayerHls';

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen Website

php.

Empfohlene Lektüre:

Ajax Dynamic Assignment Data Graph

React Component What sind die Aspekte der Leistungsoptimierung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Implementierung der HLS-Wiedergabe mit vue-dplayer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!