web前端培訓分享：使用Dplayer實現Vue3中的視訊及彈幕播放

Dplayer是一款上手簡單，功能強大的HTML5視訊播放器，我們可以使用它，快速在普通HTML、Vue、React中實現視訊播放的功能需求。Dplayer同時也提供了目前各大視訊站都在使用的彈幕功能，讓我們的視訊功能更加豐富有趣。下面，千鋒武漢老師分享如何使用Dplayer在Vue3中實現視訊播放及彈幕功能。

一、安裝
使用npm

npm i dplayer -S
使用yarn

yarn add dplayer
二、在Vue3元件中，準備一個ref容器
<div ref="videoRef" />
三、在setup中獲取繫結ref
這裡我們需要用到vue3提供的ref方法

<script>import { defineComponent,ref } from 'vue'export default defineComponent({ setup () { const videoRef = ref() // 獲取視訊容器 //此處我們可以進行播放器的初始化 return { videoRef } }})</script>
四、使用Dplayer做視訊物件的初始化
當我們在setup中採用ref拿到視訊容器節點之後，就可以呼叫Dplayer來例項化一個視訊播放物件

<script>import { defineComponent,ref } from 'vue'import Dplayer from 'dplayer'export default defineComponent({ setup () { const videoRef = ref() // 獲取視訊容器 new Dplayer({ //初始化視訊物件 container:videoRef.value, //指定視訊容器節點 video:{ url:video.url, // 指定視訊播放連結 pic:video.cover // 指定視訊封面圖 } }) return { videoRef } }})</script>
五、為視訊加入彈幕
Dplayer提供了很多的配置及事件，允許我們按需對視訊作出相應的控制，例如:

hotkey 開啟熱鍵，支援快進、快退、音量控制、播放暫停
preload 視訊預載入控制
playbackSpeed 可選播放速度
subtitle 外掛字幕
subtitle.url 字母連結
danmuku 彈幕配置
.....
可以通過調整Dplayer例項配置的方式，為其增加彈幕功能

new Dplayer({ //初始化視訊物件 container:videoRef.value, //指定視訊容器節點 video:{ url:video.url, // 指定視訊播放連結 pic:video.cover // 指定視訊封面圖 }, danmuku:{ addition:video.danmuurl //配置彈幕介面路徑 }})
六、呈現最終效果

本文來自千鋒教育，轉載請註明出處。