vue-better-dplayer

To Install:

npm i vue-better-player

To Use:

1| Import the component:

import VueBetterDPlayer from "../../node_modules/vue-better-dplayer/src/components/VueBetterDPlayer";

del 2| Register the component with Vue:

Vue.component('vue-better-player', VueBetterDPlayer);

3| Add it inside your application:

<vue-better-player  style="width: 270px;height: 480px;" @hlsError="networkError" :options=options :model="model"></vue-better-player>

4| Better use of HLS with the latest DPlayer

 options: {
        video: {
          url: 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8',
          pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg',
          type: 'betterHls',
          mutex:true
        },
        autoplay: true
      }
  user video type is betterHls ,you can listener hls enents  
  
  if url 404 error use  @hlsError="networkError"   
        networkError(data, model) {
        console.log(data) //error event data all 
        console.log(model) //bind you model 
        var pos = null;
        for (var i = 0; i < this.items.length; i++) {
          if (this.items[i].objectId === model.objectId) {
            pos = i;
          }
        }
        this.toast("自动删除错误视频 " + model.objectId)
        this.items.splice(pos, 1)
      },

5| Adding Events:

 Hls.js HlsEvents    
 @hlsError="networkError" 
 DPlayer events
 http://dplayer.js.org/zh/guide.html#%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A

Props

prop | type | default | details | ---|---|---|--- | model | Object | null | bind model if you need | | options | Object | default | DPlayer options |