文件列表:

.eslintrc (1640, 2018-10-30)
.travis.yml (120, 2018-10-30)
LICENSE (1121, 2018-10-30)
demo (0, 2018-10-30)
demo\demo.css (4288, 2018-10-30)
demo\demo.js (9475, 2018-10-30)
demo\index.html (3098, 2018-10-30)
demo\modernizr.js (40102, 2018-10-30)
dist (0, 2018-10-30)
dist\DPlayer.min.css (45249, 2018-10-30)
dist\DPlayer.min.css.map (73069, 2018-10-30)
dist\DPlayer.min.js (116780, 2018-10-30)
dist\DPlayer.min.js.map (318643, 2018-10-30)
docs (0, 2018-10-30)
docs\.nojekyll (0, 2018-10-30)
docs\CNAME (14, 2018-10-30)
docs\config.js (9284, 2018-10-30)
docs\ecosystem.md (2681, 2018-10-30)
docs\index.html (1961, 2018-10-30)
docs\landing.html (1888, 2018-10-30)
docs\support.md (1894, 2018-10-30)
docs\zh-Hans (0, 2018-10-30)
docs\zh-Hans\ecosystem.md (2462, 2018-10-30)
docs\zh-Hans\support.md (1816, 2018-10-30)
package.json (1811, 2018-10-30)
src (0, 2018-10-30)
src\assets (0, 2018-10-30)
src\assets\camera.svg (703, 2018-10-30)
src\assets\comment-off.svg (536, 2018-10-30)
src\assets\comment.svg (918, 2018-10-30)
src\assets\full-web.svg (1098, 2018-10-30)
src\assets\full.svg (789, 2018-10-30)
src\assets\loading.svg (1114, 2018-10-30)
... ...

--- nav: zh-Hans search: zh-Hans --- # DPlayer Wow, such a lovely HTML5 danmaku video player ## ‰è ## ‰è… ”¨ npm: ``` npm install dplayer --save ``` ”¨ Yarn: ``` yarn add dplayer ``` ## …é—¨ ```html ``` ```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/' } }); ``` ”¨¨—¨: ```js import 'DPlayer/dist/DPlayer.min.css'; import DPlayer from 'DPlayer'; const dp = new DPlayer(options); ``` ## ° §° | éè¤ | è° ----|-------|---- 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', 'normal' –…–艱, [è…](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 | [] | è‰é”è highlight | [] | è‰è¤ mutex | true | ’–餒”¨—’”“‰’”¨’”—…–’”¨ : ```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/v3/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); } } ], highlight: [ { time: 20, text: 'è 20 §’' }, { time: 120, text: 'è 2 é’' } ] }); ``` ## API + `dp.play()`: ’”è§é‘ + `dp.pause()`: è§é‘ + `dp.seek(time: number)`: è·è°‰—é— ```js dp.seek(100); ``` + `dp.toggle()`: ’”’ + `dp.on(event: string, handler: function)`: ‘è§é‘’’”¨[è…](http://dplayer.js.org/#/home?id=event-binding) + `dp.switchVideo(video, danmaku)`: °…–è§é‘ ```js dp.switchVideo({ url: 'second.mp4', pic: 'second.png', thumbnails: 'second.jpg' }, { id: 'test', api: 'https://api.prprpr.me/dplayer/', maximum: 3000, user: 'DIYgod' }); ``` + `dp.notice(text: string, time: number)`: ¤é—é—§’é褗é—2000§’éè¤é0.8 + `dp.switchQuality(index: number)`: …° + `dp.destroy()`: é”’”¨ + `dp.speed(rate: number)`: èè§é‘é + `dp.volume(percentage: number, nostorage: boolean, nonotice: boolean)`: èè§é‘éé ```js dp.volume(0.1, true, false); ``` + `dp.video`: ” video + `dp.video.currentTime`: è”è§é‘“‰’”—é— + `dp.video.duration`: è”è§é‘—é— + `dp.video.paused`: è”è§é‘ + ”¤§¤°[”video](http://www.w3schools.com/tags/ref_av_dom.asp) + `dp.danmaku` + `dp.danmaku.send(danmaku, callback: function)`: ¤–° ```js dp.danmaku.send({ text: 'dplayer is amazing', color: '#b7daff', type: 'right' // should be `top` `bottom` or `right` }, function () { console.log('success'); }); ``` + `dp.danmaku.draw(danmaku)`: —–° ```js dp.danmaku.draw({ text: 'DIYgod is amazing', color: '#fff', type: 'top' }); ``` + `dp.danmaku.opacity(percentage: number)`: èéé¨ 0 ° 1 é— ```js dp.danmaku.opacity(0.5); ``` + `dp.danmaku.clear()`: …餉‰ + `dp.danmaku.hide()`: éè— + `dp.danmaku.show()`: ¤ + `dp.fullScreen`: ¤±`web` ’ `browser`é褱 `browser` + `dp.fullScreen.request(type: string)`: è……¨± ```js dp.fullScreen.request('web'); ``` + `dp.fullScreen.cancel(type: string)`: é…¨± ```js dp.fullScreen.cancel('web'); ``` ## ‘ `dp.on(event, handler)` ```js dp.on('ended', function () { console.log('player ended'); }); ``` è§é‘ - abort - canplay - canplaythrough - durationchange - emptied - ended - error - loadeddata - loadedmetadata - loadstart - mozaudioavailable - pause - play - playing - progress - ratechange - seeked - seeking - stalled - suspend - timeupdate - volumechange - waiting ’”¨ - screenshot - thumbnails_show - thumbnails_hide - danmaku_show - danmaku_hide - danmaku_clear - danmaku_loaded - danmaku_send - danmaku_opacity - contextmenu_show - contextmenu_hide - notice_show - notice_hide - quality_start - quality_end - destroy - resize - fullscreen - fullscreen_cancel - subtitle_show - subtitle_hide - subtitle_change ## …° ¨ `video.quality` éè…°è§é‘é“’±`video.defaultQuality` èé褅° ```js const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { quality: [{ name: 'HD', url: 'demo.m3u8', type: 'hls' }, { name: 'SD', url: 'demo.mp4', type: 'normal' }], defaultQuality: 0, pic: 'demo.png', thumbnails: 'thumbnails.jpg', } }); ``` ## ### `danmaku.api` **°** é“: https://api.prprpr.me/dplayer/ —¤: [DPlayer-data](https://github.com/DIYgod/DPlayer-data) **è·±** [DPlayer-node](https://github.com/MoePlayer/DPlayer-node) ### bilibili `danmaku.addition` API: ```js const option = { danmaku: { // ... addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=[aid]'] } } ``` ## MSE ” ### HLS éè¨ `DPlayer.min.js` ‰éè [hls.js](https://github.com/video-dev/hls.js)

è’”¨

```html

``` ```js const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'demo.m3u8', type: 'hls' } }); ``` ```js // §–”¨ customType const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'demo.m3u8', type: 'customHls', customType: { 'customHls': function (video, player) { const hls = new Hls(); hls.loadSource(video.src); hls.attachMedia(video); } } } }); ``` ### MPEG DASH éè¨ `DPlayer.min.js` ‰éè [dash.js](https://github.com/Dash-Industry-Forum/dash.js)

è’”¨

```html

``` ```js const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'demo.mpd', type: 'dash' } }); ``` ```js // §–”¨ customType const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'demo.mpd', type: 'customDash', customType: { 'customDash': function (video, player) { dashjs.MediaPlayer().create().initialize(video, video.src, false); } } } }); ``` ### FLV éè¨ `DPlayer.min.js` ‰éè [flv.js](https://github.com/Bilibili/flv.js)

è’”¨

```html

``` ```js const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'demo.flv', type: 'flv' } }); ``` ```js // §–”¨ customType const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'demo.flv', type: 'customFlv', customType: { 'customFlv': function (video, player) { const flvPlayer = flvjs.createPlayer({ type: 'flv', url: video.src }); flvPlayer.attachMediaElement(video); flvPlayer.load(); } } } }); ``` ### WebTorrent éè¨ `DPlayer.min.js` ‰éè [webtorrent](https://github.com/webtorrent/webtorrent)

è’”¨

```html

``` ```js const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'magnet:demo', type: 'webtorrent' } }); ``` ```js // §–”¨ customType const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'magnet:demo', type: 'customWebTorrent', customType: { 'customWebTorrent': function (video, player) { player.container.classList.add('dplayer-loading'); const client = new WebTorrent(); const torrentId = video.src; client.add(torrentId, (torrent) => { const file = torrent.files.find((file) => file.name.endsWith('.mp4')); file.renderTo(video, { autoplay: player.options.autoplay }, () => { player.container.classList.remove('dplayer-loading'); }); }); } } } }); ``` ### é……– MSE “”¨ DPlayer éè `customType` ° MSE “è·”¨

è’”¨

```html

``` ```js const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'https://qq.webrtc.win/tv/Pear-Demo-Yosemite_National_Park.mp4', type: 'pearplayer', customType: { 'pearplayer': function (video, player) { new PearPlayer(video, { src: video.src, autoplay: player.options.autoplay }); } } } }); ``` ## ’

è’”¨

DPlayer ”¨¨’“è’éèè·±¤ WebSocket §–’”¨: ```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' } }); ``` éè WebSocket è·–°éè `dp.danmaku.draw` : ```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/) ## è§é—é ### ’”¨è…¨± ’”¨è…¨ iframe é°è¨ iframe · `allowfullscreen` ±§ –觨…§”èè· ```html ``` ### ’”¨è¨‰è¨’” ¤§¤°§¨è§¨è§é‘訒”

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：