집 > 기사 > 웹 프론트엔드 > vue-dplayer를 사용하여 hls 재생을 구현하는 단계에 대한 자세한 설명

vue-dplayer를 사용하여 hls 재생을 구현하는 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-12 14:26:267567검색

이번에는 vue-dplayer를 사용하여 hls 재생을 구현하는 단계에 대해 자세히 설명하겠습니다. vue-dplayer에서 hls 재생을 구현하는 데 있어 주의 사항은 무엇입니까?

원인

나는 이전에 "vue2.0+vue-video-player가 hls 재생을 구현합니다"라는 기사를 썼는데, vue-video-player를 사용하기 전에 vue-dplayer를 사용하여 hls 재생을 구현하려고 시도했지만 당시 시간이 촉박했다고 언급했습니다. 그래도 완료되지 않으면 계획이 변경됩니다. 지금 시간을 내어 완료해 보세요.

시작

종속성 설치

npm install vue-dplayer -S

구성 요소 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>

작성 hls.js를 소개합니다

원래는 import를 이용해 도입됐으나 실행 중 오류가 보고됐다. 따라서 먼저 index.html의 스크립트 태그를 사용하여 소개하세요.

rreee

주의:

DPlayer Demo 페이지 코드에 따르면 hls를 지원하려면 video.type을 "hls"로 설정해야 하는데 수정한 후에 재생이 안되는 것을 발견했습니다. 그래서 소스코드를 보다가 소스코드에서 이런 곳을 발견했습니다:

vue-dplayer를 사용하여 hls 재생을 구현하는 단계에 대한 자세한 설명

즉, 구성 요소에 무엇을 채우든 실제로는 'normal'을 사용하여 새 Dplayer 인스턴스를 생성하는 것입니다.

소스 코드 수정

구성 요소 VueDPlayerHls.vue를 사용자 정의한 다음 소스 코드를 복사하고 문제를 다음과 같이 수정합니다. 유형: this.video.type

nbsp;html>

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

원래 구성 요소(HelloWorld.vue)에서 새 구성 요소를 가져옵니다

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

재생을 실현

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!