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