Vue集成DPlayer指南
vue集成dplayer
一、DPlayer 是什么
DPlayer 是一个由中国开发者 DIYgod开源的 HTML5 弹幕视频播放器。
它以 简洁、高颜值、易用性强、支持多种格式 而闻名。
GitHub 地址： https://github.com/DIYgod/DPlayer
官网文档： https://dplayer.diygod.dev/
二、DPlayer 的主要特点
| 特性 | 说明 |
| 弹幕支持（Danmaku） | 内置弹幕功能（发送、加载、实时显示），支持自建弹幕API服务。 |
| 多格式支持 | 支持 mp4、flv、hls（m3u8）、dash（mpd）、webtorrent（种子） 等格式。 |
| 插件系统 | 可与 dash.js、flv.js、hls.js、WebTorrent 等库配合使用。 |
| 响应式设计 | 自动适配 PC / 手机 / 平板。 |
| 截图功能 | 用户可以截图视频帧。 |
| 倍速播放 / 进度条预览 / 弹幕遮罩 / 弹幕透明度 / 弹幕过滤 | |
| 高度可定制 UI | 可通过 CSS 修改界面样式。 |
| 开源免费（MIT 协议） | 可以免费用于商业或个人网站。 |
三、支持的视频类型
| 类型 | 文件后缀 | 支持方式 | 说明 |
| MP4 | .mp4 | 原生支持 | 普通视频文件 |
| HLS | .m3u8 | 通过内置 hls.js | 主流直播/点播流格式 |
| FLV | .flv | 通过 flv.js | 常见于国内视频流 |
| DASH | .mpd | 通过 dash.js | 国际标准自适应流媒体 |
| WebTorrent | .torrent / Magnet | 通过 WebTorrent | 支持种子播放（需支持浏览器） |
四、基础使用
创建vue项目，下载dplayer
npm install dplayer@1.25.0 –save
（注意：这里不要用最新的1.27.x的版本，巨坑，，官方文档的方法死活无法加载弹幕！！！！！！！！）
创建播放器组件：
<template>
<div id="dplayer" class="w-full h-[600px]"></div>
</template>
<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import DPlayer from 'dplayer'
//一定要引入css
import 'dplayer/dist/DPlayer.min.css'
let dp
onMounted(() => {
dp = new DPlayer({
container: document.getElementById('dplayer'),
autoplay: false,
theme: 'lightblue',
video: {
url: '/aaa.mp4',
type: 'auto'
},
})
})
onBeforeUnmount(() => {
dp && dp.destroy()
})
</script>
<style scoped>
#dplayer {
width: 80%; /* 控制宽度占屏比例 */
max-width: 960px; /* 限制最大宽度 */
height: 540px; /* 固定高度 */
margin: 0 auto; /* 居中 */
border-radius: 12px;/* 圆角边框 */
overflow: hidden; /* 隐藏溢出 */
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
</style>在页面中引用;
<template>
<dplayer/>
</template>
<style>
</style>
<script>
import {defineComponent} from "vue";
import Dplayer from "@/components/Dplayer.vue";
export default defineComponent({
components: {Dplayer}
})
</script>如此可以做到以下效果：
五、弹幕功能
添加弹幕很简单，初始化时添加danmaku：
danmaku: {
id: '1',
api: '/api/danmaku/',
user: '游客',
bottom: '15%',
unlimited: true
},创建后端服务：
注意这里的视资源要放在resources/static/videos 目录下
package com.bbs.springboot.controller;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.web.bind.annotation.*;
import java.io.*;
@RestController
@RequestMapping("/video")
public class VideoController {
// 视频文件存储路径
private static final String VIDEO_PATH = "/data/videos/";
// 处理视频文件请求
@GetMapping("/stream/{fileName:.+}")
public void stream(@PathVariable String fileName, HttpServletResponse response) throws IOException {
File file = new File(VIDEO_PATH + fileName);
// 如果文件不存在，返回 404
if (!file.exists()) {
response.setStatus(HttpServletResponse.SC_NOT_FOUND);
return;
}
// 根据文件扩展名设置 Content-Type
String contentType;
if (fileName.endsWith(".mp4")) {
contentType = "video/mp4";
} else if (fileName.endsWith(".m3u8")) {
contentType = "application/vnd.apple.mpegurl";
} else if (fileName.endsWith(".ts")) {
contentType = "video/mp2t";
} else {
contentType = "application/octet-stream"; // 默认
}
// 设置跨域请求头
response.setHeader("Access-Control-Allow-Origin", "*");
response.setContentType(contentType);
// 设置返回的文件流
try (InputStream in = new FileInputStream(file);
OutputStream out = response.getOutputStream()) {
byte[] buffer = new byte[8192];
int len;
while ((len = in.read(buffer)) != -1) {
out.write(buffer, 0, len);
}
}
}
}六、分片播放
一般来讲为了提升用户的观影体验，大的文件传输较慢，这时可以将大文件分段传输来做到边看边下载。
最常用的是HLS 分片（.m3u8 + .ts）尤其是在线视频网站（B 站、爱奇艺、腾讯视频等）。
优点：
支持大文件播放、直播、拖动进度条
支持多码率、自适应网络
浏览器兼容性好（通过 Hls.js）
弹幕、广告等功能容易实现
缺点：
需要先切片（ffmpeg 或后台批处理）
多文件管理复杂
这里详细可看作者博客vue+spring boot 利用ffmpeg实现大视频切片-优快云博客
八、缩略图
这里可以下载dplayer提供的视频缩略图生成工具
npm install -g dplayer-thumbnails进入到视频的目录
生成视频缩略图：
dplayer-thumbnails -o thumbnails/bbb.jpg -q 60 bbb.mp4查看帮助文档
dplayer-thumbnails –help这时可以通过video.thumbnails 获取缩略图（thumbnails写在video里）
dplayer-thumbnails –help将鼠标放到进度条上，可以查看：
注意！这里有坑！不要用ffmpeg生成缩略图，会导致缩略图与画面不匹配。。
七、更多参数
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 | 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器 |
扫一扫
5744
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
