mirror of
https://github.com/DIYgod/DPlayer
synced 2024-11-22 18:56:54 +00:00
docs
This commit is contained in:
DIYgod
parent
415d9ce808
commit
6b5dd86909
@ -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.
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer10"><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="pearplayer.js"></script>
|
||||
<script src="DPlayer.min.js"></script>
|
||||
```
|
||||
|
||||
```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
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
|
||||
@ -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
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -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 库一起使用
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer10"><button class="docute-button load">点击加载播放器</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
<div id="dplayer"></div>
|
||||
<script src="pearplayer.js"></script>
|
||||
<script src="DPlayer.min.js"></script>
|
||||
```
|
||||
|
||||
```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
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
## 直播
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user