docs: upgrade HTTP image link to HTTPS in README (#1370)

Updates the imgur screenshot link from http:// to https:// for secure
loading. The image renders identically over HTTPS.

.eslintrc

@@ -1,62 +0,0 @@
-{
-    "extends": "eslint:recommended",
-    "parserOptions": {
-        "ecmaVersion": 6,
-        "sourceType": "module"
-    },
-    "env": {
-      "browser": true
-    },
-    "rules": {
-        "no-console": 0,
-        "no-extra-parens": 1,
-        "block-scoped-var": 1,
-        "curly": 1,
-        "eqeqeq": 1,
-        "no-global-assign": 1,
-        "no-implicit-globals": 1,
-        "no-labels": 1,
-        "no-multi-str": 1,
-        "comma-spacing": 1,
-        "comma-style": 1,
-        "func-call-spacing": 1,
-        "indent": 1,
-        "keyword-spacing": 1,
-        "linebreak-style": 1,
-        "lines-around-comment": 1,
-        "no-multiple-empty-lines": 1,
-        "space-infix-ops": 1,
-        "arrow-spacing": 1,
-        "no-var": 1,
-        "prefer-const": 1,
-        "no-unsafe-negation": 1,
-        "array-callback-return": 1,
-        "dot-location": 1,
-        "dot-notation": 1,
-        "no-eval": 1,
-        "no-extend-native": 1,
-        "no-extra-label": 1,
-        "semi": 1,
-        "space-before-blocks": 1,
-        "space-before-function-paren": 1,
-        "space-in-parens": 1,
-        "space-unary-ops": 1,
-        "spaced-comment": 1,
-        "arrow-body-style": 1,
-        "arrow-parens": 1,
-        "no-restricted-imports": 1,
-        "no-duplicate-imports": 1,
-        "no-useless-computed-key": 1,
-        "no-useless-rename": 1,
-        "rest-spread-spacing": 1,
-        "no-trailing-spaces": 1
-    },
-    "globals": {
-        "require": false,
-        "module": false,
-        "Hls": false,
-        "flvjs": false,
-        "dashjs": false,
-        "WebTorrent": false
-    }
-}

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+patreon: DIYgod

.github/ISSUE_TEMPLATE.md

@@ -2,9 +2,9 @@
 
 If you want to report a bug, please provide the following information:
 
-- The steps to reproduce.
-- A minimal demo of the problem via https://jsfiddle.net or http://codepen.io/pen if possible.
-- Which versions of DPlayer, and which browser / OS are affected by this issue?
+-   The steps to reproduce.
+-   A minimal demo of the problem via https://jsfiddle.net or http://codepen.io/pen if possible.
+-   Which versions of DPlayer, and which browser / OS are affected by this issue?
 
 <!-- Love DPlayer? Please consider supporting our project:
-👉  https://github.com/MoePlayer/DPlayer#donate -->
+👉  https://github.com/MoePlayer/DPlayer#donate -->

.gitignore

@@ -1,6 +1,10 @@
 .idea
 node_modules
 demo2
+docs2
 npm-debug.log
 DPlayer.log*
-wxw
+wxw
+.vscode
+package-lock.json
+docs/.vuepress/dist

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm exec lint-staged

.prettierignore

@@ -0,0 +1,2 @@
+dist
+demo

.prettierrc

@@ -0,0 +1,7 @@
+{
+    "printWidth": 233,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "arrowParens": "always"
+}

.travis.yml

@@ -1,9 +1,14 @@
 language: node_js
-
 node_js:
-  - "node"
-
-cache:
-  yarn: true
-  directories:
-    - node_modules
+  - lts/*
+script:
+  - npm 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

README.md

@@ -1,182 +1,136 @@
 <p align="center">
-<img src="https://ws4.sinaimg.cn/large/006tKfTcgy1fhu01y9uy7j305k04s3yc.jpg" alt="ADPlayer" width="100">
+<img src="https://i.imgur.com/LnPvZvO.png" alt="ADPlayer" width="100">
 </p>
 <h1 align="center">DPlayer</h1>
 
-> Wow, such a lovely HTML5 danmaku video player
+> 🍭 Wow, such a lovely HTML5 danmaku video player
 
 [![npm](https://img.shields.io/npm/v/dplayer.svg?style=flat-square)](https://www.npmjs.com/package/dplayer)
 [![npm](https://img.shields.io/npm/l/dplayer.svg?style=flat-square)](https://github.com/MoePlayer/DPlayer/blob/master/LICENSE)
 [![npm](https://img.shields.io/npm/dt/dplayer.svg?style=flat-square)](https://www.npmjs.com/package/dplayer)
-[![size](https://badge-size.herokuapp.com/MoePlayer/DPlayer/master/dist/DPlayer.min.js?compression=gzip&style=flat-square)](https://github.com/MoePlayer/DPlayer/tree/master/dist)
-[![Travis](https://img.shields.io/travis/MoePlayer/DPlayer.svg?style=flat-square)](https://travis-ci.org/MoePlayer/DPlayer)
-[![devDependency Status](https://img.shields.io/david/dev/MoePlayer/dplayer.svg?style=flat-square)](https://david-dm.org/MoePlayer/DPlayer#info=devDependencies)
-[![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?style=flat-square)](https://github.com/MoePlayer/DPlayer#donate)
+[![](https://data.jsdelivr.com/v1/package/npm/dplayer/badge)](https://www.jsdelivr.com/package/npm/dplayer)
 
 ## Introduction
 
-![image](http://i.imgur.com/207ch36.jpg)
+![image](https://i.imgur.com/207ch36.jpg)
 
 DPlayer is a lovely HTML5 danmaku video player to help people build video and danmaku easily.
 
 **DPlayer supports:**
 
-- Streaming formats
-    - [HLS](https://github.com/video-dev/hls.js)
-    - [FLV](https://github.com/Bilibili/flv.js)
-    - [MPEG DASH](https://github.com/Dash-Industry-Forum/dash.js)
-    - [WebTorrent](https://github.com/webtorrent/webtorrent)
-    - Any other custom streaming formats
-- Media formats
-    - MP4 H.264
-    - WebM
-    - Ogg Theora Vorbis
-- Features
-    - Danamku
-    - Screenshot
-    - Hotkeys
-    - Quality switching
-    - Thumbnails
-    - Subtitle
+-   Streaming formats
+    -   [HLS](https://github.com/video-dev/hls.js)
+    -   [FLV](https://github.com/Bilibili/flv.js)
+    -   [MPEG DASH](https://github.com/Dash-Industry-Forum/dash.js)
+    -   [WebTorrent](https://github.com/webtorrent/webtorrent)
+    -   Any other custom streaming formats
+-   Media formats
+    -   MP4 H.264
+    -   WebM
+    -   Ogg Theora Vorbis
+-   Features
+    -   Danmaku
+    -   Screenshot
+    -   Hotkeys
+    -   Quality switching
+    -   Thumbnails
+    -   Subtitle
 
 Using DPlayer on your project? [Let me know!](https://github.com/DIYgod/DPlayer/issues/31)
 
-**[Demo](http://dplayer.js.org/)**
+**[Docs](https://dplayer.diygod.dev/)**
 
-**[Docs](http://dplayer.js.org/docs)**
+**[中文文档](https://dplayer.diygod.dev/zh/)**
 
-## Install
+## Thanks
 
-```
-$ npm install dplayer --save
-```
+### Sponsors
 
-## Quick Start
+<div>
+<a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
+    <img height="60px" src="https://player.dogecloud.com/img/logo_with_product3.png">
+</a>
+</div>
 
-```html
-<link rel="stylesheet" href="dist/DPlayer.min.css">
-<div id="player1"></div>
-<script src="dist/DPlayer.min.js"></script>
-```
-
-```js
-var dp = new DPlayer({
-    element: document.getElementById('player1'),
-    video: {
-        url: 'dplayer.mp4',
-        pic: 'dplayer.png'
-    },
-    danmaku: {
-        id: 'testid',
-        api: 'https://api.prprpr.me/dplayer/'
-    }
-});
-```
-
-## Usage
-
-[Read the Docs](http://dplayer.js.org/docs)
-
-## CDN
-
-- [jsDelivr](https://www.jsdelivr.com/package/npm/dplayer)
-- [cdnjs](https://cdnjs.com/libraries/dplayer)
-- [unpkg](https://unpkg.com/dplayer/)
-
-## FAQ
-
-<details><summary>Why can't some videos be full screen?</summary><br>
-
-If player is contained in a iframe, try adding the allowfullscreen attribute to the iframe.
-
-For full browser support it should look like this:
-
-```html
-<iframe src="example.com"
-        allowfullscreen="allowfullscreen"
-        mozallowfullscreen="mozallowfullscreen"
-        msallowfullscreen="msallowfullscreen"
-        oallowfullscreen="oallowfullscreen"
-        webkitallowfullscreen="webkitallowfullscreen"></iframe> 
-```
-</details>
-
-<details><summary>Why can't player autoplay in some mobile browsers?</summary><br>
-
-Most mobile browsers forbid video autoplay, you wont be able to achieve it without hacks.
-</details>
-
-## Join the Discussion
-
-- [Telegram Group](https://t.me/adplayer)
-- [QQ Group](https://shang.qq.com/wpa/qunwpa?idkey=bf22213ae0028a82e5adf3f286dfd4f01e0997dc9f1dcd8e831a0a85e799be17): 415835947
-
-## Related Projects
-
-- [DPlayer-backend](https://github.com/MoePlayer/DPlayer-backend)
-- [DPlayer-data(weekly backup for api.prprpr.me/dplayer)](https://github.com/MoePlayer/DPlayer-data)
-- [DPlayer-thumbnails](https://github.com/MoePlayer/DPlayer-thumbnails)
-- [DPlayer-for-typecho](https://github.com/volio/DPlayer-for-typecho)
-- [Hexo-tag-dplayer](https://github.com/NextMoe/hexo-tag-dplayer)
-- [DPlayer_for_Z-BlogPHP](https://github.com/fghrsh/DPlayer_for_Z-BlogPHP)
-- [纸飞机视频区插件(DPlayer for Discuz!)](https://coding.net/u/Click_04/p/video/git)
-- [DPlayer for WordPress](https://github.com/BlueCocoa/DPlayer-WordPress)
-- [Vue-DPlayer](https://github.com/sinchang/vue-dplayer)
-- [react-dplayer](https://github.com/hnsylitao/react-dplayer)
-- [DPlayer-Lite](https://github.com/kn007/DPlayer-Lite)
-- [DPlayerHandle](https://github.com/kn007/DPlayerHandle)
-- [laravel-danmaku](https://github.com/MoePlayer/laravel-danmaku)
-- [dplayer-live-backend](https://github.com/Izumi-kun/dplayer-live-backend)
-- Feel free to submit yours in [`Let me know!`](https://github.com/MoePlayer/DPlayer/issues/31)
-
-## Who use DPlayer?
-
-- [嘀哩嘀哩](http://www.dilidili.wang/)
-- [银弹字幕组](https://www.sbsub.com/)
-- [纸飞机南航青年网络社区](http://my.nuaa.edu.cn/video-video.html)
-- [otomads](https://otomads.com/)
-- Feel free to submit yours in [`Let me know!`](https://github.com/MoePlayer/DPlayer/issues/31)
-
-## Donate
-
-- [Donate via OpenCollective](https://opencollective.com/dplayer)
-- [Donate via Paypal](https://www.paypal.me/DIYgod)
-- [Donate via WeChat Pay](https://ws4.sinaimg.cn/large/006tKfTcgy1fhu1uowywej307s07st8h.jpg)
-- [Donate via Alipay](https://ws4.sinaimg.cn/large/006tKfTcgy1fhu1vf4ih7j307s07sdfm.jpg)
-- Donate via Bitcoin: 13CwQLHzPYm2tewNMSJBeArbbRM5NSmCD1
-
-## Sponsors
-
-Thank you to all our sponsors!
-
-<table>
-  <tbody>
-    <tr>
-      <td align="center" valign="middle">
-        <a href="https://pear.hk/" target="_blank">
-          <img width="222px" src="https://i.imgur.com/5qQYmfc.png">
-        </a>
-      </td>
-      <td align="center" valign="middle">
-        <a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
-          <img width="222px" src="https://imgur.com/apG1uKf.png">
-        </a>
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-## Contributors
-
-This project exists thanks to all the people who contribute.
+### Contributors
 
 <a href="https://github.com/MoePlayer/DPlayer/graphs/contributors"><img src="https://opencollective.com/DPlayer/contributors.svg?width=890" /></a>
 
-## Backers
+## Related Projects
 
-Thank you to all our backers!
+Feel free to submit yours in [`Let me know!`](https://github.com/MoePlayer/DPlayer/issues/31)
 
-<a href="https://opencollective.com/DPlayer#backers" target="_blank"><img src="https://opencollective.com/DPlayer/backers.svg?width=890"></a>
+### Tooling
+
+-   [DPlayer-thumbnails](https://github.com/MoePlayer/DPlayer-thumbnails): generate video thumbnails
+
+### Danmaku 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
+-   [DPlayer_for_Z-BlogPHP](https://github.com/fghrsh/DPlayer_for_Z-BlogPHP): Z-BlogPHP
+-   [DPlayer for Discuz!](https://coding.net/u/Click_04/p/video/git): Discuz!
+-   [DPlayer for WordPress](https://github.com/BlueCocoa/DPlayer-WordPress): WordPress
+-   [DPlayerHandle](https://github.com/kn007/DPlayerHandle): WordPress
+-   [Selection](https://github.com/GreatSatan79/Selection): WordPress
+-   [Vue-DPlayer](https://github.com/sinchang/vue-dplayer): Vue
+-   [react-dplayer](https://github.com/hnsylitao/react-dplayer): React
+-   [rc-dplayer](https://github.com/tianfeng98/rc-dplayer): React
+
+### Other
+
+-   [DPlayer-Lite](https://github.com/kn007/DPlayer-Lite): lite version
+-   [hlsjs-p2p-engine](https://github.com/cdnbye/hlsjs-p2p-engine): Let your viewers become your unlimitedly scalable CDN
+-   [CBPlayer](https://github.com/cdnbye/CBPlayer): Dplayer with CDNBye P2P plugin built in, supporting HLS, MP4 and MPEG-DASH P2P streaming.
+-   Feel free to submit yours in [`Let me know!`](https://github.com/MoePlayer/DPlayer/issues/31)
+
+## Who use DPlayer?
+
+-   [学习强国](https://itunes.apple.com/cn/app/%E5%AD%A6%E4%B9%A0%E5%BC%BA%E5%9B%BD/id1426355645?mt=8): “学习强国”学习平台精心打造的手机客户端
+-   [小红书](https://www.xiaohongshu.com/): 中国最大的生活社区分享平台，同时也是发现全球好物的电商平台
+-   [极客时间](https://time.geekbang.org/): 极客邦科技出品的一款 IT 内容知识服务 App
+-   [嘀哩嘀哩](http://www.dilidili.wang/): 兴趣使然的无名小站（D 站）
+-   [银色子弹](https://www.sbsub.com/): 银色子弹，简称银弹，由多数柯南热爱者聚集在一起的组织
+-   [浙江大学 CC98 论坛](https://zh.wikipedia.org/wiki/CC98%E8%AE%BA%E5%9D%9B): 浙江大学校网内规模最大的论坛，中国各大学中较活跃的 BBS 之一
+-   [纸飞机南航青年网络社区](http://my.nuaa.edu.cn/video-video.html): 南京航空航天大学门户网站
+-   [otomads](https://otomads.com/): 专注于音 MAD 的视频弹幕网站
+-   [Cloudreve](https://github.com/HFO4/Cloudreve): 基于 ThinkPHP 构建的网盘系统
+-   [oneindex](https://github.com/donwa/oneindex): Onedrive Directory Index
+-   [arozos](https://github.com/tobychui/arozos): General purposed Web Desktop Operating Platform / OS for Raspberry Pis
+-   [新东方云教室](https://roombox.xdf.cn/)
+-   [BBHouse](https://github.com/endcloud/bbhouse-tauri): A Bilibili Cross-Platform Desktop Client Powered By Tauri
+-   [Tampermonkey 阿里云盘](https://greasyfork.org/zh-CN/scripts/425955-%E9%98%BF%E9%87%8C%E4%BA%91%E7%9B%98)
+-   [arozos](https://github.com/tobychui/arozos)
+-   [GBCLStudio/fof-upload-qcloud](https://github.com/GBCLStudio/FoF-Upload-Qcloud)
+-   Feel free to submit yours in [`Let me know!`](https://github.com/MoePlayer/DPlayer/issues/31)
+
+## Donate
+
+DPlayer is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.
+
+You can support DPlayer via donations.
+
+### Recurring Donation
+
+-   Become a Sponser on [GitHub](https://github.com/sponsors/DIYgod)
+-   Become a Sponser on [Patreon](https://www.patreon.com/DIYgod)
+-   Become a Sponser on [爱发电](https://afdian.net/@diygod)
+-   Contact us directly: i@diygod.me
+
+### One-time Donation
+
+We accept donations via the following ways:
+
+-   [WeChat Pay](https://diygod.me/images/wx.jpg)
+-   [Alipay](https://diygod.me/images/zfb.jpg)
+-   [Paypal](https://www.paypal.me/DIYgod)
 
 ## Author
 

demo/demo.css

@@ -2,6 +2,46 @@ body {
     max-width: 700px;
     margin: 0 auto;
     padding: 45px 10px;
+    position: relative;
+}
+
+.show-dialog {
+    cursor: pointer;
+    border: 1px solid #f00;
+    width: 120px;
+    height: 40px;
+    line-height: 40px!important;
+    text-align: center;
+    border-radius: 4px;
+}
+.float-dplayer {
+    display: none;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .3);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 99;
+}
+.dplayer-container {
+    width: 700px;
+    height: 358px;
+    border: 1px solid #f00;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+.close-dialog {
+    position: absolute;
+    right: 40px;
+    top: 10px;
+    font-size: 40px!important;
+    font-weight: normal!important;
+    color: #fff;
+    cursor: pointer;
+    z-index: 100;
 }
 
 .example {

demo/demo.js

@@ -2,7 +2,7 @@
 const stats = new Stats();
 stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
 document.body.appendChild(stats.dom);
-function animate () {
+function animate() {
     stats.begin();
     // monitored code goes here
     stats.end();
@@ -12,24 +12,81 @@ function animate () {
 requestAnimationFrame(animate);
 
 initPlayers();
+handleEvent();
 
-function initPlayers () {
+function handleEvent() {
+    document.getElementById('dplayer-dialog').addEventListener('click', (e) => {
+        const $clickDom = e.currentTarget;
+        const isShowStatus = $clickDom.getAttribute('data-show');
+
+        if (isShowStatus) {
+            document.getElementById('float-dplayer').style.display = 'none';
+        } else {
+            $clickDom.setAttribute('data-show', 1);
+            document.getElementById('float-dplayer').style.display = 'block';
+        }
+    });
+
+    document.getElementById('close-dialog').addEventListener('click', () => {
+        const $openDialogBtnDom = document.getElementById('dplayer-dialog');
+
+        $openDialogBtnDom.setAttribute('data-show', '');
+        document.getElementById('float-dplayer').style.display = 'none';
+    });
+}
+
+function initPlayers() {
+    // dplayer-float
+    window.dpFloat = new DPlayer({
+        container: document.getElementById('dplayer-container'),
+        preload: 'none',
+        screenshot: true,
+        video: {
+            url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
+            pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg',
+            thumbnails: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg'
+        },
+        subtitle: {
+            url: 'subtitle test'
+        },
+        danmaku: {
+            id: '9E2E3368B56CDBB4',
+            api: 'https://api.prprpr.me/dplayer/'
+        }
+    });
     // dp1
     window.dp1 = new DPlayer({
         container: document.getElementById('dplayer1'),
         preload: 'none',
         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'
+            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'
         },
         subtitle: {
-            url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.vtt'
+            url: [
+                {
+                    url: 'https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.vtt',
+                    lang: 'zh-cn',
+                    name: '光',
+                },
+                {
+                    url: 'https://gist.githubusercontent.com/samdutton/ca37f3adaf4e23679957b8083e061177/raw/e19399fbccbc069a2af4266e5120ae6bad62699a/sample.vtt',
+                    lang: 'en-us',
+                    name: 'github',
+                },
+            ],
+            defaultSubtitle: 7,
+            type: 'webvtt',
+            fontSize: '25px',
+            bottom: '10%',
+            color: '#b7daff'
         },
         danmaku: {
             id: '9E2E3368B56CDBB4',
-            api: 'https://api.prprpr.me/dplayer/'
+            api: 'https://api.prprpr.me/dplayer/',
+            addition: ['https://s-sh-17-dplayercdn.oss.dogecdn.com/1678963.json']
         }
     });
 
@@ -41,18 +98,21 @@ function initPlayers () {
         theme: '#FADFA3',
         loop: true,
         screenshot: true,
+        airplay: true,
+        chromecast: true,
         hotkey: true,
-        logo: 'https://moeplayer.b0.upaiyun.com/dplayer/DPlayer.png',
+        logo: 'https://i.loli.net/2019/06/06/5cf8c5d94521136430.png',
         volume: 0.2,
         mutex: true,
+        lang: 'zh-cn',
         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',
+            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'
         },
         subtitle: {
-            url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.vtt',
+            url: 'https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.vtt',
             type: 'webvtt',
             fontSize: '25px',
             bottom: '10%',
@@ -61,11 +121,13 @@ function initPlayers () {
         danmaku: {
             id: '9E2E3368B56CDBB4',
             api: 'https://api.prprpr.me/dplayer/',
+            addition: ['https://s-sh-17-dplayercdn.oss.dogecdn.com/1678963.json'],
             token: 'tokendemo',
             maximum: 3000,
             user: 'DIYgod',
             bottom: '15%',
-            unlimited: true
+            unlimited: true,
+            speedRate: 0.5,
         },
         contextmenu: [
             {
@@ -95,7 +157,7 @@ function initPlayers () {
     const eventsEle = document.getElementById('events');
     for (let i = 0; i < events.length; i++) {
         dp2.on(events[i], (info) => {
-            eventsEle.innerHTML += '<p>Event: ' + events[i] + '</p>';
+            eventsEle.innerHTML += `<p>Event: ${events[i]} ${info?`Data: <span>${JSON.stringify(info)}</span>`:''}</p>`;
             eventsEle.scrollTop = eventsEle.scrollHeight;
         });
     }
@@ -107,15 +169,15 @@ function initPlayers () {
     //     video: {
     //         quality: [{
     //             name: 'HD',
-    //             url: 'https://moeplayer.b0.upaiyun.com/dplayer/hls/hikarunara.m3u8',
+    //             url: 'https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.m3u8',
     //             type: 'hls'
     //         }, {
     //             name: 'SD',
-    //             url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4',
+    //             url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
     //             type: 'normal'
     //         }],
     //         defaultQuality: 0,
-    //         pic: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.png'
+    //         pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png'
     //     }
     // });
 
@@ -124,7 +186,7 @@ function initPlayers () {
     //     container: document.getElementById('dplayer4'),
     //     preload: 'none',
     //     video: {
-    //         url: 'https://moeplayer.b0.upaiyun.com/dplayer/hls/hikarunara.m3u8',
+    //         url: 'https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.m3u8',
     //         type: 'hls'
     //     }
     // });
@@ -172,7 +234,7 @@ function initPlayers () {
     //         }
     //     },
     //     video: {
-    //         url: 'https://moeplayer.b0.upaiyun.com/dplayer/hls/hikarunara.m3u8',
+    //         url: 'https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.m3u8',
     //         type: 'hls'
     //     }
     // });
@@ -194,18 +256,18 @@ function initPlayers () {
     // });
 }
 
-function clearPlayers () {
+function clearPlayers() {
     for (let i = 0; i < 6; i++) {
         window['dp' + (i + 1)].pause();
         document.getElementById('dplayer' + (i + 1)).innerHTML = '';
     }
 }
 
-function switchDPlayer () {
-    if (dp2.option.danmaku.id !== '5rGf5Y2X55qu6Z2p') {
+function switchDPlayer() {
+    if (dp2.options.danmaku.id !== '5rGf5Y2X55qu6Z2p') {
         dp2.switchVideo({
-            url: 'https://moeplayer.b0.upaiyun.com/dplayer/flowerdance.mp4',
-            pic: 'https://moeplayer.b0.upaiyun.com/dplayer/flowerdance.jpg',
+            url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
+            pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg',
             type: 'auto',
         }, {
             id: '5rGf5Y2X55qu6Z2p',
@@ -215,9 +277,9 @@ function switchDPlayer () {
         });
     } else {
         dp2.switchVideo({
-            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',
+            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'
         }, {
             id: '9E2E3368B56CDBB42',

demo/index.html

@@ -16,6 +16,13 @@
 </head>
 
 <body class="markdown-body">
+    <h2>在 dialog 中承载视频</h2>
+    <h3 id="dplayer-dialog" class="show-dialog">Show Dialog</h3>
+    <div id="float-dplayer" class="float-dplayer">
+        <div id="dplayer-container" class="dplayer-container"></div>
+        <h3 id="close-dialog" class="close-dialog">X</h3>
+    </div>
+
     <h2 id="quick-start">Quick Start</h2>
     <div class="example">
         <div id="dplayer1"></div>

docs/.vuepress/components/DPlayer.vue

@@ -0,0 +1,92 @@
+<template>
+<div class="dplayer-wrap">
+    <div class="dplayer" ref="dplayer"><button class="load" v-on:click="load">Load demo</button></div>
+</div>
+</template>
+<script>
+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://s-sh-17-dplayercdn.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',
+                    user: 'DIYgod',
+                    addition: ['https://s-sh-17-dplayercdn.oss.dogecdn.com/1678963.json']
+                },
+                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;
+            setTimeout(() => {
+                this.dplayer = new window.DPlayer(this.options);
+            }, 0);
+        }
+    },
+    mounted: function () {
+        if (this.immediate) {
+            setTimeout(() => {
+                this.dplayer = new window.DPlayer(this.options);
+            }, 0);
+        }
+    },
+    beforeDestroy: function () {
+        this.dplayer && this.dplayer.destroy();
+    }
+}
+</script>
+<style>
+</style>

docs/.vuepress/config.js

@@ -0,0 +1,79 @@
+module.exports = {
+    plugins: {
+        '@vuepress/back-to-top': true,
+        umami: {
+            trackerUrl: 'https://umami.diygod.dev',
+            siteId: 'f3b469a2-8054-4bbb-8873-4035761aa4e3',
+        },
+    },
+    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` }],
+        ['script', { src: 'https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js' }],
+        ['script', { src: 'https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js' }],
+        ['script', { src: 'https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js' }],
+        ['script', { src: 'https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js' }],
+        ['script', { src: 'https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js' }],
+    ],
+    theme: 'vuepress-theme-dplayer',
+    themeConfig: {
+        repo: 'MoePlayer/DPlayer',
+        editLinks: true,
+        docsDir: '.',
+        locales: {
+            '/zh/': {
+                lang: 'zh-CN',
+                selectText: '选择语言',
+                label: '简体中文',
+                editLinkText: '在 GitHub 上编辑此页',
+                lastUpdated: '上次更新',
+                nav: [
+                    {
+                        text: '指南',
+                        link: '/zh/guide/',
+                    },
+                    {
+                        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: '/guide/',
+                    },
+                    {
+                        text: 'Ecosystem',
+                        link: '/ecosystem/',
+                    },
+                    {
+                        text: 'Support DPlayer',
+                        link: '/support/',
+                    },
+                ],
+            },
+        },
+    },
+};

docs/.vuepress/styles/index.styl

@@ -0,0 +1,48 @@
+.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;
+}
+
+.hero .description {
+    display: none;
+}
+
+.hero .action {
+    display: none;
+}
+
+.hero.custom .action {
+    display: block;
+}

docs/.vuepress/styles/palette.styl

@@ -0,0 +1 @@
+$accentColor = #F5712C

docs/.vuepress/theme/components/CarbonAds.vue

@@ -0,0 +1,65 @@
+<script>
+export default {
+  name: 'CarbonAds',
+
+  watch: {
+    '$route' (to, from) {
+      if (
+        to.path !== from.path
+        // Only reload if the ad has been loaded
+        // otherwise it's possible that the script is appended but
+        // the ads are not loaded yet. This would result in duplicated ads.
+        && this.$el.querySelector('#carbonads')
+      ) {
+        this.$el.innerHTML = ''
+        this.load()
+      }
+    }
+  },
+
+  mounted () {
+    this.load()
+  },
+
+  methods: {
+    load () {
+      const s = document.createElement('script')
+      s.id = '_carbonads_js'
+      s.src = `//cdn.carbonads.com/carbon.js?serve=CEAI6277&placement=dplayerjsorg`
+      this.$el.appendChild(s)
+    }
+  },
+
+  render (h) {
+    return h('div', { class: 'carbon-ads' })
+  }
+}
+</script>
+
+<style lang="stylus">
+.carbon-ads
+  min-height 102px
+  padding 1.5rem 1.5rem 0
+  margin-bottom -0.5rem
+  font-size 0.75rem
+  a
+    color #444
+    font-weight normal
+    display inline
+  .carbon-img
+    float left
+    margin-right 1rem
+    border 1px solid $borderColor
+    img
+      display block
+  .carbon-poweredby
+    color #999
+    display block
+    margin-top 0.5em
+
+@media (max-width: $MQMobile)
+  .carbon-ads
+    .carbon-img img
+      width 100px
+      height 77px
+</style>

docs/.vuepress/theme/index.js

@@ -0,0 +1,3 @@
+module.exports = {
+    extend: '@vuepress/theme-default',
+};

docs/.vuepress/theme/layouts/Layout.vue

@@ -0,0 +1,21 @@
+<template>
+  <ParentLayout>
+    <template #sidebar-top>
+      <CarbonAds />
+    </template>
+  </ParentLayout>
+</template>
+
+<script>
+import ParentLayout from '@parent-theme/layouts/Layout.vue'
+import CarbonAds from '@theme/components/CarbonAds.vue'
+
+export default {
+  name: 'Layout',
+
+  components: {
+    ParentLayout,
+    CarbonAds,
+  }
+}
+</script>

docs/.vuepress/theme/package.json

@@ -0,0 +1,4 @@
+{
+    "name": "vuepress-theme-dplayer",
+    "main": "index.js"
+}

docs/README.md

@@ -0,0 +1,12 @@
+---
+home: true
+actionText: Get Started →
+actionLink: /guide/
+footer: MIT Licensed | Made with love by DIYgod
+---
+
+<div>
+  <DPlayer :immediate="true"></DPlayer>
+</div>
+
+<div class="hero custom"><p class="action"><router-link to="/guide/" class="nav-link action-button">Get Started →</router-link></p></div>

docs/ecosystem.md

@@ -0,0 +1,69 @@
+---
+sidebar: auto
+---
+
+# Ecosystem
+
+Let's make DPlayer better, feel free to submit yours in [`Let me know!`](https://github.com/MoePlayer/DPlayer/issues/31)
+
+## Help
+
+### Creating issue
+
+-   [MoePlayer/DPlayer/issues](https://github.com/MoePlayer/DPlayer/issues)
+
+## Related Projects
+
+### Tooling
+
+-   [DPlayer-thumbnails](https://github.com/MoePlayer/DPlayer-thumbnails): generate video thumbnails
+
+### Danmaku 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
+-   [DPlayer_for_Z-BlogPHP](https://github.com/fghrsh/DPlayer_for_Z-BlogPHP): Z-BlogPHP
+-   [DPlayer for Discuz!](https://coding.net/u/Click_04/p/video/git): Discuz!
+-   [DPlayer for WordPress](https://github.com/BlueCocoa/DPlayer-WordPress): WordPress
+-   [DPlayerHandle](https://github.com/kn007/DPlayerHandle): WordPress
+-   [Selection](https://github.com/GreatSatan79/Selection): WordPress
+-   [Vue-DPlayer](https://github.com/sinchang/vue-dplayer): Vue
+-   [react-dplayer](https://github.com/hnsylitao/react-dplayer): React
+-   [rc-dplayer](https://github.com/tianfeng98/rc-dplayer): React
+
+### Other
+
+-   [DPlayer-Lite](https://github.com/kn007/DPlayer-Lite): lite version
+-   [hlsjs-p2p-engine](https://github.com/cdnbye/hlsjs-p2p-engine)
+
+## Who use DPlayer?
+
+-   [学习强国](https://itunes.apple.com/cn/app/%E5%AD%A6%E4%B9%A0%E5%BC%BA%E5%9B%BD/id1426355645?mt=8): “学习强国”学习平台精心打造的手机客户端
+-   [小红书](https://www.xiaohongshu.com/): 中国最大的生活社区分享平台，同时也是发现全球好物的电商平台
+-   [极客时间](https://time.geekbang.org/): 极客邦科技出品的一款 IT 内容知识服务 App
+-   [嘀哩嘀哩](http://www.dilidili.wang/): 兴趣使然的无名小站（D 站）
+-   [银色子弹](https://www.sbsub.com/): 银色子弹，简称银弹，由多数柯南热爱者聚集在一起的组织
+-   [浙江大学 CC98 论坛](https://zh.wikipedia.org/wiki/CC98%E8%AE%BA%E5%9D%9B): 浙江大学校网内规模最大的论坛，中国各大学中较活跃的 BBS 之一
+-   [纸飞机南航青年网络社区](http://my.nuaa.edu.cn/video-video.html): 南京航空航天大学门户网站
+-   [otomads](https://otomads.com/): 专注于音 MAD 的视频弹幕网站
+-   [Cloudreve](https://github.com/HFO4/Cloudreve): 基于 ThinkPHP 构建的网盘系统
+-   [arozos](https://github.com/tobychui/arozos): General purposed Web Desktop Operating Platform / OS for Raspberry Pis
+-   [新东方云教室](https://roombox.xdf.cn/)
+-   [BBHouse](https://github.com/endcloud/bbhouse-tauri): A Bilibili Cross-Platform Desktop Client Powered By Tauri
+-   [Tampermonkey 阿里云盘](https://greasyfork.org/zh-CN/scripts/425955-%E9%98%BF%E9%87%8C%E4%BA%91%E7%9B%98)
+-   [arozos](https://github.com/tobychui/arozos)
+-   [GBCLStudio/fof-upload-qcloud](https://github.com/GBCLStudio/FoF-Upload-Qcloud)
+-   Feel free to submit yours in [`Let me know!`](https://github.com/MoePlayer/DPlayer/issues/31)
+
+## Contributors
+
+This project exists thanks to all the people who contribute.
+
+<a href="https://github.com/MoePlayer/DPlayer/graphs/contributors"><img src="https://opencollective.com/DPlayer/contributors.svg?width=890" /></a>

docs/guide.md

@@ -0,0 +1,832 @@
+---
+sidebar: auto
+---
+
+# Guide
+
+# DPlayer
+
+🍭 Wow, such a lovely HTML5 danmaku video player
+
+<DPlayer :immediate="true"></DPlayer>
+
+&nbsp;
+
+## Special Thanks
+
+### Sponsors
+
+&nbsp;
+
+<div>
+<a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
+    <img height="60px" src="https://player.dogecloud.com/img/logo_with_product3.png">
+</a>
+</div>
+
+## Installation
+
+Using npm:
+
+```
+npm install dplayer --save
+```
+
+Using Yarn:
+
+```
+yarn add dplayer
+```
+
+## Quick Start
+
+At first, let's initialize a simplest DPlayer
+
+Load DPlayer files
+
+```html
+<div id="dplayer"></div>
+<script src="DPlayer.min.js"></script>
+```
+
+Or work with module bundler:
+
+```js
+import DPlayer from 'dplayer';
+
+const dp = new DPlayer(options);
+```
+
+Initialization in js:
+
+```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/',
+    },
+});
+```
+
+## 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 [#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                                                                                |
+| airplay              | false                              | enable airplay in Safari                                                                                                                                   |
+| chromecast           | false                              | enable Chromecast                                                                                                                                          |
+| 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                               |
+| playbackSpeed        | [0.5, 0.75, 1, 1.25, 1.5, 2]       | optional playback speed, or or you can set a custom one                                                                                                    |
+| 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 [#live](#live)                                                                                                |
+| preventClickToggle   | false                              | prevent toggle video play/pause status when click player                                                                                                   |
+| video                | -                                  | video info                                                                                                                                                 |
+| 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 [#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                                                                               |
+| subtitle.fontSize    | '20px'                             | subtitle font size                                                                                                                                         |
+| 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`                         | danmaku pool id, it must be unique                                                                                                                         |
+| danmaku.api          | `required`                         | see [#Danmaku API](#danmaku-api)                                                                                                                           |
+| danmaku.token        | -                                  | back end verification token                                                                                                                                |
+| danmaku.maximum      | -                                  | danmaku maximum quantity                                                                                                                                   |
+| 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 |
+| danmaku.speedRate    | 1                                  | danmaku speed multiplier, the larger the faster                                                                                                            |
+| 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                                                          |
+
+```js
+const dp = new DPlayer({
+    container: document.getElementById('dplayer'),
+    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,
+        speedRate: 0.5,
+    },
+    contextmenu: [
+        {
+            text: 'custom1',
+            link: 'https://github.com/DIYgod/DPlayer',
+        },
+        {
+            text: 'custom2',
+            click: (player) => {
+                console.log(player);
+            },
+        },
+    ],
+    highlight: [
+        {
+            text: 'marker for 20s',
+            time: 20,
+        },
+        {
+            text: 'marker for 2mins',
+            time: 120,
+        },
+    ],
+});
+```
+
+## API
+
+-   `dp.play()`: play video
+
+-   `dp.pause()`: pause video
+
+-   `dp.seek(time: number)`: seek to specified time
+
+    ```js
+    dp.seek(100);
+    ```
+
+-   `dp.toggle()`: toggle between play and pause
+
+-   `dp.on(event: string, handler: function)`: bind video and player events, [see more details](https://dplayer.diygod.dev/guide.html#event-binding)
+
+-   `dp.switchVideo(video, danmaku)`: switch to a new video
+
+    ```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, 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
+
+-   `dp.destroy()`: destroy player
+
+-   `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.duration`: returns video total time
+
+-   `dp.video.paused`: returns whether the video paused
+
+-   most [native api](http://www.w3schools.com/tags/ref_av_dom.asp) are supported
+
+-   `dp.danmaku`
+
+-   `dp.danmaku.send(danmaku, callback: function)`: submit a new danmaku to back end
+
+    ```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)`: draw a new danmaku to player in real time
+
+    ```js
+    dp.danmaku.draw({
+        text: 'DIYgod is amazing',
+        color: '#fff',
+        type: 'top',
+    });
+    ```
+
+-   `dp.danmaku.opacity(percentage: number)`: set danmaku opacity, opacity should between 0 and 1
+
+    ```js
+    dp.danmaku.opacity(0.5);
+    ```
+
+-   `dp.danmaku.clear()`: clear all danmakus
+
+-   `dp.danmaku.hide()`: hide danmaku
+
+-   `dp.danmaku.show()`: show danmaku
+
+-   `dp.fullScreen`: two type: `web` or `browser`, the default one is `browser`
+
+-   `dp.fullScreen.request(type: string)`: request fullscreen
+
+    ```js
+    dp.fullScreen.request('web');
+    ```
+
+-   `dp.fullScreen.cancel(type: string)`: cancel fullscreen
+
+    ```js
+    dp.fullScreen.cancel('web');
+    ```
+
+## Event binding
+
+`dp.on(event, handler)`
+
+```js
+dp.on('ended', function () {
+    console.log('player ended');
+});
+```
+
+Video events
+
+-   abort
+-   canplay
+-   canplaythrough
+-   durationchange
+-   emptied
+-   ended
+-   error
+-   loadeddata
+-   loadedmetadata
+-   loadstart
+-   mozaudioavailable
+-   pause
+-   play
+-   playing
+-   progress
+-   ratechange
+-   seeked
+-   seeking
+-   stalled
+-   suspend
+-   timeupdate
+-   volumechange
+-   waiting
+
+Player events
+
+-   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
+-   webfullscreen
+-   webfullscreen_cancel
+-   subtitle_show
+-   subtitle_hide
+-   subtitle_change
+
+## Quality switching
+
+Set video url and video type in `video.quality`, set default quality by `video.defaultQuality`.
+
+<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({
+    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',
+    },
+});
+```
+
+When using `customType` ([Work with other MSE library](#work-with-other-mse-library)), you should listen for the `destroy` and `quality_end` events to destroy the MSE library instance in a timely manner to avoid memory leaks.
+
+```js
+const dp = new DPlayer({
+    container: document.getElementById('dplayer'),
+    video: {
+        quality: [
+            {
+                name: 'HD',
+                url: 'demo_hd.m3u8',
+                type: 'Hls',
+            },
+            {
+                name: 'SD',
+                url: 'demo_sd.m3u8',
+                type: 'Hls',
+            },
+        ],
+        defaultQuality: 0,
+        customType: {
+            Hls: (video, player) => {
+                const hls = new window.Hls();
+                hls.loadSource(video.src);
+                hls.attachMedia(video);
+
+                hls.sessionId = crypto.randomUUID();
+                player.sessionId = hls.sessionId;
+                player.events.on('destroy', () => {
+                    hls.destroy();
+                });
+                player.events.on('quality_end', () => {
+                    if (hls.sessionId !== player.sessionId) {
+                        hls.destroy();
+                    }
+                });
+            },
+        },
+    },
+});
+```
+
+## Danmaku
+
+### Danmaku API
+
+`danmaku.api`
+
+<!-- **Ready-made API**
+
+url: https://api.prprpr.me/dplayer/ -->
+
+Daily backup data: [DPlayer-data](https://github.com/DIYgod/DPlayer-data)
+
+**Setting up yourself**
+
+[DPlayer-node](https://github.com/MoePlayer/DPlayer-node)
+
+### bilibili danmaku
+
+`danmaku.addition`
+
+API: <https://api.prprpr.me/dplayer/v3/bilibili?aid=[aid]>
+
+```js
+const option = {
+    danmaku: {
+        // ...
+        addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=[aid]'],
+    },
+};
+```
+
+## MSE support
+
+### HLS
+
+It requires the library [hls.js](https://github.com/video-dev/hls.js) and it should be loaded before `DPlayer.min.js`.
+
+<DPlayer :options="{
+    video: {
+        url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
+        type: 'hls'
+    }
+}"></DPlayer>
+
+```html
+<div id="dplayer"></div>
+<script src="hls.min.js"></script>
+<script src="DPlayer.min.js"></script>
+```
+
+```js
+const dp = new DPlayer({
+    container: document.getElementById('dplayer'),
+    video: {
+        url: 'demo.m3u8',
+        type: 'hls',
+    },
+    pluginOptions: {
+        hls: {
+            // hls config
+        },
+    },
+});
+console.log(dp.plugins.hls); // Hls instance
+```
+
+```js
+// another way, use 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
+
+It requires the library [dash.js](https://github.com/Dash-Industry-Forum/dash.js) and it should be loaded before `DPlayer.min.js`.
+
+```html
+<div id="dplayer"></div>
+<script src="dash.min.js"></script>
+<script src="DPlayer.min.js"></script>
+```
+
+```js
+const dp = new DPlayer({
+    container: document.getElementById('dplayer'),
+    video: {
+        url: 'demo.mpd',
+        type: 'dash',
+    },
+    pluginOptions: {
+        dash: {
+            // dash config
+        },
+    },
+});
+console.log(dp.plugins.dash); // Dash instance
+```
+
+```js
+// another way, use 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);
+            },
+        },
+    },
+});
+```
+
+### MPEG DASH (Shaka)
+
+It requires the library [shaka-player](https://github.com/google/shaka-player) and it should be loaded before `DPlayer.min.js`.
+
+```html
+<div id="dplayer"></div>
+<script src="shaka-player.compiled.js"></script>
+<script src="DPlayer.min.js"></script>
+```
+
+```js
+const dp = new DPlayer({
+    container: document.getElementById('dplayer'),
+    screenshot: true,
+    video: {
+        url: 'demo.mpd',
+        type: 'shakaDash',
+        customType: {
+            shakaDash: function (video, player) {
+                var src = video.src;
+                var playerShaka = new shaka.Player(video); // 将会修改 video.src
+                playerShaka.load(src);
+            },
+        },
+    },
+});
+```
+
+### FLV
+
+It requires the library [flv.js](https://github.com/Bilibili/flv.js) and it should be loaded before `DPlayer.min.js`.
+
+<DPlayer :options="{
+    video: {
+        url: 'https://api.dogecloud.com/player/get.flv?vcode=5ac682e6f8231991&userId=17&ext=.flv',
+        type: 'flv'
+    }
+}"></DPlayer>
+
+```html
+<div id="dplayer"></div>
+<script src="flv.min.js"></script>
+<script src="DPlayer.min.js"></script>
+```
+
+```js
+const dp = new DPlayer({
+    container: document.getElementById('dplayer'),
+    video: {
+        url: 'demo.flv',
+        type: 'flv',
+    },
+    pluginOptions: {
+        flv: {
+            // refer to https://github.com/bilibili/flv.js/blob/master/docs/api.md#flvjscreateplayer
+            mediaDataSource: {
+                // mediaDataSource config
+            },
+            config: {
+                // config
+            },
+        },
+    },
+});
+console.log(dp.plugins.flv); // flv instance
+```
+
+```js
+// another way, use 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
+
+It requires the library [webtorrent](https://github.com/webtorrent/webtorrent) and it should be loaded before `DPlayer.min.js`.
+
+<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
+<div id="dplayer"></div>
+<script src="webtorrent.min.js"></script>
+<script src="DPlayer.min.js"></script>
+```
+
+```js
+const dp = new DPlayer({
+    container: document.getElementById('dplayer'),
+    video: {
+        url: 'magnet:demo',
+        type: 'webtorrent',
+    },
+    pluginOptions: {
+        webtorrent: {
+            // webtorrent config
+        },
+    },
+});
+console.log(dp.plugins.webtorrent); // WebTorrent instance
+```
+
+```js
+// another way, use 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');
+                        }
+                    );
+                });
+            },
+        },
+    },
+});
+```
+
+### Work with other MSE library
+
+DPlayer can work with any MSE library via `customType` option.
+
+```html
+<div id="dplayer"></div>
+<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
+<script src="DPlayer.min.js"></script>
+```
+
+```js
+var type = 'normal';
+if (Hls.isSupported() && Hls.WEBRTC_SUPPORT) {
+    type = 'customHls';
+}
+const dp = new DPlayer({
+    container: document.getElementById('dplayer'),
+    video: {
+        url: 'demo.m3u8',
+        type: type,
+        customType: {
+            customHls: function (video, player) {
+                const hls = new Hls({
+                    debug: false,
+                    // Other hlsjsConfig options provided by hls.js
+                    p2pConfig: {
+                        live: false,
+                        // Other p2pConfig options provided by CDNBye http://www.cdnbye.com/en/
+                    },
+                });
+                hls.loadSource(video.src);
+                hls.attachMedia(video);
+            },
+        },
+    },
+});
+```
+
+## Live
+
+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
+const dp = new DPlayer({
+    container: document.getElementById('dplayer'),
+    live: true,
+    danmaku: true,
+    apiBackend: {
+        read: function (options) {
+            console.log('Pretend to connect WebSocket');
+            options.success([]);
+        },
+        send: function (options) {
+            console.log('Pretend to send danmaku via WebSocket', options.data);
+            options.success();
+        },
+    },
+    video: {
+        url: 'demo.m3u8',
+        type: 'hls',
+    },
+});
+```
+
+Draw danmaku after getting a danmaku via WebSocket:
+
+```js
+const danmaku = {
+    text: 'Get a danmaku via WebSocket',
+    color: '#fff',
+    type: 'right',
+};
+dp.danmaku.draw(danmaku);
+```
+
+## FAQ
+
+### Why can't player be full screen?
+
+If player is contained in a iframe, try adding the `allowfullscreen` attribute to the iframe.
+
+For full browser support it should look like this:
+
+```html
+<iframe src="example.com" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"></iframe>
+```
+
+### Why can't player autoplay in some mobile browsers?
+
+Most mobile browsers forbid video autoplay, you wont be able to achieve it without hacks.

docs/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "docs",
+    "scripts": {
+        "docs:dev": "vuepress dev",
+        "docs:build": "vuepress build"
+    },
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+        "@vuepress/plugin-back-to-top": "^1.9.10",
+        "@vuepress/plugin-google-analytics": "^1.9.10",
+        "vuepress": "^1.9.10",
+        "vuepress-plugin-umami": "^0.0.4"
+    }
+}

docs/support.md

@@ -0,0 +1,42 @@
+---
+sidebar: auto
+---
+
+# Sponsor DPlayer Development
+
+DPlayer is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.
+
+If you run a business and are using DPlayer in a revenue-generating product, it makes business sense to sponsor DPlayer development: it ensures the project that your product relies on stays healthy and actively maintained.
+
+If you are an individual user and have enjoyed the productivity of using DPlayer, consider donating as a sign of appreciation - like buying me coffee once in a while :)
+
+You can support DPlayer via donations.
+
+### Recurring Donation
+
+Recurring donors will be rewarded via express issue response, or even have your name displayed on our GitHub page and website.
+
+-   Become a Sponser on [GitHub](https://github.com/sponsors/DIYgod)
+-   Become a Sponser on [Patreon](https://www.patreon.com/DIYgod)
+-   Become a Sponser on [爱发电](https://afdian.net/@diygod)
+-   Contact us directly: i@diygod.me
+
+### One-time Donation
+
+We accept donations via the following ways:
+
+-   [WeChat Pay](https://diygod.me/images/wx.jpg)
+-   [Alipay](https://diygod.me/images/zfb.jpg)
+-   [Paypal](https://www.paypal.me/DIYgod)
+
+## Sponsors
+
+<a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
+    <img width="222px" src="hhttps://player.dogecloud.com/img/logo_with_product3.png">
+</a>
+
+## DPlayer contributors
+
+This project exists thanks to all the people who contribute.
+
+<a href="https://github.com/MoePlayer/DPlayer/graphs/contributors"><img src="https://opencollective.com/DPlayer/contributors.svg?width=890" /></a>

docs/zh/README.md

@@ -0,0 +1,12 @@
+---
+home: true
+actionText: Get Started →
+actionLink: /zh/guide/
+footer: MIT Licensed | Made with love by DIYgod
+---
+
+<div>
+  <DPlayer :immediate="true"></DPlayer>
+</div>
+
+<div class="hero custom"><p class="action"><router-link to="/zh/guide/" class="nav-link action-button">快速上手 →</router-link></p></div>

docs/zh/ecosystem.md

@@ -0,0 +1,63 @@
+---
+sidebar: auto
+---
+
+# 生态
+
+让 DPlayer 变得更好，请随意在 [`Let me know!`](https://github.com/MoePlayer/DPlayer/issues/31) 提交你的项目和产品
+
+## 帮助
+
+### 提交 issue
+
+-   [MoePlayer/DPlayer/issues](https://github.com/MoePlayer/DPlayer/issues)
+
+## 相关项目
+
+### 工具
+
+-   [DPlayer-thumbnails](https://github.com/MoePlayer/DPlayer-thumbnails): generate video thumbnails
+
+### 弹幕接口
+
+-   [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
+
+### 插件
+
+-   [DPlayer-for-typecho](https://github.com/volio/DPlayer-for-typecho): Typecho
+-   [Hexo-tag-dplayer](https://github.com/NextMoe/hexo-tag-dplayer): Hexo
+-   [DPlayer_for_Z-BlogPHP](https://github.com/fghrsh/DPlayer_for_Z-BlogPHP): Z-BlogPHP
+-   [DPlayer for Discuz!](https://coding.net/u/Click_04/p/video/git): Discuz!
+-   [DPlayer for WordPress](https://github.com/BlueCocoa/DPlayer-WordPress): WordPress
+-   [DPlayerHandle](https://github.com/kn007/DPlayerHandle): WordPress
+-   [Selection](https://github.com/GreatSatan79/Selection): WordPress
+-   [Vue-DPlayer](https://github.com/sinchang/vue-dplayer): Vue
+-   [react-dplayer](https://github.com/hnsylitao/react-dplayer): React
+-   [rc-dplayer](https://github.com/tianfeng98/rc-dplayer): React
+
+### 其他
+
+-   [DPlayer-Lite](https://github.com/kn007/DPlayer-Lite): lite version
+-   [hlsjs-p2p-engine](https://github.com/cdnbye/hlsjs-p2p-engine)
+
+## 谁在用 DPlayer?
+
+-   [学习强国](https://itunes.apple.com/cn/app/%E5%AD%A6%E4%B9%A0%E5%BC%BA%E5%9B%BD/id1426355645?mt=8): “学习强国”学习平台精心打造的手机客户端
+-   [小红书](https://www.xiaohongshu.com/): 中国最大的生活社区分享平台，同时也是发现全球好物的电商平台
+-   [极客时间](https://time.geekbang.org/): 极客邦科技出品的一款 IT 内容知识服务 App
+-   [嘀哩嘀哩](http://www.dilidili.wang/): 兴趣使然的无名小站（D 站）
+-   [银色子弹](https://www.sbsub.com/): 银色子弹，简称银弹，由多数柯南热爱者聚集在一起的组织
+-   [浙江大学 CC98 论坛](https://zh.wikipedia.org/wiki/CC98%E8%AE%BA%E5%9D%9B): 浙江大学校网内规模最大的论坛，中国各大学中较活跃的 BBS 之一
+-   [纸飞机南航青年网络社区](http://my.nuaa.edu.cn/video-video.html): 南京航空航天大学门户网站
+-   [otomads](https://otomads.com/): 专注于音 MAD 的视频弹幕网站
+-   [Cloudreve](https://github.com/HFO4/Cloudreve): 基于 ThinkPHP 构建的网盘系统
+-   [arozos](https://github.com/tobychui/arozos): General purposed Web Desktop Operating Platform / OS for Raspberry Pis
+-   [新东方云教室](https://roombox.xdf.cn/)
+-   [BBHouse](https://github.com/endcloud/bbhouse-tauri): A Bilibili Cross-Platform Desktop Client Powered By Tauri
+-   [Tampermonkey 阿里云盘](https://greasyfork.org/zh-CN/scripts/425955-%E9%98%BF%E9%87%8C%E4%BA%91%E7%9B%98)
+-   [arozos](https://github.com/tobychui/arozos)
+-   [GBCLStudio/fof-upload-qcloud](https://github.com/GBCLStudio/FoF-Upload-Qcloud)
+-   Feel free to submit yours in [`Let me know!`](https://github.com/MoePlayer/DPlayer/issues/31)

docs/zh/guide.md

@@ -0,0 +1,816 @@
+---
+sidebar: auto
+---
+
+# 指南
+
+# DPlayer
+
+🍭 Wow, such a lovely HTML5 danmaku video player
+
+<DPlayer :immediate="true"></DPlayer>
+
+&nbsp;
+
+## Special Thanks
+
+### Sponsors
+
+<div>
+<a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
+    <img height="60px" src="https://player.dogecloud.com/img/logo_with_product3.png">
+</a>
+</div>
+
+## 安装
+
+使用 npm:
+
+```
+npm install dplayer --save
+```
+
+使用 Yarn:
+
+```
+yarn add dplayer
+```
+
+## 快速开始
+
+我们先尝试初始化一个最简单的 DPlayer
+
+加载播放器文件:
+
+```html
+<div id="dplayer"></div>
+<script src="DPlayer.min.js"></script>
+```
+
+或者使用模块管理器:
+
+```js
+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                              | 开启直播模式, 见[#直播](#直播)                                                                          |
+| autoplay             | false                              | 视频自动播放                                                                                            |
+| theme                | '#b7daff'                          | 主题色                                                                                                  |
+| loop                 | false                              | 视频循环播放                                                                                            |
+| lang                 | navigator.language.toLowerCase()   | 可选值: 'en', 'zh-cn', 'zh-tw'                                                                          |
+| screenshot           | false                              | 开启截图，如果开启，视频和视频封面需要允许跨域                                                          |
+| hotkey               | true                               | 开启热键，支持快进、快退、音量控制、播放暂停                                                            |
+| airplay              | false                              | 在 Safari 中开启 AirPlay                                                                                |
+| chromecast           | false                              | 启用 Chromecast                                                                                         |
+| preload              | 'auto'                             | 视频预加载，可选值: 'none', 'metadata', 'auto'                                                          |
+| volume               | 0.7                                | 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效                                  |
+| playbackSpeed        | [0.5, 0.75, 1, 1.25, 1.5, 2]       | 可选的播放速率，可以设置成自定义的数组                                                                  |
+| logo                 | -                                  | 在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置                                                |
+| apiBackend           | -                                  | 自定义获取和发送弹幕行为，见[#直播](#直播)                                                              |
+| preventClickToggle   | false                              | 阻止点击播放器时候自动切换播放/暂停                                                                     |
+| video                | -                                  | 视频信息                                                                                                |
+| 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' 或其他自定义类型, 见[#MSE 支持](#mse-支持) |
+| video.customType     | -                                  | 自定义类型, 见[#MSE 支持](#mse-支持)                                                                    |
+| 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`                         | 见[#弹幕接口](#弹幕接口)                                                                                |
+| danmaku.token        | -                                  | 弹幕后端验证 token                                                                                      |
+| danmaku.maximum      | -                                  | 弹幕最大数量                                                                                            |
+| danmaku.addition     | -                                  | 额外外挂弹幕，见[#bilibili 弹幕](#bilibili-弹幕)                                                        |
+| danmaku.user         | 'DIYgod'                           | 弹幕用户名                                                                                              |
+| danmaku.bottom       | -                                  | 弹幕距离播放器底部的距离，防止遮挡字幕，取值形如: '10px' '10%'                                          |
+| danmaku.unlimited    | false                              | 海量弹幕模式，即使重叠也展示全部弹幕，请注意播放器会记忆用户设置，用户手动设置后即失效                  |
+| danmaku.speedRate    | 1                                  | 弹幕速度倍率，越大速度越快                                                                              |
+| contextmenu          | []                                 | 自定义右键菜单                                                                                          |
+| highlight            | []                                 | 自定义进度条提示点                                                                                      |
+| mutex                | true                               | 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器                                            |
+
+```js
+const dp = new DPlayer({
+    container: document.getElementById('dplayer'),
+    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,
+        speedRate: 0.5,
+    },
+    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)`: 绑定视频和播放器事件，见[#事件绑定](#事件绑定)
+
+-   `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` 设置默认清晰度
+
+<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({
+    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',
+    },
+});
+```
+
+在使用 `customType` [配合其他 MSE 库使用](#配合其他-mse-库使用)时，需要监听 `destroy` 和 `quality_end` 事件及时销毁 MSE 库实例，避免内存泄漏
+
+```js
+const dp = new DPlayer({
+    container: document.getElementById('dplayer'),
+    video: {
+        quality: [
+            {
+                name: 'HD',
+                url: 'demo_hd.m3u8',
+                type: 'Hls',
+            },
+            {
+                name: 'SD',
+                url: 'demo_sd.m3u8',
+                type: 'Hls',
+            },
+        ],
+        defaultQuality: 0,
+        customType: {
+            Hls: (video, player) => {
+                const hls = new window.Hls();
+                hls.loadSource(video.src);
+                hls.attachMedia(video);
+
+                hls.sessionId = crypto.randomUUID();
+                player.sessionId = hls.sessionId;
+                player.events.on('destroy', () => {
+                    hls.destroy();
+                });
+                player.events.on('quality_end', () => {
+                    if (hls.sessionId !== player.sessionId) {
+                        hls.destroy();
+                    }
+                });
+            },
+        },
+    },
+});
+```
+
+## 弹幕
+
+### 弹幕接口
+
+`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: <https://api.prprpr.me/dplayer/v3/bilibili?aid=[aid]>
+
+```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)。
+
+<DPlayer :options="{
+    video: {
+        url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
+        type: 'hls'
+    }
+}"></DPlayer>
+
+```html
+<div id="dplayer"></div>
+<script src="hls.min.js"></script>
+<script src="DPlayer.min.js"></script>
+```
+
+```js
+const dp = new DPlayer({
+    container: document.getElementById('dplayer'),
+    video: {
+        url: 'demo.m3u8',
+        type: 'hls',
+    },
+    pluginOptions: {
+        hls: {
+            // hls config
+        },
+    },
+});
+console.log(dp.plugins.hls); // 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
+<div id="dplayer"></div>
+<script src="dash.min.js"></script>
+<script src="DPlayer.min.js"></script>
+```
+
+```js
+const dp = new DPlayer({
+    container: document.getElementById('dplayer'),
+    video: {
+        url: 'demo.mpd',
+        type: 'dash',
+    },
+    pluginOptions: {
+        dash: {
+            // dash config
+        },
+    },
+});
+console.log(dp.plugins.dash); // 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);
+            },
+        },
+    },
+});
+```
+
+### MPEG DASH (Shaka)
+
+需要在 `DPlayer.min.js` 前面加载 [shaka-player.compiled.js](https://github.com/google/shaka-player)。
+
+```html
+<div id="dplayer"></div>
+<script src="shaka-player.compiled.js"></script>
+<script src="DPlayer.min.js"></script>
+```
+
+```js
+const dp = new DPlayer({
+    container: document.getElementById('dplayer'),
+    screenshot: true,
+    video: {
+        url: 'demo.mpd',
+        type: 'shakaDash',
+        customType: {
+            shakaDash: function (video, player) {
+                var src = video.src;
+                var playerShaka = new shaka.Player(video); // 将会修改 video.src
+                playerShaka.load(src);
+            },
+        },
+    },
+});
+```
+
+### FLV
+
+需要在 `DPlayer.min.js` 前面加载 [flv.js](https://github.com/Bilibili/flv.js)。
+
+<DPlayer :options="{
+    video: {
+        url: 'https://api.dogecloud.com/player/get.flv?vcode=5ac682e6f8231991&userId=17&ext=.flv',
+        type: 'flv'
+    }
+}"></DPlayer>
+
+```html
+<div id="dplayer"></div>
+<script src="flv.min.js"></script>
+<script src="DPlayer.min.js"></script>
+```
+
+```js
+const dp = new DPlayer({
+    container: document.getElementById('dplayer'),
+    video: {
+        url: 'demo.flv',
+        type: 'flv',
+    },
+    pluginOptions: {
+        flv: {
+            // refer to https://github.com/bilibili/flv.js/blob/master/docs/api.md#flvjscreateplayer
+            mediaDataSource: {
+                // mediaDataSource config
+            },
+            config: {
+                // config
+            },
+        },
+    },
+});
+console.log(dp.plugins.flv); // 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)。
+
+<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
+<div id="dplayer"></div>
+<script src="webtorrent.min.js"></script>
+<script src="DPlayer.min.js"></script>
+```
+
+```js
+const dp = new DPlayer({
+    container: document.getElementById('dplayer'),
+    video: {
+        url: 'magnet:demo',
+        type: 'webtorrent',
+    },
+    pluginOptions: {
+        webtorrent: {
+            // webtorrent config
+        },
+    },
+});
+console.log(dp.plugins.webtorrent); // 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 库一起使用，例如支持 P2P 插件：
+
+```html
+<div id="dplayer"></div>
+<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
+<script src="DPlayer.min.js"></script>
+```
+
+```js
+var type = 'normal';
+if (Hls.isSupported() && Hls.WEBRTC_SUPPORT) {
+    type = 'customHls';
+}
+const dp = new DPlayer({
+    container: document.getElementById('dplayer'),
+    video: {
+        url: 'demo.m3u8',
+        type: type,
+        customType: {
+            customHls: function (video, player) {
+                const hls = new Hls({
+                    debug: false,
+                    // Other hlsjsConfig options provided by hls.js
+                    p2pConfig: {
+                        live: false, // 如果是直播设为true
+                        // Other p2pConfig options provided by CDNBye http://www.cdnbye.com/cn/
+                    },
+                });
+                hls.loadSource(video.src);
+                hls.attachMedia(video);
+            },
+        },
+    },
+});
+```
+
+## 直播
+
+你可以把 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
+const dp = new DPlayer({
+    container: document.getElementById('dplayer'),
+    live: true,
+    danmaku: true,
+    apiBackend: {
+        read: function (options) {
+            console.log('Pretend to connect WebSocket');
+            options.success([]);
+        },
+        send: function (options) {
+            console.log('Pretend to send danmaku via WebSocket', options.data);
+            options.success();
+        },
+    },
+    video: {
+        url: 'demo.m3u8',
+        type: 'hls',
+    },
+});
+```
+
+通过 WebSocket 获取到弹幕之后，通过 `dp.danmaku.draw` 绘制弹幕:
+
+```js
+const danmaku = {
+    text: 'Get a danmaku via WebSocket',
+    color: '#fff',
+    type: 'right',
+};
+dp.danmaku.draw(danmaku);
+```
+
+## 常见问题
+
+### 为什么播放器不能全屏？
+
+如果播放器被包含在 iframe 里，尝试在 iframe 上添加 `allowfullscreen` 属性。
+
+为了完善的浏览器兼容性，它应该是这样：
+
+```html
+<iframe src="example.com" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"></iframe>
+```
+
+### 为什么播放器不能在手机上自动播放？
+
+大多数移动端浏览器禁止了视频自动播放。

docs/zh/support.md

@@ -0,0 +1,42 @@
+---
+sidebar: auto
+---
+
+# 赞助 DPlayer 的研发
+
+DPlayer 是采用 MIT 许可的开源项目，使用完全免费。 但是随着项目规模的增长，也需要有相应的资金支持才能持续项目的维护的开发。
+
+如果你是企业经营者并且将 DPlayer 用在商业产品中，那么赞助 DPlayer 有商业上的益处：可以让你的产品所依赖的框架保持健康并得到积极的维护。
+
+如果你是个人开发者并且享受 DPlayer 带来的高开发效率，可以用捐助来表示你的谢意 —— 比如偶尔给我买杯咖啡 :)
+
+你可以通过下列的方法来赞助 DPlayer 的开发.
+
+## 周期性赞助
+
+-   通过 [GitHub](https://github.com/sponsors/DIYgod) 赞助
+-   通过 [Patreon](https://www.patreon.com/DIYgod) 赞助
+-   通过 [爱发电](https://afdian.net/@diygod) 赞助
+-   给我们发邮件联系赞助事宜: <i@diygod.me>
+
+## 一次性赞助
+
+我们通过以下方式接受赞助:
+
+-   [微信支付](https://diygod.me/images/wx.jpg)
+-   [支付宝](https://diygod.me/images/zfb.jpg)
+-   [Paypal](https://www.paypal.me/DIYgod)
+
+## 赞助商
+
+<div>
+<a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
+    <img height="60px" src="https://player.dogecloud.com/img/logo_with_product3.png">
+</a>
+</div>
+
+## DPlayer 贡献者
+
+感谢所有贡献者。
+
+<a href="https://github.com/MoePlayer/DPlayer/graphs/contributors"><img src="https://opencollective.com/DPlayer/contributors.svg?width=890" /></a>

package.json

@@ -1,62 +1,78 @@
 {
-  "name": "dplayer",
-  "version": "1.22.0",
-  "description": "Wow, such a lovely HTML5 danmaku video player",
-  "main": "dist/DPlayer.min.js",
-  "style": "dist/DPlayer.min.css",
-  "scripts": {
-    "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"
-  },
-  "files": [
-    "dist"
-  ],
-  "repository": {
-    "url": "git+https://github.com/DIYgod/DPlayer.git",
-    "type": "git"
-  },
-  "keywords": [
-    "player",
-    "danmaku",
-    "video",
-    "html5"
-  ],
-  "author": "DIYgod",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/DIYgod/DPlayer/issues"
-  },
-  "homepage": "https://github.com/DIYgod/DPlayer#readme",
-  "devDependencies": {
-    "art-template": "4.12.2",
-    "art-template-loader": "1.4.3",
-    "autoprefixer": "^7.2.5",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.1",
-    "cross-env": "^5.1.3",
-    "css-loader": "^0.28.9",
-    "eslint": "^4.17.0",
-    "eslint-loader": "^1.9.0",
-    "exports-loader": "^0.6.4",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.6",
-    "git-revision-webpack-plugin": "^2.5.1",
-    "node-sass": "^4.7.2",
-    "postcss-loader": "^2.1.0",
-    "sass-loader": "^6.0.6",
-    "strip-loader": "^0.1.2",
-    "style-loader": "^0.20.1",
-    "svg-inline-loader": "0.8.0",
-    "template-string-optimize-loader": "^2.2.3",
-    "url-loader": "^0.6.2",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.11.1"
-  },
-  "dependencies": {
-    "balloon-css": "^0.5.0",
-    "promise-polyfill": "7.0.2"
-  }
+    "name": "dplayer",
+    "version": "1.27.1",
+    "description": "Wow, such a lovely HTML5 danmaku video player",
+    "main": "dist/DPlayer.min.js",
+    "scripts": {
+        "start": "npm run dev",
+        "build": "cross-env NODE_ENV=production webpack --config webpack/prod.config.js --progress",
+        "dev": "cross-env NODE_ENV=development webpack serve --config webpack/dev.config.js",
+        "test": "",
+        "format": "prettier \"**/*.{js,json,md}\" --write",
+        "docs:dev": "vuepress dev docs",
+        "docs:build": "vuepress build docs",
+        "prepare": "husky install"
+    },
+    "lint-staged": {
+        "**/*": "prettier --write --ignore-unknown"
+    },
+    "files": [
+        "dist"
+    ],
+    "repository": {
+        "url": "git+https://github.com/DIYgod/DPlayer.git",
+        "type": "git"
+    },
+    "keywords": [
+        "player",
+        "danmaku",
+        "video",
+        "html5"
+    ],
+    "author": "DIYgod",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/DIYgod/DPlayer/issues"
+    },
+    "homepage": "https://github.com/DIYgod/DPlayer#readme",
+    "devDependencies": {
+        "@babel/core": "^7.22.10",
+        "@babel/preset-env": "^7.22.10",
+        "@vuepress/plugin-pwa": "1.9.9",
+        "art-template": "4.13.2",
+        "art-template-loader": "1.4.3",
+        "autoprefixer": "^10.4.15",
+        "babel-loader": "^9.1.3",
+        "cross-env": "^7.0.0",
+        "css-loader": "^6.8.1",
+        "cssnano": "^6.0.1",
+        "exports-loader": "^4.0.0",
+        "file-loader": "^6.0.0",
+        "git-revision-webpack-plugin": "^5.0.0",
+        "husky": "^8.0.3",
+        "less": "^4.2.0",
+        "less-loader": "^11.1.3",
+        "lint-staged": "^13.3.0",
+        "mini-css-extract-plugin": "2.7.6",
+        "postcss": "^8.4.27",
+        "postcss-loader": "^7.3.3",
+        "postcss-preset-env": "^9.1.1",
+        "prettier": "^3.0.1",
+        "prettier-check": "^2.0.0",
+        "pretty-quick": "^3.0.0",
+        "strip-loader": "^0.1.2",
+        "style-loader": "^3.3.3",
+        "svg-inline-loader": "0.8.2",
+        "template-string-optimize-loader": "^3.0.0",
+        "url-loader": "^4.1.0",
+        "webpack": "^5.88.2",
+        "webpack-cli": "5.1.4",
+        "webpack-dev-server": "^4.15.1",
+        "yorkie": "^2.0.0"
+    },
+    "dependencies": {
+        "axios": "1.4.0",
+        "balloon-css": "^1.0.3",
+        "promise-polyfill": "8.3.0"
+    }
 }

src/assets/airplay.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 288 288" xmlns="http://www.w3.org/2000/svg"><path d="M288 90v96c0 20-16 36-36 36h-10c-16 0-16-24 0-24h10c7 0 12-5 12-12V90c0-7-5-12-12-12H36c-7 0-12 5-12 12v96c0 7 5 12 12 12h10c16 0 16 24 0 24H36c-20 0-36-16-36-36V90c0-20 16-36 36-36h216c20 0 36 16 36 36zm-120 62l48 68c14 20 1 38-20 38H92c-21 0-34-18-20-38l48-68c13-18 35-18 48 0z"/></svg>

src/assets/chromecast.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="chromecast" class="svg-inline--fa fa-chromecast fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M447.8,64H64c-23.6,0-42.7,19.1-42.7,42.7v63.9H64v-63.9h383.8v298.6H298.6V448H448c23.6,0,42.7-19.1,42.7-42.7V106.7 C490.7,83.1,471.4,64,447.8,64z M21.3,383.6L21.3,383.6l0,63.9h63.9C85.2,412.2,56.6,383.6,21.3,383.6L21.3,383.6z M21.3,298.6V341 c58.9,0,106.6,48.1,106.6,107h42.7C170.7,365.6,103.7,298.7,21.3,298.6z M213.4,448h42.7c-0.5-129.5-105.3-234.3-234.8-234.6l0,42.4 C127.3,255.6,213.3,342,213.4,448z"></path></svg>

src/css/bezel.less

@@ -60,11 +60,11 @@
             animation: diplayer-loading-dot-fade .8s ease infinite;
             opacity: 0;
             transform-origin: 4px 4px;
-            @for $i from 7 through 1 {
-                &.diplayer-loading-dot-#{$i} {
-                    animation-delay: .1s * $i;
+            each(range(7), {
+                &.diplayer-loading-dot-@{value} {
+                    animation-delay: (@value * 0.1s);
                 }
-            }
+            });
         }
         @keyframes diplayer-loading-dot-fade {
             0% {

src/css/controller.less

@@ -35,13 +35,56 @@
             .dplayer-bar .dplayer-played .dplayer-thumb {
                 transform: scale(1);
             }
+            .dplayer-highlight {
+                display: block;
+                width: 8px;
+                transform: translateX(-4px);
+                top: 4px;
+                height: 40%;
+            }
+        }
+        .dplayer-highlight {
+            z-index: 12;
+            position: absolute;
+            top: 5px;
+            width: 6px;
+            height: 20%;
+            border-radius: 6px;
+            background-color: #fff;
+            text-align: center;
+            transform: translateX(-3px);
+            transition: all .2s ease-in-out;
+            &:hover {
+                .dplayer-highlight-text {
+                    display: block;
+                }
+                &~.dplayer-bar-preview {
+                    opacity: 0;
+                }
+                &~.dplayer-bar-time {
+                    opacity: 0;
+                }
+            }
+            .dplayer-highlight-text {
+                display: none;
+                position: absolute;
+                left: 50%;
+                top: -24px;
+                padding: 5px 8px;
+                background-color: rgba(0, 0, 0, .62);
+                color: #fff;
+                border-radius: 4px;
+                font-size: 12px;
+                white-space: nowrap;
+                transform: translateX(-50%);
+            }
         }
         .dplayer-bar-preview {
             position: absolute;
             background: #fff;
             pointer-events: none;
             display: none;
-            background-size: auto 100%;
+            background-size: 16000px 100%;
         }
         .dplayer-bar-preview-canvas {
             position: absolute;
@@ -57,7 +100,6 @@
             position: absolute;
             left: 0px;
             top: -20px;
-            width: 30px;
             border-radius: 4px;
             padding: 5px 7px;
             background-color: rgba(0, 0, 0, 0.62);
@@ -236,6 +278,9 @@
                     color: #fff;
                     opacity: 0.8;
                 }
+                &::-ms-clear {
+                    display: none;
+                }
             }
         }
         &.dplayer-icons-left {
@@ -363,6 +408,41 @@
             display: inline-block;
             height: 100%;
         }
+        .dplayer-subtitles {
+            display: inline-block;
+            height: 100%;
+            .dplayer-subtitles-box {
+                position: absolute;
+                right: 0;
+                bottom: 50px;
+                transform: scale(0);
+                width: fit-content;
+                max-width: 240px;
+                min-width: 120px;
+                border-radius: 2px;
+                background: rgba(28, 28, 28, 0.9);
+                padding: 7px 0;
+                transition: all .3s ease-in-out;
+                overflow: auto;
+                z-index: 2;
+                &.dplayer-subtitles-panel {
+                    display: block;
+                }
+                &.dplayer-subtitles-box-open {
+                    transform: scale(1);
+                }
+            }
+            .dplayer-subtitles-item {
+                height: 30px;
+                padding: 5px 10px;
+                box-sizing: border-box;
+                cursor: pointer;
+                position: relative;
+                &:hover {
+                    background-color: rgba(255, 255, 255, .1);
+                }
+            }
+        }
         .dplayer-setting {
             display: inline-block;
             height: 100%;
@@ -389,7 +469,6 @@
                 }
                 &.dplayer-setting-box-narrow {
                     width: 70px;
-                    height: 180px;
                     text-align: center;
                 }
                 &.dplayer-setting-box-speed {
@@ -606,4 +685,22 @@
             }
         }
     }
+}
+
+.dplayer-mobile-play {
+    display: none;
+    width: 50px;
+    height: 50px;
+    border: none;
+    background-color: transparent;
+    outline: none;
+    cursor: pointer;
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 0;
+    opacity: 0.8;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
 }

src/css/danmaku.less

@@ -12,7 +12,7 @@
         user-select: none;
         cursor: default;
         white-space: nowrap;
-        text-shadow: .5px .5px .5px rgba(0, 0, 0, .5);
+        text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
         &--demo {
             position: absolute;
             visibility: hidden;
@@ -24,7 +24,8 @@
         transform: translateX(100%);
         &.dplayer-danmaku-move {
             will-change: transform;
-            animation: danmaku 5s linear;
+            animation-name: danmaku;
+            animation-timing-function: linear;
             animation-play-state: paused;
         }
     }
@@ -41,7 +42,8 @@
         visibility: hidden;
         &.dplayer-danmaku-move {
             will-change: visibility;
-            animation: danmaku-center 4s linear;
+            animation-name: danmaku-center;
+            animation-timing-function: linear;
             animation-play-state: paused;
         }
     }
@@ -53,4 +55,4 @@
             visibility: visible;
         }
     }
-}
+}

src/css/notice.less

@@ -0,0 +1,53 @@
+.dplayer-notice-list{
+    position: absolute;
+    bottom: 60px;
+    left: 20px;
+
+    .dplayer-notice {
+        border-radius: 2px;
+        background: rgba(28, 28, 28, 0.9);
+        transition: all .3s ease-in-out;
+        overflow: hidden;
+        color: #fff;
+        display: table;
+        pointer-events: none;
+        animation: showNotice .3s ease 1 forwards;
+    }
+
+    .remove-notice{
+        animation: removeNotice .3s ease 1 forwards;
+    }
+}
+
+@keyframes showNotice {
+    from {
+        padding: 0;
+        font-size: 0;
+        margin-top: 0;
+    }
+    to {
+        padding: 7px 20px;
+        font-size: 14px;
+        margin-top: 5px;
+    }
+}
+
+@keyframes removeNotice {
+    0%{
+        padding: 7px 20px;
+        font-size: 14px;
+        margin-top: 5px;
+    }
+    20%{
+        font-size: 12px;
+    }
+    21%{
+        font-size: 0;
+        padding: 7px 10px;
+    }
+    100%{
+        padding: 0;
+        margin-top: 0;
+        font-size: 0;
+    }
+}

src/css/notice.scss

@@ -1,14 +0,0 @@
-.dplayer-notice {
-    opacity: 0;
-    position: absolute;
-    bottom: 60px;
-    left: 20px;
-    font-size: 14px;
-    border-radius: 2px;
-    background: rgba(28, 28, 28, 0.9);
-    padding: 7px 20px;
-    transition: all .3s ease-in-out;
-    overflow: hidden;
-    color: #fff;
-    pointer-events: none;
-}

src/css/player.less

@@ -11,7 +11,7 @@
     svg {
         width: 100%;
         height: 100%;
-        
+
         path,
         circle {
             fill: #fff;
@@ -26,23 +26,10 @@
         z-index: 100000;
         left: 0;
         top: 0;
-
-        .dplayer-danmaku {
-            .dplayer-danmaku-top,
-            .dplayer-danmaku-bottom {
-                &.dplayer-danmaku-move {
-                    animation: danmaku-center 6s linear;
-                    animation-play-state: inherit;
-                }
-            }
-
-            .dplayer-danmaku-right {
-                &.dplayer-danmaku-move {
-                    animation: danmaku 8s linear;
-                    animation-play-state: inherit;
-                }
-            }
-        }
+        margin: 0;
+        padding: 0;
+        transform: translate(0, 0);
+        
     }
 
     &.dplayer-no-danmaku {
@@ -76,11 +63,17 @@
         .dplayer-setting-loop {
             display: none;
         }
+
+        &.dplayer-no-danmaku {
+            .dplayer-setting {
+                display: none;
+            }
+        }
     }
 
     &.dplayer-arrow {
         .dplayer-danmaku {
-            font-size: 18px
+            font-size: 18px;
         }
         .dplayer-icon {
             margin: 0 -3px;
@@ -88,7 +81,6 @@
     }
 
     &.dplayer-playing {
-
         .dplayer-danmaku .dplayer-danmaku-move {
             animation-play-state: running;
         }
@@ -151,13 +143,16 @@
         z-index: 100000;
         left: 0;
         top: 0;
-        width: 100%;
-        height: 100%;
+        width: 100% !important;
+        height: 100% !important;
     }
     &.dplayer-mobile {
         .dplayer-controller .dplayer-icons {
             .dplayer-volume,
-            .dplayer-camera-icon {
+            .dplayer-camera-icon,
+            .dplayer-airplay-icon,
+            .dplayer-chromecast-icon,
+            .dplayer-play-icon {
                 display: none;
             }
             .dplayer-full .dplayer-full-in-icon {
@@ -169,6 +164,16 @@
         .dplayer-bar-time {
             display: none;
         }
+
+        &.dplayer-hide-controller {
+            .dplayer-mobile-play {
+                display: none;
+            }
+        }
+
+        .dplayer-mobile-play {
+            display: block;
+        }
     }
 }
 

src/js/api.js

@@ -1,53 +1,46 @@
-/*
- * xhr.status ---> fail
- * response.code === 0 ---> success
- * response.code !== 0 ---> error
- * */
-
-const SendXMLHttpRequest = (url, data, success, error, fail) => {
-    const xhr = new XMLHttpRequest();
-
-    xhr.onreadystatechange = () => {
-        if (xhr.readyState === 4) {
-            if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
-                const response = JSON.parse(xhr.responseText);
-
-                if (response.code !== 0) {
-                    return error(xhr, response);
-                }
-
-                return success(xhr, response);
-            }
-
-            fail(xhr);
-        }
-    };
-
-    xhr.open(data !== null ? 'POST' : 'GET', url, true);
-    xhr.send(data !== null ? JSON.stringify(data) : null);
-};
+import axios from 'axios';
 
 export default {
-    send: (endpoint, danmakuData, callback) => {
-        SendXMLHttpRequest(endpoint, danmakuData, (xhr, response) => {
-            console.log('Post danmaku: ', response);
-            if (callback) {
-                callback();
-            }
-        }, (xhr, response) => {
-            alert(response.msg);
-        }, (xhr) => {
-            console.log('Request was unsuccessful: ' + xhr.status);
-        });
+    send: (options) => {
+        axios
+            .post(options.url, options.data)
+            .then((response) => {
+                const data = response.data;
+                if (!data || data.code !== 0) {
+                    options.error && options.error(data && data.msg);
+                    return;
+                }
+                options.success && options.success(data);
+            })
+            .catch((e) => {
+                console.error(e);
+                options.error && options.error();
+            });
     },
 
-    read: (endpoint, callback) => {
-        SendXMLHttpRequest(endpoint, null, (xhr, response) => {
-            callback(null, response.danmaku);
-        }, (xhr, response) => {
-            callback({ status: xhr.status, response });
-        }, (xhr) => {
-            callback({ status: xhr.status, response: null });
-        });
-    }
-};
+    read: (options) => {
+        axios
+            .get(options.url)
+            .then((response) => {
+                const data = response.data;
+                if (!data || data.code !== 0) {
+                    options.error && options.error(data && data.msg);
+                    return;
+                }
+                options.success &&
+                    options.success(
+                        data.data.map((item) => ({
+                            time: item[0],
+                            type: item[1],
+                            color: item[2],
+                            author: item[3],
+                            text: item[4],
+                        }))
+                    );
+            })
+            .catch((e) => {
+                console.error(e);
+                options.error && options.error();
+            });
+    },
+};

src/js/bar.js

@@ -1,5 +1,5 @@
 class Bar {
-    constructor (template) {
+    constructor(template) {
         this.elements = {};
         this.elements.volume = template.volumeBar;
         this.elements.played = template.playedBar;
@@ -14,15 +14,15 @@ class Bar {
      * @param {Number} percentage
      * @param {String} direction - Point out the direction of this bar, Should be height or width
      */
-    set (type, percentage, direction) {
+    set(type, percentage, direction) {
         percentage = Math.max(percentage, 0);
         percentage = Math.min(percentage, 1);
         this.elements[type].style[direction] = percentage * 100 + '%';
     }
 
-    get (type) {
+    get(type) {
         return parseFloat(this.elements[type].style.width) / 100;
     }
 }
 
-export default Bar;
+export default Bar;

src/js/bezel.js

@@ -1,5 +1,5 @@
 class Bezel {
-    constructor (container) {
+    constructor(container) {
         this.container = container;
 
         this.container.addEventListener('animationend', () => {
@@ -7,10 +7,10 @@ class Bezel {
         });
     }
 
-    switch (icon) {
+    switch(icon) {
         this.container.innerHTML = icon;
         this.container.classList.add('dplayer-bezel-transition');
     }
 }
 
-export default Bezel;
+export default Bezel;

src/js/comment.js

@@ -1,5 +1,7 @@
+import utils from './utils';
+
 class Comment {
-    constructor (player) {
+    constructor(player) {
         this.player = player;
 
         this.player.template.mask.addEventListener('click', () => {
@@ -13,9 +15,9 @@ class Comment {
         });
 
         this.player.template.commentColorSettingBox.addEventListener('click', () => {
-            const sele = this.player.template.commentColorSettingBox.querySelector(`input:checked+span`);
+            const sele = this.player.template.commentColorSettingBox.querySelector('input:checked+span');
             if (sele) {
-                const color = this.player.template.commentColorSettingBox.querySelector(`input:checked`).value;
+                const color = this.player.template.commentColorSettingBox.querySelector('input:checked').value;
                 this.player.template.commentSettingFill.style.fill = color;
                 this.player.template.commentInput.style.color = color;
                 this.player.template.commentSendFill.style.fill = color;
@@ -37,7 +39,7 @@ class Comment {
         });
     }
 
-    show () {
+    show() {
         this.player.controller.disableAutoHide = true;
         this.player.template.controller.classList.add('dplayer-controller-comment');
         this.player.template.mask.classList.add('dplayer-mask-show');
@@ -45,7 +47,7 @@ class Comment {
         this.player.template.commentInput.focus();
     }
 
-    hide () {
+    hide() {
         this.player.template.controller.classList.remove('dplayer-controller-comment');
         this.player.template.mask.classList.remove('dplayer-mask-show');
         this.player.container.classList.remove('dplayer-show-controller');
@@ -53,41 +55,43 @@ class Comment {
         this.hideSetting();
     }
 
-    showSetting () {
+    showSetting() {
         this.player.template.commentSettingBox.classList.add('dplayer-comment-setting-open');
     }
 
-    hideSetting () {
+    hideSetting() {
         this.player.template.commentSettingBox.classList.remove('dplayer-comment-setting-open');
     }
 
-    toggleSetting () {
+    toggleSetting() {
         if (this.player.template.commentSettingBox.classList.contains('dplayer-comment-setting-open')) {
             this.hideSetting();
-        }
-        else {
+        } else {
             this.showSetting();
         }
     }
 
-    send () {
+    send() {
         this.player.template.commentInput.blur();
 
         // text can't be empty
         if (!this.player.template.commentInput.value.replace(/^\s+|\s+$/g, '')) {
-            this.player.notice(this.player.tran('Please input danmaku content!'));
+            this.player.notice(this.player.tran('please-input-danmaku'));
             return;
         }
 
-        this.player.danmaku.send({
-            text: this.player.template.commentInput.value,
-            color: this.player.container.querySelector('.dplayer-comment-setting-color input:checked').value,
-            type: this.player.container.querySelector('.dplayer-comment-setting-type input:checked').value
-        }, () => {
-            this.player.template.commentInput.value = '';
-            this.hide();
-        });
+        this.player.danmaku.send(
+            {
+                text: this.player.template.commentInput.value,
+                color: utils.color2Number(this.player.container.querySelector('.dplayer-comment-setting-color input:checked').value),
+                type: parseInt(this.player.container.querySelector('.dplayer-comment-setting-type input:checked').value),
+            },
+            () => {
+                this.player.template.commentInput.value = '';
+                this.hide();
+            }
+        );
     }
 }
 
-export default Comment;
+export default Comment;

src/js/contextmenu.js

@@ -1,18 +1,23 @@
 class ContextMenu {
-    constructor (player) {
+    constructor(player) {
         this.player = player;
+        this.shown = false;
 
-        [...this.player.template.menuItem].map((item, index) => {
+        Array.prototype.slice.call(this.player.template.menuItem).forEach((item, index) => {
             if (this.player.options.contextmenu[index].click) {
                 item.addEventListener('click', () => {
                     this.player.options.contextmenu[index].click(this.player);
                     this.hide();
                 });
             }
-            return item;
         });
 
-        this.player.container.addEventListener('contextmenu', (e) => {
+        this.contextmenuHandler = (e) => {
+            if (this.shown) {
+                this.hide();
+                return;
+            }
+
             const event = e || window.event;
             event.preventDefault();
 
@@ -22,41 +27,46 @@ class ContextMenu {
             this.player.template.mask.addEventListener('click', () => {
                 this.hide();
             });
-        });
+        };
+        this.player.container.addEventListener('contextmenu', this.contextmenuHandler);
     }
 
-    show (x, y) {
+    show(x, y) {
         this.player.template.menu.classList.add('dplayer-menu-show');
 
         const clientRect = this.player.container.getBoundingClientRect();
         if (x + this.player.template.menu.offsetWidth >= clientRect.width) {
             this.player.template.menu.style.right = clientRect.width - x + 'px';
             this.player.template.menu.style.left = 'initial';
-        }
-        else {
+        } else {
             this.player.template.menu.style.left = x + 'px';
             this.player.template.menu.style.right = 'initial';
         }
         if (y + this.player.template.menu.offsetHeight >= clientRect.height) {
             this.player.template.menu.style.bottom = clientRect.height - y + 'px';
             this.player.template.menu.style.top = 'initial';
-        }
-        else {
+        } else {
             this.player.template.menu.style.top = y + 'px';
             this.player.template.menu.style.bottom = 'initial';
         }
 
         this.player.template.mask.classList.add('dplayer-mask-show');
 
+        this.shown = true;
         this.player.events.trigger('contextmenu_show');
     }
 
-    hide () {
+    hide() {
         this.player.template.mask.classList.remove('dplayer-mask-show');
         this.player.template.menu.classList.remove('dplayer-menu-show');
 
+        this.shown = false;
         this.player.events.trigger('contextmenu_hide');
     }
+
+    destroy() {
+        this.player.container.removeEventListener('contextmenu', this.contextmenuHandler);
+    }
 }
 
-export default ContextMenu;
+export default ContextMenu;

src/js/controller.js

@@ -2,24 +2,21 @@ import utils from './utils';
 import Thumbnails from './thumbnails';
 import Icons from './icons';
 
+let cast;
+let runOnce = true;
+let isCasting = false;
+
 class Controller {
-    constructor (player) {
+    constructor(player) {
         this.player = player;
 
         this.autoHideTimer = 0;
         if (!utils.isMobile) {
-            this.player.container.addEventListener('mousemove', () => {
-                this.setAutoHide();
-            });
-            this.player.container.addEventListener('click', () => {
-                this.setAutoHide();
-            });
-            this.player.on('play', () => {
-                this.setAutoHide();
-            });
-            this.player.on('pause', () => {
-                this.setAutoHide();
-            });
+            this.setAutoHideHandler = this.setAutoHide.bind(this);
+            this.player.container.addEventListener('mousemove', this.setAutoHideHandler);
+            this.player.container.addEventListener('click', this.setAutoHideHandler);
+            this.player.on('play', this.setAutoHideHandler);
+            this.player.on('pause', this.setAutoHideHandler);
         }
 
         this.initPlayButton();
@@ -28,26 +25,39 @@ class Controller {
         this.initFullButton();
         this.initQualityButton();
         this.initScreenshotButton();
-        this.initSubtitleButton();
+        // if subtitle url not array, not init old single subtitle button
+        if (this.player.options.subtitle) {
+            if (typeof this.player.options.subtitle.url === 'string') {
+                this.initSubtitleButton();
+            }
+        }
+        this.initHighlights();
+        this.initAirplayButton();
+        this.initChromecastButton();
         if (!utils.isMobile) {
             this.initVolumeButton();
         }
     }
 
-    initPlayButton () {
+    initPlayButton() {
         this.player.template.playButton.addEventListener('click', () => {
             this.player.toggle();
         });
 
+        this.player.template.mobilePlayButton.addEventListener('click', () => {
+            this.player.toggle();
+        });
+
         if (!utils.isMobile) {
-            this.player.template.videoWrap.addEventListener('click', () => {
-                this.player.toggle();
-            });
-            this.player.template.controllerMask.addEventListener('click', () => {
-                this.player.toggle();
-            });
-        }
-        else {
+            if (!this.player.options.preventClickToggle) {
+                this.player.template.videoWrap.addEventListener('click', () => {
+                    this.player.toggle();
+                });
+                this.player.template.controllerMask.addEventListener('click', () => {
+                    this.player.toggle();
+                });
+            }
+        } else {
             this.player.template.videoWrap.addEventListener('click', () => {
                 this.toggle();
             });
@@ -57,24 +67,47 @@ class Controller {
         }
     }
 
-    initThumbnails () {
+    initHighlights() {
+        this.player.on('durationchange', () => {
+            if (this.player.video.duration !== 1 && this.player.video.duration !== Infinity) {
+                if (this.player.options.highlight) {
+                    const highlights = this.player.template.playedBarWrap.querySelectorAll('.dplayer-highlight');
+                    [].slice.call(highlights, 0).forEach((item) => {
+                        this.player.template.playedBarWrap.removeChild(item);
+                    });
+                    for (let i = 0; i < this.player.options.highlight.length; i++) {
+                        if (!this.player.options.highlight[i].text || !this.player.options.highlight[i].time) {
+                            continue;
+                        }
+                        const p = document.createElement('div');
+                        p.classList.add('dplayer-highlight');
+                        p.style.left = (this.player.options.highlight[i].time / this.player.video.duration) * 100 + '%';
+                        p.innerHTML = '<span class="dplayer-highlight-text">' + this.player.options.highlight[i].text + '</span>';
+                        this.player.template.playedBarWrap.insertBefore(p, this.player.template.playedBarTime);
+                    }
+                }
+            }
+        });
+    }
+
+    initThumbnails() {
         if (this.player.options.video.thumbnails) {
             this.thumbnails = new Thumbnails({
                 container: this.player.template.barPreview,
                 barWidth: this.player.template.barWrap.offsetWidth,
                 url: this.player.options.video.thumbnails,
-                events: this.player.events
+                events: this.player.events,
             });
 
             this.player.on('loadedmetadata', () => {
-                this.thumbnails.resize(160, this.player.video.videoHeight / this.player.video.videoWidth * 160);
+                this.thumbnails.resize(160, (this.player.video.videoHeight / this.player.video.videoWidth) * 160, this.player.template.barWrap.offsetWidth);
             });
         }
     }
 
-    initPlayedBar () {
+    initPlayedBar() {
         const thumbMove = (e) => {
-            let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.playedBarWrap)) / this.player.template.playedBarWrap.clientWidth;
+            let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getBoundingClientRectViewLeft(this.player.template.playedBarWrap)) / this.player.template.playedBarWrap.clientWidth;
             percentage = Math.max(percentage, 0);
             percentage = Math.min(percentage, 1);
             this.player.bar.set('played', percentage, 'width');
@@ -84,23 +117,23 @@ class Controller {
         const thumbUp = (e) => {
             document.removeEventListener(utils.nameMap.dragEnd, thumbUp);
             document.removeEventListener(utils.nameMap.dragMove, thumbMove);
-            let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.playedBarWrap)) / this.player.template.playedBarWrap.clientWidth;
+            let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getBoundingClientRectViewLeft(this.player.template.playedBarWrap)) / this.player.template.playedBarWrap.clientWidth;
             percentage = Math.max(percentage, 0);
             percentage = Math.min(percentage, 1);
             this.player.bar.set('played', percentage, 'width');
             this.player.seek(this.player.bar.get('played') * this.player.video.duration);
-            this.player.time.enable('progress');
+            this.player.moveBar = false;
         };
 
         this.player.template.playedBarWrap.addEventListener(utils.nameMap.dragStart, () => {
-            this.player.time.disable('progress');
+            this.player.moveBar = true;
             document.addEventListener(utils.nameMap.dragMove, thumbMove);
             document.addEventListener(utils.nameMap.dragEnd, thumbUp);
         });
 
         this.player.template.playedBarWrap.addEventListener(utils.nameMap.dragMove, (e) => {
             if (this.player.video.duration) {
-                const px = utils.cumulativeOffset(this.player.template.playedBarWrap).left;
+                const px = this.player.template.playedBarWrap.getBoundingClientRect().left;
                 const tx = (e.clientX || e.changedTouches[0].clientX) - px;
                 if (tx < 0 || tx > this.player.template.playedBarWrap.offsetWidth) {
                     return;
@@ -110,7 +143,7 @@ class Controller {
                     this.thumbnails && this.thumbnails.show();
                 }
                 this.thumbnails && this.thumbnails.move(tx);
-                this.player.template.playedBarTime.style.left = `${(tx - 20)}px`;
+                this.player.template.playedBarTime.style.left = `${tx - (time >= 3600 ? 25 : 20)}px`;
                 this.player.template.playedBarTime.innerText = utils.secondToTime(time);
                 this.player.template.playedBarTime.classList.remove('hidden');
             }
@@ -139,7 +172,7 @@ class Controller {
         }
     }
 
-    initFullButton () {
+    initFullButton() {
         this.player.template.browserFullButton.addEventListener('click', () => {
             this.player.fullScreen.toggle('browser');
         });
@@ -149,12 +182,12 @@ class Controller {
         });
     }
 
-    initVolumeButton () {
+    initVolumeButton() {
         const vWidth = 35;
 
         const volumeMove = (event) => {
             const e = event || window.event;
-            const percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.volumeBarWrap) - 5.5) / vWidth;
+            const percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getBoundingClientRectViewLeft(this.player.template.volumeBarWrap) - 5.5) / vWidth;
             this.player.volume(percentage);
         };
         const volumeUp = () => {
@@ -165,7 +198,7 @@ class Controller {
 
         this.player.template.volumeBarWrapWrap.addEventListener('click', (event) => {
             const e = event || window.event;
-            const percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.volumeBarWrap) - 5.5) / vWidth;
+            const percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getBoundingClientRectViewLeft(this.player.template.volumeBarWrap) - 5.5) / vWidth;
             this.player.volume(percentage);
         });
         this.player.template.volumeBarWrapWrap.addEventListener(utils.nameMap.dragStart, () => {
@@ -173,13 +206,12 @@ class Controller {
             document.addEventListener(utils.nameMap.dragEnd, volumeUp);
             this.player.template.volumeButton.classList.add('dplayer-volume-active');
         });
-        this.player.template.volumeIcon.addEventListener('click', () => {
+        this.player.template.volumeButtonIcon.addEventListener('click', () => {
             if (this.player.video.muted) {
                 this.player.video.muted = false;
                 this.player.switchVolumeIcon();
                 this.player.bar.set('volume', this.player.volume(), 'width');
-            }
-            else {
+            } else {
                 this.player.video.muted = true;
                 this.player.template.volumeIcon.innerHTML = Icons.volumeOff;
                 this.player.bar.set('volume', 0, 'width');
@@ -187,7 +219,7 @@ class Controller {
         });
     }
 
-    initQualityButton () {
+    initQualityButton() {
         if (this.player.options.video.quality) {
             this.player.template.qualityList.addEventListener('click', (e) => {
                 if (e.target.classList.contains('dplayer-quality-item')) {
@@ -197,43 +229,158 @@ class Controller {
         }
     }
 
-    initScreenshotButton () {
+    initScreenshotButton() {
         if (this.player.options.screenshot) {
             this.player.template.camareButton.addEventListener('click', () => {
-                const canvas = document.createElement("canvas");
+                const canvas = document.createElement('canvas');
                 canvas.width = this.player.video.videoWidth;
                 canvas.height = this.player.video.videoHeight;
                 canvas.getContext('2d').drawImage(this.player.video, 0, 0, canvas.width, canvas.height);
 
-                const dataURL = canvas.toDataURL();
-                this.player.template.camareButton.href = dataURL;
-                this.player.template.camareButton.download = "DPlayer.png";
-
-                this.player.events.trigger('screenshot', dataURL);
+                let dataURL;
+                canvas.toBlob((blob) => {
+                    dataURL = URL.createObjectURL(blob);
+                    const link = document.createElement('a');
+                    link.href = dataURL;
+                    link.download = 'DPlayer.png';
+                    link.style.display = 'none';
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                    URL.revokeObjectURL(dataURL);
+                    this.player.events.trigger('screenshot', dataURL);
+                });
             });
         }
     }
 
-    initSubtitleButton () {
-        if (this.player.options.subtitle) {
-            this.player.events.on('subtitle_show', () => {
-                this.player.template.subtitleButton.dataset.balloon = this.player.tran('Hide subtitle');
-                this.player.template.subtitleButtonInner.style.opacity = '';
-                this.player.user.set('subtitle', 1);
-            });
-            this.player.events.on('subtitle_hide', () => {
-                this.player.template.subtitleButton.dataset.balloon = this.player.tran('Show subtitle');
-                this.player.template.subtitleButtonInner.style.opacity = '0.4';
-                this.player.user.set('subtitle', 0);
-            });
+    initAirplayButton() {
+        if (this.player.options.airplay) {
+            if (window.WebKitPlaybackTargetAvailabilityEvent) {
+                this.player.video.addEventListener(
+                    'webkitplaybacktargetavailabilitychanged',
+                    function (event) {
+                        switch (event.availability) {
+                            case 'available':
+                                this.template.airplayButton.disable = false;
+                                break;
 
-            this.player.template.subtitleButton.addEventListener('click', () => {
-                this.player.subtitle.toggle();
+                            default:
+                                this.template.airplayButton.disable = true;
+                        }
+
+                        this.template.airplayButton.addEventListener(
+                            'click',
+                            function () {
+                                this.video.webkitShowPlaybackTargetPicker();
+                            }.bind(this)
+                        );
+                    }.bind(this.player)
+                );
+            } else {
+                this.player.template.airplayButton.style.display = 'none';
+            }
+        }
+    }
+
+    initChromecast() {
+        const script = window.document.createElement('script');
+        script.setAttribute('type', 'text/javascript');
+        script.setAttribute('src', 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1');
+        window.document.body.appendChild(script);
+
+        window.__onGCastApiAvailable = (isAvailable) => {
+            if (isAvailable) {
+                cast = window.chrome.cast;
+                const sessionRequest = new cast.SessionRequest(cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID);
+                const apiConfig = new cast.ApiConfig(
+                    sessionRequest,
+                    () => {},
+                    (status) => {
+                        if (status === cast.ReceiverAvailability.AVAILABLE) {
+                            console.log('chromecast: ', status);
+                        }
+                    }
+                );
+                cast.initialize(apiConfig, () => {});
+            }
+        };
+    }
+
+    initChromecastButton() {
+        if (this.player.options.chromecast) {
+            if (runOnce) {
+                runOnce = false;
+                this.initChromecast();
+            }
+            const discoverDevices = () => {
+                cast.requestSession(
+                    (s) => {
+                        this.session = s;
+                        launchMedia(this.player.options.video.url);
+                    },
+                    (err) => {
+                        if (err.code === 'cancel') {
+                            this.session = undefined;
+                        } else {
+                            console.error('Error selecting a cast device', err);
+                        }
+                    }
+                );
+            };
+
+            const launchMedia = (media) => {
+                const mediaInfo = new cast.media.MediaInfo(media);
+                const request = new cast.media.LoadRequest(mediaInfo);
+
+                if (!this.session) {
+                    window.open(media);
+                    return false;
+                }
+                this.session.loadMedia(request, onMediaDiscovered.bind(this, 'loadMedia'), onMediaError).play();
+                return true;
+            };
+
+            const onMediaDiscovered = (how, media) => {
+                this.currentMedia = media;
+            };
+
+            const onMediaError = (err) => {
+                console.error('Error launching media', err);
+            };
+
+            this.player.template.chromecastButton.addEventListener('click', () => {
+                if (isCasting) {
+                    isCasting = false;
+                    this.currentMedia.stop();
+                    this.session.stop();
+                    this.initChromecast();
+                } else {
+                    isCasting = true;
+                    discoverDevices();
+                }
             });
         }
     }
 
-    setAutoHide () {
+    initSubtitleButton() {
+        this.player.events.on('subtitle_show', () => {
+            this.player.template.subtitleButton.dataset.balloon = this.player.tran('hide-subs');
+            this.player.template.subtitleButtonInner.style.opacity = '';
+            this.player.user.set('subtitle', 1);
+        });
+        this.player.events.on('subtitle_hide', () => {
+            this.player.template.subtitleButton.dataset.balloon = this.player.tran('show-subs');
+            this.player.template.subtitleButtonInner.style.opacity = '0.4';
+            this.player.user.set('subtitle', 0);
+        });
+
+        this.player.template.subtitleButton.addEventListener('click', () => {
+            this.player.subtitle.toggle();
+        });
+    }
+
+    setAutoHide() {
         this.show();
         clearTimeout(this.autoHideTimer);
         this.autoHideTimer = setTimeout(() => {
@@ -243,32 +390,35 @@ class Controller {
         }, 3000);
     }
 
-    show () {
+    show() {
         this.player.container.classList.remove('dplayer-hide-controller');
     }
 
-    hide () {
+    hide() {
         this.player.container.classList.add('dplayer-hide-controller');
         this.player.setting.hide();
         this.player.comment && this.player.comment.hide();
     }
 
-    isShow () {
+    isShow() {
         return !this.player.container.classList.contains('dplayer-hide-controller');
     }
 
-    toggle () {
+    toggle() {
         if (this.isShow()) {
             this.hide();
-        }
-        else {
+        } else {
             this.show();
         }
     }
 
-    destroy () {
+    destroy() {
+        if (!utils.isMobile) {
+            this.player.container.removeEventListener('mousemove', this.setAutoHideHandler);
+            this.player.container.removeEventListener('click', this.setAutoHideHandler);
+        }
         clearTimeout(this.autoHideTimer);
     }
 }
 
-export default Controller;
+export default Controller;

src/js/danmaku.js

@@ -1,11 +1,14 @@
+import utils from './utils';
+
 class Danmaku {
-    constructor (options) {
+    constructor(options) {
         this.options = options;
+        this.player = this.options.player;
         this.container = this.options.container;
         this.danTunnel = {
             right: {},
             top: {},
-            bottom: {}
+            bottom: {},
         };
         this.danIndex = 0;
         this.dan = [];
@@ -18,13 +21,12 @@ class Danmaku {
         this.load();
     }
 
-    load () {
+    load() {
         let apiurl;
         if (this.options.api.maximum) {
-            apiurl = `${this.options.api.address}v2/?id=${this.options.api.id}&max=${this.options.api.maximum}`;
-        }
-        else {
-            apiurl = `${this.options.api.address}v2/?id=${this.options.api.id}`;
+            apiurl = `${this.options.api.address}v3/?id=${this.options.api.id}&max=${this.options.api.maximum}`;
+        } else {
+            apiurl = `${this.options.api.address}v3/?id=${this.options.api.id}`;
         }
         const endpoints = (this.options.api.addition || []).slice(0);
         endpoints.push(apiurl);
@@ -42,7 +44,7 @@ class Danmaku {
         });
     }
 
-    reload (newAPI) {
+    reload(newAPI) {
         this.options.api = newAPI;
         this.dan = [];
         this.clear();
@@ -50,58 +52,54 @@ class Danmaku {
     }
 
     /**
-    * Asynchronously read danmaku from all API endpoints
-    */
-    _readAllEndpoints (endpoints, callback) {
+     * Asynchronously read danmaku from all API endpoints
+     */
+    _readAllEndpoints(endpoints, callback) {
         const results = [];
         let readCount = 0;
-        const cbk = (i) => (err, data) => {
-            ++readCount;
-            if (err) {
-                if (err.response) {
-                    this.options.error(err.response.msg);
-                }
-                else {
-                    this.options.error('Request was unsuccessful: ' + err.status);
-                }
-                results[i] = [];
-            }
-            else {
-                const typeMap = ['right', 'top', 'bottom'];
-                if (data) {
-                    results[i] = data.map((item) => ({
-                        time: item[0],
-                        type: typeMap[item[1]],
-                        color: item[2],
-                        author: item[3],
-                        text: item[4]
-                    }));
-                }
-                else {
-                    results[i] = [];
-                }
-            }
-            if (readCount === endpoints.length) {
-                return callback(results);
-            }
-        };
 
         for (let i = 0; i < endpoints.length; ++i) {
-            this.options.apiBackend.read(endpoints[i], cbk(i));
+            this.options.apiBackend.read({
+                url: endpoints[i],
+                success: (data) => {
+                    results[i] = data;
+
+                    ++readCount;
+                    if (readCount === endpoints.length) {
+                        callback(results);
+                    }
+                },
+                error: (msg) => {
+                    this.options.error(msg || this.options.tran('danmaku-failed'));
+                    results[i] = [];
+
+                    ++readCount;
+                    if (readCount === endpoints.length) {
+                        callback(results);
+                    }
+                },
+            });
         }
     }
 
-    send (dan, callback) {
+    send(dan, callback) {
         const danmakuData = {
             token: this.options.api.token,
-            player: this.options.api.id,
+            id: this.options.api.id,
             author: this.options.api.user,
             time: this.options.time(),
             text: dan.text,
             color: dan.color,
-            type: dan.type
+            type: dan.type,
         };
-        this.options.apiBackend.send(this.options.api.address + 'v2/', danmakuData, callback);
+        this.options.apiBackend.send({
+            url: this.options.api.address + 'v3/',
+            data: danmakuData,
+            success: callback,
+            error: (msg) => {
+                this.options.error(msg || this.options.tran('danmaku-failed'));
+            },
+        });
 
         this.dan.splice(this.danIndex, 0, danmakuData);
         this.danIndex++;
@@ -109,14 +107,14 @@ class Danmaku {
             text: this.htmlEncode(danmakuData.text),
             color: danmakuData.color,
             type: danmakuData.type,
-            border: `2px solid ${this.options.borderColor}`
+            border: `2px solid ${this.options.borderColor}`,
         };
         this.draw(danmaku);
 
         this.events && this.events.trigger('danmaku_send', danmakuData);
     }
 
-    frame () {
+    frame() {
         if (this.dan.length && !this.paused && this.showing) {
             let item = this.dan[this.danIndex];
             const dan = [];
@@ -131,7 +129,7 @@ class Danmaku {
         });
     }
 
-    opacity (percentage) {
+    opacity(percentage) {
         if (percentage !== undefined) {
             const items = this.container.getElementsByClassName('dplayer-danmaku-item');
             for (let i = 0; i < items.length; i++) {
@@ -152,7 +150,7 @@ class Danmaku {
      * color - danmaku color, default: `#fff`
      * type - danmaku type, `right` `top` `bottom`, default: `right`
      */
-    draw (dan) {
+    draw(dan) {
         if (this.showing) {
             const itemHeight = this.options.height;
             const danWidth = this.container.offsetWidth;
@@ -189,8 +187,7 @@ class Danmaku {
                                 return i % itemY;
                             }
                         }
-                    }
-                    else {
+                    } else {
                         this.danTunnel[type][i + ''] = [ele];
                         ele.addEventListener('animationend', () => {
                             this.danTunnel[type][i + ''].splice(0, 1);
@@ -208,23 +205,20 @@ class Danmaku {
             const docFragment = document.createDocumentFragment();
 
             for (let i = 0; i < dan.length; i++) {
-                if (!dan[i].type) {
-                    dan[i].type = 'right';
-                }
+                dan[i].type = utils.number2Type(dan[i].type);
                 if (!dan[i].color) {
-                    dan[i].color = '#fff';
+                    dan[i].color = 16777215;
                 }
-                const item = document.createElement(`div`);
-                item.classList.add(`dplayer-danmaku-item`);
+                const item = document.createElement('div');
+                item.classList.add('dplayer-danmaku-item');
                 item.classList.add(`dplayer-danmaku-${dan[i].type}`);
                 if (dan[i].border) {
                     item.innerHTML = `<span style="border:${dan[i].border}">${dan[i].text}</span>`;
-                }
-                else {
+                } else {
                     item.innerHTML = dan[i].text;
                 }
                 item.style.opacity = this._opacity;
-                item.style.color = dan[i].color;
+                item.style.color = utils.number2Color(dan[i].color);
                 item.addEventListener('animationend', () => {
                     this.container.removeChild(item);
                 });
@@ -234,33 +228,34 @@ class Danmaku {
 
                 // adjust
                 switch (dan[i].type) {
-                case 'right':
-                    tunnel = getTunnel(item, dan[i].type, itemWidth);
-                    if (tunnel >= 0) {
-                        item.style.width = itemWidth + 1 + 'px';
-                        item.style.top = itemHeight * tunnel + 'px';
-                        item.style.transform = `translateX(-${danWidth}px)`;
-                    }
-                    break;
-                case 'top':
-                    tunnel = getTunnel(item, dan[i].type);
-                    if (tunnel >= 0) {
-                        item.style.top = itemHeight * tunnel + 'px';
-                    }
-                    break;
-                case 'bottom':
-                    tunnel = getTunnel(item, dan[i].type);
-                    if (tunnel >= 0) {
-                        item.style.bottom = itemHeight * tunnel + 'px';
-                    }
-                    break;
-                default:
-                    console.error(`Can't handled danmaku type: ${dan[i].type}`);
+                    case 'right':
+                        tunnel = getTunnel(item, dan[i].type, itemWidth);
+                        if (tunnel >= 0) {
+                            item.style.width = itemWidth + 1 + 'px';
+                            item.style.top = itemHeight * tunnel + 'px';
+                            item.style.transform = `translateX(-${danWidth}px)`;
+                        }
+                        break;
+                    case 'top':
+                        tunnel = getTunnel(item, dan[i].type);
+                        if (tunnel >= 0) {
+                            item.style.top = itemHeight * tunnel + 'px';
+                        }
+                        break;
+                    case 'bottom':
+                        tunnel = getTunnel(item, dan[i].type);
+                        if (tunnel >= 0) {
+                            item.style.bottom = itemHeight * tunnel + 'px';
+                        }
+                        break;
+                    default:
+                        console.error(`Can't handled danmaku type: ${dan[i].type}`);
                 }
 
                 if (tunnel >= 0) {
                     // move
-                    item.classList.add(`dplayer-danmaku-move`);
+                    item.classList.add('dplayer-danmaku-move');
+                    item.style.animationDuration = this._danAnimation(dan[i].type);
 
                     // insert
                     docFragment.appendChild(item);
@@ -273,15 +268,15 @@ class Danmaku {
         }
     }
 
-    play () {
+    play() {
         this.paused = false;
     }
 
-    pause () {
+    pause() {
         this.paused = true;
     }
 
-    _measure (text) {
+    _measure(text) {
         if (!this.context) {
             const measureStyle = getComputedStyle(this.container.getElementsByClassName('dplayer-danmaku-item')[0], null);
             this.context = document.createElement('canvas').getContext('2d');
@@ -290,7 +285,7 @@ class Danmaku {
         return this.context.measureText(text).width;
     }
 
-    seek () {
+    seek() {
         this.clear();
         for (let i = 0; i < this.dan.length; i++) {
             if (this.dan[i].time >= this.options.time()) {
@@ -301,11 +296,11 @@ class Danmaku {
         }
     }
 
-    clear () {
+    clear() {
         this.danTunnel = {
             right: {},
             top: {},
-            bottom: {}
+            bottom: {},
         };
         this.danIndex = 0;
         this.options.container.innerHTML = '';
@@ -313,17 +308,11 @@ class Danmaku {
         this.events && this.events.trigger('danmaku_clear');
     }
 
-    htmlEncode (str) {
-        return str.
-            replace(/&/g, "&amp;").
-            replace(/</g, "&lt;").
-            replace(/>/g, "&gt;").
-            replace(/"/g, "&quot;").
-            replace(/'/g, "&#x27;").
-            replace(/\//g, "&#x2f;");
+    htmlEncode(str) {
+        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;').replace(/\//g, '&#x2f;');
     }
 
-    resize () {
+    resize() {
         const danWidth = this.container.offsetWidth;
         const items = this.container.getElementsByClassName('dplayer-danmaku-item');
         for (let i = 0; i < items.length; i++) {
@@ -331,7 +320,7 @@ class Danmaku {
         }
     }
 
-    hide () {
+    hide() {
         this.showing = false;
         this.pause();
         this.clear();
@@ -339,7 +328,7 @@ class Danmaku {
         this.events && this.events.trigger('danmaku_hide');
     }
 
-    show () {
+    show() {
         this.seek();
         this.showing = true;
         this.play();
@@ -347,9 +336,24 @@ class Danmaku {
         this.events && this.events.trigger('danmaku_show');
     }
 
-    unlimit (boolean) {
+    unlimit(boolean) {
         this.unlimited = boolean;
     }
+
+    speed(rate) {
+        this.options.api.speedRate = rate;
+    }
+
+    _danAnimation(position) {
+        const rate = this.options.api.speedRate || 1;
+        const isFullScreen = !!this.player.fullScreen.isFullScreen();
+        const animations = {
+            top: `${(isFullScreen ? 6 : 4) / rate}s`,
+            right: `${(isFullScreen ? 8 : 5) / rate}s`,
+            bottom: `${(isFullScreen ? 6 : 4) / rate}s`,
+        };
+        return animations[position];
+    }
 }
 
 export default Danmaku;

src/js/events.js

@@ -1,29 +1,61 @@
 class Events {
-    constructor () {
+    constructor() {
         this.events = {};
 
         this.videoEvents = [
-            'abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'ended', 'error',
-            'loadeddata', 'loadedmetadata', 'loadstart', 'mozaudioavailable', 'pause', 'play',
-            'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend',
-            'timeupdate', 'volumechange', 'waiting'
+            'abort',
+            'canplay',
+            'canplaythrough',
+            'durationchange',
+            'emptied',
+            'ended',
+            'error',
+            'loadeddata',
+            'loadedmetadata',
+            'loadstart',
+            'mozaudioavailable',
+            'pause',
+            'play',
+            'playing',
+            'progress',
+            'ratechange',
+            'seeked',
+            'seeking',
+            'stalled',
+            'suspend',
+            'timeupdate',
+            'volumechange',
+            'waiting',
         ];
         this.playerEvents = [
             'screenshot',
-            'thumbnails_show', 'thumbnails_hide',
-            'danmaku_show', 'danmaku_hide', 'danmaku_clear', 'danmaku_loaded', 'danmaku_send',
+            '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',
+            'contextmenu_show',
+            'contextmenu_hide',
+            'notice_show',
+            'notice_hide',
+            'quality_start',
+            'quality_end',
             'destroy',
             'resize',
-            'fullscreen', 'fullscreen_cancel', 'webfullscreen', 'webfullscreen_cancel',
-            'subtitle_show', 'subtitle_hide', 'subtitle_change'
+            'fullscreen',
+            'fullscreen_cancel',
+            'webfullscreen',
+            'webfullscreen_cancel',
+            'subtitle_show',
+            'subtitle_hide',
+            'subtitle_change',
         ];
     }
 
-    on (name, callback) {
+    on(name, callback) {
         if (this.type(name) && typeof callback === 'function') {
             if (!this.events[name]) {
                 this.events[name] = [];
@@ -32,7 +64,7 @@ class Events {
         }
     }
 
-    trigger (name, info) {
+    trigger(name, info) {
         if (this.events[name] && this.events[name].length) {
             for (let i = 0; i < this.events[name].length; i++) {
                 this.events[name][i](info);
@@ -40,11 +72,10 @@ class Events {
         }
     }
 
-    type (name) {
+    type(name) {
         if (this.playerEvents.indexOf(name) !== -1) {
             return 'player';
-        }
-        else if (this.videoEvents.indexOf(name) !== -1) {
+        } else if (this.videoEvents.indexOf(name) !== -1) {
             return 'video';
         }
 

src/js/fullscreen.js

@@ -1,9 +1,9 @@
 import utils from './utils';
 
 class FullScreen {
-    constructor (player) {
+    constructor(player) {
         this.player = player;
-
+        this.lastScrollPosition = { left: 0, top: 0 };
         this.player.events.on('webfullscreen', () => {
             this.player.resize();
         });
@@ -12,31 +12,49 @@ class FullScreen {
             utils.setScrollPosition(this.lastScrollPosition);
         });
 
-        const fullscreenchange = () => {
+        this.fullscreenchange = () => {
             this.player.resize();
             if (this.isFullScreen('browser')) {
                 this.player.events.trigger('fullscreen');
-            }
-            else {
+            } else {
                 utils.setScrollPosition(this.lastScrollPosition);
                 this.player.events.trigger('fullscreen_cancel');
             }
         };
-        this.player.container.addEventListener('fullscreenchange', fullscreenchange);
-        this.player.container.addEventListener('mozfullscreenchange', fullscreenchange);
-        this.player.container.addEventListener('webkitfullscreenchange', fullscreenchange);
-    }
-
-    isFullScreen (type = 'browser') {
-        switch (type) {
-        case 'browser':
-            return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
-        case 'web':
-            return this.player.container.classList.contains('dplayer-fulled');
+        this.docfullscreenchange = () => {
+            const fullEle = document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+            if (fullEle && fullEle !== this.player.container) {
+                return;
+            }
+            this.player.resize();
+            if (fullEle) {
+                this.player.events.trigger('fullscreen');
+            } else {
+                utils.setScrollPosition(this.lastScrollPosition);
+                this.player.events.trigger('fullscreen_cancel');
+            }
+        };
+        if (/Firefox/.test(navigator.userAgent)) {
+            document.addEventListener('mozfullscreenchange', this.docfullscreenchange);
+            document.addEventListener('fullscreenchange', this.docfullscreenchange);
+        } else {
+            this.player.container.addEventListener('fullscreenchange', this.fullscreenchange);
+            this.player.container.addEventListener('webkitfullscreenchange', this.fullscreenchange);
+            document.addEventListener('msfullscreenchange', this.docfullscreenchange);
+            document.addEventListener('MSFullscreenChange', this.docfullscreenchange);
         }
     }
 
-    request (type = 'browser') {
+    isFullScreen(type = 'browser') {
+        switch (type) {
+            case 'browser':
+                return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
+            case 'web':
+                return this.player.container.classList.contains('dplayer-fulled');
+        }
+    }
+
+    request(type = 'browser') {
         const anotherType = type === 'browser' ? 'web' : 'browser';
         const anotherTypeOn = this.isFullScreen(anotherType);
         if (!anotherTypeOn) {
@@ -44,25 +62,27 @@ class FullScreen {
         }
 
         switch (type) {
-        case 'browser':
-            if (this.player.container.requestFullscreen) {
-                this.player.container.requestFullscreen();
-            }
-            else if (this.player.container.mozRequestFullScreen) {
-                this.player.container.mozRequestFullScreen();
-            }
-            else if (this.player.container.webkitRequestFullscreen) {
-                this.player.container.webkitRequestFullscreen();
-            }
-            else if (this.player.video.webkitEnterFullscreen) {   // Safari for iOS
-                this.player.video.webkitEnterFullscreen();
-            }
-            break;
-        case 'web':
-            this.player.container.classList.add('dplayer-fulled');
-            document.body.classList.add('dplayer-web-fullscreen-fix');
-            this.player.events.trigger('webfullscreen');
-            break;
+            case 'browser':
+                if (this.player.container.requestFullscreen) {
+                    this.player.container.requestFullscreen();
+                } else if (this.player.container.mozRequestFullScreen) {
+                    this.player.container.mozRequestFullScreen();
+                } else if (this.player.container.webkitRequestFullscreen) {
+                    this.player.container.webkitRequestFullscreen();
+                } else if (this.player.video.webkitEnterFullscreen) {
+                    // Safari for iOS
+                    this.player.video.webkitEnterFullscreen();
+                } else if (this.player.video.webkitEnterFullScreen) {
+                    this.player.video.webkitEnterFullScreen();
+                } else if (this.player.container.msRequestFullscreen) {
+                    this.player.container.msRequestFullscreen();
+                }
+                break;
+            case 'web':
+                this.player.container.classList.add('dplayer-fulled');
+                document.body.classList.add('dplayer-web-fullscreen-fix');
+                this.player.events.trigger('webfullscreen');
+                break;
         }
 
         if (anotherTypeOn) {
@@ -70,35 +90,50 @@ class FullScreen {
         }
     }
 
-    cancel (type = 'browser') {
+    cancel(type = 'browser') {
         switch (type) {
-        case 'browser':
-            if (document.cancelFullScreen) {
-                document.cancelFullScreen();
-            }
-            else if (document.mozCancelFullScreen) {
-                document.mozCancelFullScreen();
-            }
-            else if (document.webkitCancelFullScreen) {
-                document.webkitCancelFullScreen();
-            }
-            break;
-        case 'web':
-            this.player.container.classList.remove('dplayer-fulled');
-            document.body.classList.remove('dplayer-web-fullscreen-fix');
-            this.player.events.trigger('webfullscreen_cancel');
-            break;
+            case 'browser':
+                if (document.cancelFullScreen) {
+                    document.cancelFullScreen();
+                } else if (document.mozCancelFullScreen) {
+                    document.mozCancelFullScreen();
+                } else if (document.webkitCancelFullScreen) {
+                    document.webkitCancelFullScreen();
+                } else if (document.webkitCancelFullscreen) {
+                    document.webkitCancelFullscreen();
+                } else if (document.msCancelFullScreen) {
+                    document.msCancelFullScreen();
+                } else if (document.msExitFullscreen) {
+                    document.msExitFullscreen();
+                }
+                break;
+            case 'web':
+                this.player.container.classList.remove('dplayer-fulled');
+                document.body.classList.remove('dplayer-web-fullscreen-fix');
+                this.player.events.trigger('webfullscreen_cancel');
+                break;
         }
     }
 
-    toggle (type = 'browser') {
+    toggle(type = 'browser') {
         if (this.isFullScreen(type)) {
             this.cancel(type);
-        }
-        else {
+        } else {
             this.request(type);
         }
     }
+
+    destroy() {
+        if (/Firefox/.test(navigator.userAgent)) {
+            document.removeEventListener('mozfullscreenchange', this.docfullscreenchange);
+            document.removeEventListener('fullscreenchange', this.docfullscreenchange);
+        } else {
+            this.player.container.removeEventListener('fullscreenchange', this.fullscreenchange);
+            this.player.container.removeEventListener('webkitfullscreenchange', this.fullscreenchange);
+            document.removeEventListener('msfullscreenchange', this.docfullscreenchange);
+            document.removeEventListener('MSFullscreenChange', this.docfullscreenchange);
+        }
+    }
 }
 
 export default FullScreen;

src/js/hotkey.js

@@ -1,55 +1,75 @@
 class HotKey {
-    constructor (player) {
-        if (player.options.hotkey) {
-            document.addEventListener('keydown', (e) => {
-                if (player.focus) {
-                    const tag = document.activeElement.tagName.toUpperCase();
-                    const editable = document.activeElement.getAttribute('contenteditable');
-                    if (tag !== 'INPUT' && tag !== 'TEXTAREA' && editable !== '' && editable !== 'true') {
-                        const event = e || window.event;
-                        let percentage;
-                        switch (event.keyCode) {
-                        case 32:
-                            event.preventDefault();
-                            player.toggle();
-                            break;
-                        case 37:
-                            event.preventDefault();
-                            player.seek(player.video.currentTime - 5);
-                            player.controller.setAutoHide();
-                            break;
-                        case 39:
-                            event.preventDefault();
-                            player.seek(player.video.currentTime + 5);
-                            player.controller.setAutoHide();
-                            break;
-                        case 38:
-                            event.preventDefault();
-                            percentage = player.volume() + 0.1;
-                            player.volume(percentage);
-                            break;
-                        case 40:
-                            event.preventDefault();
-                            percentage = player.volume() - 0.1;
-                            player.volume(percentage);
-                            break;
-                        }
-                    }
-                }
-            });
+    constructor(player) {
+        this.player = player;
+        this.doHotKeyHandler = this.doHotKey.bind(this);
+        this.cancelFullScreenHandler = this.cancelFullScreen.bind(this);
+        if (this.player.options.hotkey) {
+            document.addEventListener('keydown', this.doHotKeyHandler);
         }
 
-        document.addEventListener('keydown', (e) => {
-            const event = e || window.event;
-            switch (event.keyCode) {
+        document.addEventListener('keydown', this.cancelFullScreenHandler);
+    }
+
+    doHotKey(e) {
+        if (this.player.focus) {
+            const tag = document.activeElement.tagName.toUpperCase();
+            const editable = document.activeElement.getAttribute('contenteditable');
+            if (tag !== 'INPUT' && tag !== 'TEXTAREA' && editable !== '' && editable !== 'true') {
+                const event = e || window.event;
+                let percentage;
+                switch (event.keyCode) {
+                    case 32:
+                        event.preventDefault();
+                        this.player.toggle();
+                        break;
+                    case 37:
+                        event.preventDefault();
+                        if (this.player.options.live) {
+                            break;
+                        }
+                        this.player.seek(this.player.video.currentTime - 5);
+                        this.player.controller.setAutoHide();
+                        break;
+                    case 39:
+                        event.preventDefault();
+                        if (this.player.options.live) {
+                            break;
+                        }
+                        this.player.seek(this.player.video.currentTime + 5);
+                        this.player.controller.setAutoHide();
+                        break;
+                    case 38:
+                        event.preventDefault();
+                        percentage = this.player.volume() + 0.1;
+                        this.player.volume(percentage);
+                        break;
+                    case 40:
+                        event.preventDefault();
+                        percentage = this.player.volume() - 0.1;
+                        this.player.volume(percentage);
+                        break;
+                }
+            }
+        }
+    }
+
+    cancelFullScreen(e) {
+        const event = e || window.event;
+        switch (event.keyCode) {
             case 27:
-                if (player.fullScreen.isFullScreen('web')) {
-                    player.fullScreen.cancel('web');
+                if (this.player.fullScreen.isFullScreen('web')) {
+                    this.player.fullScreen.cancel('web');
                 }
                 break;
-            }
-        });
+        }
+    }
+
+    destroy() {
+        if (this.player.options.hotkey) {
+            document.removeEventListener('keydown', this.doHotKeyHandler);
+        }
+        document.removeEventListener('keydown', this.cancelFullScreenHandler);
     }
 }
 
-export default HotKey;
+export default HotKey;

src/js/i18n.js

@@ -7,94 +7,360 @@ W3C def language codes is :
 NOTE: use lowercase to prevent case typo from user!
 Use this as shown below..... */
 
-function i18n (lang) {
+function i18n(lang) {
     this.lang = lang;
-    this.tran = (text) => {
-        if (tranTxt[this.lang] && tranTxt[this.lang][text]) {
-            return tranTxt[this.lang][text];
-        }
-        else {
-            return text;
+    // in case someone says en-us, and en is present!
+    this.fallbackLang = this.lang.includes('-') ? this.lang.split('-')[0] : this.lang;
+    this.tran = (key) => {
+        key = key.toLowerCase();
+        if (tranTxt[this.lang] && tranTxt[this.lang][key]) {
+            return tranTxt[this.lang][key];
+        } else if (tranTxt[this.fallbackLang] && tranTxt[this.fallbackLang][key]) {
+            return tranTxt[this.fallbackLang][key];
+        } else if (standard[key]) {
+            return standard[key];
+        } else {
+            return key;
         }
     };
 }
 
-// add translation text here
-const tranTxt = {
-    "zh-cn" : {
-        'Danmaku is loading': '弹幕加载中',
-        'Top': '顶部',
-        'Bottom': '底部',
-        'Rolling': '滚动',
-        'Input danmaku, hit Enter': '输入弹幕，回车发送',
-        'About author': '关于作者',
-        'DPlayer feedback': '播放器意见反馈',
-        'About DPlayer': '关于 DPlayer 播放器',
-        'Loop': '洗脑循环',
-        'Speed': '速度',
-        'Opacity for danmaku': '弹幕透明度',
-        'Normal': '正常',
-        'Please input danmaku content!': '要输入弹幕内容啊喂！',
-        'Set danmaku color': '设置弹幕颜色',
-        'Set danmaku type': '设置弹幕类型',
-        'Show danmaku': '显示弹幕',
-        'This video fails to load': '视频加载失败',
-        'Switching to': '正在切换至',
-        'Switched to': '已经切换至',
-        'quality': '画质',
-        'FF': '快进',
-        'REW': '快退',
-        'Unlimited danmaku': '海量弹幕',
-        'Send danmaku': '发送弹幕',
-        'Setting': '设置',
-        'Full screen': '全屏',
-        'Web full screen': '页面全屏',
-        'Send': '发送',
-        'Screenshot': '截图',
-        's': '秒',
-        'Show subtitle': '显示字幕',
-        'Hide subtitle': '隐藏字幕',
-        'Volume': '音量',
-        'Live': '直播',
-        'Video info': '视频统计信息',
-    },
-    "zh-tw" : {
-        'Danmaku is loading': '彈幕加載中',
-        'Top': '頂部',
-        'Bottom': '底部',
-        'Rolling': '滾動',
-        'Input danmaku, hit Enter': '輸入彈幕，Enter 發送',
-        'About author': '關於作者',
-        'DPlayer feedback': '播放器意見反饋',
-        'About DPlayer': '關於 DPlayer 播放器',
-        'Loop': '循環播放',
-        'Speed': '速度',
-        'Opacity for danmaku': '彈幕透明度',
-        'Normal': '正常',
-        'Please input danmaku content!': '請輸入彈幕内容啊！',
-        'Set danmaku color': '設置彈幕顏色',
-        'Set danmaku type': '設置彈幕類型',
-        'Show danmaku': '顯示彈幕',
-        'This video fails to load': '視頻加載失敗',
-        'Switching to': '正在切換至',
-        'Switched to': '已經切換至',
-        'quality': '畫質',
-        'FF': '快進',
-        'REW': '快退',
-        'Unlimited danmaku': '海量彈幕',
-        'Send danmaku': '發送彈幕',
-        'Setting': '設置',
-        'Full screen': '全屏',
-        'Web full screen': '頁面全屏',
-        'Send': '發送',
-        'Screenshot': '截圖',
-        's': '秒',
-        'Show subtitle': '顯示字幕',
-        'Hide subtitle': '隱藏字幕',
-        'Volume': '音量',
-        'Live': '直播',
-        'Video info': '視頻統計信息',
-    }
+// abstract model for recognizing if valid translations are present
+// const model = {
+//     'danmaku-loading': [],
+//     top: [],
+//     bottom: [],
+//     rolling: [],
+//     'input-danmaku-enter': [],
+//     'about-author': [],
+//     'dplayer-feedback': [],
+//     'about-dplayer': [],
+//     loop: [],
+//     speed: [],
+//     'opacity-danmaku': [],
+//     normal: [],
+//     'please-input-danmaku': [],
+//     'set-danmaku-color': [],
+//     'set-danmaku-type': [],
+//     'show-danmaku': [],
+//     'video-failed': [],
+//     'danmaku-failed': [],
+//     'danmaku-send-failed': [],
+//     'switching-quality': [{ symbol: '%q', name: 'Quality', example: '720p' }],
+//     'switched-quality': [{ symbol: '%q', name: 'Quality', example: '720p' }],
+//     ff: [{ symbol: '%s', name: 'Seconds', example: '5' }],
+//     rew: [{ symbol: '%s', name: 'Seconds', example: '5' }],
+//     'unlimited-danmaku': [],
+//     'send-danmaku': [],
+//     setting: [],
+//     fullscreen: [],
+//     'web-fullscreen': [],
+//     send: [],
+//     screenshot: [],
+//     airplay: [],
+//     chromecast: [],
+//     'show-subs': [],
+//     'hide-subs': [],
+//     volume: [],
+//     live: [],
+//     'video-info': [],
+// };
+
+// Standard english translations
+const standard = {
+    'danmaku-loading': 'Danmaku is loading',
+    top: 'Top',
+    bottom: 'Bottom',
+    rolling: 'Rolling',
+    'input-danmaku-enter': 'Input danmaku, hit Enter',
+    'about-author': 'About author',
+    'dplayer-feedback': 'DPlayer feedback',
+    'about-dplayer': 'About DPlayer',
+    loop: 'Loop',
+    speed: 'Speed',
+    'opacity-danmaku': 'Opacity for danmaku',
+    normal: 'Normal',
+    'please-input-danmaku': 'Please input danmaku content!',
+    'set-danmaku-color': 'Set danmaku color',
+    'set-danmaku-type': 'Set danmaku type',
+    'show-danmaku': 'Show danmaku',
+    'video-failed': 'Video load failed',
+    'danmaku-failed': 'Danmaku load failed',
+    'danmaku-send-failed': 'Danmaku send failed',
+    'switching-quality': 'Switching to %q quality',
+    'switched-quality': 'Switched to %q quality',
+    ff: 'FF %s s',
+    rew: 'REW %s s',
+    'unlimited-danmaku': 'Unlimited danmaku',
+    'send-danmaku': 'Send danmaku',
+    setting: 'Setting',
+    fullscreen: 'Full screen',
+    'web-fullscreen': 'Web full screen',
+    send: 'Send',
+    screenshot: 'Screenshot',
+    airplay: 'AirPlay',
+    chromecast: 'ChromeCast',
+    subtitle: 'Subtitle',
+    off: 'Off',
+    'show-subs': 'Show subtitle',
+    'hide-subs': 'Hide subtitle',
+    volume: 'Volume',
+    live: 'Live',
+    'video-info': 'Video info',
 };
 
-export default i18n;
+// add translation text here
+const tranTxt = {
+    en: standard,
+    'zh-cn': {
+        'danmaku-loading': '弹幕加载中',
+        top: '顶部',
+        bottom: '底部',
+        rolling: '滚动',
+        'input-danmaku-enter': '输入弹幕，回车发送',
+        'about-author': '关于作者',
+        'dplayer-feedback': '播放器意见反馈',
+        'about-dplayer': '关于 DPlayer 播放器',
+        loop: '洗脑循环',
+        speed: '速度',
+        'opacity-danmaku': '弹幕透明度',
+        normal: '正常',
+        'please-input-danmaku': '要输入弹幕内容啊喂！',
+        'set-danmaku-color': '设置弹幕颜色',
+        'set-danmaku-type': '设置弹幕类型',
+        'show-danmaku': '显示弹幕',
+        'video-failed': '视频加载失败',
+        'danmaku-failed': '弹幕加载失败',
+        'danmaku-send-failed': '弹幕发送失败',
+        'switching-quality': '正在切换至 %q 画质',
+        'switched-quality': '已经切换至 %q 画质',
+        ff: '快进 %s 秒',
+        rew: '快退 %s 秒',
+        'unlimited-danmaku': '海量弹幕',
+        'send-danmaku': '发送弹幕',
+        setting: '设置',
+        fullscreen: '全屏',
+        'web-fullscreen': '页面全屏',
+        send: '发送',
+        screenshot: '截图',
+        airplay: '无线投屏',
+        chromecast: 'ChromeCast',
+        subtitle: '字幕',
+        off: '关闭',
+        'show-subs': '显示字幕',
+        'hide-subs': '隐藏字幕',
+        volume: '音量',
+        live: '直播',
+        'video-info': '视频统计信息',
+    },
+    'zh-tw': {
+        'danmaku-loading': '彈幕載入中',
+        top: '頂部',
+        bottom: '底部',
+        rolling: '滾動',
+        'input-danmaku-enter': '輸入彈幕，Enter 發送',
+        'about-author': '關於作者',
+        'dplayer-feedback': '播放器意見回饋',
+        'about-dplayer': '關於 DPlayer 播放器',
+        loop: '循環播放',
+        speed: '速度',
+        'opacity-danmaku': '彈幕透明度',
+        normal: '正常',
+        'please-input-danmaku': '請輸入彈幕內容啊！',
+        'set-danmaku-color': '設定彈幕顏色',
+        'set-danmaku-type': '設定彈幕類型',
+        'show-danmaku': '顯示彈幕',
+        'video-failed': '影片載入失敗',
+        'danmaku-failed': '彈幕載入失敗',
+        'danmaku-send-failed': '彈幕發送失敗',
+        'switching-quality': '正在切換至 %q 畫質',
+        'switched-quality': '已經切換至 %q 畫質',
+        ff: '快進 %s 秒',
+        rew: '快退 %s 秒',
+        'unlimited-danmaku': '巨量彈幕',
+        'send-danmaku': '發送彈幕',
+        setting: '設定',
+        fullscreen: '全螢幕',
+        'web-fullscreen': '頁面全螢幕',
+        send: '發送',
+        screenshot: '截圖',
+        airplay: '無線投屏',
+        chromecast: 'ChromeCast',
+        subtitle: '字幕',
+        off: '關閉',
+        'show-subs': '顯示字幕',
+        'hide-subs': '隱藏字幕',
+        volume: '音量',
+        live: '直播',
+        'video-info': '影片統計訊息',
+    },
+    'ko-kr': {
+        'danmaku-loading': 'Danmaku를 불러오는 중입니다.',
+        top: 'Top',
+        bottom: 'Bottom',
+        rolling: 'Rolling',
+        'input-danmaku-enter': 'Danmaku를 입력하고 Enter를 누르세요.',
+        'about-author': '만든이',
+        'dplayer-feedback': '피드백 보내기',
+        'about-dplayer': 'DPlayer 정보',
+        loop: '반복',
+        speed: '배속',
+        'opacity-danmaku': 'Danmaku 불투명도',
+        normal: '표준',
+        'please-input-danmaku': 'Danmaku를 입력하세요!',
+        'set-danmaku-color': 'Danmaku 색상',
+        'set-danmaku-type': 'Danmaku 설정',
+        'show-danmaku': 'Danmaku 표시',
+        'video-failed': '비디오를 불러오지 못했습니다.',
+        'danmaku-failed': 'Danmaku를 불러오지 못했습니다.',
+        'danmaku-send-failed': 'Danmaku 전송에 실패했습니다.',
+        'Switching to': '',
+        'Switched to': '',
+        'switching-quality': '전환 %q 화질',
+        'switched-quality': '전환 됨 %q 화질',
+        ff: '앞으로 %s 초',
+        rew: '뒤로 %s 초',
+        'unlimited-danmaku': '끝없는 Danmaku',
+        'send-danmaku': 'Danmaku 보내기',
+        setting: '설정',
+        fullscreen: '전체 화면',
+        'web-fullscreen': '웹 내 전체화면',
+        send: '보내기',
+        screenshot: '화면 캡쳐',
+        airplay: '에어플레이',
+        chromecast: 'ChromeCast',
+        subtitle: '부제',
+        off: '끄다',
+        'show-subs': '자막 보이기',
+        'hide-subs': '자막 숨기기',
+        Volume: '볼륨',
+        live: '생방송',
+        'video-info': '비디오 정보',
+    },
+    de: {
+        'danmaku-loading': 'Danmaku lädt...',
+        top: 'Oben',
+        bottom: 'Unten',
+        rolling: 'Rollend',
+        'input-danmaku-enter': 'Drücke Enter nach dem Einfügen vom Danmaku',
+        'about-author': 'Über den Autor',
+        'dplayer-feedback': 'DPlayer Feedback',
+        'about-dplayer': 'Über DPlayer',
+        loop: 'Wiederholen',
+        speed: 'Geschwindigkeit',
+        'opacity-danmaku': 'Transparenz für Danmaku',
+        normal: 'Normal',
+        'please-input-danmaku': 'Bitte Danmaku Inhalt eingeben!',
+        'set-danmaku-color': 'Danmaku Farbe festlegen',
+        'set-danmaku-type': 'Danmaku Typ festlegen',
+        'show-danmaku': 'Zeige Danmaku',
+        'video-failed': 'Das Video konnte nicht geladen werden',
+        'danmaku-failed': 'Danmaku konnte nicht geladen werden',
+        'danmaku-send-failed': 'Das senden von Danmaku ist fehgeschlagen',
+        'switching-quality': 'Wechsle zur %q Qualität',
+        'switched-quality': 'Zur %q Qualität gewechselt',
+        ff: '%s s Vorwärts',
+        rew: '%s s Zurück',
+        'unlimited-danmaku': 'Unlimitiertes Danmaku',
+        'send-danmaku': 'Sende Danmaku',
+        setting: 'Einstellungen',
+        fullscreen: 'Vollbild',
+        'web-fullscreen': 'Browser Vollbild',
+        send: 'Senden',
+        screenshot: 'Screenshot',
+        airplay: 'AirPlay',
+        'show-subs': 'Zeige Untertitel',
+        chromecast: 'ChromeCast',
+        subtitle: 'Untertitel',
+        off: 'Schließung',
+        'hide-subs': 'Verstecke Untertitel',
+        volume: 'Lautstärke',
+        live: 'Live',
+        'video-info': 'Video Info',
+    },
+    "ja":{
+        'danmaku-loading':'コメントを読み込んでいます',
+        top:'トップ',
+        bottom:'ボトム',
+        rolling:'スクロール',
+        'input-danmaku-enter':'コメントを入力し，Enter で送信',
+        'about-author':'作者について',
+        'dplayer-feedback':'DPlayer についての意見・要望',
+        'about-dplayer':'DPlayer について',
+        loop:'くり返し',
+        speed:'再生速度',
+        'opacity-danmaku':'コメントの透明度',
+        normal:'通常',
+        'please-input-danmaku':'コメントを入力してください!',
+        'set-danmaku-color':'コメントの色',
+        'set-danmaku-type':'コメントの種類',
+        'show-danmaku':'コメント表示',
+        'video-failed':'ビデオの読み込みに失敗',
+        'danmaku-failed':'コメントの読み込みに失敗',
+        'danmaku-send-failed':'コメントの送信に失敗',
+        'switching-quality':'%qへ切り替え中',
+        'switched-quality':'%qへ切り替え完了',
+        quality:'へ',
+        ff:'%s 秒早送り',
+        rew:'%s 秒早戻し',
+        'unlimited-danmaku':'コメント無制限',
+        'send-danmaku':'コメント送信',
+        setting:'設定',
+        fullscreen:'全画面表示',
+        'web-fullscreen':'ブラウザ全体表示',
+        send:'送信',
+        screenshot:'画面コピー',
+        airplay:'AirPlay',
+        'show-subs':'字幕表示',
+        chromecast: 'ChromeCast',
+        subtitle: '字幕',
+        off: 'OFF',
+        'hide-subs':'字幕非表示',
+        volume:'音量',
+        live:'ライブ',
+        'video-info':'動画情報'
+    },
+    'ru': {
+        'danmaku-loading': 'Загрузка комментариев',
+        top: 'Вверху',
+        bottom: 'Внизу',
+        rolling: 'Лента',
+        'input-danmaku-enter': 'Введите комментарий, нажмите Enter',
+        'about-author': 'Об авторе',
+        'dplayer-feedback': 'Обратная связь',
+        'about-dplayer': 'О плеере',
+        loop: 'Закольцевать',
+        speed: 'Скорость',
+        'opacity-danmaku': 'Прозрачность',
+        normal: 'Обычный',
+        'please-input-danmaku': 'Пожалуйста, введите комментарий!',
+        'set-danmaku-color': 'Цвет комментария',
+        'set-danmaku-type': 'Тип комментария',
+        'show-danmaku': 'Показать комментарии',
+        'video-failed': 'Ошибка загрузки видео',
+        'danmaku-failed': 'Ошибка загрузки комментариев',
+        'danmaku-send-failed': 'Ошибка отправки комментария',
+        'switching-quality': 'Переключение качества на: %q',
+        'switched-quality': 'Установлено качество: %q',
+        ff: 'Вперёд: %s с',
+        rew: 'Назад: %s с',
+        'unlimited-danmaku': 'Без ограничений',
+        'send-danmaku': 'Отправить комментарий',
+        setting: 'Настройки',
+        fullscreen: 'На весь экран',
+        'web-fullscreen': 'На весь Web экран',
+        send: 'Отправить',
+        screenshot: 'Скриншот',
+        airplay: 'AirPlay',
+        chromecast: 'ChromeCast',
+        subtitle: 'Комментарий',
+        off: 'Выкл',
+        'show-subs': 'Показать комментарии',
+        'hide-subs': 'Скрыть комментарии',
+        volume: 'Громкость',
+        live: 'Живые комментарии',
+        'video-info': 'Информация о видео',
+    },
+};
+
+export { i18n };

src/js/icons.js

@@ -12,8 +12,10 @@ import commentOff from '../assets/comment-off.svg';
 import send from '../assets/send.svg';
 import pallette from '../assets/pallette.svg';
 import camera from '../assets/camera.svg';
+import airplay from '../assets/airplay.svg';
 import subtitle from '../assets/subtitle.svg';
 import loading from '../assets/loading.svg';
+import chromecast from '../assets/chromecast.svg';
 
 const Icons = {
     play: play,
@@ -32,6 +34,8 @@ const Icons = {
     camera: camera,
     subtitle: subtitle,
     loading: loading,
+    airplay: airplay,
+    chromecast: chromecast,
 };
 
 export default Icons;

src/js/index.js

@@ -1,7 +1,7 @@
-import '../css/index.scss';
+import '../css/index.less';
 import DPlayer from './player';
 
 /* global DPLAYER_VERSION GIT_HASH */
-console.log(`${'\n'} %c DPlayer v${DPLAYER_VERSION} ${GIT_HASH} %c http://dplayer.js.org ${'\n'}${'\n'}`, 'color: #fadfa3; background: #030307; padding:5px 0;', 'background: #fadfa3; padding:5px 0;');
+console.log(`${'\n'} %c DPlayer v${DPLAYER_VERSION} ${GIT_HASH} %c https://dplayer.diygod.dev ${'\n'}${'\n'}`, 'color: #fadfa3; background: #030307; padding:5px 0;', 'background: #fadfa3; padding:5px 0;');
 
-export default DPlayer;
+export default DPlayer;

src/js/info-panel.js

@@ -1,7 +1,7 @@
 /* global DPLAYER_VERSION GIT_HASH */
 
 class InfoPanel {
-    constructor (player) {
+    constructor(player) {
         this.container = player.template.infoPanel;
         this.template = player.template;
         this.video = player.video;
@@ -12,30 +12,29 @@ class InfoPanel {
         });
     }
 
-    show () {
+    show() {
         this.beginTime = Date.now();
         this.update();
-        this.player.time.enable('info');
-        this.player.time.enable('fps');
+        this.player.timer.enable('info');
+        this.player.timer.enable('fps');
         this.container.classList.remove('dplayer-info-panel-hide');
     }
 
-    hide () {
-        this.player.time.disable('info');
-        this.player.time.disable('fps');
+    hide() {
+        this.player.timer.disable('info');
+        this.player.timer.disable('fps');
         this.container.classList.add('dplayer-info-panel-hide');
     }
 
-    triggle () {
+    triggle() {
         if (this.container.classList.contains('dplayer-info-panel-hide')) {
             this.show();
-        }
-        else {
+        } else {
             this.hide();
         }
     }
 
-    update () {
+    update() {
         this.template.infoVersion.innerHTML = `v${DPLAYER_VERSION} ${GIT_HASH}`;
         this.template.infoType.innerHTML = this.player.type;
         this.template.infoUrl.innerHTML = this.player.options.video.url;
@@ -48,9 +47,9 @@ class InfoPanel {
         }
     }
 
-    fps (value) {
+    fps(value) {
         this.template.infoFPS.innerHTML = `${value.toFixed(1)}`;
     }
 }
 
-export default InfoPanel;
+export default InfoPanel;

src/js/options.js

@@ -2,7 +2,6 @@
 import defaultApiBackend from './api.js';
 
 export default (options) => {
-
     // default options
     const defaultOption = {
         container: options.element || document.getElementsByClassName('dplayer')[0],
@@ -12,13 +11,18 @@ export default (options) => {
         loop: false,
         lang: (navigator.language || navigator.browserLanguage).toLowerCase(),
         screenshot: false,
+        airplay: true,
+        chromecast: false,
         hotkey: true,
-        preload: 'auto',
+        preload: 'metadata',
         volume: 0.7,
+        playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2],
         apiBackend: defaultApiBackend,
         video: {},
         contextmenu: [],
-        mutex: true
+        mutex: true,
+        pluginOptions: { hls: {}, flv: {}, dash: {}, webtorrent: {} },
+        preventClickToggle: false,
     };
     for (const defaultKey in defaultOption) {
         if (defaultOption.hasOwnProperty(defaultKey) && !options.hasOwnProperty(defaultKey)) {
@@ -39,9 +43,7 @@ export default (options) => {
     }
 
     if (options.video.quality) {
-        options.video.url = [
-            options.video.quality[options.video.defaultQuality].url
-        ];
+        options.video.url = options.video.quality[options.video.defaultQuality].url;
     }
 
     if (options.lang) {
@@ -50,19 +52,19 @@ export default (options) => {
 
     options.contextmenu = options.contextmenu.concat([
         {
-            text: 'Video info',
+            key: 'video-info',
             click: (player) => {
                 player.infoPanel.triggle();
-            }
+            },
         },
         {
-            text: 'About author',
-            link: 'https://diygod.me'
+            key: 'about-author',
+            link: 'https://diygod.me',
         },
         {
             text: `DPlayer v${DPLAYER_VERSION}`,
-            link: 'https://github.com/MoePlayer/DPlayer'
-        }
+            link: 'https://github.com/MoePlayer/DPlayer',
+        },
     ]);
 
     return options;

src/js/player.js

@@ -2,7 +2,7 @@ import Promise from 'promise-polyfill';
 
 import utils from './utils';
 import handleOption from './options';
-import i18n from './i18n';
+import { i18n } from './i18n';
 import Template from './template';
 import Icons from './icons';
 import Danmaku from './danmaku';
@@ -10,8 +10,9 @@ import Events from './events';
 import FullScreen from './fullscreen';
 import User from './user';
 import Subtitle from './subtitle';
+import Subtitles from './subtitles';
 import Bar from './bar';
-import Time from './time';
+import Timer from './timer';
 import Bezel from './bezel';
 import Controller from './controller';
 import Setting from './setting';
@@ -25,15 +26,14 @@ let index = 0;
 const instances = [];
 
 class DPlayer {
-
     /**
      * DPlayer constructor function
      *
      * @param {Object} options - See README
      * @constructor
      */
-    constructor (options) {
-        this.options = handleOption(options);
+    constructor(options) {
+        this.options = handleOption({ preload: options.video.type === 'webtorrent' ? 'none' : 'metadata', ...options });
 
         if (this.options.video.quality) {
             this.qualityIndex = this.options.video.defaultQuality;
@@ -43,6 +43,7 @@ class DPlayer {
         this.events = new Events();
         this.user = new User(this);
         this.container = this.options.container;
+        this.noticeList = {};
 
         this.container.classList.add('dplayer');
         if (!this.options.danmaku) {
@@ -50,6 +51,8 @@ class DPlayer {
         }
         if (this.options.live) {
             this.container.classList.add('dplayer-live');
+        } else {
+            this.container.classList.remove('dplayer-live');
         }
         if (utils.isMobile) {
             this.container.classList.add('dplayer-mobile');
@@ -59,6 +62,43 @@ class DPlayer {
             this.container.classList.add('dplayer-arrow');
         }
 
+        // multi subtitles defaultSubtitle add index, off option
+        if (this.options.subtitle) {
+            if (Array.isArray(this.options.subtitle.url)) {
+                const offSubtitle = {
+                    subtitle: '',
+                    lang: 'off',
+                };
+                this.options.subtitle.url.push(offSubtitle);
+                if (this.options.subtitle.defaultSubtitle) {
+                    if (typeof this.options.subtitle.defaultSubtitle === 'string') {
+                        // defaultSubtitle is string, match in lang then name.
+                        this.options.subtitle.index = this.options.subtitle.url.findIndex((sub) =>
+                            /* if (sub.lang === this.options.subtitle.defaultSubtitle) {
+                            return true;
+                        } else if (sub.name === this.options.subtitle.defaultSubtitle) {
+                            return true;
+                        } else {
+                            return false;
+                        } */
+                            sub.lang === this.options.subtitle.defaultSubtitle ? true : sub.name === this.options.subtitle.defaultSubtitle ? true : false
+                        );
+                    } else if (typeof this.options.subtitle.defaultSubtitle === 'number') {
+                        // defaultSubtitle is int, directly use for index
+                        this.options.subtitle.index = this.options.subtitle.defaultSubtitle;
+                    }
+                }
+                // defaultSubtitle not match or not exist or index bound(when defaultSubtitle is int), try browser language.
+                if (this.options.subtitle.index === -1 || !this.options.subtitle.index || this.options.subtitle.index > this.options.subtitle.url.length - 1) {
+                    this.options.subtitle.index = this.options.subtitle.url.findIndex((sub) => sub.lang === this.options.lang);
+                }
+                // browser language not match, default off title
+                if (this.options.subtitle.index === -1) {
+                    this.options.subtitle.index = this.options.subtitle.url.length - 1;
+                }
+            }
+        }
+
         this.template = new Template({
             container: this.container,
             options: this.options,
@@ -78,6 +118,7 @@ class DPlayer {
 
         if (this.options.danmaku) {
             this.danmaku = new Danmaku({
+                player: this,
                 container: this.template.danmaku,
                 opacity: this.user.get('opacity'),
                 callback: () => {
@@ -105,31 +146,35 @@ class DPlayer {
                     maximum: this.options.danmaku.maximum,
                     addition: this.options.danmaku.addition,
                     user: this.options.danmaku.user,
+                    speedRate: this.options.danmaku.speedRate,
                 },
-                events: this.events
+                events: this.events,
+                tran: (msg) => this.tran(msg),
             });
 
             this.comment = new Comment(this);
         }
 
         this.setting = new Setting(this);
-
-        document.addEventListener('click', () => {
+        this.plugins = {};
+        this.docClickFun = () => {
             this.focus = false;
-        }, true);
-        this.container.addEventListener('click', () => {
+        };
+        this.containerClickFun = () => {
             this.focus = true;
-        }, true);
+        };
+        document.addEventListener('click', this.docClickFun, true);
+        this.container.addEventListener('click', this.containerClickFun, true);
 
         this.paused = true;
 
-        this.time = new Time(this);
+        this.timer = new Timer(this);
 
         this.hotkey = new HotKey(this);
 
         this.contextmenu = new ContextMenu(this);
 
-        this.initVideo(this.video, this.quality && this.quality.type || this.options.video.type);
+        this.initVideo(this.video, (this.quality && this.quality.type) || this.options.video.type);
 
         this.infoPanel = new InfoPanel(this);
 
@@ -137,23 +182,24 @@ class DPlayer {
             this.play();
         }
 
+        this.moveBar = false;
+
         index++;
         instances.push(this);
     }
 
     /**
-    * Seek video
-    */
-    seek (time) {
+     * Seek video
+     */
+    seek(time) {
         time = Math.max(time, 0);
         if (this.video.duration) {
             time = Math.min(time, this.video.duration);
         }
         if (this.video.currentTime < time) {
-            this.notice(`${this.tran('FF')} ${(time - this.video.currentTime).toFixed(0)} ${this.tran('s')}`);
-        }
-        else if (this.video.currentTime > time) {
-            this.notice(`${this.tran('REW')} ${(this.video.currentTime - time).toFixed(0)} ${this.tran('s')}`);
+            this.notice(`${this.tran('ff').replace('%s', (time - this.video.currentTime).toFixed(0))}`);
+        } else if (this.video.currentTime > time) {
+            this.notice(`${this.tran('rew').replace('%s', (this.video.currentTime - time).toFixed(0))}`);
         }
 
         this.video.currentTime = time;
@@ -163,26 +209,30 @@ class DPlayer {
         }
 
         this.bar.set('played', time / this.video.duration, 'width');
+        this.template.ptime.innerHTML = utils.secondToTime(time);
     }
 
     /**
      * Play video
      */
-    play () {
+    play(fromNative) {
         this.paused = false;
-        if (this.video.paused) {
+        if (this.video.paused && !utils.isMobile) {
             this.bezel.switch(Icons.play);
         }
 
         this.template.playButton.innerHTML = Icons.pause;
+        this.template.mobilePlayButton.innerHTML = Icons.pause;
 
-        const playedPromise = Promise.resolve(this.video.play());
-        playedPromise.catch(() => {
-            this.pause();
-        }).then(() => {
-        });
-        this.time.enable('loading');
-        this.time.enable('progress');
+        if (!fromNative) {
+            const playedPromise = Promise.resolve(this.video.play());
+            playedPromise
+                .catch(() => {
+                    this.pause();
+                })
+                .then(() => {});
+        }
+        this.timer.enable('loading');
         this.container.classList.remove('dplayer-paused');
         this.container.classList.add('dplayer-playing');
         if (this.danmaku) {
@@ -200,19 +250,20 @@ class DPlayer {
     /**
      * Pause video
      */
-    pause () {
+    pause(fromNative) {
         this.paused = true;
         this.container.classList.remove('dplayer-loading');
 
-        if (!this.video.paused) {
+        if (!this.video.paused && !utils.isMobile) {
             this.bezel.switch(Icons.pause);
         }
 
-        this.ended = false;
         this.template.playButton.innerHTML = Icons.play;
-        this.video.pause();
-        this.time.disable('loading');
-        this.time.disable('progress');
+        this.template.mobilePlayButton.innerHTML = Icons.play;
+        if (!fromNative) {
+            this.video.pause();
+        }
+        this.timer.disable('loading');
         this.container.classList.remove('dplayer-playing');
         this.container.classList.add('dplayer-paused');
         if (this.danmaku) {
@@ -220,14 +271,12 @@ class DPlayer {
         }
     }
 
-    switchVolumeIcon () {
+    switchVolumeIcon() {
         if (this.volume() >= 0.95) {
             this.template.volumeIcon.innerHTML = Icons.volumeUp;
-        }
-        else if (this.volume() > 0) {
+        } else if (this.volume() > 0) {
             this.template.volumeIcon.innerHTML = Icons.volumeDown;
-        }
-        else {
+        } else {
             this.template.volumeIcon.innerHTML = Icons.volumeOff;
         }
     }
@@ -235,7 +284,7 @@ class DPlayer {
     /**
      * Set volume
      */
-    volume (percentage, nostorage, nonotice) {
+    volume(percentage, nostorage, nonotice) {
         percentage = parseFloat(percentage);
         if (!isNaN(percentage)) {
             percentage = Math.max(percentage, 0);
@@ -247,7 +296,7 @@ class DPlayer {
                 this.user.set('volume', percentage);
             }
             if (!nonotice) {
-                this.notice(`${this.tran('Volume')} ${(percentage * 100).toFixed(0)}%`);
+                this.notice(`${this.tran('volume')} ${(percentage * 100).toFixed(0)}%`, undefined, undefined, 'volume');
             }
 
             this.video.volume = percentage;
@@ -263,11 +312,10 @@ class DPlayer {
     /**
      * Toggle between play and pause
      */
-    toggle () {
+    toggle() {
         if (this.video.paused) {
             this.play();
-        }
-        else {
+        } else {
             this.pause();
         }
     }
@@ -275,7 +323,7 @@ class DPlayer {
     /**
      * attach event
      */
-    on (name, callback) {
+    on(name, callback) {
         this.events.on(name, callback);
     }
 
@@ -285,7 +333,7 @@ class DPlayer {
      * @param {Object} video - new video info
      * @param {Object} danmaku - new danmaku info
      */
-    switchVideo (video, danmakuAPI) {
+    switchVideo(video, danmakuAPI) {
         this.pause();
         this.video.poster = video.pic ? video.pic : '';
         this.video.src = video.url;
@@ -309,109 +357,162 @@ class DPlayer {
         }
     }
 
-    initMSE (video, type) {
+    initMSE(video, type) {
         this.type = type;
         if (this.options.video.customType && this.options.video.customType[type]) {
             if (Object.prototype.toString.call(this.options.video.customType[type]) === '[object Function]') {
                 this.options.video.customType[type](this.video, this);
-            }
-            else {
+            } else {
                 console.error(`Illegal customType: ${type}`);
             }
-        }
-        else {
+        } else {
             if (this.type === 'auto') {
                 if (/m3u8(#|\?|$)/i.exec(video.src)) {
                     this.type = 'hls';
-                }
-                else if (/.flv(#|\?|$)/i.exec(video.src)) {
+                } else if (/.flv(#|\?|$)/i.exec(video.src)) {
                     this.type = 'flv';
-                }
-                else if (/.mpd(#|\?|$)/i.exec(video.src)) {
+                } else if (/.mpd(#|\?|$)/i.exec(video.src)) {
                     this.type = 'dash';
-                }
-                else {
+                } else {
                     this.type = 'normal';
                 }
             }
 
+            if (this.type === 'hls' && (video.canPlayType('application/x-mpegURL') || video.canPlayType('application/vnd.apple.mpegURL'))) {
+                this.type = 'normal';
+            }
+
+            const src = this.quality.url; // 真实的视频 url, 用于切换清晰度时销毁实例
             switch (this.type) {
-            // https://github.com/video-dev/hls.js
-            case 'hls':
-                if (Hls) {
-                    if (Hls.isSupported()) {
-                        const hls = new Hls();
-                        hls.loadSource(video.src);
-                        hls.attachMedia(video);
-                    }
-                    else {
-                        this.notice('Error: Hls is not supported.');
-                    }
-                }
-                else {
-                    this.notice('Error: Can\'t find Hls.');
-                }
-                break;
-
-            // https://github.com/Bilibili/flv.js
-            case 'flv':
-                if (flvjs && flvjs.isSupported()) {
-                    if (flvjs.isSupported()) {
-                        const flvPlayer = flvjs.createPlayer({
-                            type: 'flv',
-                            url: video.src
-                        });
-                        flvPlayer.attachMediaElement(video);
-                        flvPlayer.load();
-                    }
-                    else {
-                        this.notice('Error: flvjs is not supported.');
-                    }
-                }
-                else {
-                    this.notice('Error: Can\'t find flvjs.');
-                }
-                break;
-
-            // https://github.com/Dash-Industry-Forum/dash.js
-            case 'dash':
-                if (dashjs) {
-                    dashjs.MediaPlayer().create().initialize(video, video.src, false);
-                }
-                else {
-                    this.notice('Error: Can\'t find dashjs.');
-                }
-                break;
-
-            // https://github.com/webtorrent/webtorrent
-            case 'webtorrent':
-                if (WebTorrent) {
-                    if (WebTorrent.WEBRTC_SUPPORT) {
-                        this.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(this.video, {
-                                autoplay: this.options.autoplay
-                            }, () => {
-                                this.container.classList.remove('dplayer-loading');
+                // https://github.com/video-dev/hls.js
+                case 'hls':
+                    if (window.Hls) {
+                        if (window.Hls.isSupported()) {
+                            const options = this.options.pluginOptions.hls;
+                            const hls = new window.Hls(options);
+                            this.plugins.hls = hls;
+                            hls.loadSource(video.src);
+                            hls.attachMedia(video);
+                            this.events.on('destroy', () => {
+                                hls.destroy();
+                                delete this.plugins.hls;
                             });
+                            // 切换清晰度时销毁实例
+                            this.events.on('quality_end', () => {
+                                if (src !== this.quality.url) {
+                                    hls.destroy();
+                                }
+                            });
+                        } else {
+                            this.notice('Error: Hls is not supported.');
+                        }
+                    } else {
+                        this.notice("Error: Can't find Hls.");
+                    }
+                    break;
+
+                // https://github.com/Bilibili/flv.js
+                case 'flv':
+                    if (window.flvjs) {
+                        if (window.flvjs.isSupported()) {
+                            const flvPlayer = window.flvjs.createPlayer(
+                                Object.assign(this.options.pluginOptions.flv.mediaDataSource || {}, {
+                                    type: 'flv',
+                                    url: video.src,
+                                }),
+                                this.options.pluginOptions.flv.config
+                            );
+                            this.plugins.flvjs = flvPlayer;
+                            flvPlayer.attachMediaElement(video);
+                            flvPlayer.load();
+                            this.events.on('destroy', () => {
+                                flvPlayer.unload();
+                                flvPlayer.detachMediaElement();
+                                flvPlayer.destroy();
+                                delete this.plugins.flvjs;
+                            });
+                            // 切换清晰度时销毁实例
+                            this.events.on('quality_end', () => {
+                                if (src !== this.quality.url) {
+                                    flvPlayer.unload();
+                                    flvPlayer.detachMediaElement();
+                                    flvPlayer.destroy();
+                                }
+                            });
+                        } else {
+                            this.notice('Error: flvjs is not supported.');
+                        }
+                    } else {
+                        this.notice("Error: Can't find flvjs.");
+                    }
+                    break;
+
+                // https://github.com/Dash-Industry-Forum/dash.js
+                case 'dash':
+                    if (window.dashjs) {
+                        const dashjsPlayer = window.dashjs.MediaPlayer().create();
+                        dashjsPlayer.initialize(video, video.src, false, 0);
+                        const options = this.options.pluginOptions.dash;
+                        dashjsPlayer.updateSettings(options);
+                        this.plugins.dash = dashjsPlayer;
+                        this.events.on('destroy', () => {
+                            window.dashjs.MediaPlayer().reset();
+                            delete this.plugins.dash;
                         });
+                        // 切换清晰度时销毁实例
+                        this.events.on('quality_end', () => {
+                            if (src !== this.quality.url) {
+                                window.dashjs.MediaPlayer().reset();
+                            }
+                        });
+                    } else {
+                        this.notice("Error: Can't find dashjs.");
                     }
-                    else {
-                        this.notice('Error: Webtorrent is not supported.');
+                    break;
+
+                // https://github.com/webtorrent/webtorrent
+                case 'webtorrent':
+                    if (window.WebTorrent) {
+                        if (window.WebTorrent.WEBRTC_SUPPORT) {
+                            this.container.classList.add('dplayer-loading');
+                            const options = this.options.pluginOptions.webtorrent;
+                            const client = new window.WebTorrent(options);
+                            this.plugins.webtorrent = client;
+                            const torrentId = video.src;
+                            video.src = '';
+                            video.preload = 'metadata';
+                            video.addEventListener('durationchange', () => this.container.classList.remove('dplayer-loading'), { once: true });
+                            client.add(torrentId, (torrent) => {
+                                const file = torrent.files.find((file) => file.name.endsWith('.mp4'));
+                                file.renderTo(this.video, {
+                                    autoplay: this.options.autoplay,
+                                    controls: false,
+                                });
+                            });
+                            this.events.on('destroy', () => {
+                                client.remove(torrentId);
+                                client.destroy();
+                                delete this.plugins.webtorrent;
+                            });
+                            // 切换清晰度时销毁实例
+                            this.events.on('quality_end', () => {
+                                if (src !== this.quality.url) {
+                                    client.remove(torrentId);
+                                    client.destroy();
+                                }
+                            });
+                        } else {
+                            this.notice('Error: Webtorrent is not supported.');
+                        }
+                    } else {
+                        this.notice("Error: Can't find Webtorrent.");
                     }
-                }
-                else {
-                    this.notice('Error: Can\'t find Webtorrent.');
-                }
-                break;
+                    break;
             }
         }
     }
 
-    initVideo (video, type) {
+    initVideo(video, type) {
         this.initMSE(video, type);
 
         /**
@@ -419,7 +520,8 @@ class DPlayer {
          */
         // show video time: the metadata has loaded or changed
         this.on('durationchange', () => {
-            if (video.duration !== 1) {           // compatibility: Android browsers will output 1 at first
+            // compatibility: Android browsers will output 1 or Infinity at first
+            if (video.duration !== 1 && video.duration !== Infinity) {
                 this.template.dtime.innerHTML = utils.secondToTime(video.duration);
             }
         });
@@ -432,20 +534,21 @@ class DPlayer {
 
         // video download error: an error occurs
         this.on('error', () => {
-            this.tran && this.notice && this.type !== 'webtorrent' & this.notice(this.tran('This video fails to load'), -1);
+            if (!this.video.error) {
+                // Not a video load error, may be poster load failed, see #307
+                return;
+            }
+            this.tran && this.notice && this.type !== 'webtorrent' && this.notice(this.tran('video-failed'));
         });
 
         // video end
-        this.ended = false;
         this.on('ended', () => {
             this.bar.set('played', 1, 'width');
             if (!this.setting.loop) {
-                this.ended = true;
                 this.pause();
-            }
-            else {
+            } else {
                 this.seek(0);
-                video.play();
+                this.play();
             }
             if (this.danmaku) {
                 this.danmaku.danIndex = 0;
@@ -454,37 +557,53 @@ class DPlayer {
 
         this.on('play', () => {
             if (this.paused) {
-                this.play();
+                this.play(true);
             }
         });
 
         this.on('pause', () => {
             if (!this.paused) {
-                this.pause();
+                this.pause(true);
+            }
+        });
+
+        this.on('timeupdate', () => {
+            if (!this.moveBar) {
+                this.bar.set('played', this.video.currentTime / this.video.duration, 'width');
+            }
+            const currentTime = utils.secondToTime(this.video.currentTime);
+            if (this.template.ptime.innerHTML !== currentTime) {
+                this.template.ptime.innerHTML = currentTime;
             }
         });
 
         for (let i = 0; i < this.events.videoEvents.length; i++) {
-            video.addEventListener(this.events.videoEvents[i], () => {
-                this.events.trigger(this.events.videoEvents[i]);
+            video.addEventListener(this.events.videoEvents[i], (e) => {
+                this.events.trigger(this.events.videoEvents[i], e);
             });
         }
 
         this.volume(this.user.get('volume'), true, true);
 
         if (this.options.subtitle) {
+            // init old single subtitle function(sub show and style)
             this.subtitle = new Subtitle(this.template.subtitle, this.video, this.options.subtitle, this.events);
+            // init multi subtitles function(sub update)
+            if (Array.isArray(this.options.subtitle.url)) {
+                this.subtitles = new Subtitles(this);
+            }
             if (!this.user.get('subtitle')) {
                 this.subtitle.hide();
             }
         }
     }
 
-    switchQuality (index) {
+    switchQuality(index) {
+        index = typeof index === 'string' ? parseInt(index) : index;
         if (this.qualityIndex === index || this.switchingQuality) {
             return;
-        }
-        else {
+        } else {
+            this.prevIndex = this.qualityIndex;
             this.qualityIndex = index;
         }
         this.switchingQuality = true;
@@ -499,7 +618,7 @@ class DPlayer {
             screenshot: this.options.screenshot,
             preload: 'auto',
             url: this.quality.url,
-            subtitle: this.options.subtitle
+            subtitle: this.options.subtitle,
         });
         const videoEle = new DOMParser().parseFromString(videoHTML, 'text/html').body.firstChild;
         this.template.videoWrap.insertBefore(videoEle, this.template.videoWrap.getElementsByTagName('div')[0]);
@@ -507,7 +626,7 @@ class DPlayer {
         this.video = videoEle;
         this.initVideo(this.video, this.quality.type || this.options.video.type);
         this.seek(this.prevVideo.currentTime);
-        this.notice(`${this.tran('Switching to')} ${this.quality.name} ${this.tran('quality')}`, -1);
+        this.notice(`${this.tran('switching-quality').replace('%q', this.quality.name)}`, -1, undefined, 'switch-quality');
         this.events.trigger('quality_start', this.quality);
 
         this.on('canplay', () => {
@@ -522,52 +641,104 @@ class DPlayer {
                     this.video.play();
                 }
                 this.prevVideo = null;
-                this.notice(`${this.tran('Switched to')} ${this.quality.name} ${this.tran('quality')}`);
+                this.notice(`${this.tran('switched-quality').replace('%q', this.quality.name)}`, undefined, undefined, 'switch-quality');
                 this.switchingQuality = false;
 
                 this.events.trigger('quality_end');
             }
         });
+
+        this.on('error', () => {
+            if (!this.video.error) {
+                return;
+            }
+            if (this.prevVideo) {
+                this.template.videoWrap.removeChild(this.video);
+                this.video = this.prevVideo;
+                if (!paused) {
+                    this.video.play();
+                }
+                this.qualityIndex = this.prevIndex;
+                this.quality = this.options.video.quality[this.qualityIndex];
+                this.noticeTime = setTimeout(() => {
+                    this.template.notice.style.opacity = 0;
+                    this.events.trigger('notice_hide');
+                }, 3000);
+                this.prevVideo = null;
+                this.switchingQuality = false;
+            }
+        });
     }
 
-    notice (text, time = 2000, opacity = 0.8) {
-        this.template.notice.innerHTML = text;
-        this.template.notice.style.opacity = opacity;
-        if (this.noticeTime) {
-            clearTimeout(this.noticeTime);
+    notice(text, time = 2000, opacity = 0.8, id) {
+        let oldNoticeEle;
+        if (id) {
+            oldNoticeEle = document.getElementById(`dplayer-notice-${id}`);
+            if (oldNoticeEle) {
+                oldNoticeEle.innerHTML = text;
+            }
+            if (this.noticeList[id]) {
+                clearTimeout(this.noticeList[id]);
+                this.noticeList[id] = null;
+            }
+        }
+        if (!oldNoticeEle) {
+            const notice = Template.NewNotice(text, opacity, id);
+            this.template.noticeList.appendChild(notice);
+            oldNoticeEle = notice;
+        }
+
+        this.events.trigger('notice_show', oldNoticeEle);
+
+        if (time > 0) {
+            this.noticeList[id] = setTimeout(
+                (function (e, dp) {
+                    return () => {
+                        e.addEventListener('animationend', () => {
+                            dp.template.noticeList.removeChild(e);
+                        });
+                        e.classList.add('remove-notice');
+                        dp.events.trigger('notice_hide');
+                        dp.noticeList[id] = null;
+                    };
+                })(oldNoticeEle, this),
+                time
+            );
         }
-        this.events.trigger('notice_show', text);
-        this.noticeTime = setTimeout(() => {
-            this.template.notice.style.opacity = 0;
-            this.events.trigger('notice_hide');
-        }, time);
     }
 
-    resize () {
+    resize() {
         if (this.danmaku) {
             this.danmaku.resize();
         }
+        if (this.controller.thumbnails) {
+            this.controller.thumbnails.resize(160, (this.video.videoHeight / this.video.videoWidth) * 160, this.template.barWrap.offsetWidth);
+        }
         this.events.trigger('resize');
     }
 
-    speed (rate) {
+    speed(rate) {
         this.video.playbackRate = rate;
     }
 
-    destroy () {
+    destroy() {
         instances.splice(instances.indexOf(this), 1);
         this.pause();
+        document.removeEventListener('click', this.docClickFun, true);
+        this.container.removeEventListener('click', this.containerClickFun, true);
+        this.fullScreen.destroy();
+        this.hotkey.destroy();
+        this.contextmenu.destroy();
         this.controller.destroy();
-        this.time.destroy();
+        this.timer.destroy();
         this.video.src = '';
         this.container.innerHTML = '';
         this.events.trigger('destroy');
+    }
 
-        for (const key in this) {
-            if (this.hasOwnProperty(key) && key !== 'paused') {
-                delete this[key];
-            }
-        }
+    static get version() {
+        /* global DPLAYER_VERSION */
+        return DPLAYER_VERSION;
     }
 }
 

src/js/setting.js

@@ -1,7 +1,7 @@
 import utils from './utils';
 
 class Setting {
-    constructor (player) {
+    constructor(player) {
         this.player = player;
 
         this.player.template.mask.addEventListener('click', () => {
@@ -18,8 +18,7 @@ class Setting {
             this.player.template.loopToggle.checked = !this.player.template.loopToggle.checked;
             if (this.player.template.loopToggle.checked) {
                 this.loop = true;
-            }
-            else {
+            } else {
                 this.loop = false;
             }
             this.hide();
@@ -36,8 +35,7 @@ class Setting {
             if (this.player.template.showDanmakuToggle.checked) {
                 this.showDanmaku = true;
                 this.player.danmaku.show();
-            }
-            else {
+            } else {
                 this.showDanmaku = false;
                 this.player.danmaku.hide();
             }
@@ -53,8 +51,7 @@ class Setting {
             if (this.player.template.unlimitDanmakuToggle.checked) {
                 this.unlimitDanmaku = true;
                 this.player.danmaku.unlimit(true);
-            }
-            else {
+            } else {
                 this.unlimitDanmaku = false;
                 this.player.danmaku.unlimit(false);
             }
@@ -85,7 +82,7 @@ class Setting {
 
             const danmakuMove = (event) => {
                 const e = event || window.event;
-                let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.danmakuOpacityBarWrap)) / dWidth;
+                let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getBoundingClientRectViewLeft(this.player.template.danmakuOpacityBarWrap)) / dWidth;
                 percentage = Math.max(percentage, 0);
                 percentage = Math.min(percentage, 1);
                 this.player.danmaku.opacity(percentage);
@@ -98,7 +95,7 @@ class Setting {
 
             this.player.template.danmakuOpacityBarWrapWrap.addEventListener('click', (event) => {
                 const e = event || window.event;
-                let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.danmakuOpacityBarWrap)) / dWidth;
+                let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getBoundingClientRectViewLeft(this.player.template.danmakuOpacityBarWrap)) / dWidth;
                 percentage = Math.max(percentage, 0);
                 percentage = Math.min(percentage, 1);
                 this.player.danmaku.opacity(percentage);
@@ -111,7 +108,7 @@ class Setting {
         }
     }
 
-    hide () {
+    hide() {
         this.player.template.settingBox.classList.remove('dplayer-setting-box-open');
         this.player.template.mask.classList.remove('dplayer-mask-show');
         setTimeout(() => {
@@ -122,7 +119,7 @@ class Setting {
         this.player.controller.disableAutoHide = false;
     }
 
-    show () {
+    show() {
         this.player.template.settingBox.classList.add('dplayer-setting-box-open');
         this.player.template.mask.classList.add('dplayer-mask-show');
 
@@ -130,4 +127,4 @@ class Setting {
     }
 }
 
-export default Setting;
+export default Setting;

src/js/subtitle.js

@@ -1,5 +1,5 @@
 class Subtitle {
-    constructor (container, video, options, events) {
+    constructor(container, video, options, events) {
         this.container = container;
         this.video = video;
         this.options = options;
@@ -8,7 +8,7 @@ class Subtitle {
         this.init();
     }
 
-    init () {
+    init() {
         this.container.style.fontSize = this.options.fontSize;
         this.container.style.bottom = this.options.bottom;
         this.container.style.color = this.options.color;
@@ -17,39 +17,39 @@ class Subtitle {
             const track = this.video.textTracks[0];
 
             track.oncuechange = () => {
-                const cue = track.activeCues[0];
+                const cue = track.activeCues[track.activeCues.length - 1];
+                this.container.innerHTML = '';
                 if (cue) {
-                    this.container.innerHTML = '';
-                    const p = document.createElement('p');
-                    p.appendChild(cue.getCueAsHTML());
-                    this.container.appendChild(p);
-                }
-                else {
-                    this.container.innerHTML = '';
+                    const template = document.createElement('div');
+                    template.appendChild(cue.getCueAsHTML());
+                    const trackHtml = template.innerHTML
+                        .split(/\r?\n/)
+                        .map((item) => `<p>${item}</p>`)
+                        .join('');
+                    this.container.innerHTML = trackHtml;
                 }
                 this.events.trigger('subtitle_change');
             };
         }
     }
 
-    show () {
+    show() {
         this.container.classList.remove('dplayer-subtitle-hide');
         this.events.trigger('subtitle_show');
     }
 
-    hide () {
+    hide() {
         this.container.classList.add('dplayer-subtitle-hide');
         this.events.trigger('subtitle_hide');
     }
 
-    toggle () {
+    toggle() {
         if (this.container.classList.contains('dplayer-subtitle-hide')) {
             this.show();
-        }
-        else {
+        } else {
             this.hide();
         }
     }
 }
 
-export default Subtitle;
+export default Subtitle;

src/js/subtitles.js

@@ -0,0 +1,79 @@
+class Subtitles {
+    constructor(player) {
+        this.player = player;
+
+        this.player.template.mask.addEventListener('click', () => {
+            this.hide();
+        });
+        this.player.template.subtitlesButton.addEventListener('click', () => {
+            this.adaptiveHeight();
+            this.show();
+        });
+
+        const lastItemIndex = this.player.template.subtitlesItem.length - 1;
+        for (let i = 0; i < lastItemIndex; i++) {
+            this.player.template.subtitlesItem[i].addEventListener('click', () => {
+                this.hide();
+                if (this.player.options.subtitle.index !== i) {
+                    // clear subtitle show for new subtitle don't have now duration time. If don't, will display last subtitle.
+                    this.player.template.subtitle.innerHTML = `<p></p>`;
+                    // update video track src
+                    this.player.template.subtrack.src = this.player.template.subtitlesItem[i].dataset.subtitle;
+                    // update options current subindex for reload (such as changeQuality)
+                    this.player.options.subtitle.index = i;
+                    if (this.player.template.subtitle.classList.contains('dplayer-subtitle-hide')) {
+                        this.subContainerShow();
+                    }
+                }
+            });
+        }
+        this.player.template.subtitlesItem[lastItemIndex].addEventListener('click', () => {
+            this.hide();
+            if (this.player.options.subtitle.index !== lastItemIndex) {
+                // clear subtitle show for new subtitle don't have now duration time. If don't, will display last subtitle.
+                this.player.template.subtitle.innerHTML = `<p></p>`;
+                // update video track src
+                this.player.template.subtrack.src = '';
+                // update options current subindex for reload (such as changeQuality)
+                this.player.options.subtitle.index = lastItemIndex;
+                this.subContainerHide();
+            }
+        });
+    }
+
+    subContainerShow() {
+        this.player.template.subtitle.classList.remove('dplayer-subtitle-hide');
+        this.player.events.trigger('subtitle_show');
+    }
+
+    subContainerHide() {
+        this.player.template.subtitle.classList.add('dplayer-subtitle-hide');
+        this.player.events.trigger('subtitle_hide');
+    }
+
+    hide() {
+        this.player.template.subtitlesBox.classList.remove('dplayer-subtitles-box-open');
+        this.player.template.mask.classList.remove('dplayer-mask-show');
+        this.player.controller.disableAutoHide = false;
+    }
+
+    show() {
+        this.player.template.subtitlesBox.classList.add('dplayer-subtitles-box-open');
+        this.player.template.mask.classList.add('dplayer-mask-show');
+        this.player.controller.disableAutoHide = true;
+    }
+
+    adaptiveHeight() {
+        const curBoxHeight = this.player.template.subtitlesItem.length * 30 + 14;
+        const stdMaxHeight = this.player.template.videoWrap.offsetHeight * 0.8;
+        if (curBoxHeight >= stdMaxHeight - 50) {
+            this.player.template.subtitlesBox.style.bottom = '8px';
+            this.player.template.subtitlesBox.style['max-height'] = stdMaxHeight - 8 + 'px';
+        } else {
+            this.player.template.subtitlesBox.style.bottom = '50px';
+            this.player.template.subtitlesBox.style['max-height'] = stdMaxHeight - 50 + 'px';
+        }
+    }
+}
+
+export default Subtitles;

src/js/template.js

@@ -1,8 +1,9 @@
 import Icons from './icons';
 import tplPlayer from '../template/player.art';
+import utils from './utils';
 
 class Template {
-    constructor (options) {
+    constructor(options) {
         this.container = options.container;
         this.options = options.options;
         this.index = options.index;
@@ -10,26 +11,30 @@ class Template {
         this.init();
     }
 
-    init () {
+    init() {
         this.container.innerHTML = tplPlayer({
             options: this.options,
             index: this.index,
             tran: this.tran,
             icons: Icons,
+            mobile: utils.isMobile,
             video: {
                 current: true,
                 pic: this.options.video.pic,
                 screenshot: this.options.screenshot,
+                airplay: utils.isSafari && !utils.isChrome ? this.options.airplay : false,
+                chromecast: this.options.chromecast,
                 preload: this.options.preload,
                 url: this.options.video.url,
-                subtitle: this.options.subtitle
-            }
+                subtitle: this.options.subtitle,
+            },
         });
 
         this.volumeBar = this.container.querySelector('.dplayer-volume-bar-inner');
         this.volumeBarWrap = this.container.querySelector('.dplayer-volume-bar');
         this.volumeBarWrapWrap = this.container.querySelector('.dplayer-volume-bar-wrap');
         this.volumeButton = this.container.querySelector('.dplayer-volume');
+        this.volumeButtonIcon = this.container.querySelector('.dplayer-volume-icon');
         this.volumeIcon = this.container.querySelector('.dplayer-volume-icon .dplayer-icon-content');
         this.playedBar = this.container.querySelector('.dplayer-played');
         this.loadedBar = this.container.querySelector('.dplayer-loaded');
@@ -40,6 +45,7 @@ class Template {
         this.video = this.container.querySelector('.dplayer-video-current');
         this.bezel = this.container.querySelector('.dplayer-bezel-icon');
         this.playButton = this.container.querySelector('.dplayer-play-icon');
+        this.mobilePlayButton = this.container.querySelector('.dplayer-mobile-play');
         this.videoWrap = this.container.querySelector('.dplayer-video-wrap');
         this.controllerMask = this.container.querySelector('.dplayer-controller-mask');
         this.ptime = this.container.querySelector('.dplayer-ptime');
@@ -74,13 +80,19 @@ class Template {
         this.menuItem = this.container.querySelectorAll('.dplayer-menu-item');
         this.qualityList = this.container.querySelector('.dplayer-quality-list');
         this.camareButton = this.container.querySelector('.dplayer-camera-icon');
+        this.airplayButton = this.container.querySelector('.dplayer-airplay-icon');
+        this.chromecastButton = this.container.querySelector('.dplayer-chromecast-icon');
         this.subtitleButton = this.container.querySelector('.dplayer-subtitle-icon');
         this.subtitleButtonInner = this.container.querySelector('.dplayer-subtitle-icon .dplayer-icon-content');
+        this.subtitlesButton = this.container.querySelector('.dplayer-subtitles-icon');
+        this.subtitlesBox = this.container.querySelector('.dplayer-subtitles-box');
+        this.subtitlesItem = this.container.querySelectorAll('.dplayer-subtitles-item');
         this.subtitle = this.container.querySelector('.dplayer-subtitle');
+        this.subtrack = this.container.querySelector('.dplayer-subtrack');
         this.qualityButton = this.container.querySelector('.dplayer-quality-icon');
         this.barPreview = this.container.querySelector('.dplayer-bar-preview');
         this.barWrap = this.container.querySelector('.dplayer-bar-wrap');
-        this.notice = this.container.querySelector('.dplayer-notice');
+        this.noticeList = this.container.querySelector('.dplayer-notice-list');
         this.infoPanel = this.container.querySelector('.dplayer-info-panel');
         this.infoPanelClose = this.container.querySelector('.dplayer-info-panel-close');
         this.infoVersion = this.container.querySelector('.dplayer-info-panel-item-version .dplayer-info-panel-item-data');
@@ -93,6 +105,17 @@ class Template {
         this.infoDanmakuApi = this.container.querySelector('.dplayer-info-panel-item-danmaku-api .dplayer-info-panel-item-data');
         this.infoDanmakuAmount = this.container.querySelector('.dplayer-info-panel-item-danmaku-amount .dplayer-info-panel-item-data');
     }
+
+    static NewNotice(text, opacity, id) {
+        const notice = document.createElement('div');
+        notice.classList.add('dplayer-notice');
+        notice.style.opacity = opacity;
+        notice.innerText = text;
+        if (id) {
+            notice.id = `dplayer-notice-${id}`;
+        }
+        return notice;
+    }
 }
 
 export default Template;

src/js/thumbnails.js

@@ -1,32 +1,33 @@
 class Thumbnails {
-    constructor (options) {
+    constructor(options) {
         this.container = options.container;
         this.barWidth = options.barWidth;
         this.container.style.backgroundImage = `url('${options.url}')`;
         this.events = options.events;
     }
 
-    resize (width, height) {
+    resize(width, height, barWrapWidth) {
         this.container.style.width = `${width}px`;
         this.container.style.height = `${height}px`;
         this.container.style.top = `${-height + 2}px`;
+        this.barWidth = barWrapWidth;
     }
 
-    show () {
+    show() {
         this.container.style.display = 'block';
         this.events && this.events.trigger('thumbnails_show');
     }
 
-    move (position) {
-        this.container.style.backgroundPosition = `-${(Math.ceil(position / this.barWidth * 100) - 1) * 160}px 0`;
-        this.container.style.left = `${(position - this.container.offsetWidth / 2)}px`;
+    move(position) {
+        this.container.style.backgroundPosition = `-${(Math.ceil((position / this.barWidth) * 100) - 1) * 160}px 0`;
+        this.container.style.left = `${Math.min(Math.max(position - this.container.offsetWidth / 2, -10), this.barWidth - 150)}px`;
     }
 
-    hide () {
+    hide() {
         this.container.style.display = 'none';
 
         this.events && this.events.trigger('thumbnails_hide');
     }
 }
 
-export default Thumbnails;
+export default Thumbnails;

src/js/timer.js

@@ -1,7 +1,5 @@
-import utils from './utils';
-
-class Time {
-    constructor (player) {
+class Timer {
+    constructor(player) {
         this.player = player;
 
         window.requestAnimationFrame = (() =>
@@ -12,24 +10,23 @@ class Time {
             window.msRequestAnimationFrame ||
             function (callback) {
                 window.setTimeout(callback, 1000 / 60);
-            }
-        )();
+            })();
 
-        this.types = ['loading', 'progress', 'info', 'fps'];
+        this.types = ['loading', 'info', 'fps'];
 
         this.init();
     }
 
-    init () {
-        for (let i = 0; i < this.types.length; i++) {
-            const type = this.types[i];
-            if (type !== 'fps') {
-                this[`init${type}Checker`]();
+    init() {
+        this.types.map((item) => {
+            if (item !== 'fps') {
+                this[`init${item}Checker`]();
             }
-        }
+            return item;
+        });
     }
 
-    initloadingChecker () {
+    initloadingChecker() {
         let lastPlayPos = 0;
         let currentPlayPos = 0;
         let bufferingDetected = false;
@@ -37,15 +34,11 @@ class Time {
             if (this.enableloadingChecker) {
                 // whether the video is buffering
                 currentPlayPos = this.player.video.currentTime;
-                if (!bufferingDetected
-                    && currentPlayPos === lastPlayPos
-                    && !this.player.video.paused) {
+                if (!bufferingDetected && currentPlayPos === lastPlayPos && !this.player.video.paused) {
                     this.player.container.classList.add('dplayer-loading');
                     bufferingDetected = true;
                 }
-                if (bufferingDetected
-                    && currentPlayPos > lastPlayPos
-                    && !this.player.video.paused) {
+                if (bufferingDetected && currentPlayPos > lastPlayPos && !this.player.video.paused) {
                     this.player.container.classList.remove('dplayer-loading');
                     bufferingDetected = false;
                 }
@@ -54,44 +47,30 @@ class Time {
         }, 100);
     }
 
-    initprogressChecker () {
-        this.progressChecker = setInterval(() => {
-            if (this.enableprogressChecker) {
-                this.player.bar.set('played', this.player.video.currentTime / this.player.video.duration, 'width');
-                const currentTime = utils.secondToTime(this.player.video.currentTime);
-                if (this.player.template.ptime.innerHTML !== currentTime) {
-                    this.player.template.ptime.innerHTML = utils.secondToTime(this.player.video.currentTime);
-                }
-            }
-        }, 100);
-    }
-
-    initfpsChecker () {
+    initfpsChecker() {
         window.requestAnimationFrame(() => {
             if (this.enablefpsChecker) {
                 this.initfpsChecker();
                 if (!this.fpsStart) {
                     this.fpsStart = new Date();
                     this.fpsIndex = 0;
-                }
-                else {
+                } else {
                     this.fpsIndex++;
                     const fpsCurrent = new Date();
                     if (fpsCurrent - this.fpsStart > 1000) {
-                        this.player.infoPanel.fps(this.fpsIndex / (fpsCurrent - this.fpsStart) * 1000);
+                        this.player.infoPanel.fps((this.fpsIndex / (fpsCurrent - this.fpsStart)) * 1000);
                         this.fpsStart = new Date();
                         this.fpsIndex = 0;
                     }
                 }
-            }
-            else {
+            } else {
                 this.fpsStart = 0;
                 this.fpsIndex = 0;
             }
         });
     }
 
-    initinfoChecker () {
+    initinfoChecker() {
         this.infoChecker = setInterval(() => {
             if (this.enableinfoChecker) {
                 this.player.infoPanel.update();
@@ -99,7 +78,7 @@ class Time {
         }, 1000);
     }
 
-    enable (type) {
+    enable(type) {
         this[`enable${type}Checker`] = true;
 
         if (type === 'fps') {
@@ -107,13 +86,17 @@ class Time {
         }
     }
 
-    disable (type) {
+    disable(type) {
         this[`enable${type}Checker`] = false;
     }
 
-    destroy (type) {
-        this[`${type}Checker`] && clearInterval(this[`${type}Checker`]);
+    destroy() {
+        this.types.map((item) => {
+            this[`enable${item}Checker`] = false;
+            this[`${item}Checker`] && clearInterval(this[`${item}Checker`]);
+            return item;
+        });
     }
 }
 
-export default Time;
+export default Timer;

src/js/user.js

@@ -1,41 +1,41 @@
 import utils from './utils';
 
 class User {
-    constructor (player) {
+    constructor(player) {
         this.storageName = {
             opacity: 'dplayer-danmaku-opacity',
             volume: 'dplayer-volume',
             unlimited: 'dplayer-danmaku-unlimited',
             danmaku: 'dplayer-danmaku-show',
-            subtitle: 'dplayer-subtitle-show'
+            subtitle: 'dplayer-subtitle-show',
         };
         this.default = {
             opacity: 0.7,
-            volume: player.options.volume || 0.7,
+            volume: player.options.hasOwnProperty('volume') ? player.options.volume : 0.7,
             unlimited: (player.options.danmaku && player.options.danmaku.unlimited ? 1 : 0) || 0,
             danmaku: 1,
-            subtitle: 1
+            subtitle: 1,
         };
         this.data = {};
 
         this.init();
     }
 
-    init () {
+    init() {
         for (const item in this.storageName) {
             const name = this.storageName[item];
             this.data[item] = parseFloat(utils.storage.get(name) || this.default[item]);
         }
     }
 
-    get (key) {
+    get(key) {
         return this.data[key];
     }
 
-    set (key, value) {
+    set(key, value) {
         this.data[key] = value;
         utils.storage.set(this.storageName[key], value);
     }
 }
 
-export default User;
+export default User;

src/js/utils.js

@@ -1,15 +1,18 @@
-const isMobile = /mobile/i.test(window.navigator.userAgent);
+const isMobile = /mobile|android|iphone|ipod|phone|ipad/i.test(window.navigator.userAgent);
 
 const utils = {
-
     /**
-    * Parse second to time string
-    *
-    * @param {Number} second
-    * @return {String} 00:00 or 00:00:00
-    */
+     * Parse second to time string
+     *
+     * @param {Number} second
+     * @return {String} 00:00 or 00:00:00
+     */
     secondToTime: (second) => {
-        const add0 = (num) => num < 10 ? '0' + num : '' + num;
+        second = second || 0;
+        if (second === 0 || second === Infinity || second.toString() === 'NaN') {
+            return '00:00';
+        }
+        const add0 = (num) => (num < 10 ? '0' + num : '' + num);
         const hour = Math.floor(second / 3600);
         const min = Math.floor((second - hour * 3600) / 60);
         const sec = Math.floor(second - hour * 3600 - min * 60);
@@ -29,8 +32,7 @@ const utils = {
                 actualLeft += current.offsetLeft;
                 current = current.offsetParent;
             }
-        }
-        else {
+        } else {
             while (current !== null && current !== element) {
                 actualLeft += current.offsetLeft;
                 current = current.offsetParent;
@@ -39,19 +41,48 @@ const utils = {
         return actualLeft - elementScrollLeft;
     },
 
-    getScrollPosition () {
+    /**
+    * optimize control play progress
+
+    * optimize get element's view position,for float dialog video player
+    * getBoundingClientRect 在 IE8 及以下返回的值缺失 width、height 值
+    * getBoundingClientRect 在 Firefox 11 及以下返回的值会把 transform 的值也包含进去
+    * getBoundingClientRect 在 Opera 10.5 及以下返回的值缺失 width、height 值
+    */
+    getBoundingClientRectViewLeft(element) {
+        const scrollTop = window.scrollY || window.pageYOffset || document.body.scrollTop + ((document.documentElement && document.documentElement.scrollTop) || 0);
+
+        if (element.getBoundingClientRect) {
+            if (typeof this.getBoundingClientRectViewLeft.offset !== 'number') {
+                let temp = document.createElement('div');
+                temp.style.cssText = 'position:absolute;top:0;left:0;';
+                document.body.appendChild(temp);
+                this.getBoundingClientRectViewLeft.offset = -temp.getBoundingClientRect().top - scrollTop;
+                document.body.removeChild(temp);
+                temp = null;
+            }
+            const rect = element.getBoundingClientRect();
+            const offset = this.getBoundingClientRectViewLeft.offset;
+
+            return rect.left + offset;
+        } else {
+            // not support getBoundingClientRect
+            return this.getElementViewLeft(element);
+        }
+    },
+
+    getScrollPosition() {
         return {
             left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
-            top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+            top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
         };
     },
 
-    setScrollPosition ({left = 0, top = 0}) {
+    setScrollPosition({ left = 0, top = 0 }) {
         if (this.isFirefox) {
             document.documentElement.scrollLeft = left;
             document.documentElement.scrollTop = top;
-        }
-        else {
+        } else {
             window.scrollTo(left, top);
         }
     },
@@ -62,33 +93,46 @@ const utils = {
 
     isChrome: /chrome/i.test(window.navigator.userAgent),
 
+    isSafari: /safari/i.test(window.navigator.userAgent),
+
     storage: {
         set: (key, value) => {
             localStorage.setItem(key, value);
         },
 
-        get: (key) => localStorage.getItem(key)
-    },
-
-    cumulativeOffset: (element) => {
-        let top = 0, left = 0;
-        do {
-            top += element.offsetTop || 0;
-            left += element.offsetLeft || 0;
-            element = element.offsetParent;
-        } while (element);
-
-        return {
-            top: top,
-            left: left
-        };
+        get: (key) => localStorage.getItem(key),
     },
 
     nameMap: {
         dragStart: isMobile ? 'touchstart' : 'mousedown',
         dragMove: isMobile ? 'touchmove' : 'mousemove',
-        dragEnd: isMobile ? 'touchend' : 'mouseup'
-    }
+        dragEnd: isMobile ? 'touchend' : 'mouseup',
+    },
+
+    color2Number: (color) => {
+        if (color[0] === '#') {
+            color = color.substr(1);
+        }
+        if (color.length === 3) {
+            color = `${color[0]}${color[0]}${color[1]}${color[1]}${color[2]}${color[2]}`;
+        }
+        return (parseInt(color, 16) + 0x000000) & 0xffffff;
+    },
+
+    number2Color: (number) => '#' + ('00000' + number.toString(16)).slice(-6),
+
+    number2Type: (number) => {
+        switch (number) {
+            case 0:
+                return 'right';
+            case 1:
+                return 'top';
+            case 2:
+                return 'bottom';
+            default:
+                return 'right';
+        }
+    },
 };
 
-export default utils;
+export default utils;

src/template/player.art

@@ -6,14 +6,14 @@
         <img src="{{ options.logo }}">
     </div>
     {{ /if }}
-    <div class="dplayer-danmaku"{{ if options.danmaku && options.danmaku.bottm }} style="margin-bottom:{{ options.danmaku.bottm }}"{{ /if }}>
+    <div class="dplayer-danmaku"{{ if options.danmaku && options.danmaku.bottom }} style="margin-bottom:{{ options.danmaku.bottom }}"{{ /if }}>
         <div class="dplayer-danmaku-item dplayer-danmaku-item--demo"></div>
     </div>
     <div class="dplayer-subtitle"></div>
     <div class="dplayer-bezel">
         <span class="dplayer-bezel-icon"></span>
         {{ if options.danmaku }}
-        <span class="dplayer-danloading">{{ tran('Danmaku is loading') }}</span>
+        <span class="dplayer-danloading">{{ tran('danmaku-loading') }}</span>
         {{ /if }}
         <span class="diplayer-loading-icon">{{@ icons.loading }}</span>
     </div>
@@ -21,12 +21,12 @@
 <div class="dplayer-controller-mask"></div>
 <div class="dplayer-controller">
     <div class="dplayer-icons dplayer-comment-box">
-        <button class="dplayer-icon dplayer-comment-setting-icon" data-balloon="{{ tran('Setting') }}" data-balloon-pos="up">
+        <button class="dplayer-icon dplayer-comment-setting-icon" data-balloon="{{ tran('setting') }}" data-balloon-pos="up">
             <span class="dplayer-icon-content">{{@ icons.pallette }}</span>
         </button>
         <div class="dplayer-comment-setting-box">
             <div class="dplayer-comment-setting-color">
-                <div class="dplayer-comment-setting-title">{{ tran('Set danmaku color') }}</div>
+                <div class="dplayer-comment-setting-title">{{ tran('set-danmaku-color') }}</div>
                 <label>
                     <input type="radio" name="dplayer-danmaku-color-{{ index }}" value="#fff" checked>
                     <span style="background: #fff;"></span>
@@ -53,23 +53,23 @@
                 </label>
             </div>
             <div class="dplayer-comment-setting-type">
-                <div class="dplayer-comment-setting-title">{{ tran('Set danmaku type') }}</div>
+                <div class="dplayer-comment-setting-title">{{ tran('set-danmaku-type') }}</div>
                 <label>
-                    <input type="radio" name="dplayer-danmaku-type-{{ index }}" value="top">
-                    <span>{{ tran('Top') }}</span>
+                    <input type="radio" name="dplayer-danmaku-type-{{ index }}" value="1">
+                    <span>{{ tran('top') }}</span>
                 </label>
                 <label>
-                    <input type="radio" name="dplayer-danmaku-type-{{ index }}" value="right" checked>
-                    <span>{{ tran('Rolling') }}</span>
+                    <input type="radio" name="dplayer-danmaku-type-{{ index }}" value="0" checked>
+                    <span>{{ tran('rolling') }}</span>
                 </label>
                 <label>
-                    <input type="radio" name="dplayer-danmaku-type-{{ index }}" value="bottom">
-                    <span>{{ tran('Bottom') }}</span>
+                    <input type="radio" name="dplayer-danmaku-type-{{ index }}" value="2">
+                    <span>{{ tran('bottom') }}</span>
                 </label>
             </div>
         </div>
-        <input class="dplayer-comment-input" type="text" placeholder="{{ tran('Input danmaku, hit Enter') }}" maxlength="30">
-        <button class="dplayer-icon dplayer-send-icon" data-balloon="{{ tran('Send') }}" data-balloon-pos="up">
+        <input class="dplayer-comment-input" type="text" placeholder="{{ tran('input-danmaku-enter') }}" maxlength="30">
+        <button class="dplayer-icon dplayer-send-icon" data-balloon="{{ tran('send') }}" data-balloon-pos="up">
             <span class="dplayer-icon-content">{{@ icons.send }}</span>
         </button>
     </div>
@@ -94,7 +94,7 @@
             <span class="dplayer-dtime">0:00</span>
         </span>
         {{ if options.live }}
-        <span class="dplayer-live-badge"><span class="dplayer-live-dot" style="background: {{ options.theme }};"></span>{{ tran('Live') }}</span>
+        <span class="dplayer-live-badge"><span class="dplayer-live-dot" style="background: {{ options.theme }};"></span>{{ tran('live') }}</span>
         {{ /if }}
     </div>
     <div class="dplayer-icons dplayer-icons-right">
@@ -102,7 +102,7 @@
         <div class="dplayer-quality">
             <button class="dplayer-icon dplayer-quality-icon">{{ options.video.quality[options.video.defaultQuality].name }}</button>
             <div class="dplayer-quality-mask">
-                <div class="dplayer-quality-list"></div>
+                <div class="dplayer-quality-list">
                 {{ each options.video.quality }}
                     <div class="dplayer-quality-item" data-index="{{ $index }}">{{ $value.name }}</div>
                 {{ /each }}
@@ -111,55 +111,83 @@
         </div>
         {{ /if }}
         {{ if options.screenshot }}
-        <a href="#" class="dplayer-icon dplayer-camera-icon" data-balloon="{{ tran('Screenshot') }}" data-balloon-pos="up">
+        <div class="dplayer-icon dplayer-camera-icon" data-balloon="{{ tran('screenshot') }}" data-balloon-pos="up">
             <span class="dplayer-icon-content">{{@ icons.camera }}</span>
-        </a>
+        </div>
+        {{ /if }}
+        {{ if options.airplay }}
+        <div class="dplayer-icon dplayer-airplay-icon" data-balloon="{{ tran('airplay') }}" data-balloon-pos="up">
+            <span class="dplayer-icon-content">{{@ icons.airplay }}</span>
+        </div>
+        {{ /if }}
+        {{ if options.chromecast }}
+        <div class="dplayer-icon dplayer-chromecast-icon" data-balloon="{{ tran('chromecast') }}" data-balloon-pos="up">
+            <span class="dplayer-icon-content">{{@ icons.chromecast }}</span>
+        </div>
         {{ /if }}
         <div class="dplayer-comment">
-            <button class="dplayer-icon dplayer-comment-icon" data-balloon="{{ tran('Send danmaku') }}" data-balloon-pos="up">
+            <button class="dplayer-icon dplayer-comment-icon" data-balloon="{{ tran('send-danmaku') }}" data-balloon-pos="up">
                 <span class="dplayer-icon-content">{{@ icons.comment }}</span>
             </button>
         </div>
         {{ if options.subtitle }}
+        {{ if (typeof options.subtitle.url === 'string') }}
         <div class="dplayer-subtitle-btn">
-            <button class="dplayer-icon dplayer-subtitle-icon" data-balloon="{{ tran('Hide subtitle') }}" data-balloon-pos="up">
+            <button class="dplayer-icon dplayer-subtitle-icon" data-balloon="{{ tran('hide-subs') }}" data-balloon-pos="up">
                 <span class="dplayer-icon-content">{{@ icons.subtitle }}</span>
             </button>
         </div>
+        {{ else }}
+        <div class="dplayer-subtitles">
+            <button class="dplayer-icon dplayer-subtitles-icon" data-balloon="{{ tran('subtitle') }}" data-balloon-pos="up">
+                <span class="dplayer-icon-content">{{@ icons.subtitle }}</span>
+            </button>
+            <div class="dplayer-subtitles-box">
+                <div class="dplayer-subtitles-panel">
+                    {{ each options.subtitle.url }}
+                        <div class="dplayer-subtitles-item" data-subtitle="{{ $value.url }}">
+                            <!-- if lang, show tran(lang). if lang and name, show name + (tran(lang)). if name, show name. off option use lang for translation. -->
+                            <span class="dplayer-label">{{ $value.lang ? $value.name ?  $value.name+' ('+tran($value.lang)+')' : tran($value.lang) : $value.name }}</span>
+                        </div>
+                    {{ /each }}
+                </div>
+            </div>
+        </div>
+        {{ /if }}
         {{ /if }}
         <div class="dplayer-setting">
-            <button class="dplayer-icon dplayer-setting-icon" data-balloon="{{ tran('Setting') }}" data-balloon-pos="up">
+            <button class="dplayer-icon dplayer-setting-icon" data-balloon="{{ tran('setting') }}" data-balloon-pos="up">
                 <span class="dplayer-icon-content">{{@ icons.setting }}</span>
             </button>
             <div class="dplayer-setting-box">
                 <div class="dplayer-setting-origin-panel">
                     <div class="dplayer-setting-item dplayer-setting-speed">
-                        <span class="dplayer-label">{{ tran('Speed') }}</span>
+                        <span class="dplayer-label">{{ tran('speed') }}</span>
                         <div class="dplayer-toggle">{{@ icons.right }}</div>
                     </div>
                     <div class="dplayer-setting-item dplayer-setting-loop">
-                        <span class="dplayer-label">{{ tran('Loop') }}</span>
+                        <span class="dplayer-label">{{ tran('loop') }}</span>
                         <div class="dplayer-toggle">
                             <input class="dplayer-toggle-setting-input" type="checkbox" name="dplayer-toggle">
                             <label for="dplayer-toggle"></label>
                         </div>
                     </div>
                     <div class="dplayer-setting-item dplayer-setting-showdan">
-                        <span class="dplayer-label">{{ tran('Show danmaku') }}</span>
+                        <span class="dplayer-label">{{ tran('show-danmaku') }}</span>
                         <div class="dplayer-toggle">
                             <input class="dplayer-showdan-setting-input" type="checkbox" name="dplayer-toggle-dan">
                             <label for="dplayer-toggle-dan"></label>
                         </div>
                     </div>
                     <div class="dplayer-setting-item dplayer-setting-danunlimit">
-                        <span class="dplayer-label">{{ tran('Unlimited danmaku') }}</span>
+                        <span class="dplayer-label">{{ tran('unlimited-danmaku') }}</span>
                         <div class="dplayer-toggle">
                             <input class="dplayer-danunlimit-setting-input" type="checkbox" name="dplayer-toggle-danunlimit">
                             <label for="dplayer-toggle-danunlimit"></label>
                         </div>
                     </div>
                     <div class="dplayer-setting-item dplayer-setting-danmaku">
-                        <span class="dplayer-label">{{ tran('Opacity for danmaku') }}</span>
+                        <span class="dplayer-label">{{ tran('opacity-danmaku') }}</span>
                         <div class="dplayer-danmaku-bar-wrap">
                             <div class="dplayer-danmaku-bar">
                                 <div class="dplayer-danmaku-bar-inner">
@@ -170,32 +198,19 @@
                     </div>
                 </div>
                 <div class="dplayer-setting-speed-panel">
-                    <div class="dplayer-setting-speed-item" data-speed="0.5">
-                        <span class="dplayer-label">0.5</span>
-                    </div>
-                    <div class="dplayer-setting-speed-item" data-speed="0.75">
-                        <span class="dplayer-label">0.75</span>
-                    </div>
-                    <div class="dplayer-setting-speed-item" data-speed="1">
-                        <span class="dplayer-label">{{ tran('Normal') }}</span>
-                    </div>
-                    <div class="dplayer-setting-speed-item" data-speed="1.25">
-                        <span class="dplayer-label">1.25</span>
-                    </div>
-                    <div class="dplayer-setting-speed-item" data-speed="1.5">
-                        <span class="dplayer-label">1.5</span>
-                    </div>
-                    <div class="dplayer-setting-speed-item" data-speed="2">
-                        <span class="dplayer-label">2</span>
-                    </div>
+                    {{ each options.playbackSpeed }}
+                        <div class="dplayer-setting-speed-item" data-speed="{{ $value }}">
+                            <span class="dplayer-label">{{ $value === 1 ? tran('normal') : $value }}</span>
+                        </div>
+                    {{ /each }}
                 </div>
             </div>
         </div>
         <div class="dplayer-full">
-            <button class="dplayer-icon dplayer-full-in-icon" data-balloon="{{ tran('Web full screen') }}" data-balloon-pos="up">
+            <button class="dplayer-icon dplayer-full-in-icon" data-balloon="{{ tran('web-fullscreen') }}" data-balloon-pos="up">
                 <span class="dplayer-icon-content">{{@ icons.fullWeb }}</span>
             </button>
-            <button class="dplayer-icon dplayer-full-icon" data-balloon="{{ tran('Full screen') }}" data-balloon-pos="up">
+            <button class="dplayer-icon dplayer-full-icon" data-balloon="{{ tran('fullscreen') }}" data-balloon-pos="up">
                 <span class="dplayer-icon-content">{{@ icons.full }}</span>
             </button>
         </div>
@@ -239,15 +254,15 @@
     </div>
     {{ if options.danmaku }}
     <div class="dplayer-info-panel-item dplayer-info-panel-item-danmaku-id">
-        <span class="dplayer-info-panel-item-title">Danamku id</span>
+        <span class="dplayer-info-panel-item-title">Danmaku id</span>
         <span class="dplayer-info-panel-item-data"></span>
     </div>
     <div class="dplayer-info-panel-item dplayer-info-panel-item-danmaku-api">
-        <span class="dplayer-info-panel-item-title">Danamku api</span>
+        <span class="dplayer-info-panel-item-title">Danmaku api</span>
         <span class="dplayer-info-panel-item-data"></span>
     </div>
     <div class="dplayer-info-panel-item dplayer-info-panel-item-danmaku-amount">
-        <span class="dplayer-info-panel-item-title">Danamku amount</span>
+        <span class="dplayer-info-panel-item-title">Danmaku amount</span>
         <span class="dplayer-info-panel-item-data"></span>
     </div>
     {{ /if }}
@@ -255,8 +270,11 @@
 <div class="dplayer-menu">
     {{ each options.contextmenu }}
         <div class="dplayer-menu-item">
-            <a target="_blank" href="{{ $value.link || 'javascript:void(0);' }}">{{ tran($value.text) }}</a>
+            <a{{ if $value.link }} target="_blank"{{ /if }} href="{{ $value.link || 'javascript:void(0);' }}">{{ if $value.key }} {{ tran($value.key) }}{{ /if }}{{ if $value.text }} {{$value.text}}{{ /if }}</a>
         </div>
     {{ /each }}
 </div>
-<div class="dplayer-notice"></div>
+<div class="dplayer-notice-list"></div>
+<button class="dplayer-mobile-play">
+    {{@ icons.play }}
+</button>

src/template/video.art

@@ -2,13 +2,21 @@
 <video
     class="dplayer-video {{ if current }}dplayer-video-current{{ /if }}"
     webkit-playsinline
+    {{ if airplay }} x-webkit-airplay="allow" {{ /if }}
     playsinline
     {{ if pic }}poster="{{ pic }}"{{ /if }}
     {{ if screenshot || enableSubtitle }}crossorigin="anonymous"{{ /if }}
     {{ if preload }}preload="{{ preload }}"{{ /if }}
-    {{ if url }}src="{{ url }}"{{ /if }}
+    {{ if airplay }}
+    nosrc
+    {{ else if url }}
+    src="{{ url }}"
+    {{ /if }}
     >
+    {{ if airplay }}
+    <source src="{{ url }}">
+    {{ /if}}
     {{ if enableSubtitle }}
-    <track kind="metadata" default src="{{ subtitle.url }}"></track>
+    <track class="dplayer-subtrack" kind="metadata" default src="{{ typeof subtitle.url === 'string' ? subtitle.url : subtitle.url[subtitle.index].url }}"></track>
     {{ /if }}
 </video>

tea.yaml

@@ -0,0 +1,6 @@
+# https://tea.xyz/what-is-this-file
+---
+version: 1.0.0
+codeOwners:
+    - '0x185bfcef7b37010e2511309048a130f477f54fBf'
+quorum: 1

webpack/dev.config.js

@@ -1,15 +1,15 @@
-/* eslint-disable no-undef */
 const path = require('path');
 const webpack = require('webpack');
-const GitRevisionPlugin = require('git-revision-webpack-plugin');
+const { GitRevisionPlugin } = require('git-revision-webpack-plugin');
 const gitRevisionPlugin = new GitRevisionPlugin();
 
 module.exports = {
+    mode: 'development',
 
     devtool: 'cheap-module-source-map',
 
     entry: {
-        'DPlayer': './src/js/index.js'
+        DPlayer: './src/js/index.js',
     },
 
     output: {
@@ -19,105 +19,90 @@ module.exports = {
         libraryTarget: 'umd',
         libraryExport: 'default',
         umdNamedDefine: true,
-        publicPath: '/'
+        publicPath: '/',
     },
 
     resolve: {
         modules: ['node_modules'],
-        extensions: ['.js', '.scss']
+        extensions: ['.js', '.less'],
+        fallback: {
+            dgram: false,
+            fs: false,
+            net: false,
+            tls: false,
+        },
     },
 
     module: {
         strictExportPresence: true,
         rules: [
-            {
-                test: /\.js$/,
-                enforce: 'pre',
-                loader: require.resolve('eslint-loader'),
-                include: path.resolve(__dirname, '../src/js'),
-            },
             {
                 test: /\.js$/,
                 use: [
                     {
-                        loader: require.resolve('babel-loader'),
+                        loader: 'babel-loader',
                         options: {
                             cacheDirectory: true,
-                            presets: ['env']
-                        }
-                    }
-                ]
+                            presets: ['@babel/preset-env'],
+                        },
+                    },
+                ],
             },
             {
-                test: /\.scss$/,
+                test: /\.less$/,
                 use: [
-                    require.resolve('style-loader'),
+                    'style-loader',
                     {
-                        loader: require.resolve('css-loader'),
+                        loader: 'css-loader',
                         options: {
-                            importLoaders: 1
-                        }
+                            importLoaders: 1,
+                        },
                     },
                     {
-                        loader: require.resolve('postcss-loader'),
+                        loader: 'postcss-loader',
                         options: {
-                            config: {
-                                path: path.join(__dirname, 'postcss.config.js')
-                            }
-                        }
+                            postcssOptions: {
+                                plugins: ['postcss-preset-env'],
+                            },
+                        },
                     },
-                    require.resolve('sass-loader')
-                ]
+                    'less-loader',
+                ],
             },
             {
                 test: /\.(png|jpg)$/,
-                loader: require.resolve('url-loader'),
+                loader: 'url-loader',
                 options: {
-                    'limit': 40000
-                }
+                    limit: 40000,
+                },
             },
             {
                 test: /\.svg$/,
-                loader: 'svg-inline-loader'
+                loader: 'svg-inline-loader',
             },
             {
                 test: /\.art$/,
-                loader: 'art-template-loader'
-            }
-        ]
+                loader: 'art-template-loader',
+            },
+        ],
     },
 
     devServer: {
-        compress: true,
-        contentBase: path.resolve(__dirname, '..', 'demo'),
-        clientLogLevel: 'none',
-        quiet: false,
-        open: true,
-        historyApiFallback: {
-            disableDotRule: true
+        static: {
+            directory: path.join(__dirname, '..', 'demo'),
         },
-        watchOptions: {
-            ignored: /node_modules/
-        }
+        compress: true,
+        open: true,
     },
 
     plugins: [
-        new webpack.NamedModulesPlugin(),
         new webpack.DefinePlugin({
             DPLAYER_VERSION: `"${require('../package.json').version}"`,
-            GIT_HASH: JSON.stringify(gitRevisionPlugin.version())
-        })
+            GIT_HASH: JSON.stringify(gitRevisionPlugin.version()),
+        }),
     ],
 
-    node: {
-        dgram: 'empty',
-        fs: 'empty',
-        net: 'empty',
-        tls: 'empty'
-    },
-
     performance: {
-        hints: false
-    }
-
+        hints: false,
+    },
 };

webpack/postcss.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-    plugins: {
-        'autoprefixer': {}
-    }
-};

webpack/prod.config.js

@@ -1,18 +1,17 @@
-/* eslint-disable no-undef */
 const path = require('path');
 const webpack = require('webpack');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const GitRevisionPlugin = require('git-revision-webpack-plugin');
+const { GitRevisionPlugin } = require('git-revision-webpack-plugin');
 const gitRevisionPlugin = new GitRevisionPlugin();
 
 module.exports = {
+    mode: 'production',
 
     bail: true,
 
     devtool: 'source-map',
 
     entry: {
-        'DPlayer': './src/js/index.js'
+        DPlayer: './src/js/index.js',
     },
 
     output: {
@@ -22,104 +21,79 @@ module.exports = {
         libraryTarget: 'umd',
         libraryExport: 'default',
         umdNamedDefine: true,
-        publicPath: '/'
+        publicPath: '/',
     },
 
     resolve: {
         modules: ['node_modules'],
-        extensions: ['.js', '.scss']
+        extensions: ['.js', '.less'],
+        fallback: {
+            dgram: false,
+            fs: false,
+            net: false,
+            tls: false,
+        },
     },
 
     module: {
         strictExportPresence: true,
         rules: [
-            {
-                test: /\.js$/,
-                enforce: 'pre',
-                loader: require.resolve('eslint-loader'),
-                include: path.resolve(__dirname, '../src/js'),
-            },
             {
                 test: /\.js$/,
                 use: [
-                    require.resolve('template-string-optimize-loader'),
+                    'template-string-optimize-loader',
                     {
-                        loader: require.resolve('babel-loader'),
+                        loader: 'babel-loader',
                         options: {
-                            compact: true,
-                            presets: ['env']
-                        }
-                    }
-                ]
+                            cacheDirectory: true,
+                            presets: ['@babel/preset-env'],
+                        },
+                    },
+                ],
             },
             {
-                test: /\.scss$/,
-                use: ExtractTextPlugin.extract({
-                    fallback: require.resolve('style-loader'),
-                    use: [
-                        {
-                            loader: require.resolve('css-loader'),
-                            options: {
-                                importLoaders: 1,
-                                minimize: true,
-                                sourceMap: true
-                            }
+                test: /\.less$/,
+                use: [
+                    'style-loader',
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            importLoaders: 1,
                         },
-                        {
-                            loader: require.resolve('postcss-loader'),
-                            options: {
-                                config: {
-                                    path: path.join(__dirname, 'postcss.config.js')
-                                }
-                            }
+                    },
+                    {
+                        loader: 'postcss-loader',
+                        options: {
+                            postcssOptions: {
+                                plugins: ['postcss-preset-env'],
+                            },
                         },
-                        require.resolve('sass-loader')
-                    ]
-                })
+                    },
+                    'less-loader',
+                ],
             },
             {
                 test: /\.(png|jpg)$/,
-                loader: require.resolve('url-loader'),
+                loader: 'url-loader',
                 options: {
-                    'limit': 40000
-                }
+                    limit: 40000,
+                },
             },
             {
                 test: /\.svg$/,
-                loader: 'svg-inline-loader'
+                loader: 'svg-inline-loader',
             },
             {
                 test: /\.art$/,
-                loader: 'art-template-loader'
-            }
-        ]
+                loader: 'art-template-loader',
+            },
+        ],
     },
 
     plugins: [
         new webpack.DefinePlugin({
             DPLAYER_VERSION: `"${require('../package.json').version}"`,
-            GIT_HASH: JSON.stringify(gitRevisionPlugin.version())
+            GIT_HASH: JSON.stringify(gitRevisionPlugin.version()),
         }),
-        new webpack.optimize.UglifyJsPlugin({
-            compress: {
-                warnings: false
-            },
-            output: {
-                comments: false,
-                ascii_only: true
-            },
-            sourceMap: true
-        }),
-        new ExtractTextPlugin({
-            filename: '[name].min.css'
-        })
     ],
-
-    node: {
-        dgram: 'empty',
-        fs: 'empty',
-        net: 'empty',
-        tls: 'empty',
-    }
-
 };