From c6d42c71b58b64fed8a5ce72399539eb0e8f1b15 Mon Sep 17 00:00:00 2001 From: DIYgod Date: Wed, 28 Feb 2018 12:01:14 +0800 Subject: [PATCH] Chinese docs --- docs/README.md | 30 +-- docs/config.js | 413 +++++++++++++++++++------------------- docs/zh-Hans/README.md | 223 ++++++++++---------- docs/zh-Hans/ecosystem.md | 30 +-- 4 files changed, 353 insertions(+), 343 deletions(-) diff --git a/docs/README.md b/docs/README.md index 993e9df..05678a2 100644 --- a/docs/README.md +++ b/docs/README.md @@ -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`.
@@ -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({
-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: diff --git a/docs/config.js b/docs/config.js index 4aeaa47..6ae27d3 100644 --- a/docs/config.js +++ b/docs/config.js @@ -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' + } + }); } \ No newline at end of file diff --git a/docs/zh-Hans/README.md b/docs/zh-Hans/README.md index 4c786b9..ddcdced 100644 --- a/docs/zh-Hans/README.md +++ b/docs/zh-Hans/README.md @@ -1,5 +1,6 @@ --- -search: english +nav: zh-Hans +search: zh-Hans --- # DPlayer @@ -25,24 +26,24 @@ search: english -## Installation +## 安装 -Using npm: +使用 npm: ``` npm install dplayer --save ``` -Using Yarn: +使用 Yarn: ``` yarn add dplayer ``` -## Quick Start +## 入门
-
+
```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: +例如:
-
+
```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` 设置默认清晰度
-
+
```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)。
-
+
```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)。
-
+
```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)。
-
+
```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)。
-
+
```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 +## 直播
-
+
-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 ``` -### Why can't player autoplay in some mobile browsers? +### 为什么播放器不能在手机上自动播放? -Most mobile browsers forbid video autoplay, you wont be able to achieve it without hacks. \ No newline at end of file +大多数移动端浏览器禁止了视频自动播放。 \ No newline at end of file diff --git a/docs/zh-Hans/ecosystem.md b/docs/zh-Hans/ecosystem.md index 0875ebc..c4cd364 100644 --- a/docs/zh-Hans/ecosystem.md +++ b/docs/zh-Hans/ecosystem.md @@ -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. +感谢所有贡献者。 \ No newline at end of file