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

一、安裝
使用npm

npm i dplayer -S
使用yarn

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

<script lang="ts">import { defineComponent,ref } from 'vue'export default defineComponent({ setup () { const videoRef = ref() // 獲取視頻容器 //此處我們可以進行播放器的初始化 return { videoRef } }})</script>
四、使用Dplayer做視頻對象的初始化
當我們在setup中采用ref拿到視頻容器節點之后，就可以調用Dplayer來實例化一個視頻播放對象

<script lang="ts">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 //配置彈幕接口路徑 }})
六、呈現最終效果

上一篇

長沙前端培訓班分享：一看就會的jQuery插件實現方法

下一篇

長沙前端培訓班分享：JavaScript正則全面解析