中文字幕av高清_国产视频一二区_男女羞羞羞视频午夜视频_成人精品一区_欧美色视_在线视频这里只有精品

千鋒教育-做有情懷、有良心、有品質的職業(yè)教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 使用Dplayer實現(xiàn)Vue3中的視頻及彈幕播放

使用Dplayer實現(xiàn)Vue3中的視頻及彈幕播放

來源:千鋒教育
發(fā)布人:wjy
時間: 2022-06-06 09:56:00 1654480560

  Dplayer是一款上手簡單,功能強大的HTML5視頻播放器,我們可以使用它,快速在普通HTML、Vue、React中實現(xiàn)視頻播放的功能需求。Dplayer同時也提供了目前各大視頻站都在使用的彈幕功能,讓我們的視頻功能更加豐富有趣。下面我們就一起來看看,如何使用Dplayer在Vue3中實現(xiàn)視頻播放及彈幕功能。

使用Dplayer實現(xiàn)Vue3中的視頻及彈幕播放

### 一、安裝

使用npm

```bash
npm i dplayer -S
```

使用yarn

```bash
yarn add dplayer
```

### 二、在Vue3組件中,準備一個ref容器

```html
<div ref="videoRef" class="player" />
```

### 三、在setup中獲取綁定ref

這里我們需要用到vue3提供的ref方法

```js
<script lang="ts">
import { defineComponent,ref } from 'vue'

export default defineComponent({
  setup () {
    const videoRef = ref() // 獲取視頻容器
    //此處我們可以進行播放器的初始化
    return {
      videoRef
    }
  }
})
</script>
```

### 四、使用Dplayer做視頻對象的初始化

當我們在setup中采用ref拿到視頻容器節(jié)點之后,就可以調(diào)用Dplayer來實例化一個視頻播放對象

```js
<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é)點
      video:{
        url:video.url,   // 指定視頻播放鏈接
        pic:video.cover  // 指定視頻封面圖
      }
    })
    return {
      videoRef
    }
  }
})
</script>
```

### 五、為視頻加入彈幕

Dplayer提供了很多的配置及事件,允許我們按需對視頻作出相應的控制,例如:

- hotkey 開啟熱鍵,支持快進、快退、音量控制、播放暫停
- preload 視頻預加載控制
- playbackSpeed 可選播放速度
- subtitle 外掛字幕
- subtitle.url 字母鏈接
- danmuku 彈幕配置
- .....

可以通過調(diào)整Dplayer實例配置的方式,為其增加彈幕功能

```js
new Dplayer({  //初始化視頻對象
  container:videoRef.value,   //指定視頻容器節(jié)點
  video:{
    url:video.url,   // 指定視頻播放鏈接
    pic:video.cover  // 指定視頻封面圖
  },
  danmuku:{
    addition:video.danmuurl    //配置彈幕接口路徑
  }
})
```

### 六、呈現(xiàn)最終效果

使用Dplayer實現(xiàn)Vue3中的視頻及彈幕播放

  更多關于web培訓的問題,歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓服務經(jīng)驗,采用全程面授高品質、高體驗培養(yǎng)模式,擁有國內(nèi)一體化教學管理及學員服務,助力更多學員實現(xiàn)高薪夢想。

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經(jīng)許可不得擅自轉載。
10年以上業(yè)內(nèi)強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內(nèi)將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT
抖音小店照片要求尺寸多大

在抖音平臺開設小店已經(jīng)成為了越來越多人的選擇,相信大家已經(jīng)在各大社交平臺上看到有不少小店的推廣。在抖音上,照片是展示產(chǎn)品的重要手段,因...詳情>>

2023-10-08 16:14:25
抖音招商團長托管服務費怎么退回來

抖音招商團長托管服務是抖音為有意愿創(chuàng)作內(nèi)容并帶動其他創(chuàng)作者成為團隊成員的用戶提供的一種服務。通過該服務,招商團長可以自主組建團隊并得到...詳情>>

2023-10-08 16:08:53
抖音小店怎么做代銷

抖音已經(jīng)成為了一個非常受歡迎的短視頻應用程序,在其中許多用戶都精心打造了自己的小店,用于銷售各種各樣的商品,獲取額外的收入。然而,要想...詳情>>

2023-10-08 15:28:41
怎樣開抖音小店帶貨賺錢

隨著直播帶貨的火熱,越來越多的人開始嘗試通過抖音小店來開展帶貨業(yè)務。抖音小店是抖音直播帶貨的配套,可以讓用戶在購買直播中產(chǎn)品時就實現(xiàn)購...詳情>>

2023-10-08 15:06:36
能不能幫我打開抖音小店店鋪呢怎么弄

抖音小店是近年來非?;鸨囊粋€網(wǎng)絡業(yè)務,也是提供了很多商業(yè)機會的平臺。對于一個創(chuàng)業(yè)者而言,開設抖音小店是一個不錯的選擇。但是,許多小店...詳情>>

2023-10-08 15:01:21
主站蜘蛛池模板: 美女视频一区二区三区 | 久久久综合av | 99热首页 | 日韩三级免费观看 | 日本成人一区二区三区 | 手机看片麻豆 | 五月婷婷丁香 | 一区二区三区在线播放 | 91午夜在线| 黄色成人av | 亚洲一级免费观看 | 久久久精 | 在线a视频网站 | 日日草视频 | 老汉av久久午夜一区 | 欧美在线小视频 | aaa久久 | 最新黄色网页 | 久久九精品 | 999国内精品永久免费视频 | 极黄视频| 国产高清在线观看 | 久久久成人精品 | 免费av黄色网址 | 国产一级特黄aaa大片评分 | 久久h | 久久电影国产 | 精品一二三区视频 | 免费黄色在线观看 | 欧美高清成人 | 久久精品91 | 岛国在线免费 | 极品美女一区二区三区 | 五月婷婷色 | 亚洲欧美综合精品久久成人 | 亚洲成人精品一区二区三区 | 精品久久精品 | 青青草在线免费视频 | 羞羞视频在线观看入口 | 青青草视频在线免费观看 | 日韩视频在线一区二区 |