Vue3+SpringBoot+MySql使用Dplay.js实现弹幕功能

系列文章目录

🥥Vue3+SpringBoot+Elasticsearch+ik分词实现分词搜索功能
🍉Vue3+Ts+SpringBoot+Redis实现发送QQ邮箱注册功能
🍎Vue3+SpringBoot+MySql使用Dplay.js实现弹幕功能

---

---

前言

在做期末大作业的时候，我打算做的是视频网站，刚好需要做弹幕的功能，就想到了Dplay.js，它是一款好看且功能强大的H5播放器支持弹幕、字幕、直播、清晰度切换等功能。在使用的过程中发现了很多问题以及踩坑，我在网上搜索了很多相关资料发现很少，所以打算分享以及记录一下我的开发时刻。附上官网链接：https://dplayer.diygod.dev/zh/

这里附上效果图😁

---

一、使用步骤

1.安装依赖

注意：我使用的Dplayer版本：v1.27.0

npm install dplayer --save

2.基础文档

DPlayer 有丰富的参数可以自定义你的播放器实例

名称	默认值	描述
container	document.querySelector(‘.dplayer’)	播放器容器元素
live	false	开启直播模式, 见#直播
autoplay	false	视频自动播放
theme	‘#b7daff’	主题色
loop	false	视频循环播放
lang	navigator.language.toLowerCase()	可选值: ‘en’, ‘zh-cn’, ‘zh-tw’
screenshot	false	开启截图，如果开启，视频和视频封面需要允许跨域
hotkey	true	开启热键，支持快进、快退、音量控制、播放暂停
airplay	false	在 Safari 中开启 AirPlay
chromecast	false	启用 Chromecast
preload	‘auto’	视频预加载，可选值: ‘none’, ‘metadata’, ‘auto’
volume	0.7	默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
playbackSpeed	[0.5, 0.75, 1, 1.25, 1.5, 2]	可选的播放速率，可以设置成自定义的数组
logo	-	在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
apiBackend	-	自定义获取和发送弹幕行为，见#直播
preventClickToggle	false	阻止点击播放器时候自动切换播放/暂停
video	-	视频信息
video.quality	-	见#清晰度切换
video.defaultQuality	-	见#清晰度切换
video.url	-	视频链接
video.pic	-	视频封面
video.thumbnails	-	视频缩略图，可以使用 DPlayer-thumbnails (opens new window)生成
video.type	‘auto’	可选值: ‘auto’, ‘hls’, ‘flv’, ‘dash’, ‘webtorrent’, ‘normal’ 或其他自定义类型, 见#MSE 支持
video.customType	-	自定义类型, 见#MSE 支持
subtitle	-	外挂字幕
subtitle.url	required	字幕链接
subtitle.type	‘webvtt’	字幕类型，可选值: ‘webvtt’, ‘ass’，目前只支持 webvtt
subtitle.fontSize	‘20px’	字幕字号
subtitle.bottom	‘40px’	字幕距离播放器底部的距离，取值形如: ‘10px’ ‘10%’
subtitle.color	‘#fff’	字幕颜色
danmaku	-	显示弹幕
danmaku.id	required	弹幕池 id，必须唯一
danmaku.api	required	见#弹幕接口
danmaku.token	-	弹幕后端验证 token
danmaku.maximum	-	弹幕最大数量
danmaku.addition	-	额外外挂弹幕，见#bilibili 弹幕
danmaku.user	‘DIYgod’	弹幕用户名
danmaku.bottom	-	弹幕距离播放器底部的距离，防止遮挡字幕，取值形如: ‘10px’ ‘10%’
danmaku.unlimited	false	海量弹幕模式，即使重叠也展示全部弹幕，请注意播放器会记忆用户设置，用户手动设置后即失效
danmaku.speedRate	1	弹幕速度倍率，越大速度越快
contextmenu	[]	自定义右键菜单
highlight	[]	自定义进度条提示点
mutex	true	互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器

3.示例demo

<div id="dplayer"></div>							//播放器容器元素

const dp = new DPlayer({
   
   
    container: document.getElementById('dplayer'),  //播放器容器元素
    autoplay: false,  	//自动播放
    theme: '#FADFA3',	//主题色 底部进度条相关颜色
    loop: true,			//循环播放视频
    lang: 'zh-cn',		//语言
    screenshot: true,	//开启截图，如果开启，视频和视频封面需要允许跨域
    hotkey: true,		//开启热键，支持快进、快退、音量控制、播放暂停
    preload: 'auto',	//视频预加载
    logo: 'logo.png',	//在左上角展示一个logo,可以通过CSS调整它的大小和位置
    volume: 0.7,		//默认音量
    mutex: true,		//互斥，阻止多个播放器同时播放
    video: {
   
   			//视频信息配置项
        url: 'dplayer.mp4',
        pic: 'dplayer.png',
        thumbnails: 'thumbnails.jpg',
        type: 'auto',
    },
    subtitle: {
   
   					//外挂字幕配置项
        url: 'dplayer.vtt',		//字幕链接
        type: 'webvtt',			//字幕类型
        fontSize: '25px',		//字幕字号
        bottom: '10%',			//字幕距离播放器底部的距离
        color: '#b7daff',		//字幕颜色
    },
    danmaku: {
   
   									//弹幕配置项
        id: '9E2E3368B56CDBB4',					//该视频的id
        api: 'https://api.prprpr.me/dplayer/',	//弹幕的接口
        token: 'tokendemo',						//弹幕后端验证 token
        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 分钟',
        },
    ],
});

二、代码示例

前端代码

我使用的前后端分离的模式，代码如下（示例）：

const getVideoInfo = async () => {
   
   	//获取视频信息的方法
    const route = useRoute();		//实例化route对象
    const videoId = route.query.id; //获取查询参数视频id的值
    await $getVideoById(</