長沙前端培訓(xùn)班分享:使用Dplayer實(shí)現(xiàn)Vue3中的視頻及彈幕播放
Dplayer是一款上手簡單,功能強(qiáng)大的HTML5視頻播放器,我們可以使用它,快速在普通HTML、Vue、React中實(shí)現(xiàn)視頻播放的功能需求。Dplayer同時也提供了目前各大視頻站都在使用的彈幕功能,讓我們的視頻功能更加豐富有趣。下面長沙前端培訓(xùn)班分享如何使用Dplayer在Vue3中實(shí)現(xiàn)視頻播放及彈幕功能。
一、安裝
使用npm
npm i dplayer -S
使用yarn
yarn add dplayer
二、在Vue3組件中,準(zhǔn)備一個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() // 獲取視頻容器 //此處我們可以進(jìn)行播放器的初始化 return { videoRef } }})</script>
四、使用Dplayer做視頻對象的初始化
當(dāng)我們在setup中采用ref拿到視頻容器節(jié)點(diǎn)之后,就可以調(diào)用Dplayer來實(shí)例化一個視頻播放對象
<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é)點(diǎn) video:{ url:video.url, // 指定視頻播放鏈接 pic:video.cover // 指定視頻封面圖 } }) return { videoRef } }})</script>
五、為視頻加入彈幕
Dplayer提供了很多的配置及事件,允許我們按需對視頻作出相應(yīng)的控制,例如:
hotkey 開啟熱鍵,支持快進(jìn)、快退、音量控制、播放暫停
preload 視頻預(yù)加載控制
playbackSpeed 可選播放速度
subtitle 外掛字幕
subtitle.url 字母鏈接
danmuku 彈幕配置
.....
可以通過調(diào)整Dplayer實(shí)例配置的方式,為其增加彈幕功能
new Dplayer({ //初始化視頻對象 container:videoRef.value, //指定視頻容器節(jié)點(diǎn) video:{ url:video.url, // 指定視頻播放鏈接 pic:video.cover // 指定視頻封面圖 }, danmuku:{ addition:video.danmuurl //配置彈幕接口路徑 }})
六、呈現(xiàn)最終效果

猜你喜歡LIKE
最新文章NEW
相關(guān)推薦HOT
更多>>熱門推薦
零基礎(chǔ)必看的前端HTML+CSS教程
沸Java培訓(xùn)新手實(shí)戰(zhàn)必備!單機(jī)版坦克大戰(zhàn)分步實(shí)現(xiàn)項目源碼
熱3種Javascript圖片預(yù)加載的方法詳解
熱長沙前端培訓(xùn):一招教你用vue3+canvas實(shí)現(xiàn)坦克大戰(zhàn)
新互聯(lián)網(wǎng)涼了?參加長沙Java培訓(xùn)能找到工作嗎?
長沙Java培訓(xùn)實(shí)戰(zhàn)項目,出游咨詢訂票系統(tǒng)開發(fā)流程
不參加長沙Java培訓(xùn)能學(xué)會Java嗎?2022Java技能學(xué)習(xí)路線圖
千鋒長沙Java培訓(xùn)分享之怎么學(xué)習(xí)Java集合?
千鋒長沙前端培訓(xùn)分享之JavaScript面向?qū)ο缶幊趟枷朐斀?/p>
千鋒長沙前端培訓(xùn)分享之web前端的回流和重繪
千鋒長沙前端培訓(xùn)分享之3種Javascript圖片預(yù)加載的方法詳解
千鋒長沙前端培訓(xùn)分享之利用Jest測試React組件
千鋒長沙前端培訓(xùn)分享之JavaScript中Slice的用例
千鋒長沙java培訓(xùn)分享之Socket編程
技術(shù)干貨







快速通道 更多>>
-
課程介紹
點(diǎn)擊獲取大綱 -
就業(yè)前景
查看就業(yè)薪資 -
學(xué)習(xí)費(fèi)用
了解課程價格 -
優(yōu)惠活動
領(lǐng)取優(yōu)惠券 -
學(xué)習(xí)資源
領(lǐng)3000G教程 -
師資團(tuán)隊
了解師資團(tuán)隊 -
實(shí)戰(zhàn)項目
獲取項目源碼 -
開班地區(qū)
查看來校路線