docs
This commit is contained in:
DIYgod
parent
0cfb2a76d6
commit
b8a8b77386
|
|
@ -0,0 +1 @@
|
|||
dplayer.js.org
|
||||
|
|
@ -0,0 +1,647 @@
|
|||
---
|
||||
search: english
|
||||
---
|
||||
|
||||
# DPlayer
|
||||
|
||||
🍭 Wow, such a lovely HTML5 danmaku video player
|
||||
|
||||
## Special Sponsors
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://pear.hk/" target="_blank">
|
||||
<img width="222px" src="https://i.imgur.com/5qQYmfc.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
|
||||
<img width="222px" src="https://imgur.com/apG1uKf.png">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Installation
|
||||
|
||||
Using npm:
|
||||
|
||||
```
|
||||
npm install dplayer --save
|
||||
```
|
||||
|
||||
Using Yarn:
|
||||
|
||||
```
|
||||
yarn add dplayer
|
||||
```
|
||||
|
||||
## Quick Start
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer2"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
<div id="dplayer"></div>
|
||||
<script src="DPlayer.min.js"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
const dp = new DPlayer({
|
||||
container: document.getElementById('dplayer'),
|
||||
screenshot: true,
|
||||
video: {
|
||||
url: 'demo.mp4',
|
||||
pic: 'demo.jpg',
|
||||
thumbnails: 'thumbnails.jpg'
|
||||
},
|
||||
subtitle: {
|
||||
url: 'webvtt.vtt'
|
||||
},
|
||||
danmaku: {
|
||||
id: 'demo',
|
||||
api: 'https://api.prprpr.me/dplayer/'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Work with module bundler:
|
||||
|
||||
```js
|
||||
import 'DPlayer/dist/DPlayer.min.css';
|
||||
import DPlayer from 'DPlayer';
|
||||
|
||||
const dp = new DPlayer(options);
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
Name|Default|Note
|
||||
----|-------|----
|
||||
container | document.querySelector('.dplayer') | player container
|
||||
live | false | enable live mode, [see more details](http://dplayer.js.org/docs/#/?id=live-mode)
|
||||
autoplay | false | video autoplay
|
||||
theme | '#b7daff' | main color
|
||||
loop | false | video loop
|
||||
lang | navigator.language.toLowerCase() | values: 'en', 'zh-cn', 'zh-tw'
|
||||
screenshot | false | enable screenshot, if true, video and video poster must enable Cross-Origin
|
||||
hotkey | true | enable hotkey
|
||||
preload | 'auto' | values: 'none', 'metadata', 'auto'
|
||||
volume | 0.7 | default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
|
||||
logo | - | showing logo in the top left corner, you can adjust its size and position by CSS
|
||||
apiBackend | - | getting and sending danmaku in your way, [see more details](http://dplayer.js.org/docs/#/?id=live-mode)
|
||||
video | - | video info
|
||||
video.quality | - | [see more details](http://dplayer.js.org/docs/#/?id=quality-switching)
|
||||
video.defaultQuality | - | [see more details](http://dplayer.js.org/docs/#/?id=quality-switching)
|
||||
video.url | - | video url
|
||||
video.pic | - | video poster
|
||||
video.thumbnails | - | video thumbnails, generated by [DPlayer-thumbnails](https://github.com/MoePlayer/DPlayer-thumbnails)
|
||||
video.type | 'auto' | values: 'auto', 'hls', 'flv', 'dash', 'webtorrent' or custom type, [see more details](http://dplayer.js.org/docs/#/?id=mse-support)
|
||||
video.customType | - | custom video type, [see more details](http://dplayer.js.org/docs/#/?id=mse-support)
|
||||
subtitle | - | external subtitle
|
||||
subtitle.url | `required` | subtitle url
|
||||
subtitle.type | 'webvtt' | values: 'webvtt', 'ass', but only webvtt is supported for now
|
||||
subtitle.fontSize | '20px' | subtitle font size
|
||||
subtitle.bottom | '40px' | values like: '10px' '10%', the distance between the subtitle and player bottom
|
||||
subtitle.color | '#fff' | subtitle color
|
||||
danmaku | - | showing danmaku
|
||||
danmaku.id | `required` | danamku pool id, it must be unique
|
||||
danmaku.api | `required` | [see more details](http://dplayer.js.org/docs/#/?id=back-end)
|
||||
danmaku.token | - | back end verification token
|
||||
danmaku.maximum | - | danmaku maximum quantity
|
||||
danmaku.addition | - | additional danmaku, [see more details](http://dplayer.js.org/docs/#/?id=bilibili-danmaku-and-video-link)
|
||||
danmaku.user | 'DIYgod' | danmaku user name
|
||||
danmaku.bottom | - | values like: '10px' '10%', the distance between the danmaku bottom and player bottom, in order to prevent warding off subtitle
|
||||
danmaku.unlimited | false | allow danmaku overlap, notice that player will remember user setting, default setting will not work after user set it themselves
|
||||
contextmenu | [] | custom contextmenu
|
||||
mutex | true | pause other players when this player start play
|
||||
|
||||
For example:
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer3"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
```js
|
||||
const dp = new DPlayer({
|
||||
container: document.getElementById('player'),
|
||||
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/bilibili?aid=4157142'],
|
||||
user: 'DIYgod',
|
||||
bottom: '15%',
|
||||
unlimited: true
|
||||
},
|
||||
contextmenu: [
|
||||
{
|
||||
text: 'custom1',
|
||||
link: 'https://github.com/DIYgod/DPlayer'
|
||||
},
|
||||
{
|
||||
text: 'custom2',
|
||||
click: (player) => {
|
||||
console.log(player);
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
+ `dp.play()`: play video
|
||||
|
||||
+ `dp.pause()`: pause video
|
||||
|
||||
+ `dp.seek(time: number)`: seek to specified millisecond time
|
||||
|
||||
```js
|
||||
dp.seek(1000);
|
||||
```
|
||||
|
||||
+ `dp.toggle()`: toggle between play and pause
|
||||
|
||||
+ `dp.on(event: string, handler: function)`: bind video and player events, [see more details](http://dplayer.js.org/docs/#/?id=event-binding)
|
||||
|
||||
+ `dp.switchVideo(video, danmaku)`: switch to a new video, the parameters in `video` and `danmaku` is the same as option
|
||||
|
||||
```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)`: show message
|
||||
|
||||
+ `dp.switchQuality(index: number)`: switch quality
|
||||
|
||||
+ `dp.destroy()`: destroy player
|
||||
|
||||
+ `dp.speed(rate: number)`: set video speed
|
||||
|
||||
+ `dp.video`: native video
|
||||
|
||||
+ `dp.video.currentTime`: returns the current playback position
|
||||
|
||||
+ `dp.video.loop`: returns whether the video should start over again when finished
|
||||
|
||||
+ `dp.video.paused`: returns whether the video paused
|
||||
|
||||
+ most [native api](http://www.w3schools.com/tags/ref_av_dom.asp) are supported
|
||||
|
||||
+ `dp.danmaku`
|
||||
|
||||
+ `dp.danmaku.send(danmaku, callback: function)`: submit a new danmaku to back end
|
||||
|
||||
```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)`: draw a new danmaku to player in real time
|
||||
|
||||
```js
|
||||
dp.danmaku.draw({
|
||||
text: 'DIYgod is amazing',
|
||||
color: '#fff',
|
||||
type: 'top'
|
||||
});
|
||||
```
|
||||
|
||||
+ `dp.danmaku.opacity(percentage: number)`: set danmaku opacity, opacity should between 0 and 1
|
||||
|
||||
```js
|
||||
dp.danmaku.opacity(0.5);
|
||||
```
|
||||
|
||||
+ `dp.danmaku.clear()`: clear all danmakus
|
||||
|
||||
+ `dp.danmaku.hide()`: hide danmaku
|
||||
|
||||
+ `dp.danmaku.show()`: show danmaku
|
||||
|
||||
+ `dp.fullScreen`: two type: `web` or `browser`, the default one is `browser`
|
||||
|
||||
+ `dp.fullScreen.request(type: string)`: request fullscreen
|
||||
|
||||
```js
|
||||
dp.fullScreen.request('web');
|
||||
```
|
||||
|
||||
+ `dp.fullScreen.cancel(type: string)`: cancel fullscreen
|
||||
|
||||
```js
|
||||
dp.fullScreen.cancel('web');
|
||||
```
|
||||
|
||||
## Event binding
|
||||
|
||||
`dp.on(event, handler)`
|
||||
|
||||
```js
|
||||
dp.on('ended', function () {
|
||||
console.log('player ended');
|
||||
});
|
||||
```
|
||||
|
||||
Video events
|
||||
|
||||
- abort
|
||||
- canplay
|
||||
- canplaythrough
|
||||
- durationchange
|
||||
- emptied
|
||||
- ended
|
||||
- error
|
||||
- loadeddata
|
||||
- loadedmetadata
|
||||
- loadstart
|
||||
- mozaudioavailable
|
||||
- pause
|
||||
- play
|
||||
- playing
|
||||
- progress
|
||||
- ratechange
|
||||
- seeked
|
||||
- seeking
|
||||
- stalled
|
||||
- suspend
|
||||
- timeupdate
|
||||
- volumechange
|
||||
- waiting
|
||||
|
||||
Player events
|
||||
|
||||
- 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
|
||||
|
||||
## Quality switching
|
||||
|
||||
Set video url and video type in video.quality, set default quality by video.defaultQuality.
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer4"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
```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
|
||||
|
||||
### Danmaku API
|
||||
|
||||
**Ready-made API**
|
||||
|
||||
url: https://api.prprpr.me/dplayer/
|
||||
|
||||
Daily backup data: [DPlayer-data](https://github.com/DIYgod/DPlayer-data)
|
||||
|
||||
**Setting up yourself**
|
||||
|
||||
[DPlayer-node](https://github.com/MoePlayer/DPlayer-node)
|
||||
|
||||
### Bilibili danmaku
|
||||
|
||||
API: [https://api.prprpr.me/dplayer/v2/bilibili?aid=[aid]](https://api.prprpr.me/dplayer/v2/bilibili?aid=[aid]) or [https://api.prprpr.me/dplayer/v2/bilibili?cid=[cid]](https://api.prprpr.me/dplayer/v2/bilibili?cid=[cid])
|
||||
|
||||
```js
|
||||
const option = {
|
||||
danmaku: {
|
||||
// ...
|
||||
addition: ['https://api.prprpr.me/dplayer/v2/bilibili?aid=[aid]']
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## MSE support
|
||||
|
||||
### HLS
|
||||
|
||||
It requires the library [hls.js](https://github.com/video-dev/hls.js) and it should be loaded before `DPlayer.min.js`.
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer5"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
<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'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
```js
|
||||
// another way, use 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
|
||||
|
||||
It requires the library [dash.js](https://github.com/Dash-Industry-Forum/dash.js) and it should be loaded before `DPlayer.min.js`.
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer6"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
<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'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
```js
|
||||
// another way, use 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### FLV
|
||||
|
||||
It requires the library [flv.js](https://github.com/Bilibili/flv.js) and it should be loaded before `DPlayer.min.js`.
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer7"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
<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'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
```js
|
||||
// another way, use 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
|
||||
|
||||
It requires the library [webtorrent](https://github.com/webtorrent/webtorrent) and it should be loaded before `DPlayer.min.js`.
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer8"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
<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'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
```js
|
||||
// another way, use 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');
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Live
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer9"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
You can also regard DPlayer as a live player, at first, you should prepare a WebSocket backend yourself.
|
||||
|
||||
Init DPlayer:
|
||||
|
||||
```js
|
||||
const dp = new DPlayer({
|
||||
container: document.getElementById('dplayer'),
|
||||
live: true,
|
||||
danmaku: true,
|
||||
apiBackend: {
|
||||
read: function (endpoint, callback) {
|
||||
console.log('Pretend to connect WebSocket');
|
||||
callback();
|
||||
},
|
||||
send: function (endpoint, danmakuData, callback) {
|
||||
console.log('Pretend to send danamku via WebSocket', danmakuData);
|
||||
callback();
|
||||
}
|
||||
},
|
||||
video: {
|
||||
url: 'demo.m3u8',
|
||||
type: 'hls'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
After getting a danmaku via WebSocket:
|
||||
|
||||
```js
|
||||
const danmaku = {
|
||||
text: 'Get a danamku via WebSocket',
|
||||
color: '#fff',
|
||||
type: 'right'
|
||||
};
|
||||
dp.danmaku.draw(danmaku);
|
||||
```
|
||||
|
||||
## CDN
|
||||
|
||||
- [jsDelivr](https://www.jsdelivr.com/package/npm/dplayer)
|
||||
- [cdnjs](https://cdnjs.com/libraries/dplayer)
|
||||
- [unpkg](https://unpkg.com/dplayer/)
|
||||
|
||||
## FAQ
|
||||
|
||||
### Why can't some videos be full screen?
|
||||
|
||||
If player is contained in a iframe, try adding the allowfullscreen attribute to the iframe.
|
||||
|
||||
For full browser support it should look like this:
|
||||
|
||||
```html
|
||||
<iframe src="example.com"
|
||||
allowfullscreen="allowfullscreen"
|
||||
mozallowfullscreen="mozallowfullscreen"
|
||||
msallowfullscreen="msallowfullscreen"
|
||||
oallowfullscreen="oallowfullscreen"
|
||||
webkitallowfullscreen="webkitallowfullscreen"></iframe>
|
||||
```
|
||||
|
||||
### Why can't player autoplay in some mobile browsers?
|
||||
|
||||
Most mobile browsers forbid video autoplay, you wont be able to achieve it without hacks.
|
||||
|
|
@ -0,0 +1,243 @@
|
|||
const langs = [
|
||||
{ title: 'English', path: '/home', matchPath: /^\/(home|ecosystem)/ },
|
||||
{ title: '简体中文', path: '/zh-Hans/', matchPath: /^\/zh-Hans/ },
|
||||
]
|
||||
|
||||
docute.init({
|
||||
landing: 'landing.html',
|
||||
title: 'DPlayer',
|
||||
repo: 'DIYgod/DPlayer',
|
||||
twitter: 'DIYgod',
|
||||
'edit-link': 'https://github.com/MoePlayer/DPlayer/tree/master/docs',
|
||||
nav: {
|
||||
default: [
|
||||
{
|
||||
title: 'Home', path: '/home'
|
||||
},
|
||||
{
|
||||
title: 'Ecosystem', path: '/ecosystem'
|
||||
},
|
||||
{
|
||||
title: 'Languages', type: 'dropdown', items: langs
|
||||
}
|
||||
],
|
||||
'zh-Hans': [
|
||||
{
|
||||
title: '首页', path: '/zh-Hans/'
|
||||
},
|
||||
{
|
||||
title: '生态系统', path: '/zh-Hans/ecosystem'
|
||||
},
|
||||
{
|
||||
title: '选择语言', type: 'dropdown', items: langs
|
||||
}
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
docsearch({
|
||||
apiKey: '46a8ba306e368972c1d75feb581fb430',
|
||||
indexName: 'dplayer',
|
||||
url: 'http://dplayer.js.org'
|
||||
}),
|
||||
evanyou(),
|
||||
player()
|
||||
]
|
||||
})
|
||||
|
||||
function player (options) {
|
||||
return function (context) {
|
||||
context.event.on('landing:updated', function () {
|
||||
console.log('landing:updated');
|
||||
clearPlayer();
|
||||
dplayer1();
|
||||
});
|
||||
context.event.on('content:updated', function () {
|
||||
console.log('content:updated');
|
||||
clearPlayer();
|
||||
for (var i = 0; i < document.querySelectorAll('.load').length; i++) {
|
||||
document.querySelectorAll('.load')[i].addEventListener('click', function () {
|
||||
window[this.parentElement.id] && window[this.parentElement.id]();
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function clearPlayer () {
|
||||
for (var i = 1; i < 10; i++) {
|
||||
if (window['dp' + (i + 1)]) {
|
||||
window['dp' + (i + 1)].destroy();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function dplayer1 () {
|
||||
window.dp1 = new DPlayer({
|
||||
container: document.getElementById('dplayer1'),
|
||||
screenshot: true,
|
||||
video: {
|
||||
url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4',
|
||||
pic: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.png',
|
||||
thumbnails: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara_thumbnails.jpg'
|
||||
},
|
||||
subtitle: {
|
||||
url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.vtt'
|
||||
},
|
||||
danmaku: {
|
||||
id: '9E2E3368B56CDBB4',
|
||||
api: 'https://api.prprpr.me/dplayer/'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function dplayer2 () {
|
||||
window.dp2 = new DPlayer({
|
||||
container: document.getElementById('dplayer2'),
|
||||
screenshot: true,
|
||||
video: {
|
||||
url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4',
|
||||
pic: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.png',
|
||||
thumbnails: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara_thumbnails.jpg'
|
||||
},
|
||||
subtitle: {
|
||||
url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.vtt'
|
||||
},
|
||||
danmaku: {
|
||||
id: '9E2E3368B56CDBB4',
|
||||
api: 'https://api.prprpr.me/dplayer/'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function dplayer3 () {
|
||||
window.dp3 = new DPlayer({
|
||||
container: document.getElementById('dplayer3'),
|
||||
autoplay: false,
|
||||
theme: '#FADFA3',
|
||||
loop: true,
|
||||
lang: 'zh-cn',
|
||||
screenshot: true,
|
||||
hotkey: true,
|
||||
preload: 'auto',
|
||||
logo: 'https://moeplayer.b0.upaiyun.com/dplayer/DPlayer.png',
|
||||
volume: 0.7,
|
||||
mutex: true,
|
||||
video: {
|
||||
url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4',
|
||||
pic: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.png',
|
||||
thumbnails: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara_thumbnails.jpg',
|
||||
type: 'auto'
|
||||
},
|
||||
subtitle: {
|
||||
url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.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/bilibili?aid=4157142'],
|
||||
user: 'DIYgod',
|
||||
bottom: '15%',
|
||||
unlimited: true
|
||||
},
|
||||
contextmenu: [
|
||||
{
|
||||
text: 'custom1',
|
||||
link: 'https://github.com/DIYgod/DPlayer'
|
||||
},
|
||||
{
|
||||
text: 'custom2',
|
||||
click: (player) => {
|
||||
console.log(player);
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
function dplayer4 () {
|
||||
window.dp4 = new DPlayer({
|
||||
container: document.getElementById('dplayer4'),
|
||||
video: {
|
||||
quality: [{
|
||||
name: 'HD',
|
||||
url: 'https://moeplayer.b0.upaiyun.com/dplayer/hls/hikarunara.m3u8',
|
||||
type: 'hls'
|
||||
}, {
|
||||
name: 'SD',
|
||||
url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4',
|
||||
type: 'normal'
|
||||
}],
|
||||
defaultQuality: 0,
|
||||
pic: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.png',
|
||||
thumbnails: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara_thumbnails.jpg'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function dplayer5 () {
|
||||
window.dp5 = new DPlayer({
|
||||
container: document.getElementById('dplayer5'),
|
||||
video: {
|
||||
url: 'https://moeplayer.b0.upaiyun.com/dplayer/hls/hikarunara.m3u8',
|
||||
type: 'hls'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function dplayer6 () {
|
||||
window.dp6 = new DPlayer({
|
||||
container: document.getElementById('dplayer6'),
|
||||
video: {
|
||||
url: 'https://moeplayer.b0.upaiyun.com/dplayer/dash/hikarunara.mpd',
|
||||
type: 'dash'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function dplayer7 () {
|
||||
window.dp7 = new DPlayer({
|
||||
container: document.getElementById('dplayer7'),
|
||||
video: {
|
||||
url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.flv',
|
||||
type: 'flv'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function dplayer8 () {
|
||||
window.dp8 = new DPlayer({
|
||||
container: document.getElementById('dplayer8'),
|
||||
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'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function dplayer9 () {
|
||||
window.dp9 = new DPlayer({
|
||||
container: document.getElementById('dplayer9'),
|
||||
live: true,
|
||||
danmaku: true,
|
||||
apiBackend: {
|
||||
read: function (endpoint, callback) {
|
||||
console.log('Pretend to connect WebSocket');
|
||||
callback();
|
||||
},
|
||||
send: function (endpoint, danmakuData, callback) {
|
||||
console.log('Pretend to send danamku via WebSocket', danmakuData);
|
||||
callback();
|
||||
}
|
||||
},
|
||||
video: {
|
||||
url: 'https://moeplayer.b0.upaiyun.com/dplayer/hls/hikarunara.m3u8',
|
||||
type: 'hls'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
---
|
||||
search: english
|
||||
---
|
||||
|
||||
# Ecosystem
|
||||
|
||||
Let's make DPlayer better, feel free to submit yours in [`Let me know!`](https://github.com/MoePlayer/DPlayer/issues/31)
|
||||
|
||||
## Help
|
||||
|
||||
### Joining the Discussion
|
||||
|
||||
- [Telegram Group](https://t.me/adplayer)
|
||||
- [QQ Group](https://shang.qq.com/wpa/qunwpa?idkey=bf22213ae0028a82e5adf3f286dfd4f01e0997dc9f1dcd8e831a0a85e799be17): 415835947
|
||||
|
||||
### Creating issue
|
||||
|
||||
- [MoePlayer/DPlayer/issues](https://github.com/MoePlayer/DPlayer/issues)
|
||||
|
||||
## Related Projects
|
||||
|
||||
### Tooling
|
||||
|
||||
- [DPlayer-thumbnails](https://github.com/MoePlayer/DPlayer-thumbnails): generate video thumbnails
|
||||
|
||||
### Danamku api
|
||||
|
||||
- [DPlayer-node](https://github.com/MoePlayer/DPlayer-node): Node.js
|
||||
- [laravel-danmaku](https://github.com/MoePlayer/laravel-danmaku): PHP
|
||||
- [dplayer-live-backend](https://github.com/Izumi-kun/dplayer-live-backend): Node.js, WebSocket live backend
|
||||
- [RailsGun](https://github.com/MoePlayer/RailsGun): Ruby
|
||||
|
||||
### Plugins
|
||||
|
||||
- [DPlayer-for-typecho](https://github.com/volio/DPlayer-for-typecho): Typecho
|
||||
- [Hexo-tag-dplayer](https://github.com/NextMoe/hexo-tag-dplayer): Hexo
|
||||
- [DPlayer_for_Z-BlogPHP](https://github.com/fghrsh/DPlayer_for_Z-BlogPHP): Z-BlogPHP
|
||||
- [DPlayer for Discuz!](https://coding.net/u/Click_04/p/video/git): Discuz!
|
||||
- [DPlayer for WordPress](https://github.com/BlueCocoa/DPlayer-WordPress): WordPress
|
||||
- [DPlayerHandle](https://github.com/kn007/DPlayerHandle): WordPress
|
||||
- [Vue-DPlayer](https://github.com/sinchang/vue-dplayer): Vue
|
||||
- [react-dplayer](https://github.com/hnsylitao/react-dplayer): React
|
||||
|
||||
### Other
|
||||
|
||||
- [DPlayer-Lite](https://github.com/kn007/DPlayer-Lite): lite version
|
||||
|
||||
## Who use DPlayer?
|
||||
|
||||
- [嘀哩嘀哩](http://www.dilidili.wang/)
|
||||
- [银弹字幕组](https://www.sbsub.com/)
|
||||
- [纸飞机南航青年网络社区](http://my.nuaa.edu.cn/video-video.html)
|
||||
- [otomads](https://otomads.com/)
|
||||
|
||||
## Contributors
|
||||
|
||||
This project exists thanks to all the people who contribute.
|
||||
|
||||
<a href="https://github.com/MoePlayer/DPlayer/graphs/contributors"><img src="https://opencollective.com/DPlayer/contributors.svg?width=890" /></a>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
|
||||
<title>DPlayer</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docute/dist/docute.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docute/dist/theme-github.css" />
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-48084758-9"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() { dataLayer.push(arguments); }
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-48084758-9');
|
||||
</script>
|
||||
<link class="dplayer-css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
text-rendering: auto;
|
||||
}
|
||||
#evanyou-canvas {
|
||||
z-index: -1 !important;
|
||||
}
|
||||
.dplayer-wrap {
|
||||
max-width: 700px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- don't remove this part start -->
|
||||
<div id="app"></div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/docute/plugins/docsearch.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/docute-evanyou/dist/evanyou.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/docute/dist/docute.js"></script>
|
||||
<script src="./config.js"></script>
|
||||
<!-- livereload script placeholder -->
|
||||
<!-- don't remove this part end -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<h1>DPlayer</h1>
|
||||
|
||||
<h3>🍭 Wow, such a lovely HTML5 danmaku video player.</h3>
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer1"></div>
|
||||
</div>
|
||||
|
||||
<div class="landing-buttons">
|
||||
<a class="landing-button" target="_blank" href="https://github.com/MoePlayer/DPlayer">
|
||||
GitHub
|
||||
</a>
|
||||
|
||||
<a class="landing-button" router-link="/home">
|
||||
Docs
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
margin: 0;
|
||||
margin-top: -50px;
|
||||
font-weight: normal;
|
||||
font-size: 40px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 20px;
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.landing {
|
||||
padding: 10px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.features {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.landing-button {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 33px;
|
||||
padding: 10px 30px;
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.landing-button:hover {
|
||||
border-color: #42b983;
|
||||
color: #42b983;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dplayer-wrap {
|
||||
max-width: 600px;
|
||||
margin: 20px 0 40px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,648 @@
|
|||
---
|
||||
nav: zh-Hans
|
||||
search: zh-Hans
|
||||
---
|
||||
|
||||
# DPlayer
|
||||
|
||||
🍭 Wow, such a lovely HTML5 danmaku video player
|
||||
|
||||
## 特别赞助商
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://pear.hk/" target="_blank">
|
||||
<img width="222px" src="https://i.imgur.com/5qQYmfc.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
|
||||
<img width="222px" src="https://imgur.com/apG1uKf.png">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Installation
|
||||
|
||||
Using npm:
|
||||
|
||||
```
|
||||
npm install dplayer --save
|
||||
```
|
||||
|
||||
Using Yarn:
|
||||
|
||||
```
|
||||
yarn add dplayer
|
||||
```
|
||||
|
||||
## Quick Start
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer2"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
<div id="dplayer"></div>
|
||||
<script src="DPlayer.min.js"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
const dp = new DPlayer({
|
||||
container: document.getElementById('dplayer'),
|
||||
screenshot: true,
|
||||
video: {
|
||||
url: 'demo.mp4',
|
||||
pic: 'demo.jpg',
|
||||
thumbnails: 'thumbnails.jpg'
|
||||
},
|
||||
subtitle: {
|
||||
url: 'webvtt.vtt'
|
||||
},
|
||||
danmaku: {
|
||||
id: 'demo',
|
||||
api: 'https://api.prprpr.me/dplayer/'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Work with module bundler:
|
||||
|
||||
```js
|
||||
import 'DPlayer/dist/DPlayer.min.css';
|
||||
import DPlayer from 'DPlayer';
|
||||
|
||||
const dp = new DPlayer(options);
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
Name|Default|Note
|
||||
----|-------|----
|
||||
container | document.querySelector('.dplayer') | player container
|
||||
live | false | enable live mode, [see more details](http://dplayer.js.org/docs/#/?id=live-mode)
|
||||
autoplay | false | video autoplay
|
||||
theme | '#b7daff' | main color
|
||||
loop | false | video loop
|
||||
lang | navigator.language.toLowerCase() | values: 'en', 'zh-cn', 'zh-tw'
|
||||
screenshot | false | enable screenshot, if true, video and video poster must enable Cross-Origin
|
||||
hotkey | true | enable hotkey
|
||||
preload | 'auto' | values: 'none', 'metadata', 'auto'
|
||||
volume | 0.7 | default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
|
||||
logo | - | showing logo in the top left corner, you can adjust its size and position by CSS
|
||||
apiBackend | - | getting and sending danmaku in your way, [see more details](http://dplayer.js.org/docs/#/?id=live-mode)
|
||||
video | - | video info
|
||||
video.quality | - | [see more details](http://dplayer.js.org/docs/#/?id=quality-switching)
|
||||
video.defaultQuality | - | [see more details](http://dplayer.js.org/docs/#/?id=quality-switching)
|
||||
video.url | - | video url
|
||||
video.pic | - | video poster
|
||||
video.thumbnails | - | video thumbnails, generated by [DPlayer-thumbnails](https://github.com/MoePlayer/DPlayer-thumbnails)
|
||||
video.type | 'auto' | values: 'auto', 'hls', 'flv', 'dash', 'webtorrent' or custom type, [see more details](http://dplayer.js.org/docs/#/?id=mse-support)
|
||||
video.customType | - | custom video type, [see more details](http://dplayer.js.org/docs/#/?id=mse-support)
|
||||
subtitle | - | external subtitle
|
||||
subtitle.url | `required` | subtitle url
|
||||
subtitle.type | 'webvtt' | values: 'webvtt', 'ass', but only webvtt is supported for now
|
||||
subtitle.fontSize | '20px' | subtitle font size
|
||||
subtitle.bottom | '40px' | values like: '10px' '10%', the distance between the subtitle and player bottom
|
||||
subtitle.color | '#fff' | subtitle color
|
||||
danmaku | - | showing danmaku
|
||||
danmaku.id | `required` | danamku pool id, it must be unique
|
||||
danmaku.api | `required` | [see more details](http://dplayer.js.org/docs/#/?id=back-end)
|
||||
danmaku.token | - | back end verification token
|
||||
danmaku.maximum | - | danmaku maximum quantity
|
||||
danmaku.addition | - | additional danmaku, [see more details](http://dplayer.js.org/docs/#/?id=bilibili-danmaku-and-video-link)
|
||||
danmaku.user | 'DIYgod' | danmaku user name
|
||||
danmaku.bottom | - | values like: '10px' '10%', the distance between the danmaku bottom and player bottom, in order to prevent warding off subtitle
|
||||
danmaku.unlimited | false | allow danmaku overlap, notice that player will remember user setting, default setting will not work after user set it themselves
|
||||
contextmenu | [] | custom contextmenu
|
||||
mutex | true | pause other players when this player start play
|
||||
|
||||
For example:
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer3"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
```js
|
||||
const dp = new DPlayer({
|
||||
container: document.getElementById('player'),
|
||||
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/bilibili?aid=4157142'],
|
||||
user: 'DIYgod',
|
||||
bottom: '15%',
|
||||
unlimited: true
|
||||
},
|
||||
contextmenu: [
|
||||
{
|
||||
text: 'custom1',
|
||||
link: 'https://github.com/DIYgod/DPlayer'
|
||||
},
|
||||
{
|
||||
text: 'custom2',
|
||||
click: (player) => {
|
||||
console.log(player);
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
+ `dp.play()`: play video
|
||||
|
||||
+ `dp.pause()`: pause video
|
||||
|
||||
+ `dp.seek(time: number)`: seek to specified millisecond time
|
||||
|
||||
```js
|
||||
dp.seek(1000);
|
||||
```
|
||||
|
||||
+ `dp.toggle()`: toggle between play and pause
|
||||
|
||||
+ `dp.on(event: string, handler: function)`: bind video and player events, [see more details](http://dplayer.js.org/docs/#/?id=event-binding)
|
||||
|
||||
+ `dp.switchVideo(video, danmaku)`: switch to a new video, the parameters in `video` and `danmaku` is the same as option
|
||||
|
||||
```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)`: show message
|
||||
|
||||
+ `dp.switchQuality(index: number)`: switch quality
|
||||
|
||||
+ `dp.destroy()`: destroy player
|
||||
|
||||
+ `dp.speed(rate: number)`: set video speed
|
||||
|
||||
+ `dp.video`: native video
|
||||
|
||||
+ `dp.video.currentTime`: returns the current playback position
|
||||
|
||||
+ `dp.video.loop`: returns whether the video should start over again when finished
|
||||
|
||||
+ `dp.video.paused`: returns whether the video paused
|
||||
|
||||
+ most [native api](http://www.w3schools.com/tags/ref_av_dom.asp) are supported
|
||||
|
||||
+ `dp.danmaku`
|
||||
|
||||
+ `dp.danmaku.send(danmaku, callback: function)`: submit a new danmaku to back end
|
||||
|
||||
```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)`: draw a new danmaku to player in real time
|
||||
|
||||
```js
|
||||
dp.danmaku.draw({
|
||||
text: 'DIYgod is amazing',
|
||||
color: '#fff',
|
||||
type: 'top'
|
||||
});
|
||||
```
|
||||
|
||||
+ `dp.danmaku.opacity(percentage: number)`: set danmaku opacity, opacity should between 0 and 1
|
||||
|
||||
```js
|
||||
dp.danmaku.opacity(0.5);
|
||||
```
|
||||
|
||||
+ `dp.danmaku.clear()`: clear all danmakus
|
||||
|
||||
+ `dp.danmaku.hide()`: hide danmaku
|
||||
|
||||
+ `dp.danmaku.show()`: show danmaku
|
||||
|
||||
+ `dp.fullScreen`: two type: `web` or `browser`, the default one is `browser`
|
||||
|
||||
+ `dp.fullScreen.request(type: string)`: request fullscreen
|
||||
|
||||
```js
|
||||
dp.fullScreen.request('web');
|
||||
```
|
||||
|
||||
+ `dp.fullScreen.cancel(type: string)`: cancel fullscreen
|
||||
|
||||
```js
|
||||
dp.fullScreen.cancel('web');
|
||||
```
|
||||
|
||||
## Event binding
|
||||
|
||||
`dp.on(event, handler)`
|
||||
|
||||
```js
|
||||
dp.on('ended', function () {
|
||||
console.log('player ended');
|
||||
});
|
||||
```
|
||||
|
||||
Video events
|
||||
|
||||
- abort
|
||||
- canplay
|
||||
- canplaythrough
|
||||
- durationchange
|
||||
- emptied
|
||||
- ended
|
||||
- error
|
||||
- loadeddata
|
||||
- loadedmetadata
|
||||
- loadstart
|
||||
- mozaudioavailable
|
||||
- pause
|
||||
- play
|
||||
- playing
|
||||
- progress
|
||||
- ratechange
|
||||
- seeked
|
||||
- seeking
|
||||
- stalled
|
||||
- suspend
|
||||
- timeupdate
|
||||
- volumechange
|
||||
- waiting
|
||||
|
||||
Player events
|
||||
|
||||
- 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
|
||||
|
||||
## Quality switching
|
||||
|
||||
Set video url and video type in video.quality, set default quality by video.defaultQuality.
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer4"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
```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
|
||||
|
||||
### Danmaku API
|
||||
|
||||
**Ready-made API**
|
||||
|
||||
url: https://api.prprpr.me/dplayer/
|
||||
|
||||
Daily backup data: [DPlayer-data](https://github.com/DIYgod/DPlayer-data)
|
||||
|
||||
**Setting up yourself**
|
||||
|
||||
[DPlayer-node](https://github.com/MoePlayer/DPlayer-node)
|
||||
|
||||
### Bilibili danmaku
|
||||
|
||||
API: [https://api.prprpr.me/dplayer/v2/bilibili?aid=[aid]](https://api.prprpr.me/dplayer/v2/bilibili?aid=[aid]) or [https://api.prprpr.me/dplayer/v2/bilibili?cid=[cid]](https://api.prprpr.me/dplayer/v2/bilibili?cid=[cid])
|
||||
|
||||
```js
|
||||
const option = {
|
||||
danmaku: {
|
||||
// ...
|
||||
addition: ['https://api.prprpr.me/dplayer/v2/bilibili?aid=[aid]']
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## MSE support
|
||||
|
||||
### HLS
|
||||
|
||||
It requires the library [hls.js](https://github.com/video-dev/hls.js) and it should be loaded before `DPlayer.min.js`.
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer5"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
<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'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
```js
|
||||
// another way, use 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
|
||||
|
||||
It requires the library [dash.js](https://github.com/Dash-Industry-Forum/dash.js) and it should be loaded before `DPlayer.min.js`.
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer6"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
<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'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
```js
|
||||
// another way, use 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### FLV
|
||||
|
||||
It requires the library [flv.js](https://github.com/Bilibili/flv.js) and it should be loaded before `DPlayer.min.js`.
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer7"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
<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'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
```js
|
||||
// another way, use 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
|
||||
|
||||
It requires the library [webtorrent](https://github.com/webtorrent/webtorrent) and it should be loaded before `DPlayer.min.js`.
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer8"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
<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'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
```js
|
||||
// another way, use 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');
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Live
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer9"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
You can also regard DPlayer as a live player, at first, you should prepare a WebSocket backend yourself.
|
||||
|
||||
Init DPlayer:
|
||||
|
||||
```js
|
||||
const dp = new DPlayer({
|
||||
container: document.getElementById('dplayer'),
|
||||
live: true,
|
||||
danmaku: true,
|
||||
apiBackend: {
|
||||
read: function (endpoint, callback) {
|
||||
console.log('Pretend to connect WebSocket');
|
||||
callback();
|
||||
},
|
||||
send: function (endpoint, danmakuData, callback) {
|
||||
console.log('Pretend to send danamku via WebSocket', danmakuData);
|
||||
callback();
|
||||
}
|
||||
},
|
||||
video: {
|
||||
url: 'demo.m3u8',
|
||||
type: 'hls'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
After getting a danmaku via WebSocket:
|
||||
|
||||
```js
|
||||
const danmaku = {
|
||||
text: 'Get a danamku via WebSocket',
|
||||
color: '#fff',
|
||||
type: 'right'
|
||||
};
|
||||
dp.danmaku.draw(danmaku);
|
||||
```
|
||||
|
||||
## CDN
|
||||
|
||||
- [jsDelivr](https://www.jsdelivr.com/package/npm/dplayer)
|
||||
- [cdnjs](https://cdnjs.com/libraries/dplayer)
|
||||
- [unpkg](https://unpkg.com/dplayer/)
|
||||
|
||||
## FAQ
|
||||
|
||||
### Why can't some videos be full screen?
|
||||
|
||||
If player is contained in a iframe, try adding the allowfullscreen attribute to the iframe.
|
||||
|
||||
For full browser support it should look like this:
|
||||
|
||||
```html
|
||||
<iframe src="example.com"
|
||||
allowfullscreen="allowfullscreen"
|
||||
mozallowfullscreen="mozallowfullscreen"
|
||||
msallowfullscreen="msallowfullscreen"
|
||||
oallowfullscreen="oallowfullscreen"
|
||||
webkitallowfullscreen="webkitallowfullscreen"></iframe>
|
||||
```
|
||||
|
||||
### Why can't player autoplay in some mobile browsers?
|
||||
|
||||
Most mobile browsers forbid video autoplay, you wont be able to achieve it without hacks.
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
---
|
||||
nav: zh-Hans
|
||||
search: zh-Hans
|
||||
---
|
||||
|
||||
# 生态系统
|
||||
|
||||
Let's make DPlayer better, feel free to submit yours in [`Let me know!`](https://github.com/MoePlayer/DPlayer/issues/31)
|
||||
|
||||
## Help
|
||||
|
||||
### Joining the Discussion
|
||||
|
||||
- [Telegram Group](https://t.me/adplayer)
|
||||
- [QQ Group](https://shang.qq.com/wpa/qunwpa?idkey=bf22213ae0028a82e5adf3f286dfd4f01e0997dc9f1dcd8e831a0a85e799be17): 415835947
|
||||
|
||||
### Creating issue
|
||||
|
||||
- [MoePlayer/DPlayer/issues](https://github.com/MoePlayer/DPlayer/issues)
|
||||
|
||||
## Related Projects
|
||||
|
||||
### Tooling
|
||||
|
||||
- [DPlayer-thumbnails](https://github.com/MoePlayer/DPlayer-thumbnails): generate video thumbnails
|
||||
|
||||
### Danamku api
|
||||
|
||||
- [DPlayer-node](https://github.com/MoePlayer/DPlayer-node): Node.js
|
||||
- [laravel-danmaku](https://github.com/MoePlayer/laravel-danmaku): PHP
|
||||
- [dplayer-live-backend](https://github.com/Izumi-kun/dplayer-live-backend): Node.js, WebSocket live backend
|
||||
- [RailsGun](https://github.com/MoePlayer/RailsGun): Ruby
|
||||
|
||||
### Plugins
|
||||
|
||||
- [DPlayer-for-typecho](https://github.com/volio/DPlayer-for-typecho): Typecho
|
||||
- [Hexo-tag-dplayer](https://github.com/NextMoe/hexo-tag-dplayer): Hexo
|
||||
- [DPlayer_for_Z-BlogPHP](https://github.com/fghrsh/DPlayer_for_Z-BlogPHP): Z-BlogPHP
|
||||
- [DPlayer for Discuz!](https://coding.net/u/Click_04/p/video/git): Discuz!
|
||||
- [DPlayer for WordPress](https://github.com/BlueCocoa/DPlayer-WordPress): WordPress
|
||||
- [DPlayerHandle](https://github.com/kn007/DPlayerHandle): WordPress
|
||||
- [Vue-DPlayer](https://github.com/sinchang/vue-dplayer): Vue
|
||||
- [react-dplayer](https://github.com/hnsylitao/react-dplayer): React
|
||||
|
||||
### Other
|
||||
|
||||
- [DPlayer-Lite](https://github.com/kn007/DPlayer-Lite): lite version
|
||||
|
||||
## Who use DPlayer?
|
||||
|
||||
- [嘀哩嘀哩](http://www.dilidili.wang/)
|
||||
- [银弹字幕组](https://www.sbsub.com/)
|
||||
- [纸飞机南航青年网络社区](http://my.nuaa.edu.cn/video-video.html)
|
||||
- [otomads](https://otomads.com/)
|
||||
|
||||
## Contributors
|
||||
|
||||
This project exists thanks to all the people who contribute.
|
||||
|
||||
<a href="https://github.com/MoePlayer/DPlayer/graphs/contributors"><img src="https://opencollective.com/DPlayer/contributors.svg?width=890" /></a>
|
||||
Loading…
Reference in New Issue