1.下載對(duì)應(yīng)依賴

npm i dplayer -S
npm i hls.js -s

2.封裝對(duì)應(yīng)組件

<template>
  <div ref="videoRef"></div>
</template>
     
<script setup>
import DPlayer from 'dplayer'
import Hls from 'hls.js';
import { ref, reactive, onBeforeUnmount, onMounted } from 'vue'

const videoRef = ref()
const state = reactive({
  instance: null
})

const props = defineProps({
  // 是否自動(dòng)播放
  autoplay: {
    type: Boolean,
    default: false
  },
  // 主題色
  theme: {
    type: String,
    default: '#0093ff'
  },
  // 視頻是否循環(huán)播放
  loop: {
    type: Boolean,
    default: true
  },
  // 語言(可選值: 'en', 'zh-cn', 'zh-tw')
  lang: {
    type: String,
    default: 'zh-cn'
  },
  // 是否開啟截圖(如果開啟，視頻和視頻封面需要允許跨域)
  screenshot: {
    type: Boolean,
    default: false
  },
  // 是否開啟熱鍵
  hotkey: {
    type: Boolean,
    default: true
  },
  // 視頻是否預(yù)加載(可選值: 'none', 'metadata', 'auto')
  preload: {
    type: String,
    default: 'auto'
  },
  // 默認(rèn)音量
  volume: {
    type: Number,
    default: 0.7
  },
  // 可選的播放速率，可以設(shè)置成自定義的數(shù)組
  playbackSpeed: {
    type: Array,
    default: [0.5, 0.75, 1, 1.25, 1.5, 2]
  },
  // 在左上角展示一個(gè) logo，你可以通過 CSS 調(diào)整它的大小和位置
  logo: {
    type: String,
    default: 'http://jiuaibuni.top/wp-content/uploads/2020/12/logo.png'
  },
  // 視頻信息
  video: {
    type: Object,
    default: {
      url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8', //視頻地址
      type: 'customHls',
      customType: {
        customHls: function (video, player) {
          const hls = new Hls(); //實(shí)例化Hls  用于解析m3u8
          hls.loadSource(video.src);
          hls.attachMedia(video);
        }
      }
    },
  },
  // 外掛字幕
  subtitle: {
    type: Object,
    default: {}
  },
  // 顯示彈幕
  danmaku: {
    type: Object,
    default: {}
  },
  // 自定義右鍵菜單
  contextmenu: {
    type: Array,
    default: []
  },
  // 自定義進(jìn)度條提示點(diǎn)
  highlight: {
    type: Array,
    default: []
  },
  // 阻止多個(gè)播放器同時(shí)播放，當(dāng)前播放器播放時(shí)暫停其他播放器
  mutex: {
    type: Boolean,
    default: true
  }
})
onMounted(() => {
  let player = {
    container: videoRef.value,
    autoplay: props.autoplay,
    theme: props.theme,
    loop: props.loop,
    lang: props.lang,
    screenshot: props.screenshot,
    hotkey: props.hotkey,
    preload: props.preload,
    volume: props.volume,
    playbackSpeed: props.playbackSpeed,
    logo: props.logo,
    video: props.video,
    contextmenu: props.contextmenu,
    highlight: props.highlight,
    mutex: props.mutex,
  }
  if (props.subtitle.url) {
    player.subtitle = props.subtitle
  }
  if (props.danmaku) {
    player.danmaku = props.danmaku
  }
  console.log(player);
  state.instance = new DPlayer(player)
})
// 銷毀
onBeforeUnmount(() => {
  state.instance.destroy()
})


</script>
     
<style lang='scss' scoped>
</style>

https://dplayer.diygod.dev/zh/guide.html#special-thanks 官方文檔地址

3.調(diào)用

<template>
  <dplayer :video="dplayerObj.video" :danmaku="dplayerObj.danmaku" :contextmenu="dplayerObj.contextmenu"
    :highlight="dplayerObj.highlight" />
</template>
<script setup>
import dplayer from '@/components/Dplayer/';
import Hls from 'hls.js';
import { ref, reactive } from 'vue'
const dplayerObj = reactive({
  video: {
    url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8', //視頻地址
    type: 'customHls',
    customType: {
      customHls: function (video, player) {
        const hls = new Hls(); //實(shí)例化Hls  用于解析m3u8
        hls.loadSource(video.src);
        hls.attachMedia(video);
      }
    }
  },
  danmaku: {
    id: '9E2E3368B56CDBB4',
    api: 'https://api.prprpr.me/dplayer/',
    token: 'tokendemo',
    maximum: 1000,
    addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'],
    user: 'DIYgod',
    bottom: '15%',
    unlimited: true,
    speedRate: 0.5,
  },
  contextmenu: [
    {
      text: 'custom1',
      link: 'https://github.com/DIYgod/DPlayer',
    },
    {
      text: 'custom2',
      click: (player) => {
        console.log(player);
      },
    },
  ],
  highlight: [
    {
      time: 20,
      text: '這是第 20 秒',
    },
    {
      time: 120,
      text: '這是 2 分鐘',
    },
  ],
})
</script>

4.調(diào)用彈幕api跨域問題

首先去dplayer官網(wǎng)生態(tài)里把彈幕后臺(tái)下載下來

然后閱讀B站up的項(xiàng)目啟動(dòng)文章

注意get文件的返回字段data不用改成danmaku文章來源地址http://www.zghlxwxcb.cn/news/detail-527166.html

到了這里，關(guān)于vue3使用dplayer視頻播放器的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！