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

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

亚连

Libérer： 2018-06-02 09:27:53

original

3126 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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

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

Copier après la connexion

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!