Maison > Article > interface Web > Exemples d'implémentation de la lecture hls à l'aide des technologies vue2.0+vue-dplayer

Exemples d'implémentation de la lecture hls à l'aide des technologies vue2.0+vue-dplayer

亚连original: 2018-06-02 09:27:533003parcourir

Cet article présente principalement l'exemple de vue2.0+vue-dplayer pour implémenter la lecture hls. Maintenant, je le partage avec vous et vous donne une référence.

Cause

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

Démarrer

Installer les dépendances

npm install vue-dplayer -S

Écrire le composant HelloWorld.vue

<template>
 <p class="hello">
  <d-player ref="player" @play="play" :video="video" :contextmenu="contextmenu"></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 scoped>
</style>

Présentation de hls.js

Il a été initialement introduit à l'aide de 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.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>vue-dplayer-hls</title>
 </head>
 <body>
  <p id="app"></p>
  <!-- built files will be auto injected -->
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
 </body>
</html>

Remarque :

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

Exemples dimplémentation de la lecture hls à laide des technologies vue2.0+vue-dplayer

En d'autres termes, peu importe ce que vous remplissez dans votre composant , il s'agit en fait d'utiliser 'normal' pour créer une nouvelle instance de Dplayer.

Modifier le code source

Personnaliser un composant VueDPlayerHls.vue, puis copier le code source, et modifier le problème en : tapez : this.video.type

<template>
 <p class="dplayer"></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>

Importer le nouveau composant dans le composant d'origine (HelloWorld.vue)

import VueDPlayer from &#39;./VueDPlayerHls&#39;;

pour implémenter la lecture

Exemples dimplémentation de la lecture hls à laide des technologies vue2.0+vue-dplayer

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment résoudre le problème du rouge et de l'avertissement lors de l'utilisation de v-for dans vue (tutoriel détaillé)

Comment implémenter la méthode de fonction de correspondance de recherche dans Vuejs (tutoriel détaillé)

Utilisez la liste déroulante de sélection pour implémenter les méthodes de liaison et de valeur dans vue.js

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment télécharger des images dans node.jsArticle suivant：Comment télécharger des images dans node.js

Articles Liés

Voir plus