xiaoxue_admin
/
DPlayer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chinese docs

This commit is contained in:
DIYgod 2018-02-28 12:01:14 +08:00
parent b3a595943f
commit c6d42c71b5
No known key found for this signature in database
GPG Key ID: EC0B76A252D3EF67
4 changed files with 353 additions and 343 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
docs/README.md
View File

@ -81,7 +81,7 @@ const dp = new DPlayer(options);
## Options
Name|Default|Note
Name | Default | Description
----|-------|----
container | document.querySelector('.dplayer') | player container
live | false | enable live mode, [see more details](http://dplayer.js.org/#/home?id=live)
@ -105,9 +105,9 @@ video.type | 'auto' | values: 'auto', 'hls', 'flv', 'dash', 'webtorrent' or cust
video.customType | - | custom video type, [see more details](http://dplayer.js.org/#/home?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.type | 'webvtt' | subtitle type, 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.bottom | '40px' | the distance between the subtitle and player bottom, values like: '10px' '10%'
subtitle.color | '#fff' | subtitle color
danmaku | - | showing danmaku
danmaku.id | `required` | danamku pool id, it must be unique
@ -117,9 +117,9 @@ danmaku.maximum | - | danmaku maximum quantity
danmaku.addition | - | additional danmaku, [see more details](http://dplayer.js.org/#/home?id=bilibili-danmaku)
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
danmaku.unlimited | false | display all danmaku even though 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
mutex | true | prevent to play multiple player at the same time, pause other players when this player start play
For example:
@ -194,7 +194,7 @@ const dp = new DPlayer({
+ `dp.on(event: string, handler: function)`: bind video and player events, [see more details](http://dplayer.js.org/#/home?id=event-binding)
+ `dp.switchVideo(video, danmaku)`: switch to a new video, the parameters in `video` and `danmaku` is the same as option
+ `dp.switchVideo(video, danmaku)`: switch to a new video
```js
dp.switchVideo({
@ -340,7 +340,7 @@ Player events
## Quality switching
Set video url and video type in video.quality, set default quality by video.defaultQuality.
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>
@ -370,6 +370,8 @@ const dp = new DPlayer({
### Danmaku API
`danmaku.api`
**Ready-made API**
url: https://api.prprpr.me/dplayer/
@ -380,7 +382,9 @@ Daily backup data: [DPlayer-data](https://github.com/DIYgod/DPlayer-data)
[DPlayer-node](https://github.com/MoePlayer/DPlayer-node)
### Bilibili danmaku
### bilibili danmaku
`danmaku.addition`
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])
@ -582,9 +586,9 @@ const dp = new DPlayer({
<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.
You can use DPlayer in live, but if you want live danmaku, you should prepare a WebSocket backend yourself.
Init DPlayer:
Init player:
```js
const dp = new DPlayer({
@ -608,7 +612,7 @@ const dp = new DPlayer({
});
```
After getting a danmaku via WebSocket:
Draw danmaku after getting a danmaku via WebSocket:
```js
const danmaku = {
@ -627,9 +631,9 @@ dp.danmaku.draw(danmaku);
## FAQ
### Why can't some videos be full screen?
### Why can't player be full screen?
If player is contained in a iframe, try adding the allowfullscreen attribute to the iframe.
If player is contained in a iframe, try adding the `allowfullscreen` attribute to the iframe.
For full browser support it should look like this:

413
docs/config.js
View File

@ -1,243 +1,244 @@
const langs = [
{ title: 'English', path: '/home', matchPath: /^\/(home|ecosystem)/ },
{ title: '简体中文', path: '/zh-Hans/', matchPath: /^\/zh-Hans/ },
]
{ 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()
]
})
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',
tags: ['english', 'zh-Hans'],
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 player () {
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 (let 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();
for (let 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/'
}
});
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/'
}
});
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);
}
}
]
});
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'
}
});
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'
}
});
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'
}
});
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'
}
});
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'
}
});
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'
}
});
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'
}
});
}

223
docs/zh-Hans/README.md
View File

@ -1,5 +1,6 @@
---
search: english
nav: zh-Hans
search: zh-Hans
---
# DPlayer
@ -25,24 +26,24 @@ search: english
</tbody>
</table>
## Installation
## 安装
Using npm:
使用 npm:
```
npm install dplayer --save
```
Using Yarn:
使用 Yarn:
```
yarn add dplayer
```
## Quick Start
## 入门
<div class="dplayer-wrap">
<div id="dplayer2"><button class="docute-button load">Click to load player</div>
<div id="dplayer2"><button class="docute-button load">点击加载播放器</div>
</div>
```html
@ -70,7 +71,7 @@ const dp = new DPlayer({
});
```
Work with module bundler:
使用模块管理器:
```js
import 'DPlayer/dist/DPlayer.min.css';
@ -79,52 +80,52 @@ 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/#/home?id=live)
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/#/home?id=live)
video | - | video info
video.quality | - | [see more details](http://dplayer.js.org/#/home?id=quality-switching)
video.defaultQuality | - | [see more details](http://dplayer.js.org/#/home?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/#/home?id=mse-support)
video.customType | - | custom video type, [see more details](http://dplayer.js.org/#/home?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/#/home?id=danmaku-api)
danmaku.token | - | back end verification token
danmaku.maximum | - | danmaku maximum quantity
danmaku.addition | - | additional danmaku, [see more details](http://dplayer.js.org/#/home?id=bilibili-danmaku)
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
container | document.querySelector('.dplayer') | 播放器容器元素
live | false | 开启直播模式, [详情](http://dplayer.js.org/#/home?id=live)
autoplay | false | 视频自动播放
theme | '#b7daff' | 主题色
loop | false | 视频循环播放
lang | navigator.language.toLowerCase() | 可选值: 'en', 'zh-cn', 'zh-tw'
screenshot | false | 开启截图，如果开启，视频和视频封面需要开启跨域
hotkey | true | 开启热键
preload | 'auto' | 可选值: 'none', 'metadata', 'auto'
volume | 0.7 | 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
logo | - | 在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
apiBackend | - | 自定义获取和发送弹幕行为，[详情](http://dplayer.js.org/#/home?id=live)
video | - | 视频信息
video.quality | - | [详情](http://dplayer.js.org/#/home?id=quality-switching)
video.defaultQuality | - | [详情](http://dplayer.js.org/#/home?id=quality-switching)
video.url | - | 视频链接
video.pic | - | 视频封面
video.thumbnails | - | 视频缩略图，可以使用 [DPlayer-thumbnails](https://github.com/MoePlayer/DPlayer-thumbnails) 生成
video.type | 'auto' | 可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent' 或其他自定义类型, [详情](http://dplayer.js.org/#/home?id=mse-support)
video.customType | - | 自定义类型, [详情](http://dplayer.js.org/#/home?id=mse-support)
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` | [详情](http://dplayer.js.org/#/home?id=danmaku-api)
danmaku.token | - | 弹幕后端验证 token
danmaku.maximum | - | 弹幕最大数量
danmaku.addition | - | 额外外挂弹幕，[详情](http://dplayer.js.org/#/home?id=bilibili-danmaku)
danmaku.user | 'DIYgod' | 弹幕用户名
danmaku.bottom | - | 弹幕距离播放器底部的距离，防止遮挡字幕，取值形如: '10px' '10%'
danmaku.unlimited | false | 海量弹幕模式，即使重叠也展示全部弹幕，请注意播放器会记忆用户设置，用户手动设置后即失效
contextmenu | [] | 自定义右键菜单
mutex | true | 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
For example:
例如:
<div class="dplayer-wrap">
<div id="dplayer3"><button class="docute-button load">Click to load player</div>
<div id="dplayer3"><button class="docute-button load">点击加载播放器</div>
</div>
```js
@ -180,21 +181,21 @@ const dp = new DPlayer({
## API
+ `dp.play()`: play video
+ `dp.play()`: 播放视频
+ `dp.pause()`: pause video
+ `dp.pause()`: 暂停视频
+ `dp.seek(time: number)`: seek to specified millisecond time
+ `dp.seek(time: number)`: 跳转到特定事件
```js
dp.seek(1000);
```
+ `dp.toggle()`: toggle between play and pause
+ `dp.toggle()`: 切换播放和暂停
+ `dp.on(event: string, handler: function)`: bind video and player events, [see more details](http://dplayer.js.org/#/home?id=event-binding)
+ `dp.on(event: string, handler: function)`: 绑定视频和播放器事件，[详情](http://dplayer.js.org/#/home?id=event-binding)
+ `dp.switchVideo(video, danmaku)`: switch to a new video, the parameters in `video` and `danmaku` is the same as option
+ `dp.switchVideo(video, danmaku)`: 切换到其他视频
```js
dp.switchVideo({
@ -209,27 +210,27 @@ const dp = new DPlayer({
});
```
+ `dp.notice(text: string, time: number)`: show message
+ `dp.notice(text: string, time: number)`: 显示消息
+ `dp.switchQuality(index: number)`: switch quality
+ `dp.switchQuality(index: number)`: 切换清晰度
+ `dp.destroy()`: destroy player
+ `dp.destroy()`: 销毁播放器
+ `dp.speed(rate: number)`: set video speed
+ `dp.speed(rate: number)`: 设置视频速度
+ `dp.video`: native video
+ `dp.video`: 原生 video
+ `dp.video.currentTime`: returns the current playback position
+ `dp.video.currentTime`: 返回视频当前播放时间
+ `dp.video.loop`: returns whether the video should start over again when finished
+ `dp.video.loop`: 返回视频是否循环播放
+ `dp.video.paused`: returns whether the video paused
+ `dp.video.paused`: 返回视频是否暂停
+ most [native api](http://www.w3schools.com/tags/ref_av_dom.asp) are supported
+ 支持大多数[原生video接口](http://www.w3schools.com/tags/ref_av_dom.asp)
+ `dp.danmaku`
+ `dp.danmaku.send(danmaku, callback: function)`: submit a new danmaku to back end
+ `dp.danmaku.send(danmaku, callback: function)`: 提交一个新弹幕
```js
dp.danmaku.send({
@ -241,7 +242,7 @@ const dp = new DPlayer({
});
```
+ `dp.danmaku.draw(danmaku)`: draw a new danmaku to player in real time
+ `dp.danmaku.draw(danmaku)`: 实时绘制一个新弹幕
```js
dp.danmaku.draw({
@ -251,33 +252,33 @@ const dp = new DPlayer({
});
```
+ `dp.danmaku.opacity(percentage: number)`: set danmaku opacity, opacity should between 0 and 1
+ `dp.danmaku.opacity(percentage: number)`: 设置弹幕透明度，透明度值在 0 到 1 之间
```js
dp.danmaku.opacity(0.5);
```
+ `dp.danmaku.clear()`: clear all danmakus
+ `dp.danmaku.clear()`: 清除所有弹幕
+ `dp.danmaku.hide()`: hide danmaku
+ `dp.danmaku.hide()`: 隐藏弹幕
+ `dp.danmaku.show()`: show danmaku
+ `dp.danmaku.show()`: 显示弹幕
+ `dp.fullScreen`: two type: `web` or `browser`, the default one is `browser`
+ `dp.fullScreen`: 两个类型：`web` 和 `browser`，默认类型是 `browser`
+ `dp.fullScreen.request(type: string)`: request fullscreen
+ `dp.fullScreen.request(type: string)`: 进入全屏
```js
dp.fullScreen.request('web');
```
+ `dp.fullScreen.cancel(type: string)`: cancel fullscreen
+ `dp.fullScreen.cancel(type: string)`: 退出全屏
```js
dp.fullScreen.cancel('web');
```
## Event binding
## 事件绑定
`dp.on(event, handler)`
@ -287,7 +288,7 @@ dp.on('ended', function () {
});
```
Video events
视频事件
- abort
- canplay
@ -313,7 +314,7 @@ Video events
- volumechange
- waiting
Player events
播放器事件
- screenshot
- thumbnails_show
@ -338,12 +339,12 @@ Player events
- subtitle_hide
- subtitle_change
## Quality switching
## 清晰度切换
Set video url and video type in video.quality, set default quality by video.defaultQuality.
在 `video.quality` 里设置不同清晰度的视频链接和类型，`video.defaultQuality` 设置默认清晰度
<div class="dplayer-wrap">
<div id="dplayer4"><button class="docute-button load">Click to load player</div>
<div id="dplayer4"><button class="docute-button load">点击加载播放器</div>
</div>
```js
@ -366,21 +367,25 @@ const dp = new DPlayer({
});
```
## Danmaku
## 弹幕
### Danmaku API
### 弹幕接口
**Ready-made API**
`danmaku.api`
url: https://api.prprpr.me/dplayer/
**现成的接口**
Daily backup data: [DPlayer-data](https://github.com/DIYgod/DPlayer-data)
链接: https://api.prprpr.me/dplayer/
**Setting up yourself**
每日备份: [DPlayer-data](https://github.com/DIYgod/DPlayer-data)
**自己搭建**
[DPlayer-node](https://github.com/MoePlayer/DPlayer-node)
### Bilibili danmaku
### bilibili 弹幕
`danmaku.addition`
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])
@ -393,14 +398,14 @@ const option = {
}
```
## MSE support
## MSE 支持
### HLS
It requires the library [hls.js](https://github.com/video-dev/hls.js) and it should be loaded before `DPlayer.min.js`.
需要在 `DPlayer.min.js` 前面加载 [hls.js](https://github.com/video-dev/hls.js)。
<div class="dplayer-wrap">
<div id="dplayer5"><button class="docute-button load">Click to load player</div>
<div id="dplayer5"><button class="docute-button load">点击加载播放器</div>
</div>
```html
@ -421,7 +426,7 @@ const dp = new DPlayer({
```
```js
// another way, use customType
// 另一种方式，使用 customType
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
@ -440,10 +445,10 @@ const dp = new DPlayer({
### 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`.
需要在 `DPlayer.min.js` 前面加载 [dash.js](https://github.com/Dash-Industry-Forum/dash.js)。
<div class="dplayer-wrap">
<div id="dplayer6"><button class="docute-button load">Click to load player</div>
<div id="dplayer6"><button class="docute-button load">点击加载播放器</div>
</div>
```html
@ -464,7 +469,7 @@ const dp = new DPlayer({
```
```js
// another way, use customType
// 另一种方式，使用 customType
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
@ -481,10 +486,10 @@ const dp = new DPlayer({
### FLV
It requires the library [flv.js](https://github.com/Bilibili/flv.js) and it should be loaded before `DPlayer.min.js`.
需要在 `DPlayer.min.js` 前面加载 [flv.js](https://github.com/Bilibili/flv.js)。
<div class="dplayer-wrap">
<div id="dplayer7"><button class="docute-button load">Click to load player</div>
<div id="dplayer7"><button class="docute-button load">点击加载播放器</div>
</div>
```html
@ -505,7 +510,7 @@ const dp = new DPlayer({
```
```js
// another way, use customType
// 另一种方式，使用 customType
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
@ -527,10 +532,10 @@ const dp = new DPlayer({
### WebTorrent
It requires the library [webtorrent](https://github.com/webtorrent/webtorrent) and it should be loaded before `DPlayer.min.js`.
需要在 `DPlayer.min.js` 前面加载 [webtorrent](https://github.com/webtorrent/webtorrent)。
<div class="dplayer-wrap">
<div id="dplayer8"><button class="docute-button load">Click to load player</div>
<div id="dplayer8"><button class="docute-button load">点击加载播放器</div>
</div>
```html
@ -551,7 +556,7 @@ const dp = new DPlayer({
```
```js
// another way, use customType
// 另一种方式，使用 customType
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
@ -576,15 +581,15 @@ const dp = new DPlayer({
});
```
## Live
## 直播
<div class="dplayer-wrap">
<div id="dplayer9"><button class="docute-button load">Click to load player</div>
<div id="dplayer9"><button class="docute-button load">点击加载播放器</div>
</div>
You can also regard DPlayer as a live player, at first, you should prepare a WebSocket backend yourself.
你可以把 DPlayer 用在直播当中，但如果你想要直播弹幕，你需要自己准备一个 WebSocket 后端。
Init DPlayer:
初始化播放器:
```js
const dp = new DPlayer({
@ -608,7 +613,7 @@ const dp = new DPlayer({
});
```
After getting a danmaku via WebSocket:
通过 WebSocket 获取到弹幕之后，通过 `dp.danmaku.draw` 绘制弹幕:
```js
const danmaku = {
@ -625,13 +630,13 @@ dp.danmaku.draw(danmaku);
- [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.
如果播放器被包含在 iframe 里，尝试在 iframe 上添加 `allowfullscreen` 属性。
For full browser support it should look like this:
为了完善的浏览器兼容性，它应该是这样：
```html
<iframe src="example.com"
@ -642,6 +647,6 @@ For full browser support it should look like this:
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.
大多数移动端浏览器禁止了视频自动播放。

30
docs/zh-Hans/ecosystem.md
View File

@ -3,35 +3,35 @@ 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)
让 DPlayer 变得更好，请随意在 [`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
- [Telegram 群](https://t.me/adplayer)
- [QQ 群](https://shang.qq.com/wpa/qunwpa?idkey=bf22213ae0028a82e5adf3f286dfd4f01e0997dc9f1dcd8e831a0a85e799be17): 415835947
### Creating issue
### 提交 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
@ -42,19 +42,19 @@ Let's make DPlayer better, feel free to submit yours in [`Let me know!`](https:/
- [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?
## 谁在用 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>