Explication détaillée des étapes pour implémenter la lecture hls avec vue-dplayer

Cette fois, je vais vous donner une explication détaillée des étapes pour implémenter la lecture hls avec vue-dplayer Quelles sont les précautions pour que vue-dplayer implémente la lecture hls. jetons un coup d'oeil.

Cause

J'ai déjà écrit un article "vue2.0+vue-video-player implémente la lecture hls", qui mentionnait qu'avant d'utiliser vue-video-player, j'avais essayé d'utiliser vue-dplayer pour implémenter la lecture hls, mais le temps était compté à l'époque et je ne peux toujours pas. Si ce n'est pas terminé, le plan sera modifié. Prenez le temps de le compléter dès maintenant.

Démarrer

Installer les dépendances

npm install vue-dplayer -S

Composant d'écriture HelloWorld.vue

<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>

Présentez hls.js

À l'origine, il a été introduit via l'importation, mais une erreur a été signalée lors de l'exécution. Alors introduisez-le d’abord en utilisant la balise script dans index.html.

nbsp;html>

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

Remarque :

Selon le code de la page de démonstration DPlayer, si vous souhaitez prendre en charge hls, vous devez définir video.type sur "hls", mais après l'avoir modifié, j'ai constaté qu'il ne pouvait pas être lu. J'ai donc regardé le code source et j'ai trouvé cet endroit dans le code source :

En d'autres termes, peu importe ce que vous remplissez dans votre composant, vous utilisez en réalité « normal » pour créer une nouvelle instance de Dplayer.

Modifier le code source

Personnalisez un composant VueDPlayerHls.vue, puis copiez le code source et modifiez le problème en : tapez : this.video.type

<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>

Importez le nouveau composant

import VueDPlayer from './VueDPlayerHls';

dans le composant d'origine (HelloWorld.vue) Réaliser la lecture

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois php !

Lecture recommandée :

Graphique de données d'affectation dynamique ajax

composant React Quoi sont les aspects de l'optimisation des performances

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!