<option id="mwy0y"><strong id="mwy0y"></strong></option>
  • <ul id="mwy0y"><sup id="mwy0y"></sup></ul>
  • <ul id="mwy0y"></ul>
  • <del id="mwy0y"><dfn id="mwy0y"></dfn></del><ul id="mwy0y"><sup id="mwy0y"></sup></ul>
  • <abbr id="mwy0y"></abbr>

    千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

    400-811-9990
    手機(jī)站
    千鋒教育

    千鋒學(xué)習(xí)站 | 隨時隨地免費(fèi)學(xué)

    千鋒教育

    掃一掃進(jìn)入千鋒手機(jī)站

    領(lǐng)取全套視頻
    千鋒教育

    關(guān)注千鋒學(xué)習(xí)站小程序
    隨時隨地免費(fèi)學(xué)習(xí)課程

    上海
    • 北京
    • 鄭州
    • 武漢
    • 成都
    • 西安
    • 沈陽
    • 廣州
    • 南京
    • 深圳
    • 大連
    • 青島
    • 杭州
    • 重慶
    當(dāng)前位置:長沙千鋒IT培訓(xùn)  >  技術(shù)要點(diǎn)  >  長沙前端培訓(xùn)班分享:使用Dplayer實(shí)現(xiàn)Vue3中的視頻及彈幕播放

    長沙前端培訓(xùn)班分享:使用Dplayer實(shí)現(xiàn)Vue3中的視頻及彈幕播放

    來源:千鋒教育
    發(fā)布人:千鋒長沙
    時間: 2021-10-21 17:05:35

           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)最終效果

    v2-6c36ef756e3cdd0695c16bf73a8f0576_r

    聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。

    猜你喜歡LIKE

    最新文章NEW

    相關(guān)推薦HOT

    更多>>

    快速通道 更多>>

    最新開班信息 更多>>

    網(wǎng)友熱搜 更多>>