docs: move to vuepress
This commit is contained in:
DIYgod
parent
4adab30fcb
commit
084ab53008
|
|
@ -1,8 +1,10 @@
|
|||
.idea
|
||||
node_modules
|
||||
demo2
|
||||
docs2
|
||||
npm-debug.log
|
||||
DPlayer.log*
|
||||
wxw
|
||||
.vscode
|
||||
package-lock.json
|
||||
package-lock.json
|
||||
docs/.vuepress/dist
|
||||
19
.travis.yml
19
.travis.yml
|
|
@ -1,12 +1,13 @@
|
|||
language: node_js
|
||||
|
||||
node_js:
|
||||
- "node"
|
||||
|
||||
cache:
|
||||
yarn: true
|
||||
directories:
|
||||
- node_modules
|
||||
|
||||
- lts/*
|
||||
script:
|
||||
yarn run build
|
||||
- npm run docs:build
|
||||
deploy:
|
||||
provider: pages
|
||||
skip-cleanup: true
|
||||
local_dir: docs/.vuepress/dist
|
||||
github-token: $GITHUB_TOKEN # a token generated on github allowing travis to push code on you repository
|
||||
keep-history: true
|
||||
on:
|
||||
branch: master
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<div class="dplayer-wrap">
|
||||
<div class="dplayer" ref="dplayer"><button class="load" v-on:click="load">Load demo</button></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import DPlayer from 'dplayer';
|
||||
import 'dplayer/dist/DPlayer.min.css';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
immediate: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
autoplay: false,
|
||||
theme: '#FADFA3',
|
||||
loop: true,
|
||||
lang: 'zh-cn',
|
||||
hotkey: true,
|
||||
preload: 'auto',
|
||||
logo: 'https://i.loli.net/2019/06/06/5cf8c5d94521136430.png',
|
||||
volume: 0.7,
|
||||
mutex: true,
|
||||
screenshot: true,
|
||||
subtitle: {
|
||||
url: 'https://cn-south-17-dplayer-49648867.oss.dogecdn.com/hikarunara.vtt',
|
||||
type: 'webvtt',
|
||||
fontSize: '20px',
|
||||
bottom: '10%',
|
||||
color: '#FADFA3'
|
||||
},
|
||||
video: {
|
||||
url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
|
||||
pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
|
||||
thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg',
|
||||
type: 'auto'
|
||||
},
|
||||
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 分钟'
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
load: function () {
|
||||
this.options.container = this.$refs.dplayer;
|
||||
this.dplayer = new DPlayer(this.options);
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
if (this.immediate) {
|
||||
this.dplayer = new DPlayer(this.options);
|
||||
}
|
||||
},
|
||||
beforeDestroy: function () {
|
||||
this.dplayer.destroy();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
'@vuepress/google-analytics': {
|
||||
ga: 'UA-48084758-9',
|
||||
},
|
||||
'@vuepress/pwa': {
|
||||
serviceWorker: true,
|
||||
updatePopup: {
|
||||
'/zh/': {
|
||||
message: '发现新内容可用',
|
||||
buttonText: '刷新',
|
||||
},
|
||||
'/': {
|
||||
message: 'New content is available',
|
||||
buttonText: 'Refresh',
|
||||
},
|
||||
},
|
||||
},
|
||||
'@vuepress/back-to-top': true,
|
||||
},
|
||||
locales: {
|
||||
'/zh/': {
|
||||
lang: 'zh-CN',
|
||||
title: 'DPlayer',
|
||||
description: '🍭 Wow, such a lovely HTML5 danmaku video player',
|
||||
},
|
||||
'/': {
|
||||
lang: 'en-US',
|
||||
title: 'DPlayer',
|
||||
description: '🍭 Wow, such a lovely HTML5 danmaku video player',
|
||||
},
|
||||
},
|
||||
head: [['link', { rel: 'icon', href: `/logo.png` }]],
|
||||
themeConfig: {
|
||||
repo: 'MoePlayer/DPlayer',
|
||||
editLinks: true,
|
||||
docsDir: 'docs',
|
||||
locales: {
|
||||
'/zh/': {
|
||||
lang: 'zh-CN',
|
||||
selectText: '选择语言',
|
||||
label: '简体中文',
|
||||
editLinkText: '在 GitHub 上编辑此页',
|
||||
lastUpdated: '上次更新',
|
||||
nav: [
|
||||
{
|
||||
text: '指南',
|
||||
link: '/zh/',
|
||||
},
|
||||
{
|
||||
text: '生态',
|
||||
link: '/zh/ecosystem/',
|
||||
},
|
||||
{
|
||||
text: '支持 DPlayer',
|
||||
link: '/zh/support/',
|
||||
},
|
||||
],
|
||||
},
|
||||
'/': {
|
||||
lang: 'en-US',
|
||||
selectText: 'Languages',
|
||||
label: 'English',
|
||||
editLinkText: 'Edit this page on GitHub',
|
||||
lastUpdated: 'Last Updated',
|
||||
nav: [
|
||||
{
|
||||
text: 'Guide',
|
||||
link: '/',
|
||||
},
|
||||
{
|
||||
text: 'Ecosystem',
|
||||
link: '/ecosystem/',
|
||||
},
|
||||
{
|
||||
text: 'Support DPlayer',
|
||||
link: '/support/',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
|
|
@ -0,0 +1,36 @@
|
|||
.navbar .home-link .site-name {
|
||||
color: #F5712C;
|
||||
}
|
||||
|
||||
.page .custom-block.tip {
|
||||
border-color: #F5712C;
|
||||
}
|
||||
|
||||
.icon.outbound {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
#指南 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#guide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#app .global-ui .sw-update-popup {
|
||||
border: 1px solid #F5712C;
|
||||
}
|
||||
|
||||
.routes .sidebar-group-items > li > .sidebar-sub-headers > .sidebar-sub-header > a {
|
||||
color: $accentColor;
|
||||
}
|
||||
|
||||
#dplayer {
|
||||
margin-top: -1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
$accentColor = #F5712C
|
||||
153
docs/README.md
153
docs/README.md
|
|
@ -1,29 +1,44 @@
|
|||
---
|
||||
search: english
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# Guide
|
||||
|
||||
<link rel="stylesheet" href="">
|
||||
<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
|
||||
|
||||
# DPlayer
|
||||
|
||||
🍭 Wow, such a lovely HTML5 danmaku video player
|
||||
|
||||
## Special Sponsors
|
||||
<DPlayer :immediate="true"></DPlayer>
|
||||
|
||||
|
||||
|
||||
## Special Thanks
|
||||
|
||||
### Special Sponsors
|
||||
|
||||
|
||||
|
||||
<a href="https://www.polyv.net/?f=git_DPlayer-20190518-02" target="_blank">
|
||||
<img width="600px" src="https://i.loli.net/2019/06/03/5cf4028f7b8f716387.gif">
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<a href="https://www.9ccms.net" target="_blank">
|
||||
<img width="330px" src="https://i.imgur.com/YBV6kfb.png">
|
||||
<img width="280px" src="https://i.imgur.com/YBV6kfb.png">
|
||||
</a>
|
||||
|
||||
## Sponsors
|
||||
### Sponsors
|
||||
|
||||
<a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
|
||||
<img width="222px" src="https://i.imgur.com/BBKXPAp.png">
|
||||
</a>
|
||||
<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
|
||||
<img width="222px" src="https://imgur.com/apG1uKf.png">
|
||||
</a>
|
||||
|
||||
## Installation
|
||||
|
||||
|
|
@ -41,9 +56,9 @@ yarn add dplayer
|
|||
|
||||
## Quick Start
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer2"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
At first, let's initialize a simplest DPlayer
|
||||
|
||||
Load DPlayer files
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
|
|
@ -51,6 +66,17 @@ yarn add dplayer
|
|||
<script src="DPlayer.min.js"></script>
|
||||
```
|
||||
|
||||
Or work with module bundler:
|
||||
|
||||
```js
|
||||
import 'dplayer/dist/DPlayer.min.css';
|
||||
import DPlayer from 'dplayer';
|
||||
|
||||
const dp = new DPlayer(options);
|
||||
```
|
||||
|
||||
Initialization in js:
|
||||
|
||||
```js
|
||||
const dp = new DPlayer({
|
||||
container: document.getElementById('dplayer'),
|
||||
|
|
@ -70,39 +96,32 @@ const dp = new DPlayer({
|
|||
});
|
||||
```
|
||||
|
||||
Work with module bundler:
|
||||
|
||||
```js
|
||||
import 'dplayer/dist/DPlayer.min.css';
|
||||
import DPlayer from 'dplayer';
|
||||
|
||||
const dp = new DPlayer(options);
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
You can custom your player instance by those options
|
||||
|
||||
Name | Default | Description
|
||||
----|-------|----
|
||||
container | document.querySelector('.dplayer') | player container
|
||||
live | false | enable live mode, [see more details](http://dplayer.js.org/#/home?id=live)
|
||||
live | false | enable live mode, see [#live](#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
|
||||
hotkey | true | enable hotkey, support FF, FR, volume control, play & pause
|
||||
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)
|
||||
apiBackend | - | getting and sending danmaku in your way, see [#live](#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.quality | - | see [#Quality switching](#quality-switching)
|
||||
video.defaultQuality | - | see [#Quality switching](#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', '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)
|
||||
video.type | 'auto' | values: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' or other custom type, see [#MSE support](#mse-support)
|
||||
video.customType | - | custom video type, see [#MSE support](#mse-support)
|
||||
subtitle | - | external subtitle
|
||||
subtitle.url | `required` | subtitle url
|
||||
subtitle.type | 'webvtt' | subtitle type, values: 'webvtt', 'ass', but only webvtt is supported for now
|
||||
|
|
@ -111,10 +130,10 @@ subtitle.bottom | '40px' | 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.api | `required` | see [#Danmaku API](#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.addition | - | additional danmaku, see [#bilibili danmaku](#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 | display all danmaku even though danmaku overlap, notice that player will remember user setting, default setting will not work after user set it themselves
|
||||
|
|
@ -122,12 +141,6 @@ contextmenu | [] | custom contextmenu
|
|||
highlight | [] | custom time markers upon progress bar
|
||||
mutex | true | prevent to play multiple player at the same time, pause other players when this player start play
|
||||
|
||||
For example:
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer3"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
```js
|
||||
const dp = new DPlayer({
|
||||
container: document.getElementById('player'),
|
||||
|
|
@ -365,9 +378,22 @@ Player events
|
|||
|
||||
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>
|
||||
</div>
|
||||
<DPlayer :options="{
|
||||
video: {
|
||||
quality: [{
|
||||
name: 'HD',
|
||||
url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
|
||||
type: 'hls'
|
||||
}, {
|
||||
name: 'SD',
|
||||
url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
|
||||
type: 'normal'
|
||||
}],
|
||||
defaultQuality: 0,
|
||||
pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
|
||||
thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg'
|
||||
}
|
||||
}"></DPlayer>
|
||||
|
||||
```js
|
||||
const dp = new DPlayer({
|
||||
|
|
@ -426,9 +452,12 @@ const option = {
|
|||
|
||||
It requires the library [hls.js](https://github.com/video-dev/hls.js) and it should be loaded before `DPlayer.min.js`.
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer5"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
<DPlayer :options="{
|
||||
video: {
|
||||
url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
|
||||
type: 'hls'
|
||||
}
|
||||
}"></DPlayer>
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
|
|
@ -469,10 +498,6 @@ const dp = new DPlayer({
|
|||
|
||||
It requires the library [dash.js](https://github.com/Dash-Industry-Forum/dash.js) and it should be loaded before `DPlayer.min.js`.
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer6"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
<div id="dplayer"></div>
|
||||
|
|
@ -539,9 +564,12 @@ const dp = new DPlayer({
|
|||
|
||||
It requires the library [flv.js](https://github.com/Bilibili/flv.js) and it should be loaded before `DPlayer.min.js`.
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer7"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
<DPlayer :options="{
|
||||
video: {
|
||||
url: 'https://api.dogecloud.com/player/get.flv?vcode=5ac682e6f8231991&userId=17&ext=.flv',
|
||||
type: 'flv'
|
||||
}
|
||||
}"></DPlayer>
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
|
|
@ -585,9 +613,12 @@ const dp = new DPlayer({
|
|||
|
||||
It requires the library [webtorrent](https://github.com/webtorrent/webtorrent) and it should be loaded before `DPlayer.min.js`.
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer8"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
<DPlayer :options="{
|
||||
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'
|
||||
}
|
||||
}"></DPlayer>
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
|
|
@ -636,10 +667,6 @@ const dp = new DPlayer({
|
|||
|
||||
DPlayer can work with any MSE 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>
|
||||
|
|
@ -667,12 +694,16 @@ const dp = new DPlayer({
|
|||
|
||||
## Live
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer9"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
You can use DPlayer in live, but if you want live danmaku, you should prepare a WebSocket backend yourself.
|
||||
|
||||
<DPlayer :options="{
|
||||
live: true,
|
||||
video: {
|
||||
url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
|
||||
type: 'hls'
|
||||
}
|
||||
}"></DPlayer>
|
||||
|
||||
Init player:
|
||||
|
||||
```js
|
||||
|
|
@ -708,12 +739,6 @@ const danmaku = {
|
|||
dp.danmaku.draw(danmaku);
|
||||
```
|
||||
|
||||
## CDN
|
||||
|
||||
- [jsDelivr](https://www.jsdelivr.com/package/npm/dplayer)
|
||||
- [cdnjs](https://cdnjs.com/libraries/dplayer)
|
||||
- [unpkg](https://unpkg.com/dplayer/)
|
||||
|
||||
## FAQ
|
||||
|
||||
### Why can't player be full screen?
|
||||
|
|
|
|||
284
docs/config.js
284
docs/config.js
|
|
@ -1,284 +0,0 @@
|
|||
const langs = [
|
||||
{ title: 'English', path: '/home', matchPath: /^\/(home|ecosystem|support)/ },
|
||||
{ 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: 'Support DPlayer', path: '/support'
|
||||
},
|
||||
{
|
||||
title: 'Languages', type: 'dropdown', items: langs
|
||||
}
|
||||
],
|
||||
'zh-Hans': [
|
||||
{
|
||||
title: '首页', path: '/zh-Hans/'
|
||||
},
|
||||
{
|
||||
title: '生态', path: '/zh-Hans/ecosystem'
|
||||
},
|
||||
{
|
||||
title: '支持 DPlayer', path: '/zh-Hans/support'
|
||||
},
|
||||
{
|
||||
title: '选择语言', type: 'dropdown', items: langs
|
||||
}
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
docsearch({
|
||||
apiKey: '46a8ba306e368972c1d75feb581fb430',
|
||||
indexName: 'dplayer',
|
||||
tags: ['english', 'zh-Hans'],
|
||||
url: 'http://dplayer.js.org'
|
||||
}),
|
||||
evanyou(),
|
||||
player()
|
||||
]
|
||||
});
|
||||
|
||||
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 (let i = 0; i < 10; i++) {
|
||||
if (window['dp' + (i + 1)]) {
|
||||
window['dp' + (i + 1)].destroy();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function dplayer1 () {
|
||||
window.dp1 = new DPlayer({
|
||||
container: document.getElementById('dplayer1'),
|
||||
video: {
|
||||
url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
|
||||
pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
|
||||
thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg'
|
||||
},
|
||||
danmaku: {
|
||||
id: '9E2E3368B56CDBB4',
|
||||
api: 'https://api.prprpr.me/dplayer/'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function dplayer2 () {
|
||||
window.dp2 = new DPlayer({
|
||||
container: document.getElementById('dplayer2'),
|
||||
video: {
|
||||
url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
|
||||
pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
|
||||
thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg'
|
||||
},
|
||||
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',
|
||||
hotkey: true,
|
||||
preload: 'auto',
|
||||
logo: 'https://i.loli.net/2019/06/06/5cf8c5d94521136430.png',
|
||||
volume: 0.7,
|
||||
mutex: true,
|
||||
video: {
|
||||
url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
|
||||
pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
|
||||
thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg',
|
||||
type: 'auto'
|
||||
},
|
||||
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 分钟'
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
function dplayer4 () {
|
||||
window.dp4 = new DPlayer({
|
||||
container: document.getElementById('dplayer4'),
|
||||
video: {
|
||||
quality: [{
|
||||
name: 'HD',
|
||||
url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
|
||||
type: 'hls'
|
||||
}, {
|
||||
name: 'SD',
|
||||
url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
|
||||
type: 'normal'
|
||||
}],
|
||||
defaultQuality: 0,
|
||||
pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
|
||||
thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function dplayer5 () {
|
||||
window.dp5 = new DPlayer({
|
||||
container: document.getElementById('dplayer5'),
|
||||
video: {
|
||||
url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.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'
|
||||
// }
|
||||
// });
|
||||
}
|
||||
|
||||
function dplayer7 () {
|
||||
window.dp7 = new DPlayer({
|
||||
container: document.getElementById('dplayer7'),
|
||||
video: {
|
||||
url: 'https://api.dogecloud.com/player/get.flv?vcode=5ac682e6f8231991&userId=17&ext=.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'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
|
||||
type: 'hls'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function dplayer10 () {
|
||||
loadScript('https://cdn.jsdelivr.net/npm/pearplayer', function () {
|
||||
window.dp10 = 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
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function loadScript (src, callback) {
|
||||
let s,
|
||||
r,
|
||||
t;
|
||||
r = false;
|
||||
s = document.createElement('script');
|
||||
s.type = 'text/javascript';
|
||||
s.src = src;
|
||||
s.onload = s.onreadystatechange = function () {
|
||||
// console.log( this.readyState ); //uncomment this line to see which ready states are called.
|
||||
if (!r && (!this.readyState || this.readyState == 'complete'))
|
||||
{
|
||||
r = true;
|
||||
callback();
|
||||
}
|
||||
};
|
||||
t = document.getElementsByTagName('script')[0];
|
||||
t.parentNode.insertBefore(s, t);
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
search: english
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# Ecosystem
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
|
||||
<title>DPlayer</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docute@3.4.12/dist/docute.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docute@3.4.12/dist/theme-github.css" />
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-48084758-9"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() { dataLayer.push(arguments); }
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-48084758-9');
|
||||
</script>
|
||||
<link class="dplayer-css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
text-rendering: auto;
|
||||
}
|
||||
#evanyou-canvas {
|
||||
z-index: -1 !important;
|
||||
}
|
||||
.dplayer-wrap {
|
||||
max-width: 700px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- don't remove this part start -->
|
||||
<div id="app"></div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/docute@3.4.12/plugins/docsearch.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/docute-evanyou/dist/evanyou.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/docute@3.4.12/dist/docute.js"></script>
|
||||
<script src="./config.js"></script>
|
||||
<!-- livereload script placeholder -->
|
||||
<!-- don't remove this part end -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
<h1>DPlayer</h1>
|
||||
|
||||
<h3>🍭 Wow, such a lovely HTML5 danmaku video player.</h3>
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer1"></div>
|
||||
</div>
|
||||
|
||||
<div class="landing-buttons">
|
||||
<a class="landing-button" target="_blank" href="https://github.com/MoePlayer/DPlayer">
|
||||
GitHub
|
||||
</a>
|
||||
|
||||
<a class="landing-button" router-link="/home">
|
||||
Docs
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
margin: 0;
|
||||
margin-top: -50px;
|
||||
font-weight: normal;
|
||||
font-size: 40px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 20px;
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.landing {
|
||||
padding: 10px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.features {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.landing-button {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 33px;
|
||||
padding: 10px 30px;
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.landing-button:hover {
|
||||
border-color: #42b983;
|
||||
color: #42b983;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dplayer-wrap {
|
||||
max-width: 600px;
|
||||
margin: 20px 0 40px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
search: english
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# Sponsor DPlayer Development
|
||||
|
|
@ -24,19 +24,23 @@ We accept donations through these channels:
|
|||
|
||||
Recurring pledges come with exclusive perks, e.g. having your name or your company logo listed in the DPlayer GitHub repository and this website.
|
||||
|
||||
- Become a backer or sponsor via [OpenCollective](https://opencollective.com/dplayer)
|
||||
- E-mail us: i#html.love
|
||||
- Become a Backer or a Sponser on [Patreon](https://www.patreon.com/DIYgod)
|
||||
- E-mail us: i#diygod.me
|
||||
|
||||
## Current Premium Sponsors
|
||||
|
||||
## Special Sponsors
|
||||
### Special Sponsors
|
||||
|
||||
|
||||
|
||||
<a href="https://www.polyv.net/?f=git_DPlayer-20190518-02" target="_blank">
|
||||
<img width="600px" src="https://i.loli.net/2019/06/03/5cf4028f7b8f716387.gif">
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<a href="https://www.9ccms.net" target="_blank">
|
||||
<img width="330px" src="https://i.imgur.com/YBV6kfb.png">
|
||||
<img width="280px" src="https://i.imgur.com/YBV6kfb.png">
|
||||
</a>
|
||||
|
||||
### Sponsors
|
||||
|
|
@ -44,13 +48,6 @@ Recurring pledges come with exclusive perks, e.g. having your name or your compa
|
|||
<a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
|
||||
<img width="222px" src="https://i.imgur.com/BBKXPAp.png">
|
||||
</a>
|
||||
<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
|
||||
<img width="222px" src="https://imgur.com/apG1uKf.png">
|
||||
</a>
|
||||
|
||||
### OpenCollective backers
|
||||
|
||||
|
||||
|
||||
## DPlayer contributors
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,36 @@
|
|||
---
|
||||
nav: zh-Hans
|
||||
search: zh-Hans
|
||||
sidebar: auto
|
||||
---
|
||||
# 指南
|
||||
|
||||
<link rel="stylesheet" href="">
|
||||
<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
|
||||
|
||||
# DPlayer
|
||||
|
||||
🍭 Wow, such a lovely HTML5 danmaku video player
|
||||
|
||||
## Special Sponsors
|
||||
<DPlayer :immediate="true"></DPlayer>
|
||||
|
||||
|
||||
|
||||
## Special Thanks
|
||||
|
||||
### Special Sponsors
|
||||
|
||||
|
||||
|
||||
<a href="https://www.polyv.net/?f=git_DPlayer-20190518-02" target="_blank">
|
||||
<img width="600px" src="https://i.loli.net/2019/06/03/5cf4028f7b8f716387.gif">
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<a href="https://www.9ccms.net" target="_blank">
|
||||
<img width="330px" src="https://i.imgur.com/YBV6kfb.png">
|
||||
<img width="280px" src="https://i.imgur.com/YBV6kfb.png">
|
||||
</a>
|
||||
|
||||
### Sponsors
|
||||
|
|
@ -22,9 +38,6 @@ search: zh-Hans
|
|||
<a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
|
||||
<img width="222px" src="https://i.imgur.com/BBKXPAp.png">
|
||||
</a>
|
||||
<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
|
||||
<img width="222px" src="https://imgur.com/apG1uKf.png">
|
||||
</a>
|
||||
|
||||
## 安装
|
||||
|
||||
|
|
@ -40,11 +53,11 @@ npm install dplayer --save
|
|||
yarn add dplayer
|
||||
```
|
||||
|
||||
## 入门
|
||||
## 快速开始
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer2"><button class="docute-button load">点击加载播放器</div>
|
||||
</div>
|
||||
我们先尝试初始化一个最简单的 DPlayer
|
||||
|
||||
加载播放器文件:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
|
|
@ -52,26 +65,7 @@ yarn add dplayer
|
|||
<script src="DPlayer.min.js"></script>
|
||||
```
|
||||
|
||||
```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';
|
||||
|
|
@ -80,30 +74,45 @@ import DPlayer from 'dplayer';
|
|||
const dp = new DPlayer(options);
|
||||
```
|
||||
|
||||
在 js 里初始化:
|
||||
|
||||
```js
|
||||
const dp = new DPlayer({
|
||||
container: document.getElementById('dplayer'),
|
||||
video: {
|
||||
url: 'demo.mp4'
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
一个最简单的 DPlayer 就初始化好了，它只有最基本的视频播放功能
|
||||
|
||||
## 参数
|
||||
|
||||
DPlayer 有丰富的参数可以自定义你的播放器实例
|
||||
|
||||
名称 | 默认值 | 描述
|
||||
----|-------|----
|
||||
container | document.querySelector('.dplayer') | 播放器容器元素
|
||||
live | false | 开启直播模式, [详情](http://dplayer.js.org/#/home?id=live)
|
||||
live | false | 开启直播模式, 见[#直播](#直播)
|
||||
autoplay | false | 视频自动播放
|
||||
theme | '#b7daff' | 主题色
|
||||
loop | false | 视频循环播放
|
||||
lang | navigator.language.toLowerCase() | 可选值: 'en', 'zh-cn', 'zh-tw'
|
||||
screenshot | false | 开启截图，如果开启，视频和视频封面需要开启跨域
|
||||
hotkey | true | 开启热键
|
||||
preload | 'auto' | 预加载，可选值: 'none', 'metadata', 'auto'
|
||||
screenshot | false | 开启截图，如果开启，视频和视频封面需要允许跨域
|
||||
hotkey | true | 开启热键，支持快进、快退、音量控制、播放暂停
|
||||
preload | 'auto' | 视频预加载，可选值: 'none', 'metadata', 'auto'
|
||||
volume | 0.7 | 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
|
||||
logo | - | 在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
|
||||
apiBackend | - | 自定义获取和发送弹幕行为，[详情](http://dplayer.js.org/#/home?id=live)
|
||||
apiBackend | - | 自定义获取和发送弹幕行为，见[#直播](#直播)
|
||||
video | - | 视频信息
|
||||
video.quality | - | [详情](http://dplayer.js.org/#/home?id=quality-switching)
|
||||
video.defaultQuality | - | [详情](http://dplayer.js.org/#/home?id=quality-switching)
|
||||
video.quality | - | 见[#清晰度切换](#清晰度切换)
|
||||
video.defaultQuality | - | 见[#清晰度切换](#清晰度切换)
|
||||
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)
|
||||
video.type | 'auto' | 可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型, 见[#MSE 支持](#mse-支持)
|
||||
video.customType | - | 自定义类型, 见[#MSE 支持](#mse-支持)
|
||||
subtitle | - | 外挂字幕
|
||||
subtitle.url | `required` | 字幕链接
|
||||
subtitle.type | 'webvtt' | 字幕类型，可选值: 'webvtt', 'ass'，目前只支持 webvtt
|
||||
|
|
@ -112,10 +121,10 @@ subtitle.bottom | '40px' | 字幕距离播放器底部的距离，取值形如:
|
|||
subtitle.color | '#fff' | 字幕颜色
|
||||
danmaku | - | 显示弹幕
|
||||
danmaku.id | `required` | 弹幕池id，必须唯一
|
||||
danmaku.api | `required` | [详情](http://dplayer.js.org/#/home?id=danmaku-api)
|
||||
danmaku.api | `required` | 见[#弹幕接口](#弹幕接口)
|
||||
danmaku.token | - | 弹幕后端验证 token
|
||||
danmaku.maximum | - | 弹幕最大数量
|
||||
danmaku.addition | - | 额外外挂弹幕，[详情](http://dplayer.js.org/#/home?id=bilibili-danmaku)
|
||||
danmaku.addition | - | 额外外挂弹幕，见[#bilibili 弹幕](#bilibili-弹幕)
|
||||
danmaku.user | 'DIYgod' | 弹幕用户名
|
||||
danmaku.bottom | - | 弹幕距离播放器底部的距离，防止遮挡字幕，取值形如: '10px' '10%'
|
||||
danmaku.unlimited | false | 海量弹幕模式，即使重叠也展示全部弹幕，请注意播放器会记忆用户设置，用户手动设置后即失效
|
||||
|
|
@ -123,12 +132,6 @@ contextmenu | [] | 自定义右键菜单
|
|||
highlight | [] | 自定义进度条提示点
|
||||
mutex | true | 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
|
||||
|
||||
例如:
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer3"><button class="docute-button load">点击加载播放器</div>
|
||||
</div>
|
||||
|
||||
```js
|
||||
const dp = new DPlayer({
|
||||
container: document.getElementById('player'),
|
||||
|
|
@ -204,7 +207,7 @@ const dp = new DPlayer({
|
|||
|
||||
+ `dp.toggle()`: 切换播放和暂停
|
||||
|
||||
+ `dp.on(event: string, handler: function)`: 绑定视频和播放器事件，[详情](http://dplayer.js.org/#/home?id=event-binding)
|
||||
+ `dp.on(event: string, handler: function)`: 绑定视频和播放器事件，见[#事件绑定](#事件绑定)
|
||||
|
||||
+ `dp.switchVideo(video, danmaku)`: 切换到其他视频
|
||||
|
||||
|
|
@ -360,9 +363,22 @@ dp.on('ended', function () {
|
|||
|
||||
在 `video.quality` 里设置不同清晰度的视频链接和类型，`video.defaultQuality` 设置默认清晰度
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer4"><button class="docute-button load">点击加载播放器</div>
|
||||
</div>
|
||||
<DPlayer :options="{
|
||||
video: {
|
||||
quality: [{
|
||||
name: 'HD',
|
||||
url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
|
||||
type: 'hls'
|
||||
}, {
|
||||
name: 'SD',
|
||||
url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
|
||||
type: 'normal'
|
||||
}],
|
||||
defaultQuality: 0,
|
||||
pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
|
||||
thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg'
|
||||
}
|
||||
}"></DPlayer>
|
||||
|
||||
```js
|
||||
const dp = new DPlayer({
|
||||
|
|
@ -421,9 +437,12 @@ const option = {
|
|||
|
||||
需要在 `DPlayer.min.js` 前面加载 [hls.js](https://github.com/video-dev/hls.js)。
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer5"><button class="docute-button load">点击加载播放器</div>
|
||||
</div>
|
||||
<DPlayer :options="{
|
||||
video: {
|
||||
url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
|
||||
type: 'hls'
|
||||
}
|
||||
}"></DPlayer>
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
|
|
@ -464,10 +483,6 @@ const dp = new DPlayer({
|
|||
|
||||
需要在 `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">点击加载播放器</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
<div id="dplayer"></div>
|
||||
|
|
@ -534,9 +549,12 @@ const dp = new DPlayer({
|
|||
|
||||
需要在 `DPlayer.min.js` 前面加载 [flv.js](https://github.com/Bilibili/flv.js)。
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer7"><button class="docute-button load">点击加载播放器</div>
|
||||
</div>
|
||||
<DPlayer :options="{
|
||||
video: {
|
||||
url: 'https://api.dogecloud.com/player/get.flv?vcode=5ac682e6f8231991&userId=17&ext=.flv',
|
||||
type: 'flv'
|
||||
}
|
||||
}"></DPlayer>
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
|
|
@ -580,9 +598,12 @@ const dp = new DPlayer({
|
|||
|
||||
需要在 `DPlayer.min.js` 前面加载 [webtorrent](https://github.com/webtorrent/webtorrent)。
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer8"><button class="docute-button load">点击加载播放器</div>
|
||||
</div>
|
||||
<DPlayer :options="{
|
||||
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'
|
||||
}
|
||||
}"></DPlayer>
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="DPlayer.min.css">
|
||||
|
|
@ -631,10 +652,6 @@ const dp = new DPlayer({
|
|||
|
||||
DPlayer 可以通过 `customType` 参数与任何 MSE 库一起使用
|
||||
|
||||
<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>
|
||||
|
|
@ -662,12 +679,16 @@ const dp = new DPlayer({
|
|||
|
||||
## 直播
|
||||
|
||||
<div class="dplayer-wrap">
|
||||
<div id="dplayer9"><button class="docute-button load">点击加载播放器</div>
|
||||
</div>
|
||||
|
||||
你可以把 DPlayer 用在直播当中，但如果你想要直播弹幕，你需要自己准备一个 WebSocket 后端。
|
||||
|
||||
<DPlayer :options="{
|
||||
live: true,
|
||||
video: {
|
||||
url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
|
||||
type: 'hls'
|
||||
}
|
||||
}"></DPlayer>
|
||||
|
||||
初始化播放器:
|
||||
|
||||
```js
|
||||
|
|
@ -703,12 +724,6 @@ const danmaku = {
|
|||
dp.danmaku.draw(danmaku);
|
||||
```
|
||||
|
||||
## CDN
|
||||
|
||||
- [jsDelivr](https://www.jsdelivr.com/package/npm/dplayer)
|
||||
- [cdnjs](https://cdnjs.com/libraries/dplayer)
|
||||
- [unpkg](https://unpkg.com/dplayer/)
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 为什么播放器不能全屏？
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
---
|
||||
nav: zh-Hans
|
||||
search: zh-Hans
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# 生态
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
---
|
||||
nav: zh-Hans
|
||||
search: zh-Hans
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# 赞助 DPlayer 的研发
|
||||
|
|
@ -25,19 +24,23 @@ DPlayer 是采用 MIT 许可的开源项目，使用完全免费。 但是随着
|
|||
|
||||
周期性赞助可以获得额外的回报，比如你的名字或你的公司 logo 会出现在 DPlayer 的 GitHub 仓库和现在我们的官网中。
|
||||
|
||||
- 通过 [OpenCollective](https://opencollective.com/dplayer) 赞助成为 backer 或 sponsor
|
||||
- 给我们发邮件联系赞助事宜: i#html.love
|
||||
- 通过 [Patreon](https://www.patreon.com/DIYgod) 赞助
|
||||
- 给我们发邮件联系赞助事宜: i#diygod.me
|
||||
|
||||
## 当前的顶级赞助商
|
||||
|
||||
## Special Sponsors
|
||||
### Special Sponsors
|
||||
|
||||
|
||||
|
||||
<a href="https://www.polyv.net/?f=git_DPlayer-20190518-02" target="_blank">
|
||||
<img width="600px" src="https://i.loli.net/2019/06/03/5cf4028f7b8f716387.gif">
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<a href="https://www.9ccms.net" target="_blank">
|
||||
<img width="330px" src="https://i.imgur.com/YBV6kfb.png">
|
||||
<img width="280px" src="https://i.imgur.com/YBV6kfb.png">
|
||||
</a>
|
||||
|
||||
### Sponsors
|
||||
|
|
@ -45,13 +48,6 @@ DPlayer 是采用 MIT 许可的开源项目，使用完全免费。 但是随着
|
|||
<a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
|
||||
<img width="222px" src="https://i.imgur.com/BBKXPAp.png">
|
||||
</a>
|
||||
<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
|
||||
<img width="222px" src="https://imgur.com/apG1uKf.png">
|
||||
</a>
|
||||
|
||||
### OpenCollective backers
|
||||
|
||||
|
||||
|
||||
## DPlayer 贡献者
|
||||
|
||||
|
|
@ -8,7 +8,9 @@
|
|||
"start": "npm run dev",
|
||||
"build": "cross-env NODE_ENV=production webpack --config webpack/prod.config.js --progress --display-error-details --colors",
|
||||
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack/dev.config.js --watch --colors",
|
||||
"test": "eslint src webpack"
|
||||
"test": "eslint src webpack",
|
||||
"docs:dev": "vuepress dev docs",
|
||||
"docs:build": "vuepress build docs"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
|
@ -32,6 +34,9 @@
|
|||
"devDependencies": {
|
||||
"@babel/core": "^7.4.5",
|
||||
"@babel/preset-env": "^7.4.5",
|
||||
"@vuepress/plugin-back-to-top": "1.0.1",
|
||||
"@vuepress/plugin-google-analytics": "1.0.1",
|
||||
"@vuepress/plugin-pwa": "1.0.1",
|
||||
"art-template": "4.13.2",
|
||||
"art-template-loader": "1.4.3",
|
||||
"autoprefixer": "^9.6.0",
|
||||
|
|
@ -39,6 +44,7 @@
|
|||
"cross-env": "^5.2.0",
|
||||
"css-loader": "^2.1.1",
|
||||
"cssnano": "^4.1.10",
|
||||
"dplayer": "^1.25.0",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-loader": "^2.1.2",
|
||||
"exports-loader": "^0.7.0",
|
||||
|
|
@ -53,6 +59,7 @@
|
|||
"svg-inline-loader": "0.8.0",
|
||||
"template-string-optimize-loader": "^3.0.0",
|
||||
"url-loader": "^2.0.0",
|
||||
"vuepress": "1.0.1",
|
||||
"webpack": "^4.33.0",
|
||||
"webpack-cli": "3.3.2",
|
||||
"webpack-dev-server": "^3.6.0"
|
||||
|
|
|
|||
Loading…
Reference in New Issue