Dplayer是一款上手簡(jiǎn)單，功能強(qiáng)大的HTML5視頻播放器，我們可以使用它，快速在普通HTML、Vue、React中實(shí)現(xiàn)視頻播放的功能需求。Dplayer同時(shí)也提供了目前各大視頻站都在使用的彈幕功能，讓我們的視頻功能更加豐富有趣。下面我們就一起來(lái)看看，如何使用Dplayer在Vue3中實(shí)現(xiàn)視頻播放及彈幕功能。

### 一、安裝

使用npm

```bash
npm i dplayer -S
```

使用yarn

```bash
yarn add dplayer
```

### 二、在Vue3組件中，準(zhǔn)備一個(gè)ref容器

```html
<div ref="videoRef" class="player" />
```

### 三、在setup中獲取綁定ref

這里我們需要用到vue3提供的ref方法

```js
<script lang="ts">
import { defineComponent,ref } from 'vue'

export default defineComponent({
  setup () {
    const videoRef = ref() // 獲取視頻容器
    //此處我們可以進(jìn)行播放器的初始化
    return {
      videoRef
    }
  }
})
</script>
```

### 四、使用Dplayer做視頻對(duì)象的初始化

當(dāng)我們?cè)趕etup中采用ref拿到視頻容器節(jié)點(diǎn)之后，就可以調(diào)用Dplayer來(lái)實(shí)例化一個(gè)視頻播放對(duì)象

```js
<script lang="ts">
import { defineComponent,ref } from 'vue'
import Dplayer from 'dplayer'

export default defineComponent({
  setup () {
    const videoRef = ref() // 獲取視頻容器
    new Dplayer({          //初始化視頻對(duì)象
      container:videoRef.value,   //指定視頻容器節(jié)點(diǎn)
      video:{
        url:video.url,   // 指定視頻播放鏈接
        pic:video.cover  // 指定視頻封面圖
      }
    })
    return {
      videoRef
    }
  }
})
</script>
```

### 五、為視頻加入彈幕

Dplayer提供了很多的配置及事件，允許我們按需對(duì)視頻作出相應(yīng)的控制，例如:

- hotkey 開啟熱鍵，支持快進(jìn)、快退、音量控制、播放暫停
- preload 視頻預(yù)加載控制
- playbackSpeed 可選播放速度
- subtitle 外掛字幕
- subtitle.url 字母鏈接
- danmuku 彈幕配置
- .....

可以通過調(diào)整Dplayer實(shí)例配置的方式，為其增加彈幕功能

```js
new Dplayer({  //初始化視頻對(duì)象
  container:videoRef.value,   //指定視頻容器節(jié)點(diǎn)
  video:{
    url:video.url,   // 指定視頻播放鏈接
    pic:video.cover  // 指定視頻封面圖
  },
  danmuku:{
    addition:video.danmuurl    //配置彈幕接口路徑
  }
})
```

### 六、呈現(xiàn)最終效果

　　更多關(guān)于web培訓(xùn)的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓(xùn)服務(wù)經(jīng)驗(yàn)，采用全程面授高品質(zhì)、高體驗(yàn)培養(yǎng)模式，擁有國(guó)內(nèi)一體化教學(xué)管理及學(xué)員服務(wù)，助力更多學(xué)員實(shí)現(xiàn)高薪夢(mèng)想。