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

### 一、安裝

使用npm

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

使用yarn

```bash
yarn add dplayer
```

### 二、在Vue3組件中，準備一個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() // 獲取視頻容器
    //此處我們可以進行播放器的初始化
    return {
      videoRef
    }
  }
})
</script>
```

### 四、使用Dplayer做視頻對象的初始化

當我們在setup中采用ref拿到視頻容器節(jié)點之后，就可以調(diào)用Dplayer來實例化一個視頻播放對象

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

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

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

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

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

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

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

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

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