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

千鋒武漢發表於2021-10-25

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 //配置彈幕介面路徑 }})
六、呈現最終效果

v2-6c36ef756e3cdd0695c16bf73a8f0576_r

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

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2839021/,如需轉載,請註明出處,否則將追究法律責任。

相關文章