Tommmy/o.nmgjg.com.cn
1
0
Fork 0
forked from hexianglong/o.nmgjg.com.cn
Code Pull Requests Activity
Files
main
o.nmgjg.com.cn/index/Dplayer-guide.md

750 lines
24 KiB
Markdown
Raw Permalink Normal View History

docs: 添加 DPlayer 使用指南和示例页面 - 新增 DPlayer 使用指南文档，详细介绍了安装、快速开始、参数配置、API 使用等内容 - 添加了 DPlayer 示例页面，展示了基本用法和一些高级功能 - 新增了几个音频文件，用于测试和演示
2025-03-01 10:50:06 +08:00
---
sidebar: auto
---
# 指南
# DPlayer
🍭 Wow, such a lovely HTML5 danmaku video player
`<DPlayer :immediate="true"></DPlayer>`
&nbsp;
## Special Thanks
### Sponsors
<div>
<a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
<img height="60px" src="https://player.dogecloud.com/img/logo_with_product3.png">
</a>
</div>
## 安装
使用 npm:
```
npm install dplayer --save
```
使用 Yarn:
```
yarn add dplayer
```
## 快速开始
我们先尝试初始化一个最简单的 DPlayer
加载播放器文件:
```html
<div id="dplayer"></div>
<script src="DPlayer.min.js"></script>
```
或者使用模块管理器:
```js
import DPlayer from 'dplayer';
const dp = new DPlayer(options);
```
在 js 里初始化:
```js
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: 'demo.mp4',
},
});
```
一个最简单的 DPlayer 就初始化好了，它只有最基本的视频播放功能
## 参数
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](https://github.com/MoePlayer/DPlayer-thumbnails) 生成 |
| video.type | 'auto' | 可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型, 见[#MSE 支持](#mse-支持) |
| video.customType | - | 自定义类型, 见[#MSE 支持](#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 弹幕](#bilibili-弹幕) |
| danmaku.user | 'DIYgod' | 弹幕用户名 |
| danmaku.bottom | - | 弹幕距离播放器底部的距离，防止遮挡字幕，取值形如: '10px' '10%' |
| danmaku.unlimited | false | 海量弹幕模式，即使重叠也展示全部弹幕，请注意播放器会记忆用户设置，用户手动设置后即失效 |
| danmaku.speedRate | 1 | 弹幕速度倍率，越大速度越快 |
| contextmenu | [] | 自定义右键菜单 |
| highlight | [] | 自定义进度条提示点 |
| mutex | true | 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器 |
```js
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',
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',
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 分钟',
},
],
});
```
## API
- `dp.play()`: 播放视频
- `dp.pause()`: 暂停视频
- `dp.seek(time: number)`: 跳转到特定时间
```js
dp.seek(100);
```
- `dp.toggle()`: 切换播放和暂停
- `dp.on(event: string, handler: function)`: 绑定视频和播放器事件，见[#事件绑定](#事件绑定)
- `dp.switchVideo(video, danmaku)`: 切换到其他视频
```js
dp.switchVideo(
{
url: 'second.mp4',
pic: 'second.png',
thumbnails: 'second.jpg',
},
{
id: 'test',
api: 'https://api.prprpr.me/dplayer/',
maximum: 3000,
user: 'DIYgod',
}
);
```
- `dp.notice(text: string, time: number)`: 显示通知，时间的单位为毫秒，默认时间 2000 毫秒，默认透明度 0.8
- `dp.switchQuality(index: number)`: 切换清晰度
- `dp.destroy()`: 销毁播放器
- `dp.speed(rate: number)`: 设置视频速度
- `dp.volume(percentage: number, nostorage: boolean, nonotice: boolean)`: 设置视频音量
```js
dp.volume(0.1, true, false);
```
- `dp.video`: 原生 video
- `dp.video.currentTime`: 返回视频当前播放时间
- `dp.video.duration`: 返回视频总时间
- `dp.video.paused`: 返回视频是否暂停
- 支持大多数[原生 video 接口](http://www.w3schools.com/tags/ref_av_dom.asp)
- `dp.danmaku`
- `dp.danmaku.send(danmaku, callback: function)`: 提交一个新弹幕
```js
dp.danmaku.send(
{
text: 'dplayer is amazing',
color: '#b7daff',
type: 'right', // should be `top` `bottom` or `right`
},
function () {
console.log('success');
}
);
```
- `dp.danmaku.draw(danmaku)`: 实时绘制一个新弹幕
```js
dp.danmaku.draw({
text: 'DIYgod is amazing',
color: '#fff',
type: 'top',
});
```
- `dp.danmaku.opacity(percentage: number)`: 设置弹幕透明度，透明度值在 0 到 1 之间
```js
dp.danmaku.opacity(0.5);
```
- `dp.danmaku.clear()`: 清除所有弹幕
- `dp.danmaku.hide()`: 隐藏弹幕
- `dp.danmaku.show()`: 显示弹幕
- `dp.fullScreen`: 两个类型：`web` 和 `browser`，默认类型是 `browser`
- `dp.fullScreen.request(type: string)`: 进入全屏
```js
dp.fullScreen.request('web');
```
- `dp.fullScreen.cancel(type: string)`: 退出全屏
```js
dp.fullScreen.cancel('web');
```
## 事件绑定
`dp.on(event, handler)`
```js
dp.on('ended', function () {
console.log('player ended');
});
```
视频事件
- abort
- canplay
- canplaythrough
- durationchange
- emptied
- ended
- error
- loadeddata
- loadedmetadata
- loadstart
- mozaudioavailable
- pause
- play
- playing
- progress
- ratechange
- seeked
- seeking
- stalled
- suspend
- timeupdate
- volumechange
- waiting
播放器事件
- screenshot
- thumbnails_show
- thumbnails_hide
- danmaku_show
- danmaku_hide
- danmaku_clear
- danmaku_loaded
- danmaku_send
- danmaku_opacity
- contextmenu_show
- contextmenu_hide
- notice_show
- notice_hide
- quality_start
- quality_end
- destroy
- resize
- fullscreen
- fullscreen_cancel
- subtitle_show
- subtitle_hide
- subtitle_change
## 清晰度切换
在 `video.quality` 里设置不同清晰度的视频链接和类型，`video.defaultQuality` 设置默认清晰度
`<DPlayer :options="{
video: {
quality: [{
name: 'HD',
url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
type: 'hls'
}, {
name: 'SD',
url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
type: 'normal'
}],
defaultQuality: 0,
pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg'
}
}"></DPlayer>`
```js
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
quality: [
{
name: 'HD',
url: 'demo.m3u8',
type: 'hls',
},
{
name: 'SD',
url: 'demo.mp4',
type: 'normal',
},
],
defaultQuality: 0,
pic: 'demo.png',
thumbnails: 'thumbnails.jpg',
},
});
```
## 弹幕
### 弹幕接口
`danmaku.api`
**现成的接口**
链接: https://api.prprpr.me/dplayer/
每日备份: [DPlayer-data](https://github.com/DIYgod/DPlayer-data)
**自己搭建**
[DPlayer-node](https://github.com/MoePlayer/DPlayer-node)
### bilibili 弹幕
`danmaku.addition`
API: [https://api.prprpr.me/dplayer/v3/bilibili?aid=[aid]](https://api.prprpr.me/dplayer/v3/bilibili?aid=%5Baid%5D)
```js
const option = {
danmaku: {
// ...
addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=[aid]'],
},
};
```
## MSE 支持
### HLS
需要在 `DPlayer.min.js` 前面加载 [hls.js](https://github.com/video-dev/hls.js)。
`<DPlayer :options="{
video: {
url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
type: 'hls'
}
}"></DPlayer>`
```html
<div id="dplayer"></div>
<script src="hls.min.js"></script>
<script src="DPlayer.min.js"></script>
```
```js
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: 'demo.m3u8',
type: 'hls',
},
pluginOptions: {
hls: {
// hls config
},
},
});
console.log(dp.plugins.hls); // Hls 实例
```
```js
// 另一种方式，使用 customType
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: 'demo.m3u8',
type: 'customHls',
customType: {
customHls: function (video, player) {
const hls = new Hls();
hls.loadSource(video.src);
hls.attachMedia(video);
},
},
},
});
```
### MPEG DASH
需要在 `DPlayer.min.js` 前面加载 [dash.js](https://github.com/Dash-Industry-Forum/dash.js)。
```html
<div id="dplayer"></div>
<script src="dash.min.js"></script>
<script src="DPlayer.min.js"></script>
```
```js
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: 'demo.mpd',
type: 'dash',
},
pluginOptions: {
dash: {
// dash config
},
},
});
console.log(dp.plugins.dash); // Dash 实例
```
```js
// 另一种方式，使用 customType
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: 'demo.mpd',
type: 'customDash',
customType: {
customDash: function (video, player) {
dashjs.MediaPlayer().create().initialize(video, video.src, false);
},
},
},
});
```
### MPEG DASH (Shaka)
需要在 `DPlayer.min.js` 前面加载 [shaka-player.compiled.js](https://github.com/google/shaka-player)。
```html
<div id="dplayer"></div>
<script src="shaka-player.compiled.js"></script>
<script src="DPlayer.min.js"></script>
```
```js
const dp = new DPlayer({
container: document.getElementById('dplayer'),
screenshot: true,
video: {
url: 'demo.mpd',
type: 'shakaDash',
customType: {
shakaDash: function (video, player) {
var src = video.src;
var playerShaka = new shaka.Player(video); // 将会修改 video.src
playerShaka.load(src);
},
},
},
});
```
### FLV
需要在 `DPlayer.min.js` 前面加载 [flv.js](https://github.com/Bilibili/flv.js)。
`<DPlayer :options="{
video: {
url: 'https://api.dogecloud.com/player/get.flv?vcode=5ac682e6f8231991&userId=17&ext=.flv',
type: 'flv'
}
}"></DPlayer>`
```html
<div id="dplayer"></div>
<script src="flv.min.js"></script>
<script src="DPlayer.min.js"></script>
```
```js
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: 'demo.flv',
type: 'flv',
},
pluginOptions: {
flv: {
// refer to https://github.com/bilibili/flv.js/blob/master/docs/api.md#flvjscreateplayer
mediaDataSource: {
// mediaDataSource config
},
config: {
// config
},
},
},
});
console.log(dp.plugins.flv); // flv 实例
```
```js
// 另一种方式，使用 customType
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: 'demo.flv',
type: 'customFlv',
customType: {
customFlv: function (video, player) {
const flvPlayer = flvjs.createPlayer({
type: 'flv',
url: video.src,
});
flvPlayer.attachMediaElement(video);
flvPlayer.load();
},
},
},
});
```
### WebTorrent
需要在 `DPlayer.min.js` 前面加载 [webtorrent](https://github.com/webtorrent/webtorrent)。
`<DPlayer :options="{
video: {
url: 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent',
type: 'webtorrent'
}
}"></DPlayer>`
```html
<div id="dplayer"></div>
<script src="webtorrent.min.js"></script>
<script src="DPlayer.min.js"></script>
```
```js
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: 'magnet:demo',
type: 'webtorrent',
},
pluginOptions: {
webtorrent: {
// webtorrent config
},
},
});
console.log(dp.plugins.webtorrent); // WebTorrent 实例
```
```js
// 另一种方式，使用 customType
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: 'magnet:demo',
type: 'customWebTorrent',
customType: {
customWebTorrent: function (video, player) {
player.container.classList.add('dplayer-loading');
const client = new WebTorrent();
const torrentId = video.src;
client.add(torrentId, (torrent) => {
const file = torrent.files.find((file) => file.name.endsWith('.mp4'));
file.renderTo(
video,
{
autoplay: player.options.autoplay,
},
() => {
player.container.classList.remove('dplayer-loading');
}
);
});
},
},
},
});
```
### 配合其他 MSE 库使用
DPlayer 可以通过 `customType` 参数与任何 MSE 库一起使用，例如支持 P2P 插件：
```html
<div id="dplayer"></div>
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="DPlayer.min.js"></script>
```
```js
var type = 'normal';
if (Hls.isSupported() && Hls.WEBRTC_SUPPORT) {
type = 'customHls';
}
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: 'demo.m3u8',
type: type,
customType: {
customHls: function (video, player) {
const hls = new Hls({
debug: false,
// Other hlsjsConfig options provided by hls.js
p2pConfig: {
live: false, // 如果是直播设为true
// Other p2pConfig options provided by CDNBye http://www.cdnbye.com/cn/
},
});
hls.loadSource(video.src);
hls.attachMedia(video);
},
},
},
});
```
## 直播
你可以把 DPlayer 用在直播当中，但如果你想要直播弹幕，你需要自己准备一个 WebSocket 后端。
`<DPlayer :options="{
live: true,
video: {
url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
type: 'hls'
}
}"></DPlayer>`
初始化播放器:
```js
const dp = new DPlayer({
container: document.getElementById('dplayer'),
live: true,
danmaku: true,
apiBackend: {
read: function (options) {
console.log('Pretend to connect WebSocket');
options.success([]);
},
send: function (options) {
console.log('Pretend to send danmaku via WebSocket', options.data);
options.success();
},
},
video: {
url: 'demo.m3u8',
type: 'hls',
},
});
```
通过 WebSocket 获取到弹幕之后，通过 `dp.danmaku.draw` 绘制弹幕:
```js
const danmaku = {
text: 'Get a danmaku via WebSocket',
color: '#fff',
type: 'right',
};
dp.danmaku.draw(danmaku);
```
## 常见问题
### 为什么播放器不能全屏？
如果播放器被包含在 iframe 里，尝试在 iframe 上添加 `allowfullscreen` 属性。
为了完善的浏览器兼容性，它应该是这样：
```html
<iframe src="example.com" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"></iframe>
```
### 为什么播放器不能在手机上自动播放？
大多数移动端浏览器禁止了视频自动播放。
Copy Permalink