diff --git a/docs/README.md b/docs/README.md index 5bf7c3f..33c92ea 100644 --- a/docs/README.md +++ b/docs/README.md @@ -91,7 +91,7 @@ video.defaultQuality | - | [see more details](http://dplayer.js.org/#/home?id=qu 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.type | 'auto' | values: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' or other 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 @@ -174,10 +174,10 @@ const dp = new DPlayer({ + `dp.pause()`: pause video -+ `dp.seek(time: number)`: seek to specified millisecond time ++ `dp.seek(time: number)`: seek to specified time ```js - dp.seek(1000); + dp.seek(100); ``` + `dp.toggle()`: toggle between play and pause @@ -199,7 +199,11 @@ const dp = new DPlayer({ }); ``` -+ `dp.notice(text: string, time: number)`: show message ++ `dp.notice(text: string, time: number, opacity: number)`: show message, the unit of time is millisecond, the default of time is 2000, the default of opacity is 0.8 + + ```js + dp.notice('Amazing player', 2000, 0.8); + ``` + `dp.switchQuality(index: number)`: switch quality @@ -207,11 +211,17 @@ const dp = new DPlayer({ + `dp.speed(rate: number)`: set video speed ++ `dp.volume(percentage: number, nostorage: boolean, nonotice: boolean)`: set video volume + + ```js + dp.volume(0.1, true, false); + ``` + + `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.duration`: returns video total time + `dp.video.paused`: returns whether the video paused @@ -570,6 +580,39 @@ const dp = new DPlayer({ }); ``` +### Work with other HLS library + +DPlayer can work with any HLS library via `customType` option. + +
+
+
+ +```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 + }); + } + } + } +}); +``` + ## Live
diff --git a/docs/config.js b/docs/config.js index 723a221..dcad8c4 100644 --- a/docs/config.js +++ b/docs/config.js @@ -71,7 +71,7 @@ function player () { } function clearPlayer () { - for (let i = 1; i < 10; i++) { + for (let i = 0; i < 10; i++) { if (window['dp' + (i + 1)]) { window['dp' + (i + 1)].destroy(); } @@ -247,4 +247,22 @@ function dplayer9 () { type: 'hls' } }); +} + +function dplayer10 () { + window.dp9 = new DPlayer({ + container: document.getElementById('dplayer10'), + 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 + }); + } + } + } + }); } \ No newline at end of file diff --git a/docs/zh-Hans/README.md b/docs/zh-Hans/README.md index 2f9b375..7993497 100644 --- a/docs/zh-Hans/README.md +++ b/docs/zh-Hans/README.md @@ -82,7 +82,7 @@ loop | false | 视频循环播放 lang | navigator.language.toLowerCase() | 可选值: 'en', 'zh-cn', 'zh-tw' screenshot | false | 开启截图，如果开启，视频和视频封面需要开启跨域 hotkey | true | 开启热键 -preload | 'auto' | 可选值: 'none', 'metadata', 'auto' +preload | 'auto' | 预加载，可选值: 'none', 'metadata', 'auto' volume | 0.7 | 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效 logo | - | 在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置 apiBackend | - | 自定义获取和发送弹幕行为，[详情](http://dplayer.js.org/#/home?id=live) @@ -92,7 +92,7 @@ video.defaultQuality | - | [详情](http://dplayer.js.org/#/home?id=quality-swit 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.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` | 字幕链接 @@ -178,7 +178,7 @@ const dp = new DPlayer({ + `dp.seek(time: number)`: 跳转到特定时间 ```js - dp.seek(1000); + dp.seek(100); ``` + `dp.toggle()`: 切换播放和暂停 @@ -200,7 +200,7 @@ const dp = new DPlayer({ }); ``` -+ `dp.notice(text: string, time: number)`: 显示消息 ++ `dp.notice(text: string, time: number)`: 显示通知，时间的单位为毫秒，默认时间2000毫秒，默认透明度0.8 + `dp.switchQuality(index: number)`: 切换清晰度 @@ -208,11 +208,17 @@ const dp = new DPlayer({ + `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.loop`: 返回视频是否循环播放 + + `dp.video.duration`: 返回视频总时间 + `dp.video.paused`: 返回视频是否暂停 @@ -571,6 +577,38 @@ const dp = new DPlayer({ }); ``` +### Work with other HLS library + +DPlayer 可以与任何 HLS 库一起使用 + +
+
+
+ +```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 + }); + } + } + } +}); + ## 直播