Detailed explanation of the steps to implement hls playback with vue-dplayer

This time I will bring you a detailed explanation of the steps of vue-dplayer to implement hls playback. What are the precautions for vue-dplayer to implement hls playback. The following is a practical case, let's take a look.

cause

I previously wrote an article "vue2.0 vue-video-player implements hls playback", which mentioned that before using vue-video-player, I tried to use vue-dplayer to implement hls playback, but time was tight at the time and there was no way. Once that's done, change the plan. Take the time to complete it now.

start

Install dependencies

npm install vue-dplayer -S

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

Introduce hls.js

Originally it was introduced using import, but an error was reported during execution. So first introduce it using the script tag in index.html.

nbsp;html>

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

Notice:

According to the DPlayer Demo page code, if you want to support hls, you need to set video.type to "hls", but after I modified it, I found that it could not be played. So I looked at the source code and found that there is this place in the source code:

In other words, no matter what you fill in your component, you are actually using 'normal' to create a new Dplayer instance.

Modify source code

Customize a component VueDPlayerHls.vue, then copy the source code, and modify the problem to: type: 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>

Import the new component in the original component (HelloWorld.vue)

import VueDPlayer from './VueDPlayerHls';

Realize playback

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

ajax dynamic assignment data graph

react component What are the aspects of performance optimization

The above is the detailed content of Detailed explanation of the steps to implement hls playback with vue-dplayer. For more information, please follow other related articles on the PHP Chinese website!