artplayer@5.0.9

* update

* update

* Create video2.mp4

* add art.quality

* fix art.theme

.babelrc

@@ -1,14 +0,0 @@
-{
-    "presets": [
-        [
-            "@babel/env",
-            {
-                "modules": false
-            }
-        ]
-    ],
-    "plugins": [
-        "@babel/plugin-external-helpers",
-        "@babel/plugin-transform-runtime"
-    ]
-}

.eslintrc

@@ -1,33 +1,17 @@
 {
     "parser": "@babel/eslint-parser",
-    "extends": ["standard", "prettier"],
+    "extends": "eslint:recommended",
     "env": {
         "browser": true,
         "es6": true
     },
     "globals": {
-        "Artplayer": false
-    },
-    "rules": {
-        "no-shadow": 0,
-        "no-param-reassign": 0,
-        "no-restricted-exports": 0,
-        "no-loss-of-precision": 0,
-        "no-promise-executor-return": 0,
-        "no-unreachable-loop": 0,
-        "no-unsafe-optional-chaining": 0,
-        "no-useless-backreference": 0,
-        "default-case-last": 0,
-        "no-nonoctal-decimal-escape": 0,
-        "prefer-object-spread": 0,
-        "prefer-destructuring": 0,
-        "arrow-body-style": 0,
-        "accessor-pairs": 0,
-        "import/named": 0
+        "require": "readonly",
+        "process": "readonly"
     },
     "parserOptions": {
         "sourceType": "module",
-        "ecmaVersion": 8,
+        "ecmaVersion": "latest",
         "requireConfigFile": false,
         "babelOptions": {
             "presets": ["@babel/preset-react"]

.github/workflows/nodejs.yml

@@ -28,15 +28,7 @@ jobs:
     - name: npm install, lint, build, and test
       run: |
         npm install
-        npx lerna bootstrap --hoist
         npm run lint
         npm run build:all
-        cd packages/artplayer-document && ls
-        npm install
-        npm run build
-        cd ../../ && ls
-        npm run test:create
-        npm run test
-        npm run sizereport
       env:
         CI: true

.gitignore

@@ -1,8 +1,6 @@
-node_modules
 .vscode
 .DS_Store
-*.log
-commit.json
+.parcel-cache
+node_modules
 package-lock.json
-.size-snapshot.json
 yarn.lock

.prettierignore

@@ -0,0 +1,10 @@
+docs
+.github
+.docusaurus
+node_modules
+.parcel-cache
+packages/*/dist
+packages/*/node_modules
+packages/*/.parcel-cache
+packages/artplayer-template/*/.next
+packages/artplayer-template/*/.nuxt

.prettierrc

@@ -4,4 +4,4 @@
     "singleQuote": true,
     "trailingComma": "all",
     "printWidth": 120
-}
+}

CHANGELOG_CN.md

@@ -0,0 +1,307 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [5.0.9] - 2023-5-14
+
+-   修复 `art.autoOrientation` 样式错误问题
+-   移除播放器容器的动画效果
+
+## [5.0.8] - 2023-5-13
+
+-   修复 `art.mini` 的互斥关系
+-   修复 `art.aspectRatio` 动画效果问题
+
+## [5.0.7] - 2023-5-13
+
+-   使用 `switchUrl` 或者 `switchQuality` 方法切换地址后会保持原有的调整如：`aspectRatio`, `playbackRate`, `flip`, `autoSize`
+-   删除 `switchUrl` 方法和 `switchQuality` 方法的第二个 `name` 参数
+-   添加 `isIOS13` 工具，用于修复在 `IOS13` 以上版本的设备上的 `isMobile` 判断不准确的问题
+-   `art.autoSize` 和 `art.autoHeight` 改为方法的形式调用，即 `art.autoSize()` 和 `art.autoHeight()`
+-   添加新的属性 `art.quality`，用于动态更新画质列表
+-   修复 `art.aspectRatio` 属性不正确的问题
+-   添加 `art.switch` Setter 属性, 功能和 `art.switchUrl` 方法一样
+
+## [5.0.6] - 2023-5-3
+
+-   修复设置面板的样式错误
+
+## [5.0.5] - 2023-5-3
+
+-   弹幕插件添加 `heatmap` 选项，用于是否开启热度图，默认为关闭
+-   修复英文字幕换行的样式错误
+-   修复设置面板的样式错误
+-   移除多余的全局属性
+-   移除 `title` 选项，因为目前用处不大
+-   移除 `whitelist` 选项，因为目前用处不大
+
+## [5.0.4] - 2023-4-27
+
+-   修复控制器的上拉列表的样式 bug
+
+## [5.0.3] - 2023-4-26
+
+-   修复音量控制器 `event.pageY` 取值错误
+-   修改构建配置，`artplayer.legacy.js` 可以兼容到 `IE 11`
+
+## [5.0.2] - 2023-4-24
+
+-   修复控制栏位置的样式兼容问题
+
+## [5.0.1] - 2023-4-24
+
+-   修复网页全屏的样式错误
+-   修改内置设置项的文本错误
+
+## [5.0.0] - 2023-4-23
+
+-   重写了音量控制器
+-   修复在移动端下，进度拖动的角度不正确的问题
+-   重写了 `mini` 模式，现在这个模式下，视频会脱离原来的容器
+-   全部组件（层，控制器，右键菜单，设置面板）支持动态删除和动态更新
+-   字幕选项添加了 `onVttLoad` 方法，用于在字幕输出前修改 `vtt` 文本
+-   重写了全部样式，添加了许多 `css` 变量
+-   添加 `cssVar` 选项，用于初始化 `css` 变量
+-   添加 `cssVar` 方法，用于设置和获取 `css` 变量
+-   插件 `artplayer-plugin-hls-quality` 添加 `getResolution` 函数选项，用于获取从 `level` 中分辨率的文本
+-   新增 `artplayer-plugin-dash-quality` 插件，用于添加 `Dash` 画质列表到播放器
+-   修复 `lock` 和 `loop` 事件失效问题
+-   添加俄语 `ru` 和印度尼西亚 `id` 语言
+-   更新 `artplayer-plugin-control`，用于兼容`artplayer@5.0.0`
+-   更新 `artplayer-plugin-dash-quality`，用于兼容`artplayer@5.0.0`
+-   更新 `artplayer-plugin-hls-quality`，用于兼容`artplayer@5.0.0`
+-   更新 `artplayer-plugin-danmuku`，用于兼容`artplayer@5.0.0`
+
+## [4.6.2] - 2023-1-26
+
+-   `Artplayer.PROGRESS_HEIGHT` 默认值改为 `6`
+-   添加 `artplayer-plugin-vtt-thumbnail` 用于使用 `vtt` 字幕文件生成视频预览图
+-   添加 `Artplayer.FULLSCREEN_WEB_IN_BODY` 用于网页全屏时，是否把播放器挂载于 `document.body` 上，默认为 `false`
+-   修改字幕偏移的方式为滑块
+-   字幕选项添加 `escape`，用于是否转义 `html` 标签，默认为 `true`
+
+## [4.6.1] - 2023-1-11
+
+-   编写全新的文档
+-   优化`d.ts`
+-   移除多余的事件
+-   优化部分样式
+-   添加`i18n`选项
+
+## [4.6.0] - 2022-12-31
+
+-   优化控制栏图标的样式效果
+-   优化设置面板的样式效果
+-   修复 `art.fullscreen` 监听状态错误的问题
+-   添加 `artplayer-plugin-control` 插件，用于改变控制栏样式
+
+## [4.5.12] - 2022-11-20
+
+-   修复 `art.loop = []` 的显示 `bug`
+
+## [4.5.11] - 2022-11-6
+
+-   新增 `Artplayer.CONTEXTMENU` 用于设置是否显示右键菜单，默认为 `true`
+-   移动设备 `Whitelist` 功能默认为 `true`，即全部移动设备都使用播放器 `UI`
+
+## [4.5.10] - 2022-11-5
+
+-   修复字幕在 `firefox` 不显示的问题：[#pull/415](https://github.com/zhw2590582/ArtPlayer/pull/415)
+-   信息弹窗支持点击选中视频属性文本值
+
+## [4.5.9] - 2022-11-5
+
+-   添加 `art.type` 属性，用于获取和设置视频类型
+-   添加 `art.video` 属性，用于获取 `video` 元素
+-   添加 `artplayer-plugin-iframe` 插件，用于控制 `iframe` 里的播放器
+-   添加 `artplayer-plugin-hls-quality` 插件，用于添加 `Hls` 画质列表到播放器
+-   新增 `Artplayer.PLAYBACK_RATE` 用于设置默认播放速度，默认 `[0.5, 0.75, 1, 1.25, 1.5, 2]`
+-   新增 `Artplayer.ASPECT_RATIO` 用于设置默认长宽比，默认 `['default', '4:3', '16:9']`
+-   新增 `Artplayer.FLIP` 用于设置默认翻转功能，默认 `['normal', 'horizontal', 'vertical']`
+-   新增 `Artplayer.PROGRESS_HEIGHT` 用于设置进度条高度，默认为 `4`
+-   添加 `legacy.js` 版本，用于兼容更老的浏览器，但相对体积较大
+-   移除 `examples` 目录，不再提供 `vue.js` 和 `react.js` 的例子文件
+
+## [4.5.8] - 2022-10-9
+
+-   添加 `farsi` 语言
+-   新增 `Artplayer.DEBUG` 用于打印 `debug` 信息，默认为 `false`
+-   新增 `art.setting.update()` 用于动态更新设置面板
+-   优化 `artplayer.d.ts`
+
+## [4.5.7] - 2022-9-28
+
+-   新增 `Artplayer.VOLUME_STEP` 用于控制调整 `音量` 的步长，默认为 `0.1`
+-   新增 `Artplayer.SEEK_STEP` 用于控制调整 `快进/快退` 的步长，默认为 `5` 秒
+-   修复部分 `svg` 图标在移动端不显示的问题
+-   修复在桌面端进度条不能同时点击和拖动的问题
+-   修复在移动端进度条不能点击和拖动的问题
+-   新增 `art.isRotate` 属性，用于识别是否自动全屏旋转
+-   设置面板 `range` 添加 `onChange` 选项，可以实时获取当前值
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Slider',
+            tooltip: '5x',
+            range: [5, 1, 10, 0.1],
+            onChange: function (item) {
+                return item.range + 'x';
+            },
+        },
+    ],
+});
+```
+
+## [4.5.6] - 2022-9-19
+
+-   修复 `hls.js` 在 `Safari` 播放失效的问题
+
+## [4.5.5] - 2022-9-19
+
+-   广告插件添加 `option.muted` 选项，用于静音自动播放广告
+-   弹幕库插件暴露 `art.plugins.artplayerPluginDanmuku.reset()` 方法，用于清空当前弹幕显示
+-   弹幕库插件暴露 `art.plugins.artplayerPluginDanmuku.option` 属性，用于获取当前弹幕配置
+-   修复在 `IOS` 全屏模式下，字幕失效的问题
+-   添加 `es` 语言
+
+## [4.5.4] - 2022-8-1
+
+### Added
+
+-   新增 `Artplayer.AUTO_PLAYBACK_MIN` 用于控制最小可以记忆播放的进度值，默认为 `5` 秒
+-   新增 `Artplayer.TOUCH_MOVE_RATIO` 用于控制移动端进度条拖放比例，默认为 `0.5`
+-   `option.thumbnails` 添加可选的 `width` 和 `height`
+-   新增播放器编号选项 `option.id`，可用于记忆播放时的唯一标识
+
+## [4.5.3] - 2022-7-13
+
+### Added
+
+-   `url` 选项允许传空字符串，可用于异步设置 `art.url`
+
+```js
+const art = new Artplayer({
+    url: '',
+    container: '.artplayer-app',
+});
+
+setTimeout(() => {
+    art.url = '/assets/sample/video.mp4';
+}, 1000);
+```
+
+-   `art.play()` 方法统一返回 `Promise`, `play` 事件也改为异步触发
+
+```js
+const art = new Artplayer({
+    url: '/assets/sample/video.mp4',
+    container: '.artplayer-app',
+});
+
+art.on('ready', async () => {
+    try {
+        await art.play();
+        console.log('播放成功');
+    } catch (error) {
+        console.log('播放失败', error.message);
+    }
+});
+```
+
+-   新增 `airplay` (隔空播放) 功能，当前只在 Safari 下可用
+
+```js
+const art = new Artplayer({
+    url: '/assets/sample/video.mp4',
+    container: '.artplayer-app',
+    airplay: true,
+});
+```
+
+## [4.5.2] - 2022-6-22
+
+### Added
+
+-   优化自动回放功能，让用户自行选择
+
+## [4.5.0] - 2022-6-21
+
+### Added
+
+-   移除内置广告功能
+-   新增广告插件
+
+## [4.4.7] - 2022-6-13
+
+### Added
+
+-   兼容弹幕库 d.ts
+-   更新依赖库
+
+## [4.4.6] - 2022-6-11
+
+### Added
+
+-   添加弹幕库 d.ts
+-   调整字幕字体大小参数
+-   优化正则解析 xml 弹幕
+
+## [4.4.5] - 2022-6-2
+
+### Added
+
+-   修复迷你模式时，主题色缺失的 bug
+
+## [4.4.3] - 2022-05-26
+
+### Added
+
+-   修复弹幕库销毁时，自定义挂载输入框的残留
+-   修复迷你模式的尺寸计算错误
+
+## [4.4.2] - 2022-05-20
+
+### Added
+
+-   移除播放器 UI 初始化的 video:loadedmetadata 事件
+-   弹幕库暴露 load 方法，用于切换弹幕源
+-   添加 error 图标，出现于视频加载错误达到上限后
+-   修复 setting 多次初始化时产生的 bug
+
+## [4.4.1] - 2022-05-17
+
+### Added
+
+-   添加 art.isInput 属性，当为 true 的时候不自动隐藏控制栏，如弹幕正在输入时
+-   添加 art.isLock 属性，在移动端当为 true 的时候不能操作快进、开始和暂停
+-   修复弹幕输入框的固定宽度 bug
+-   设置面板支持 range 和 onRange 选项
+-   添加 isAndroid 和 isIOS 工具函数
+-   弹幕库添加 lockTime 选项，可自定义输入框的锁定时间
+-   弹幕库添加 maxLength 选项，控制输入最大可输入字数
+-   弹幕库添加 minWidth 选项，控制输入框最小宽度
+-   弹幕库添加 maxWidth 选项，控制输入框最大宽度
+-   弹幕库添加 mount 选项，控制输入框自定义挂载位置
+-   弹幕库添加 beforeEmit 选项，控制弹幕发送前的校验
+-   弹幕库添加 theme 选项，控制输入框自定义挂载的主题色
+
+## [4.4.0] - 2022-05-15
+
+### Added
+
+-   设置面板支持 switch 和 onSwitch 选项
+-   弹幕库插件添加设置面板和弹幕发送
+-   弹幕库的选项添加默认模式和默认字号
+-   弹幕库字号支持按播放器的百分百
+-   修复翻转设置的图标缺失
+-   默认播放器获取了焦点后，不会自动隐藏控制栏
+-   删除字幕开关按钮，需要自行配置字幕开关

CONTRIBUTING.md

@@ -0,0 +1,35 @@
+This project uses `parcel` as a development and packaging tool, so there are few overall configuration options
+
+## 1. Install dependencies
+
+```bash
+npm install
+```
+
+or
+
+```bash
+yarn
+```
+
+## 2. Develop the project and open the demo page
+
+```base
+npm run dev
+```
+
+or
+
+```bash
+yarn dev
+```
+
+## 3. Package the project
+
+```bash
+npm run build
+```
+
+```bash
+yarn build
+```

README.md

@@ -20,7 +20,9 @@
   <span>・</span>
   <a href="https://artplayer.org/document">API Document</a>
   <span>・</span>
-  <a href="https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=danmuku">弹幕演示</a>
+  <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku">弹幕演示</a>
+  <span>・</span>
+  <a href="./CHANGELOG_CN.md">更新记录</a>
   <span>・</span>
 </p>
 
@@ -30,6 +32,14 @@
     </a>
 </p>
 
+## Home Page
+
+[https://artplayer.org](https://artplayer.org)
+
+## Mobile Demo
+
+<img src="./images/qrcode.png" width="250">
+
 ## Features
 
 [ArtPlayer.js](https://artplayer.org) is an easy-to-use and feature-rich HTML5 video player, and most of the player's functional controls support customization, which makes it easy to connect with your business logic. In addition, it directly supports `.vtt`, `.ass` and `.srt` subtitle formats. Integration with other dependencies such as `flv.js`, `hls.js`, `dash.js`, etc. is also very simple. The code is highly decoupled, the structure and logic are clear, and it is easy to track errors and add new features.
@@ -83,6 +93,14 @@ var art = new Artplayer({
 });
 ```
 
+## Changelog
+
+[CHANGELOG_CN.md](./CHANGELOG_CN.md)
+
+## Contributing
+
+[CONTRIBUTING.md](./CONTRIBUTING.md)
+
 ## Donations
 
 We accept donations through these channels:

dist/artplayer-plugin-danmuku.js

@@ -1,8 +0,0 @@
-/*!
- * artplayer-plugin-danmuku.js v4.3.0
- * Github: https://github.com/zhw2590582/ArtPlayer#readme
- * (c) 2017-2022 Harvey Zack
- * Released under the MIT License.
- */
-
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).artplayerPluginDanmuku=e()}(this,(function(){"use strict";function t(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function e(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var n={"zh-cn":{"Danmu opacity":"弹幕透明度","Danmu speed":"弹幕速度","Danmu size":"弹幕大小","Danmu text cannot be empty":"弹幕文本不能为空","The length of the danmu does not exceed":"弹幕文本字数不能超过","Danmu speed synchronous playback multiple":"弹幕速度同步播放倍数"},"zh-tw":{"Danmu opacity":"彈幕透明度","Danmu speed":"彈幕速度","Danmu size":"弹幕大小","Danmu text cannot be empty":"彈幕文本不能為空","The length of the danmu does not exceed":"彈幕文本字數不能超過","Danmu speed synchronous playback multiple":"彈幕速度同步播放倍數"}};function r(t,e,n){return t.filter((function(t){return t.$state===e})).map(n)}function i(t,e){var n=t.getBoundingClientRect();return e?n[e]:n}function o(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function a(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var r,i,o=[],a=!0,s=!1;try{for(n=n.call(t);!(a=(r=n.next()).done)&&(o.push(r.value),!e||o.length!==e);a=!0);}catch(t){s=!0,i=t}finally{try{a||null==n.return||n.return()}finally{if(s)throw i}}return o}}(t,e)||function(t,e){if(t){if("string"==typeof t)return o(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(t,e):void 0}}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(t){switch(t){case 1:case 2:case 3:default:return 0;case 4:case 5:return 1}}function u(t){return fetch(t).then((function(t){return t.text()})).then((function(t){return function(t){if("string"!=typeof t)return[];var e=t.match(/<d([\S ]*?>[\S ]*?)<\/d>/gi);return e&&e.length?e.map((function(t){var e=a(t.match(/<d p="(.+)">(.+)<\/d>/),3),n=e[1],r=e[2],i=n.split(",");return 8===i.length&&r.trim()?{text:r,time:Number(i[0]),mode:s(Number(i[1])),fontSize:Number(i[2]),color:"#".concat(Number(i[3]).toString(16)),timestamp:Number(i[4]),pool:Number(i[5]),userID:i[6],rowID:Number(i[7])}:null})):[]}(t)}))}function l(t,e){var n=a(t.option.margin,2),r=n[0],o=n[1],s=i(t.art.template.$player),u=t.queue.filter((function(t){return t.mode===e.mode&&"emit"===t.$state&&t.$ref&&t.$ref.style.fontSize===e.$ref.style.fontSize&&parseFloat(t.$ref.style.top)<=s.height-o})).map((function(t){var e=i(t.$ref),n=e.width,r=e.height,o=e.top-s.top,a=e.left-s.left;return{top:o,left:a,height:r,width:n,right:s.width-a-n}})).sort((function(t,e){return t.top-e.top}));return 0===u.length?r:(u.unshift({top:0,left:0,right:0,height:r,width:s.width}),u.push({top:s.height-o,left:0,right:0,height:o,width:s.width}),function(t){for(var e=0,n={},r=0;r<t.length;r+=1){var i=t[r];n[i.top]?n[i.top].push(i):n[i.top]=[i]}for(var o=Object.keys(n),s=0,u=1;u<t.length;u+=1){var l=t[u],f=t[u-1],c=f.top+f.height,p=l.top-c;p>s&&(e=c,s=p)}if(0===e)for(var h=0,m=0;m<o.length;m+=1){for(var d=t[0].width,y=o[m],g=n[y],b=0;b<g.length;b+=1){var $=g[b];$.right<d&&(d=$.right)}d>h&&(h=d,e=a(g,1)[0].top)}if(0===e){var v=o.filter((function(t,e){return 0!==e&&e!==o.length-1})).sort((function(t,e){return n[t].length-n[e].length}));e=a(v,1)[0]}return e}(u))}function f(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?f(Object(r),!0).forEach((function(n){t(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):f(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var p=function(){function t(e,r){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),e.i18n.update(n),this.art=e,this.queue=[],this.option={},this.config(r),this.isStop=!1,this.isHide=!1,this.animationFrameTimer=null,this.$danmuku=e.template.$danmuku,e.on("video:play",this.start.bind(this)),e.on("video:playing",this.start.bind(this)),e.on("video:pause",this.stop.bind(this)),e.on("video:waiting",Line truncated

dist/artplayer-tool-thumbnail.js

@@ -1,8 +0,0 @@
-/*!
- * artplayer-tool-thumbnail.js v4.0.0
- * Github: https://github.com/zhw2590582/ArtPlayer#readme
- * (c) 2017-2022 Harvey Zack
- * Released under the MIT License.
- */
-
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).ArtplayerToolThumbnail=e()}(this,(function(){"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function n(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function i(t,e){return i=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},i(t,e)}function o(t){return o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},o(t)}function r(t,e){if(e&&("object"===o(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return n(t)}function a(t){return a=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},a(t)}var s={exports:{}};function u(){}function l(t,e,n){return Math.max(Math.min(t,Math.max(e,n)),Math.min(e,n))}function c(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,i=a(t);if(e){var o=a(this).constructor;n=Reflect.construct(i,arguments,o)}else n=i.apply(this,arguments);return r(this,n)}}u.prototype={on:function(t,e,n){var i=this.e||(this.e={});return(i[t]||(i[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){var i=this;function o(){i.off(t,o),e.apply(n,arguments)}return o._=e,this.on(t,o,n)},emit:function(t){for(var e=[].slice.call(arguments,1),n=((this.e||(this.e={}))[t]||[]).slice(),i=0,o=n.length;i<o;i++)n[i].fn.apply(n[i].ctx,e);return this},off:function(t,e){var n=this.e||(this.e={}),i=n[t],o=[];if(i&&e)for(var r=0,a=i.length;r<a;r++)i[r].fn!==e&&i[r].fn._!==e&&o.push(i[r]);return o.length?n[t]=o:delete n[t],this}},s.exports=u,s.exports.TinyEmitter=u;var h=function(o){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&i(t,e)}(h,o);var r,a,s,u=c(h);function h(){var e,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return t(this,h),(e=u.call(this)).processing=!1,e.option={},e.setup(Object.assign({},h.DEFAULTS,i)),e.video=h.creatVideo(),e.duration=0,e.inputChange=e.inputChange.bind(n(e)),e.ondrop=e.ondrop.bind(n(e)),e.option.fileInput.addEventListener("change",e.inputChange),e.option.fileInput.addEventListener("dragover",h.ondragover),e.option.fileInput.addEventListener("drop",h.ondrop),e}return r=h,a=[{key:"ondrop",value:function(t){t.preventDefault();var e=t.dataTransfer.files[0];this.loadVideo(e)}},{key:"setup",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.option=Object.assign({},this.option,e);var n=this.option,i=n.fileInput,o=n.number,r=n.width,a=n.column;if(this.errorHandle(i instanceof Element,"The 'fileInput' is not a Element"),"INPUT"!==i.tagName||"file"!==i.type){i.style.position="relative";var s=document.createElement("input");s.type="file",s.style.position="absolute",s.style.width="100%",s.style.height="100%",s.style.left="0",s.style.top="0",s.style.right="0",s.style.bottom="0",s.style.opacity="0",i.appendChild(s),this.option.fileInput=s}return["number","width","column","begin","end"].forEach((function(e){t.errorHandle("number"==typeof t.option[e],"The '".concat(e,"' is not a number"))})),this.option.number=l(o,10,1e3),this.option.width=l(r,10,1e3),this.option.column=l(a,1,1e3),this}},{key:"inputChange",value:function(t){var e=this.option.fileInput.files[0];this.loadVideo(e),t.target.value=""}},{key:"loadVideo",value:function(t){if(t){var e=this.video.canPlayType(t.type);this.errorHandle("maybe"===e||"probably"===e,"Playback of this file format is not supported: ".concat(t.type));var n=URL.createObjectURL(t);this.videoUrl=n,this.file=t,this.emit("file",this.file),this.video.src=n,this.emit("video",this.video)}}},{key:"start",value:function(){var t,e=this;if(!this.video.duration)return(t=1e3,new Promise((function(e){return setTimeout(e,t)}))).then((function(){return e.start()}));var n=this.option,i=n.width,o=n.number,r=n.begin,a=n.end,s=this.video.videoHeight/this.video.videoWidth*i;this.option.height=s,this.option.begin=l(r,0,this.video.duration),this.option.end=l(a||this.video.duration,r,this.video.duration),this.errorHandle(this.option.endLine truncated

dist/artplayer.js

@@ -1,8 +0,0 @@
-/*!
- * artplayer.js v4.3.1
- * Github: https://github.com/zhw2590582/ArtPlayer#readme
- * (c) 2017-2022 Harvey Zack
- * Released under the MIT License.
- */
-
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Artplayer=e()}(this,(function(){"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function r(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function n(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function o(t,e){return o=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},o(t,e)}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&o(t,e)}function a(t){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},a(t)}function c(t,e){if(e&&("object"===a(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return n(t)}function l(t){return l=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},l(t)}!function(t,e){void 0===e&&(e={});var r=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}('.art-video-player{zoom:1;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-high-contrast-adjust:none;background-color:#000;color:#eee;direction:ltr;display:flex;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:14px;height:100%;line-height:1.3;margin:0 auto;outline:0;position:relative;text-align:left;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:20}.art-video-player *{box-sizing:border-box;margin:0;padding:0}.art-video-player ::-webkit-scrollbar{height:5px;width:5px}.art-video-player ::-webkit-scrollbar-thumb{background-color:#666}.art-video-player ::-webkit-scrollbar-thumb:hover{background-color:#ccc}.art-video-player .art-icon{align-items:center;display:inline-flex;justify-content:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player img{max-width:100%;vertical-align:top}@supports ((-webkit-backdrop-filter:initial) or (backdrop-filter:initial)){.art-video-player .art-backdrop-filter{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,.7)!important}}.art-video-player .art-video{background-color:#000;cursor:pointer;z-index:10}.art-video-player .art-poster,.art-video-player .art-video{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.art-video-player .art-poster{background-position:50%;background-repeat:no-repeat;background-size:cover;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:11}.art-video-player .art-subtitle{bottom:10px;color:#fff;display:none;font-size:20px;padding:0 20px;pointer-events:none;position:absolute;text-align:center;text-shadow:.5px .5px .5px rgba(0,0,0,.5);width:100%;z-index:20}.art-video-player .art-subtitle p{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;line-height:1.2;margin:5px 0 0;word-break:break-all}.art-video-player .art-bilingual p:nth-child(n+2){transform:scale(.6);transform-origin:center top}.art-video-player.art-subtitle-show .art-subtitle{display:block}.art-video-player.art-control-show .art-subtitle{bottom:50px}.art-video-player .art-danmuku{z-index:30}.art-video-player .art-danmuku,.art-video-player .art-layers{bottom:0;height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%}.art-video-player .art-layers{display:none;z-index:40}.art-video-player .art-layers .art-layer{pointer-events:auto}.art-video-player.art-layer-show .art-layers{display:block}.art-video-player .art-mask{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%;z-index:50}.art-video-player .art-mask .art-state{align-items:center;bottom:65px;display:flex;height:60px;justify-content:center;opacity:.6;position:absolute;right:30px;width:60px}.art-video-player.art-mask-show .art-mask{display:flex}.art-video-player .art-loadingLine truncated

docs/assets/css/mobile.css

@@ -1,19 +0,0 @@
-html, body {
-    height: 100%;
-    overflow: hidden;
-}
-
-.container {
-    height: 100%;
-    padding: 10px;
-    box-sizing: border-box;
-}
-
-.artplayer-app {
-    width: 100%;
-    height: 50%;
-}
-
-.tip {
-    text-align: center;
-}

docs/assets/css/style.css

@@ -71,6 +71,30 @@ img {
     margin-right: 10px;
 }
 
+.header .tool {
+    display: flex;
+    justify-content: space-between;
+    height: 100%;
+    line-height: 1;
+}
+
+.header .qq {
+    display: flex;
+    align-items: center;
+    margin-right: 15px;
+    color: rgb(255 255 255 / 50%);
+}
+
+.header .typeScript {
+    display: flex;
+    align-items: center;
+    margin-right: 15px;
+}
+
+.header .typeScript input {
+    margin-right: 5px;
+}
+
 .header .menus {
     display: flex;
     align-items: center;
@@ -81,7 +105,7 @@ img {
 .header .menus .item {
     display: flex;
     align-items: center;
-    margin-left: 20px;
+    margin-left: 15px;
     height: 100%;
     line-height: 1;
 }
@@ -101,7 +125,7 @@ img {
     z-index: 9;
     top: 45px;
     left: 0;
-    width: 200px;
+    width: 250px;
     padding: 0 10px;
     background: #2b2b2b;
 }
@@ -127,7 +151,7 @@ img {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100px;
+    padding: 0 10px;
     height: 100%;
     line-height: 1;
     cursor: pointer;
@@ -144,6 +168,7 @@ img {
     display: flex;
     flex: 1;
     height: 100%;
+    overflow: hidden;
 }
 
 .main .part-left {
@@ -172,12 +197,10 @@ img {
 
 .main .part-left .code {
     flex: 1;
-    overflow: auto;
 }
 
 .main .part-left .code .codeMirrorWrap {
     height: 100%;
-    overflow: hidden;
 }
 
 .main .part-right {
@@ -189,6 +212,7 @@ img {
     height: 70%;
     align-items: center;
     justify-content: center;
+    flex-direction: column;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
@@ -199,10 +223,15 @@ img {
     font-size: 20px;
     width: 90%;
     height: 65%;
+    margin-bottom: 10px;
     background-color: rgb(0 0 0 / 20%);
     border: 1px dashed rgba(255, 255, 255, 0.1);
 }
 
+.part-right .video-wrap .artplayer-danmuku {
+    width: 300px;
+}
+
 .part-right .console {
     position: relative;
     z-index: 8;
@@ -237,3 +266,14 @@ img {
     background-position: center center;
     background-size: contain;
 }
+
+.fullscreenWeb {
+    position: fixed;
+    z-index: 9999;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+}

docs/assets/example/ads.js

@@ -0,0 +1,45 @@
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    plugins: [
+        artplayerPluginAds({
+            // html广告，假如是视频广告则忽略该值
+            html: '<img src="/assets/sample/poster.jpg">',
+
+            // 视频广告的地址
+            video: '/assets/sample/test1.mp4',
+
+            // 广告跳转网址，为空则不跳转
+            url: 'http://artplayer.org',
+
+            // 必须观看的时长，期间不能被跳过，单位为秒
+            // 当该值大于或等于totalDuration时，不能提前关闭广告
+            // 当该值等于或小于0时，则随时都可以关闭广告
+            playDuration: 5,
+
+            // 广告总时长，单位为秒
+            totalDuration: 10,
+
+            // 多语言支持
+            i18n: {
+                close: '关闭广告',
+                countdown: '%s秒',
+                detail: '查看详情',
+                canBeClosed: '%s秒后可关闭广告',
+            },
+        }),
+    ],
+});
+
+// 广告被点击
+art.on('artplayerPluginAds:click', (ads) => {
+    console.info('广告被点击', ads);
+});
+
+// 广告被跳过
+art.on('artplayerPluginAds:skip', (ads) => {
+    console.info('广告被跳过', ads);
+});

docs/assets/example/control.js

@@ -0,0 +1,61 @@
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    pip: true,
+    screenshot: true,
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    subtitleOffset: true,
+    miniProgressBar: true,
+    airplay: true,
+    theme: '#23ade5',
+    thumbnails: {
+        url: '/assets/sample/thumbnails.png',
+        number: 60,
+        column: 10,
+    },
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+        type: 'srt',
+        style: {
+            color: '#fe9200',
+            fontSize: '20px',
+        },
+        encoding: 'utf-8',
+    },
+    highlight: [
+        {
+            time: 15,
+            text: 'One more chance',
+        },
+        {
+            time: 30,
+            text: '谁でもいいはずなのに',
+        },
+        {
+            time: 45,
+            text: '夏の想い出がまわる',
+        },
+        {
+            time: 60,
+            text: 'こんなとこにあるはずもないのに',
+        },
+        {
+            time: 75,
+            text: '终わり',
+        },
+    ],
+    icons: {
+        loading: '<img src="/assets/img/ploading.gif">',
+        state: '<img width="150" heigth="150" src="/assets/img/state.svg">',
+        indicator: '<img width="16" heigth="16" src="/assets/img/indicator.svg">',
+    },
+    plugins: [
+        artplayerPluginControl()
+    ],
+});

docs/assets/example/danmuku.js

@@ -1,45 +1,82 @@
 var art = new Artplayer({
     container: '.artplayer-app',
-    url: 'https://artplayer.org/assets/sample/video.mp4',
+    url: '/assets/sample/video.mp4',
     autoSize: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    autoOrientation: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    setting: true,
     plugins: [
         artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-            speed: 5,
-            maxlength: 50,
-            margin: [10, 100],
-            opacity: 1,
-            fontSize: 25,
-            synchronousPlayback: false,
+            danmuku: 'https://d.artplayer.org?id=BV1ks411W7r5',
+            speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
+            opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
+            fontSize: 25, // 字体大小，支持数字和百分比
+            color: '#FFFFFF', // 默认字体颜色
+            mode: 0, // 默认模式，0-滚动，1-静止
+            margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
+            antiOverlap: true, // 是否防重叠
+            useWorker: true, // 是否使用 web worker
+            synchronousPlayback: false, // 是否同步到播放速度
+            filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
+            lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
+            maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
+            minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
+            maxWidth: 600, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
+            theme: 'light', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
+            heatmap: true, // 是否开启弹幕热度图, 默认为 false
+            beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
+
+            // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
+            // mount: document.querySelector('.artplayer-danmuku'),
         }),
     ],
-    controls: [
-        {
-            position: 'right',
-            html: '隐藏弹幕',
-            click: function (_, event) {
-                if (art.plugins.artplayerPluginDanmuku.isHide) {
-                    art.plugins.artplayerPluginDanmuku.show();
-                    event.target.innerText = '隐藏弹幕';
-                } else {
-                    art.plugins.artplayerPluginDanmuku.hide();
-                    event.target.innerText = '显示弹幕';
-                }
-            },
-        },
-        {
-            position: 'right',
-            html: '发送弹幕',
-            click: function () {
-                var text = prompt('请输入弹幕文本', '弹幕测试文本');
-                if (!text || !text.trim()) return;
-                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
-                art.plugins.artplayerPluginDanmuku.emit({
-                    text: text,
-                    color: color,
-                    border: true,
-                });
-            },
-        },
-    ],
+});
+
+// 监听手动输入的弹幕，保存到数据库
+art.on('artplayerPluginDanmuku:emit', (danmu) => {
+    console.info('新增弹幕', danmu);
+});
+
+// 监听加载到的弹幕数组
+art.on('artplayerPluginDanmuku:loaded', (danmus) => {
+    console.info('加载弹幕', danmus.length);
+});
+
+// 监听加载到弹幕的错误
+art.on('artplayerPluginDanmuku:error', (error) => {
+    console.info('加载错误', error);
+});
+
+// 监听弹幕配置变化
+art.on('artplayerPluginDanmuku:config', (option) => {
+    console.info('配置变化', option);
+});
+
+// 监听弹幕停止
+art.on('artplayerPluginDanmuku:stop', () => {
+    console.info('弹幕停止');
+});
+
+// 监听弹幕开始
+art.on('artplayerPluginDanmuku:start', () => {
+    console.info('弹幕开始');
+});
+
+// 监听弹幕隐藏
+art.on('artplayerPluginDanmuku:hide', () => {
+    console.info('弹幕隐藏');
+});
+
+// 监听弹幕显示
+art.on('artplayerPluginDanmuku:show', () => {
+    console.info('弹幕显示');
+});
+
+// 监听弹幕销毁
+art.on('artplayerPluginDanmuku:destroy', () => {
+    console.info('弹幕销毁');
 });

docs/assets/example/dash.quality.js

@@ -0,0 +1,34 @@
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
+    setting: true,
+    plugins: [
+        artplayerPluginDashQuality({
+            // Show quality in control
+            control: true,
+
+            // Show quality in setting
+            setting: true,
+
+            // Get the resolution text from level
+			getResolution: (level) => level.height + 'P',
+
+            // I18n
+            title: 'Quality',
+            auto: 'Auto',
+        }),
+    ],
+    customType: {
+        mpd: function playMpd(video, url, art) {
+            if (dashjs.supportsMediaSource()) {
+                if (art.dash) art.dash.destroy();
+                const dash = dashjs.MediaPlayer().create();
+                dash.initialize(video, url, art.option.autoplay);
+                art.dash = dash; 
+                art.on('destroy', () => dash.destroy());
+            } else {
+                art.notice.show = 'Unsupported playback format: mpd';
+            }
+        }
+    },
+});

docs/assets/example/hls.quality.js

@@ -0,0 +1,37 @@
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+    setting: true,
+    plugins: [
+        artplayerPluginHlsQuality({
+            // Show quality in control
+            control: true,
+
+            // Show quality in setting
+            setting: true,
+
+            // Get the resolution text from level
+			getResolution: (level) => level.height + 'P',
+
+            // I18n
+            title: 'Quality',
+            auto: 'Auto',
+        }),
+    ],
+    customType: {
+        m3u8: function playM3u8(video, url, art) {
+            if (Hls.isSupported()) {
+				if (art.hls) art.hls.destroy();
+				const hls = new Hls();
+				hls.loadSource(url);
+				hls.attachMedia(video);
+				art.hls = hls;
+				art.on('destroy', () => hls.destroy());
+            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                video.src = url;
+            } else {
+                art.notice.show = 'Unsupported playback format: m3u8';
+            }
+        }
+    },
+});

docs/assets/example/iframe.js

@@ -0,0 +1,43 @@
+const $iframe = document.createElement('iframe');
+$iframe.allowFullscreen = true;
+$iframe.width = '100%';
+$iframe.height = '100%';
+
+const $container = document.querySelector('.artplayer-app');
+$container.innerHTML = '';
+$container.appendChild($iframe);
+
+const iframe = new ArtplayerPluginIframe({
+    iframe: $iframe,
+    url: '/iframe.html',
+});
+
+iframe.message(({ type, data }) => {
+    switch (type) {
+        case 'fullscreenWeb':
+            if (data) {
+                $iframe.classList.add('fullscreenWeb');
+            } else {
+                $iframe.classList.remove('fullscreenWeb');
+            }
+            break;
+        default:
+            break;
+    }
+});
+
+iframe.commit(() => {
+    var art = new Artplayer({
+        container: '.artplayer-app',
+        url: '/assets/sample/video.mp4',
+        fullscreen: true,
+        fullscreenWeb: true,
+    });
+
+    art.on('fullscreenWeb', (state) => {
+        ArtplayerPluginIframe.postMessage({
+            type: 'fullscreenWeb',
+            data: state,
+        });
+    });
+});

docs/assets/example/index.js

@@ -1,7 +1,6 @@
 var art = new Artplayer({
     container: '.artplayer-app',
-    url: 'https://artplayer.org/assets/sample/video.mp4',
-    title: 'One More Time One More Chance',
+    url: '/assets/sample/video.mp4',
     poster: '/assets/sample/poster.jpg',
     volume: 0.5,
     isLive: false,
@@ -22,6 +21,9 @@ var art = new Artplayer({
     miniProgressBar: true,
     mutex: true,
     backdrop: true,
+    playsInline: true,
+    autoPlayback: true,
+    airplay: true,
     theme: '#23ade5',
     lang: navigator.language.toLowerCase(),
     moreVideoAttr: {
@@ -30,23 +32,61 @@ var art = new Artplayer({
     settings: [
         {
             width: 200,
-            html: 'Custom Setting',
-            tooltip: 'Click This',
-            icon: '<img width="22" heigth="22" src="/assets/img/indicator.svg">',
+            html: 'Subtitle',
+            tooltip: 'Bilingual',
+            icon: '<img width="22" heigth="22" src="/assets/img/subtitle.svg">',
             selector: [
                 {
-                    default: true,
-                    html: 'Setting 01',
+                    html: 'Display',
+                    tooltip: 'Show',
+                    switch: true,
+                    onSwitch: function (item) {
+                        item.tooltip = item.switch ? 'Hide' : 'Show';
+                        art.subtitle.show = !item.switch;
+                        return !item.switch;
+                    },
                 },
                 {
-                    html: 'Setting 02',
+                    default: true,
+                    html: 'Bilingual',
+                    url: '/assets/sample/subtitle.srt',
+                },
+                {
+                    html: 'Chinese',
+                    url: '/assets/sample/subtitle.cn.srt',
+                },
+                {
+                    html: 'Japanese',
+                    url: '/assets/sample/subtitle.jp.srt',
                 },
             ],
             onSelect: function (item) {
-                console.info('You clicked on the custom setting', item.html);
+                art.subtitle.switch(item.url, {
+                    name: item.html,
+                });
                 return item.html;
             },
         },
+        {
+            html: 'Switcher',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            tooltip: 'OFF',
+            switch: false,
+            onSwitch: function (item) {
+                item.tooltip = item.switch ? 'OFF' : 'ON';
+                console.info('You clicked on the custom switch', item.switch);
+                return !item.switch;
+            },
+        },
+        {
+            html: 'Slider',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            tooltip: '5x',
+            range: [5, 1, 10, 0.1],
+            onRange: function (item) {
+                return item.range + 'x';
+            },
+        },
     ],
     contextmenu: [
         {
@@ -61,6 +101,7 @@ var art = new Artplayer({
         {
             html: '<img width="100" src="/assets/sample/layer.png">',
             click: function () {
+                window.open('https://aimu.app');
                 console.info('You clicked on the custom layer');
             },
             style: {
@@ -84,37 +125,37 @@ var art = new Artplayer({
     ],
     thumbnails: {
         url: '/assets/sample/thumbnails.png',
-        number: 100,
+        number: 60,
         column: 10,
     },
     subtitle: {
         url: '/assets/sample/subtitle.srt',
         type: 'srt',
         style: {
-            color: '#03A9F4',
+            color: '#fe9200',
+            fontSize: '20px',
         },
         encoding: 'utf-8',
-        bilingual: true,
     },
     highlight: [
         {
-            time: 60,
+            time: 15,
             text: 'One more chance',
         },
         {
-            time: 120,
+            time: 30,
             text: '谁でもいいはずなのに',
         },
         {
-            time: 180,
+            time: 45,
             text: '夏の想い出がまわる',
         },
         {
-            time: 240,
+            time: 60,
             text: 'こんなとこにあるはずもないのに',
         },
         {
-            time: 300,
+            time: 75,
             text: '终わり',
         },
     ],
@@ -122,6 +163,11 @@ var art = new Artplayer({
         {
             position: 'right',
             html: 'Control',
+            index: 1,
+            tooltip: 'Control Tooltip',
+            style: {
+                marginRight: '20px',
+            },
             click: function () {
                 console.info('You clicked on the custom control');
             },

docs/assets/example/mobile.js

@@ -0,0 +1,91 @@
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    poster: '/assets/sample/poster.jpg',
+    autoSize: true,
+    loop: true,
+    mutex: true,
+    setting: true,
+    flip: true,
+    lock: true,
+    fastForward: true,
+    playbackRate: true,
+    aspectRatio: true,
+    theme: '#ff0057',
+    fullscreen: true,
+    fullscreenWeb: true,
+    miniProgressBar: true,
+    autoOrientation: true,
+    airplay: true,
+    moreVideoAttr: {
+        'x5-video-player-type': 'h5',
+        'x5-video-player-fullscreen': false,
+        'x5-video-orientation': 'portraint',
+        preload: "metadata"
+    },
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+        style: {
+            color: '#48aff0',
+            fontSize: '16px',
+        },
+    },
+    layers: [
+        {
+            html: `<img width="50" src="/assets/sample/layer.png">`,
+            click: function () {
+                art.notice.show = "你点击了自定义层";
+            },
+            style: {
+                position: 'absolute',
+                top: '10px',
+                right: '10px',
+                opacity: '.9',
+            },
+        },
+    ],
+    icons: {
+        loading: '<img src="/assets/img/ploading.gif">',
+        state: '<img width="150" heigth="150" src="/assets/img/state.svg">',
+        indicator: '<img width="16" heigth="16" src="/assets/img/indicator.svg">',
+    },
+    settings: [
+        {
+            width: 200,
+            html: '切换字幕',
+            tooltip: '双语',
+            icon: '<img width="22" heigth="22" src="/assets/img/subtitle.svg">',
+            selector: [
+                {
+                    html: '开关',
+                    switch: true,
+                    tooltip: '显示',
+                    onSwitch: function (item) {
+                        item.tooltip = item.switch ? '隐藏' : '显示';
+                        art.subtitle.show = !item.switch;
+                        return !item.switch;
+                    },
+                },
+                {
+                    default: true,
+                    html: '双语',
+                    url: '/assets/sample/subtitle.srt'
+                },
+                {
+                    html: '中文',
+                    url: '/assets/sample/subtitle.cn.srt'
+                },
+                {
+                    html: '日文',
+                    url: '/assets/sample/subtitle.jp.srt'
+                },
+            ],
+            onSelect: function (item) {
+                art.subtitle.switch(item.url, {
+                    name: item.html
+                });
+                return item.html;
+            },
+        },
+    ],
+});

docs/assets/example/vtt.thumbnail.js

@@ -0,0 +1,9 @@
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/bbb-video.mp4',
+	plugins: [
+		artplayerPluginVttThumbnail({
+			vtt: '/assets/sample/bbb-thumbnails.vtt',
+		})
+	]
+});

docs/assets/img/danmu-off.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<path fill="#fff" d="M311.296 661.504c0 4.096-4.096 8.704-8.704 12.8 0 4.096 0 4.096-4.096 8.704h-12.8c-4.096 0-8.704-4.096-16.896-8.704-8.704-8.704-16.896-8.704-25.6-8.704s-12.8 4.096-16.896 12.8c-4.096 12.8-8.704 21.504-4.096 29.696 4.096 8.704 12.8 16.896 25.6 21.504 16.896 8.704 34.304 16.896 47.104 16.896 12.8 0 21.504-4.096 34.304-8.704 8.704-4.096 16.896-16.896 25.6-29.696 8.704-12.8 12.8-34.304 16.896-55.296 4.096-21.504 4.096-51.2 4.096-85.504 0-12.8 0-21.504-4.096-29.696 0-8.704-4.096-12.8-8.704-16.896-4.096-4.096-8.704-8.704-12.8-8.704s-12.8-4.096-21.504-4.096H272.896s-4.096-4.096 0-8.704l4.096-38.4c0-4.096 0-8.704 4.096-8.704h47.104c16.896 0 25.6-4.096 34.304-12.8 8.704-8.704 12.8-21.504 12.8-42.496V324.096c0-16.896-4.096-34.304-8.704-42.496-12.8-12.8-25.6-16.896-42.496-16.896H243.2c-8.704 0-16.896 0-21.504 4.096-4.096 8.704-4.096 12.8-4.096 25.6 0 8.704 0 16.896 4.096 21.504 4.096 4.096 12.8 8.704 21.504 8.704H307.2c4.096 0 8.704 0 8.704 4.096v34.304c0 8.704 0 12.8-4.096 12.8 0 0-4.096 4.096-8.704 4.096h-34.304c-8.704 0-12.8 0-21.504 4.096-4.096 0-8.704 4.096-8.704 4.096-4.096 4.096-8.704 12.8-8.704 16.896 0 8.704-4.096 16.896-4.096 25.6l-8.704 72.704v29.696c0 8.704 4.096 12.8 8.704 16.896s8.704 4.096 16.896 8.704h68.096c4.096 0 8.704 0 8.704 4.096s4.096 8.704 4.096 16.896c0 21.504 0 42.496-4.096 55.296 0.512 9.216-3.584 22.016-8.192 26.624zM896 486.4c-93.696 0-175.104 51.2-217.6 123.904h-106.496v-34.304H640c21.504 0 34.304-4.096 42.496-12.8 8.704-8.704 12.8-21.504 12.8-42.496V358.4c0-21.504-4.096-34.304-12.8-42.496-8.704-8.704-21.504-12.8-42.496-12.8 0-4.096 4.096-4.096 4.096-8.704-4.096 0-4.096-4.096-4.096-4.096 4.096-12.8 8.704-21.504 4.096-25.6 0-8.704-4.096-12.8-12.8-21.504-8.704-4.096-16.896-4.096-21.504-4.096-8.704 4.096-12.8 8.704-21.504 21.504-4.096 8.704-8.704 12.8-12.8 21.504-4.096 8.704-8.704 12.8-12.8 21.504h-51.2c-4.096-8.704-8.704-16.896-8.704-21.504-4.096-8.704-8.704-12.8-12.8-21.504-4.096-12.8-12.8-16.896-21.504-16.896s-16.896 0-25.6 8.704C434.176 261.12 430.08 265.216 430.08 273.92c0 8.704 0 16.896 8.704 25.6l4.096 4.096 4.096 4.096c-16.896 0-29.696 4.096-38.4 12.8-8.704 4.096-12.8 21.504-12.8 38.4v157.696c0 21.504 4.096 34.304 12.8 42.496 8.704 8.704 21.504 12.8 42.496 12.8H512v34.304H413.696c-12.8 0-21.504 0-25.6 4.096-4.096 4.096-8.704 8.704-8.704 21.504v16.896c0 4.096 4.096 8.704 4.096 8.704 4.096 0 4.096 4.096 8.704 4.096H512V716.8c0 12.8 4.096 21.504 8.704 25.6 4.096 4.096 12.8 8.704 21.504 8.704 12.8 0 21.504-4.096 25.6-8.704 4.096-4.096 4.096-12.8 4.096-25.6v-55.296h80.896c-8.704 25.6-12.8 51.2-12.8 76.8 0 140.8 115.2 256 256 256s256-115.2 256-256S1036.8 486.4 896 486.4z m-328.704-128h55.296c4.096 0 4.096 0 4.096 4.096V409.6h-59.904V358.4z m0 102.4h59.904v51.2h-55.296V460.8h-4.608zM512 516.096H456.704v-51.2H512v51.2z m0-102.4H452.096v-51.2H512v51.2z m384 499.2c-93.696 0-170.496-76.8-170.496-170.496s76.8-170.496 170.496-170.496 170.496 76.8 170.496 170.496-76.8 170.496-170.496 170.496z"  />
+<path fill="#fff" d="M580.096 879.104H213.504c-72.704 0-128-55.296-128-119.296V230.4c0-64 55.296-119.296 128-119.296h512c72.704 0 128 55.296 128 119.296v140.8c0 25.6 16.896 42.496 42.496 42.496s42.496-16.896 42.496-42.496V230.4c0-115.2-93.696-204.8-213.504-204.8h-512C93.696 25.6 0 119.296 0 230.4v528.896c0 115.2 93.696 204.8 213.504 204.8h367.104c25.6 0 42.496-16.896 42.496-42.496 0-25.6-21.504-42.496-43.008-42.496z m171.52 10.752c-15.36-15.36-15.36-40.96 0-56.32l237.568-237.568c15.36-15.36 40.96-15.36 56.32 0s15.36 40.96 0 56.32l-237.568 237.568c-15.36 15.36-40.448 15.36-56.32 0z"  />
+</svg>

docs/assets/img/danmu-on.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<path fill="#fff" d="M311.466667 661.333333c0 4.266667-4.266667 8.533333-8.533334 12.8 0 4.266667 0 4.266667-4.266666 8.533334h-12.8c-4.266667 0-8.533333-4.266667-17.066667-8.533334-8.533333-8.533333-17.066667-8.533333-25.6-8.533333-8.533333 0-12.8 4.266667-17.066667 12.8-4.266667 12.8-8.533333 21.333333-4.266666 29.866667 4.266667 8.533333 12.8 17.066667 25.6 21.333333 17.066667 8.533333 34.133333 17.066667 46.933333 17.066667 12.8 0 21.333333-4.266667 34.133333-8.533334 8.533333-4.266667 17.066667-17.066667 25.6-29.866666 8.533333-12.8 12.8-34.133333 17.066667-55.466667 4.266667-21.333333 4.266667-51.2 4.266667-85.333333 0-12.8 0-21.333333-4.266667-29.866667 0-8.533333-4.266667-12.8-8.533333-17.066667-4.266667-4.266667-8.533333-8.533333-12.8-8.533333-4.266667 0-12.8-4.266667-21.333334-4.266667H273.066667s-4.266667-4.266667 0-8.533333l4.266666-38.4c0-4.266667 0-8.533333 4.266667-8.533333h46.933333c17.066667 0 25.6-4.266667 34.133334-12.8 8.533333-8.533333 12.8-21.333333 12.8-42.666667V324.266667c0-17.066667-4.266667-34.133333-8.533334-42.666667-12.8-12.8-25.6-17.066667-42.666666-17.066667H243.2c-8.533333 0-17.066667 0-21.333333 4.266667-4.266667 8.533333-4.266667 12.8-4.266667 25.6 0 8.533333 0 17.066667 4.266667 21.333333 4.266667 4.266667 12.8 8.533333 21.333333 8.533334h64c4.266667 0 8.533333 0 8.533333 4.266666v34.133334c0 8.533333 0 12.8-4.266666 12.8 0 0-4.266667 4.266667-8.533334 4.266666h-34.133333c-8.533333 0-12.8 0-21.333333 4.266667-4.266667 0-8.533333 4.266667-8.533334 4.266667-4.266667 4.266667-8.533333 12.8-8.533333 17.066666 0 8.533333-4.266667 17.066667-4.266667 25.6l-8.533333 72.533334v29.866666c0 8.533333 4.266667 12.8 8.533333 17.066667 4.266667 4.266667 8.533333 4.266667 17.066667 8.533333h68.266667c4.266667 0 8.533333 0 8.533333 4.266667s4.266667 8.533333 4.266667 17.066667c0 21.333333 0 42.666667-4.266667 55.466666 0 8.533333-4.266667 21.333333-8.533333 25.6zM896 486.4c-93.866667 0-174.933333 51.2-217.6 123.733333h-106.666667v-34.133333H640c21.333333 0 34.133333-4.266667 42.666667-12.8 8.533333-8.533333 12.8-21.333333 12.8-42.666667V358.4c0-21.333333-4.266667-34.133333-12.8-42.666667-8.533333-8.533333-21.333333-12.8-42.666667-12.8 0-4.266667 4.266667-4.266667 4.266667-8.533333-4.266667 0-4.266667-4.266667-4.266667-4.266667 4.266667-12.8 8.533333-21.333333 4.266667-25.6 0-8.533333-4.266667-12.8-12.8-21.333333-8.533333-4.266667-17.066667-4.266667-21.333334-4.266667-8.533333 4.266667-12.8 8.533333-21.333333 21.333334-4.266667 8.533333-8.533333 12.8-12.8 21.333333-4.266667 8.533333-8.533333 12.8-12.8 21.333333H512c-4.266667-8.533333-8.533333-17.066667-8.533333-21.333333-4.266667-8.533333-8.533333-12.8-12.8-21.333333-4.266667-12.8-12.8-17.066667-21.333334-17.066667s-17.066667 0-25.6 8.533333c-8.533333 8.533333-12.8 12.8-12.8 21.333334s0 17.066667 8.533334 25.6l4.266666 4.266666 4.266667 4.266667c-17.066667 0-29.866667 4.266667-38.4 12.8-8.533333 4.266667-12.8 21.333333-12.8 38.4v157.866667c0 21.333333 4.266667 34.133333 12.8 42.666666 8.533333 8.533333 21.333333 12.8 42.666667 12.8H512v34.133334H413.866667c-12.8 0-21.333333 0-25.6 4.266666-4.266667 4.266667-8.533333 8.533333-8.533334 21.333334v17.066666c0 4.266667 4.266667 8.533333 4.266667 8.533334 4.266667 0 4.266667 4.266667 8.533333 4.266666H512v55.466667c0 12.8 4.266667 21.333333 8.533333 25.6 4.266667 4.266667 12.8 8.533333 21.333334 8.533333 12.8 0 21.333333-4.266667 25.6-8.533333 4.266667-4.266667 4.266667-12.8 4.266666-25.6v-55.466667h81.066667c-8.533333 25.6-12.8 51.2-12.8 76.8 0 140.8 115.2 256 256 256s256-115.2 256-256-115.2-251.733333-256-251.733333z m-328.533333-128h55.466666c4.266667 0 4.266667 0 4.266667 4.266667v46.933333h-59.733333V358.4z m0 102.4h59.733333V512h-55.466667v-51.2zM512 516.266667h-55.466667V465.066667H512v51.2z m0-102.4h-59.733333V366.933333v-4.266666H512v51.2z m384 499.2c-93.866667 0-170.666667-76.8-170.666667-170.666667s76.8-170.666667 170.666667-170.666667 170.666667 76.8 170.666667 170.666667-76.8 170.666667-170.666667 170.666667z"  />
+<path fill="#fff" d="M951.466667 669.866667l-72.533334 72.533333-29.866666-25.6c-17.066667-17.066667-42.666667-12.8-59.733334 4.266667-17.066667 17.066667-12.8 42.666667 4.266667 59.733333l59.733333 51.2c8.533333 8.533333 17.066667 8.533333 29.866667 8.533333 12.8 0 21.333333-4.266667 29.866667-12.8l102.4-102.4c17.066667-17.066667 17.066667-42.666667 0-59.733333-21.333333-12.8-46.933333-12.8-64 4.266667zM580.266667 878.933333H213.333333c-72.533333 0-128-55.466667-128-119.466666V230.4c0-64 55.466667-119.466667 128-119.466667h512c72.533333 0 128 55.466667 128 119.466667v140.8c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667V230.4c0-115.2-93.866667-204.8-213.333334-204.8H213.333333C93.866667 25.6 0 119.466667 0 230.4v529.066667c0 115.2 93.866667 204.8 213.333333 204.8h366.933334c25.6 0 42.666667-17.066667 42.666666-42.666667s-21.333333-42.666667-42.666666-42.666667z"  />
+</svg>

docs/assets/img/pause.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <polygon id="dcacc03d-ebe2-486b-86c6-02f40070ed49" points="0 0 80 0 80 80 0 80"></polygon>
+        <path d="M52.5463795,8.01403034 C54.5470371,7.84763808 56.3253994,9.18911826 56.7676959,11.0911381 C56.8718466,11.5365362 56.8612939,11.8985083 56.8069245,12.2287648 C56.7500316,12.556723 56.6424397,12.8481393 56.4951605,13.110368 C56.4219797,13.2418271 56.3354933,13.3636336 56.2494657,13.4856699 L56.2494657,13.4856699 L55.9916124,13.8522385 L55.4708587,14.5816985 C54.7716265,15.5508645 54.0556475,16.50762 53.3171867,17.4480581 C53.3121398,17.4544931 53.3068634,17.4606984 53.3020459,17.4671334 C54.2015503,17.5075824 55.1010548,17.5517085 56.0005592,17.6022697 C57.096436,17.6624835 58.1918539,17.7339586 59.2877307,17.8093407 L59.2877307,17.8093407 L60.9309723,17.9320665 L61.7527078,17.9980259 L62.1635756,18.0324994 L62.3688948,18.0495064 L62.471669,18.0580098 L62.5872901,18.0699607 C63.8533868,18.1864812 65.1027368,18.520185 66.2644533,19.0451021 C67.4263993,19.5697893 68.5000236,20.2872985 69.4304979,21.1587894 C70.3609723,22.0295909 71.1487556,23.0543742 71.7511781,24.1807396 C72.3552065,25.3059558 72.7702036,26.5343627 72.9750639,27.7944854 C73.0051162,27.9514549 73.0214041,28.1100331 73.0429684,28.2681518 L73.0429684,28.2681518 L73.0581092,28.3867407 L73.0714148,28.4988946 L73.0927497,28.7045867 L73.178089,29.5271253 L73.3366092,31.1733515 C73.4377777,32.2714485 73.5267875,33.3709245 73.6061623,34.4713197 C73.9220556,38.8708323 74.0704819,43.2995325 73.9677076,47.7257047 C73.8695214,52.1475102 73.5717513,56.5518491 73.123949,60.9389512 C73.1124787,61.0662734 73.0904556,61.2356534 73.070956,61.3930826 C73.0530623,61.5521205 73.0269099,61.7104689 72.9989223,61.8683577 L72.9583172,62.1053058 L72.9083065,62.3406451 C72.8745837,62.4976146 72.8410903,62.6543543 72.7979618,62.8092554 C72.638524,63.4309282 72.4281579,64.0401904 72.1691575,64.6280791 C71.6523038,65.8043162 70.9393071,66.8927606 70.0700844,67.8368758 C69.2020087,68.7819103 68.1783951,69.5837648 67.0510896,70.1990025 C65.9240135,70.8153893 64.6934749,71.2433208 63.4282958,71.4609637 C63.2697757,71.485325 63.1117143,71.5129038 62.9525059,71.5331283 L62.9525059,71.5331283 L62.4762572,71.5859877 L61.6545217,71.6574628 L60.0108212,71.7907605 C58.9151739,71.8769444 57.8190677,71.9509475 56.723191,72.0210437 C54.5309786,72.1573291 52.3383075,72.2648865 50.1451775,72.3455546 C41.3733459,72.6696058 32.5989908,72.5652659 23.8315179,72.0442559 C22.7356412,71.9799053 21.6402232,71.9031442 20.5445759,71.8238551 L20.5445759,71.8238551 L18.9015636,71.6951539 L18.0802869,71.6264367 L17.6696486,71.5910438 L17.4643294,71.5731176 C17.3957368,71.5671422 17.3305852,71.5620861 17.2461635,71.5522036 C15.9706611,71.433155 14.7132819,71.091867 13.5460596,70.5609746 C12.3779196,70.0296225 11.3006248,69.3040695 10.368774,68.4252242 C9.4371526,67.5466086 8.64822227,66.5163096 8.04901145,65.3832794 C7.4486536,64.2513983 7.03686821,63.0188545 6.83407251,61.7557442 C6.80952597,61.5978554 6.78268537,61.4401964 6.7670857,61.2811585 L6.7670857,61.2811585 L6.7407039,61.0428314 L6.72762771,60.9240127 L6.71868084,60.8210517 L6.6475647,59.9978237 L6.51565574,58.3504483 C6.43283985,57.2518916 6.35942964,56.1524157 6.29565452,55.0522503 C6.03986583,50.6529675 5.93755035,46.2348392 6.03825998,41.8194687 C6.13667554,37.4068562 6.41012856,33.0075734 6.82604327,28.6223099 C6.94441723,27.3608083 7.26696333,26.1147049 7.78312886,24.9545555 C8.29814735,23.7937167 9.0047206,22.7195213 9.86476706,21.7871271 C10.7243547,20.8542732 11.7390214,20.0655187 12.8543978,19.4603933 C13.9695447,18.8548081 15.1865483,18.43561 16.4368159,18.2241723 C16.5935008,18.2007303 16.7494975,18.1726918 16.9068707,18.1540761 L16.9068707,18.1540761 L17.3762372,18.1030552 L18.1975139,18.0336485 L19.8398379,17.9037982 C20.9350264,17.8199126 22.0302149,17.7482077 23.1254035,17.6801799 C24.2455974,17.6123819 25.3662501,17.552398 26.4866734,17.4993087 C26.4731384,17.4823018 26.459374,17.465065 26.4458389,17.4480581 C25.7073781,16.50762 24.9911698,15.5508645 24.2919376,14.5816985 L24.2919376,14.5816985 L23.7714133,13.8522385 L23.51356,13.4856699 C23.4275324,13.3636336 23.3408166,13.2418271 23.2678652,13.110368 C23.1203565,12.8481393 23.0129941,12.556723 22.9558718,12.2287648 C22.9017318,11.8985083 22.8909496,11.5365362 22.9953298,11.0911381 C23.4527671,9.13281148 25.2740285,7.85039596 27.2166461,8.01403034 C27.6717894,8.05195123 28.0122293,8.1735279 28.3093112,8.32682022 C28.6031814,8.48195113 28.8468116,8.67408363 29.0507543,8.89540373 C29.1530698,9.00548922 29.2418502,9.12568695 29.3313189,9.24519521 L29.3313189,9.24519521 L29.6001838,9.60371998 L30.1328666,10.3244467 C30.8380634,11.289246 31.5265136,12.266226 32.1922524,13.2595235 C32.8575324,14.2532806 33.5042304,15.2605973 34.1217938,16.2890578 C34.3094487,16.6025372 34.4950388,16.9178551 34.6778761,17.2350116 C37.4016243,17.1878978 40.125143,17.1791645 42.8488911,17.1968609 C43.5962988,17.2026065 44.3441653,17.2120293 45.0918023,17.2232906 C45.2723456,16.9100411 45.4558711,16.59886 45.6410025,16.2890578 C46.2587952,15.2605973 46.9054933,14.2532806 47.5707733,1Line truncated
+        <filter x="-15.4%" y="-16.3%" width="130.9%" height="132.5%" filterUnits="objectBoundingBox" id="6229a4d6-d7ef-4db2-a990-2e5a9a80e5fb">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+            <feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.800000012">
+        <g transform="translate(-674.000000, -832.000000)">
+            <g transform="translate(514.000000, 759.000000)">
+                <g transform="translate(160.000000, 73.000000)">
+                    <mask id="6571edcb-5f96-450a-80cd-4185b762ee4d" fill="white">
+                        <use xlink:href="#dcacc03d-ebe2-486b-86c6-02f40070ed49"></use>
+                    </mask>
+                    <g mask="url(#6571edcb-5f96-450a-80cd-4185b762ee4d)">
+                        <use fill="black" fill-opacity="1" filter="url(#6229a4d6-d7ef-4db2-a990-2e5a9a80e5fb)" xlink:href="#271c2bc0-87b1-41ff-8ceb-2ef24f2896fe"></use>
+                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#271c2bc0-87b1-41ff-8ceb-2ef24f2896fe"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

docs/assets/img/subtitle.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 48 48">
+    <path d="M0 0h48v48H0z" fill="none"/>
+    <path fill="#ffffff" d="M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM8 24h8v4H8v-4zm20 12H8v-4h20v4zm12 0h-8v-4h8v4zm0-8H20v-4h20v4z"/>
+</svg>

docs/assets/js/JavascriptSubtitlesOctopus/subtitles-octopus.js

@@ -0,0 +1,589 @@
+var SubtitlesOctopus = function (options) {
+    var supportsWebAssembly = false;
+    try {
+        if (typeof WebAssembly === "object"
+            && typeof WebAssembly.instantiate === "function") {
+            const module = new WebAssembly.Module(Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00));
+            if (module instanceof WebAssembly.Module)
+                supportsWebAssembly = (new WebAssembly.Instance(module) instanceof WebAssembly.Instance);
+        }
+    } catch (e) {
+    }
+    console.log("WebAssembly support detected: " + (supportsWebAssembly ? "yes" : "no"));
+
+    var self = this;
+    self.canvas = options.canvas; // HTML canvas element (optional if video specified)
+    self.lossyRender = options.lossyRender; // Speedup render for heavy subs
+    self.isOurCanvas = false; // (internal) we created canvas and manage it
+    self.video = options.video; // HTML video element (optional if canvas specified)
+    self.canvasParent = null; // (internal) HTML canvas parent element
+    self.fonts = options.fonts || []; // Array with links to fonts used in sub (optional)
+    self.availableFonts = options.availableFonts || []; // Object with all available fonts (optional). Key is font name in lower case, value is link: {"arial": "/font1.ttf"}
+    self.onReadyEvent = options.onReady; // Function called when SubtitlesOctopus is ready (optional)
+    if (supportsWebAssembly) {
+        self.workerUrl = options.workerUrl || 'subtitles-octopus-worker.js'; // Link to WebAssembly worker
+    } else {
+        self.workerUrl = options.legacyWorkerUrl || 'subtitles-octopus-worker-legacy.js'; // Link to legacy worker
+    }
+    self.subUrl = options.subUrl; // Link to sub file (optional if subContent specified)
+    self.subContent = options.subContent || null; // Sub content (optional if subUrl specified)
+    self.onErrorEvent = options.onError; // Function called in case of critical error meaning sub wouldn't be shown and you should use alternative method (for instance it occurs if browser doesn't support web workers).
+    self.debug = options.debug || false; // When debug enabled, some performance info printed in console.
+    self.lastRenderTime = 0; // (internal) Last time we got some frame from worker
+    self.pixelRatio = window.devicePixelRatio || 1; // (internal) Device pixel ratio (for high dpi devices)
+
+    self.timeOffset = options.timeOffset || 0; // Time offset would be applied to currentTime from video (option)
+
+    self.hasAlphaBug = false;
+
+    (function() {
+        if (typeof ImageData.prototype.constructor === 'function') {
+            try {
+                // try actually calling ImageData, as on some browsers it's reported
+                // as existing but calling it errors out as "TypeError: Illegal constructor"
+                new window.ImageData(new Uint8ClampedArray([0, 0, 0, 0]), 1, 1);
+                return;
+            } catch (e) {
+                console.log("detected that ImageData is not constructable despite browser saying so");
+            }
+        }
+
+        var canvas = document.createElement('canvas');
+        var ctx = canvas.getContext('2d');
+
+        window.ImageData = function () {
+            var i = 0;
+            if (arguments[0] instanceof Uint8ClampedArray) {
+                var data = arguments[i++];
+            }
+            var width = arguments[i++];
+            var height = arguments[i];
+
+            var imageData = ctx.createImageData(width, height);
+            if (data) imageData.data.set(data);
+            return imageData;
+        }
+    })();
+
+    self.workerError = function (error) {
+        console.error('Worker error: ', error);
+        if (self.onErrorEvent) {
+            self.onErrorEvent(error);
+        }
+        if (!self.debug) {
+            self.dispose();
+            throw new Error('Worker error: ' + error);
+        }
+    };
+
+    // Not tested for repeated usage yet
+    self.init = function () {
+        if (!window.Worker) {
+            self.workerError('worker not supported');
+            return;
+        }
+        // Worker
+        if (!self.worker) {
+            self.worker = new Worker(self.workerUrl);
+            self.worker.onmessage = self.onWorkerMessage;
+            self.worker.onerror = self.workerError;
+        }
+        self.workerActive = false;
+        self.createCanvas();
+        self.setVideo(options.video);
+        self.setSubUrl(options.subUrl);
+        self.worker.postMessage({
+            target: 'worker-init',
+            width: self.canvas.width,
+            height: self.canvas.height,
+            URL: document.URL,
+            currentScript: self.workerUrl,
+            preMain: true,
+            fastRender: self.lossyRender,
+            subUrl: self.subUrl,
+            subContent: self.subContent,
+            fonts: self.fonts,
+            availableFonts: self.availableFonts,
+            debug: self.debug
+        });
+    };
+
+    self.createCanvas = function () {
+        if (!self.canvas) {
+            if (self.video) {
+                self.isOurCanvas = true;
+                self.canvas = document.createElement('canvas');
+                self.canvas.className = 'libassjs-canvas';
+                self.canvas.style.display = 'none';
+
+                self.canvasParent = document.createElement('div');
+                self.canvasParent.className = 'libassjs-canvas-parent';
+                self.canvasParent.appendChild(self.canvas);
+
+                if (self.video.nextSibling) {
+                    self.video.parentNode.insertBefore(self.canvasParent, self.video.nextSibling);
+                }
+                else {
+                    self.video.parentNode.appendChild(self.canvasParent);
+                }
+            }
+            else {
+                if (!self.canvas) {
+                    self.workerError('Don\'t know where to render: you should give video or canvas in options.');
+                }
+            }
+        }
+        self.ctx = self.canvas.getContext('2d');
+        self.bufferCanvas = document.createElement('canvas');
+        self.bufferCanvasCtx = self.bufferCanvas.getContext('2d');
+
+        // test for alpha bug, where e.g. WebKit can render a transparent pixel
+        // (with alpha == 0) as non-black which then leads to visual artifacts
+        self.bufferCanvas.width = 1;
+        self.bufferCanvas.height = 1;
+        var testBuf = new Uint8ClampedArray([0, 255, 0, 0]);
+        var testImage = new ImageData(testBuf, 1, 1);
+        self.bufferCanvasCtx.clearRect(0, 0, 1, 1);
+        self.ctx.clearRect(0, 0, 1, 1);
+        var prePut = self.ctx.getImageData(0, 0, 1, 1).data;
+        self.bufferCanvasCtx.putImageData(testImage, 0, 0);
+        self.ctx.drawImage(self.bufferCanvas, 0, 0);
+        var postPut = self.ctx.getImageData(0, 0, 1, 1).data;
+        self.hasAlphaBug = prePut[1] != postPut[1];
+        if (self.hasAlphaBug) {
+            console.log("Detected a browser having issue with transparent pixels, applying workaround");
+        }
+    };
+
+    self.setVideo = function (video) {
+        self.video = video;
+        if (self.video) {
+            var timeupdate = function () {
+                self.setCurrentTime(video.currentTime + self.timeOffset);
+            }
+            self.video.addEventListener("timeupdate", timeupdate, false);
+            self.video.addEventListener("playing", function () {
+                self.setIsPaused(false, video.currentTime + self.timeOffset);
+            }, false);
+            self.video.addEventListener("pause", function () {
+                self.setIsPaused(true, video.currentTime + self.timeOffset);
+            }, false);
+            self.video.addEventListener("seeking", function () {
+                self.video.removeEventListener("timeupdate", timeupdate);
+            }, false);
+            self.video.addEventListener("seeked", function () {
+                self.video.addEventListener("timeupdate", timeupdate, false);
+                self.setCurrentTime(video.currentTime + self.timeOffset);
+            }, false);
+            self.video.addEventListener("ratechange", function () {
+                self.setRate(video.playbackRate);
+            }, false);
+            self.video.addEventListener("timeupdate", function () {
+                self.setCurrentTime(video.currentTime + self.timeOffset);
+            }, false);
+            self.video.addEventListener("waiting", function () {
+                self.setIsPaused(true, video.currentTime + self.timeOffset);
+            }, false);
+
+            document.addEventListener("fullscreenchange", self.resizeWithTimeout, false);
+            document.addEventListener("mozfullscreenchange", self.resizeWithTimeout, false);
+            document.addEventListener("webkitfullscreenchange", self.resizeWithTimeout, false);
+            document.addEventListener("msfullscreenchange", self.resizeWithTimeout, false);
+            window.addEventListener("resize", self.resizeWithTimeout, false);
+
+            // Support Element Resize Observer
+            if (typeof ResizeObserver !== "undefined") {
+                self.ro = new ResizeObserver(self.resizeWithTimeout);
+                self.ro.observe(self.video);
+            }
+
+            if (self.video.videoWidth > 0) {
+                self.resize();
+            }
+            else {
+                self.video.addEventListener("loadedmetadata", function (e) {
+                    e.target.removeEventListener(e.type, arguments.callee);
+                    self.resize();
+                }, false);
+            }
+        }
+    };
+
+    self.getVideoPosition = function () {
+        var videoRatio = self.video.videoWidth / self.video.videoHeight;
+        var width = self.video.offsetWidth, height = self.video.offsetHeight;
+        var elementRatio = width / height;
+        var realWidth = width, realHeight = height;
+        if (elementRatio > videoRatio) realWidth = Math.floor(height * videoRatio);
+        else realHeight = Math.floor(width / videoRatio);
+
+        var x = (width - realWidth) / 2;
+        var y = (height - realHeight) / 2;
+
+        return {
+            width: realWidth,
+            height: realHeight,
+            x: x,
+            y: y
+        };
+    };
+
+    self.setSubUrl = function (subUrl) {
+        self.subUrl = subUrl;
+    };
+
+    self.renderFrameData = null;
+    function renderFrames() {
+        var data = self.renderFramesData;
+        var beforeDrawTime = performance.now();
+        self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
+        for (var i = 0; i < data.canvases.length; i++) {
+            var image = data.canvases[i];
+            self.bufferCanvas.width = image.w;
+            self.bufferCanvas.height = image.h;
+            var imageBuffer = new Uint8ClampedArray(image.buffer);
+            if (self.hasAlphaBug) {
+                for (var j = 3; j < imageBuffer.length; j = j + 4) {
+                    imageBuffer[j] = (imageBuffer[j] >= 1) ? imageBuffer[j] : 1;
+                }
+            }
+            var imageData = new ImageData(imageBuffer, image.w, image.h);
+            self.bufferCanvasCtx.putImageData(imageData, 0, 0);
+            self.ctx.drawImage(self.bufferCanvas, image.x, image.y);
+        }
+        if (self.debug) {
+            var drawTime = Math.round(performance.now() - beforeDrawTime);
+            console.log(Math.round(data.spentTime) + ' ms (+ ' + drawTime + ' ms draw)');
+            self.renderStart = performance.now();
+        }
+    }
+
+    /**
+     * Lossy Render Mode
+     *
+     */
+    function renderFastFrames() {
+        var data = self.renderFramesData;
+        var beforeDrawTime = performance.now();
+        self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
+        for (var i = 0; i < data.bitmaps.length; i++) {
+            var image = data.bitmaps[i];
+            self.ctx.drawImage(image.bitmap, image.x, image.y);
+        }
+        if (self.debug) {
+            var drawTime = Math.round(performance.now() - beforeDrawTime);
+            console.log(data.bitmaps.length + ' bitmaps, libass: ' + Math.round(data.libassTime) + 'ms, decode: ' + Math.round(data.decodeTime) + 'ms, draw: ' + drawTime + 'ms');
+            self.renderStart = performance.now();
+        }
+    }
+
+    self.workerActive = false;
+    self.frameId = 0;
+    self.onWorkerMessage = function (event) {
+        //dump('\nclient got ' + JSON.stringify(event.data).substr(0, 150) + '\n');
+        if (!self.workerActive) {
+            self.workerActive = true;
+            if (self.onReadyEvent) {
+                self.onReadyEvent();
+            }
+        }
+        var data = event.data;
+        switch (data.target) {
+            case 'stdout': {
+                console.log(data.content);
+                break;
+            }
+            case 'console-log': {
+                console.log.apply(console, JSON.parse(data.content));
+                break;
+            }
+            case 'console-debug': {
+                console.debug.apply(console, JSON.parse(data.content));
+                break;
+            }
+            case 'console-info': {
+                console.info.apply(console, JSON.parse(data.content));
+                break;
+            }
+            case 'console-warn': {
+                console.warn.apply(console, JSON.parse(data.content));
+                break;
+            }
+            case 'console-error': {
+                console.error.apply(console, JSON.parse(data.content));
+                break;
+            }
+            case 'stderr': {
+                console.error(data.content);
+                break;
+            }
+            case 'window': {
+                window[data.method]();
+                break;
+            }
+            case 'canvas': {
+                switch (data.op) {
+                    case 'getContext': {
+                        self.ctx = self.canvas.getContext(data.type, data.attributes);
+                        break;
+                    }
+                    case 'resize': {
+                        self.resize(data.width, data.height);
+                        break;
+                    }
+                    case 'renderCanvas': {
+                        if (self.lastRenderTime < data.time) {
+                            self.lastRenderTime = data.time;
+                            self.renderFramesData = data;
+                            window.requestAnimationFrame(renderFrames);
+                        }
+                        break;
+                    }
+                    case 'renderFastCanvas': {
+                        if (self.lastRenderTime < data.time) {
+                            self.lastRenderTime = data.time;
+                            self.renderFramesData = data;
+                            window.requestAnimationFrame(renderFastFrames);
+                        }
+                        break;
+                    }
+                    case 'setObjectProperty': {
+                        self.canvas[data.object][data.property] = data.value;
+                        break;
+                    }
+                    default:
+                        throw 'eh?';
+                }
+                break;
+            }
+            case 'tick': {
+                self.frameId = data.id;
+                self.worker.postMessage({
+                    target: 'tock',
+                    id: self.frameId
+                });
+                break;
+            }
+            case 'custom': {
+                if (self['onCustomMessage']) {
+                    self['onCustomMessage'](event);
+                } else {
+                    throw 'Custom message received but client onCustomMessage not implemented.';
+                }
+                break;
+            }
+            case 'setimmediate': {
+                self.worker.postMessage({
+                    target: 'setimmediate'
+                });
+                break;
+            }
+            case 'get-events': {
+                console.log(data.target);
+                console.log(data.events);
+                break;
+            }
+            case 'get-styles': {
+                console.log(data.target);
+                console.log(data.styles);
+                break;
+            }
+            default:
+                throw 'what? ' + data.target;
+        }
+    };
+
+    self.resize = function (width, height, top, left) {
+        var videoSize = null;
+        top = top || 0;
+        left = left || 0;
+        if ((!width || !height) && self.video) {
+            videoSize = self.getVideoPosition();
+            width = videoSize.width * self.pixelRatio;
+            height = videoSize.height * self.pixelRatio;
+            var offset = self.canvasParent.getBoundingClientRect().top - self.video.getBoundingClientRect().top;
+            top = videoSize.y - offset;
+            left = videoSize.x;
+        }
+        if (!width || !height) {
+            if (!self.video) {
+                console.error('width or height is 0. You should specify width & height for resize.');
+            }
+            return;
+        }
+
+
+        if (
+          self.canvas.width != width ||
+          self.canvas.height != height ||
+          self.canvas.style.top != top ||
+          self.canvas.style.left != left
+        ) {
+            self.canvas.width = width;
+            self.canvas.height = height;
+
+            if (videoSize != null) {
+                self.canvasParent.style.position = 'relative';
+                self.canvas.style.display = 'block';
+                self.canvas.style.position = 'absolute';
+                self.canvas.style.width = videoSize.width + 'px';
+                self.canvas.style.height = videoSize.height + 'px';
+                self.canvas.style.top = top + 'px';
+                self.canvas.style.left = left + 'px';
+                self.canvas.style.pointerEvents = 'none';
+            }
+
+            self.worker.postMessage({
+                target: 'canvas',
+                width: self.canvas.width,
+                height: self.canvas.height
+            });
+        }
+    };
+
+    self.resizeWithTimeout = function () {
+        self.resize();
+        setTimeout(self.resize, 100);
+    };
+
+    self.runBenchmark = function () {
+        self.worker.postMessage({
+            target: 'runBenchmark'
+        });
+    };
+
+    self.customMessage = function (data, options) {
+        options = options || {};
+        self.worker.postMessage({
+            target: 'custom',
+            userData: data,
+            preMain: options.preMain
+        });
+    };
+
+    self.setCurrentTime = function (currentTime) {
+        self.worker.postMessage({
+            target: 'video',
+            currentTime: currentTime
+        });
+    };
+
+    self.setTrackByUrl = function (url) {
+        self.worker.postMessage({
+            target: 'set-track-by-url',
+            url: url
+        });
+    };
+
+    self.setTrack = function (content) {
+        self.worker.postMessage({
+            target: 'set-track',
+            content: content
+        });
+    };
+
+    self.freeTrack = function (content) {
+        self.worker.postMessage({
+            target: 'free-track'
+        });
+    };
+
+
+    self.render = self.setCurrentTime;
+
+    self.setIsPaused = function (isPaused, currentTime) {
+        self.worker.postMessage({
+            target: 'video',
+            isPaused: isPaused,
+            currentTime: currentTime
+        });
+    };
+
+    self.setRate = function (rate) {
+        self.worker.postMessage({
+            target: 'video',
+            rate: rate
+        });
+    };
+
+    self.dispose = function () {
+        self.worker.postMessage({
+            target: 'destroy'
+        });
+
+        self.worker.terminate();
+        self.workerActive = false;
+        // Remove the canvas element to remove residual subtitles rendered on player
+        if (self.video) {
+            self.video.parentNode.removeChild(self.canvasParent);
+        }
+    };
+
+    self.createEvent = function (event) {
+        self.worker.postMessage({
+            target: 'create-event',
+            event: event
+        });
+    };
+
+    self.getEvents = function () {
+        self.worker.postMessage({
+            target: 'get-events'
+        });
+    };
+
+    self.setEvent = function (event, index) {
+        self.worker.postMessage({
+            target: 'set-event',
+            event: event,
+            index: index
+        });
+    };
+
+    self.removeEvent = function (index) {
+        self.worker.postMessage({
+            target: 'remove-event',
+            index: index
+        });
+    };
+
+    self.createStyle = function (style) {
+        self.worker.postMessage({
+            target: 'create-style',
+            style: style
+        });
+    };
+
+    self.getStyles = function () {
+        self.worker.postMessage({
+            target: 'get-styles'
+        });
+    };
+
+    self.setStyle = function (style, index) {
+        self.worker.postMessage({
+            target: 'set-style',
+            style: style,
+            index: index
+        });
+    };
+
+    self.removeStyle = function (index) {
+        self.worker.postMessage({
+            target: 'remove-style',
+            index: index
+        });
+    };
+
+    self.init();
+};
+
+if (typeof SubtitlesOctopusOnLoad == 'function') {
+    SubtitlesOctopusOnLoad();
+}
+
+if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+        exports = module.exports = SubtitlesOctopus
+    }
+}

docs/assets/js/JavascriptSubtitlesOctopus/test.ass

@@ -0,0 +1,56 @@
+[Script Info]
+Title:
+ScriptType: v4.00+
+WrapStyle: 0
+PlayResX: 640
+PlayResY: 480
+ScaledBorderAndShadow: yes
+
+[V4+ Styles]
+Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
+Style: Default,Arial,20,&H00FFFFFF,&H000000FF,&H00000000,&H00000000,0,0,0,0,100,100,0,0,1,2,2,2,10,10,10,0
+Style: Alt,Times New Roman,40,&H00FFFFFF,&H000000FF,&H00000000,&H00000000,0,0,0,0,100,100,0,0,1,2,2,8,10,10,10,0
+
+[Events]
+Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
+Comment: 0,0:00:00.00,0:00:05.00,Default,,0000,0000,0000,,This line is a comment and should not display on rendered output. This file is intended to be rendered on a 640x480 video, preferably a single solid colour, or maybe a checkerboard pattern.
+Dialogue: 0,0:00:00.00,0:00:05.00,Default,,0000,0000,0000,,This is a test of the ASS format and some basic features in it.
+Dialogue: 0,0:00:05.00,0:00:07.00,Default,,0000,0000,0000,,This and the previous line should both show at the bottom of the video in 20 pixel high white Arial with a 2 pixel black outline and 2 pixel offset shadow. This line is long so it should automatically be broken into several lines that are approximately even length, with upper lines being longer.
+Dialogue: 0,0:00:07.00,0:00:09.00,Default,,0000,0000,0000,,Now going to test conflict resolution. {By the way, this is a common abuse, "inline-comments" in override tag groups. They should not be rendered and not generate errors, just be ignored.}
+Dialogue: 0,0:00:07.50,0:00:09.00,Default,,0000,0000,0000,,This line should be above the previous.
+Dialogue: 0,0:00:09.00,0:00:11.00,Default,,0000,0000,0000,,{\an1}This line should be lower-left aligned using the \an1 override.
+Dialogue: 0,0:00:11.00,0:00:13.00,Default,,0000,0000,0000,,{\an9}Upper right
+Dialogue: 0,0:00:12.00,0:00:14.00,Alt,,0000,0000,0000,,This one should be below the "Upper right" line and be centered on screen. It should also be in 40 pixel high Times New Roman.
+Dialogue: 0,0:00:14.00,0:00:16.00,Alt,,0000,0000,0000,,{\fs10}This should also be a toptitle in Times New Roman, but much smaller. Using an override tag to change size.
+Dialogue: 0,0:00:16.00,0:00:18.00,Alt,,0000,0000,0000,,{\a5}Top-left using the legacy \a5 tag
+Dialogue: 0,0:00:18.00,0:00:20.00,Default,,0000,0000,0000,,{\an5}This line is centered on screen.\NAt the bottom of the screen should be two lines in different layers, they are rendered on top of each other because conflict resolution only considers lines in the same layer.
+Dialogue: 0,0:00:18.00,0:00:20.00,Default,,0000,0000,0000,,This is in layer 0
+Dialogue: 1,0:00:18.00,0:00:20.00,Default,,0000,0000,0000,,And this line is in layer 1
+Dialogue: 0,0:00:20.00,0:00:22.00,Default,,0000,0000,0000,,Another line in layer 0
+Dialogue: 1,0:00:20.00,0:00:22.00,Default,,0050,0000,0020,,And this line is in layer 1, but has changed its margins so it isn't exactly centered, and it's raised above the other line.
+Dialogue: 0,0:00:22.00,0:00:24.00,Default,,0000,0000,0000,,Switching {\fnTimes New Roman}font inline, {\r}and resetting styles
+Dialogue: 0,0:00:24.00,0:00:26.00,Default,,0000,0000,0000,,Also {\rAlt}switching to a different style {\r}inline
+Dialogue: 0,0:00:26.00,0:00:28.00,Default,,0000,0000,0000,,{\an5\pos(258,131)}Positioning... this line should be in an odd place
+Dialogue: 0,0:00:26.00,0:00:28.00,Default,,0000,0000,0000,,{\an5\pos(222,338)\frz29.559}So should this one, and be rotated
+Dialogue: 0,0:00:28.00,0:00:30.00,Default,,0000,0000,0000,,{\pos(371,314)\frz338.403\frx42\fry30\org(187,165)}Some more rotation tricks, this time in 3D and with a different origin
+Dialogue: 0,0:00:30.00,0:00:32.00,Default,,0000,0000,0000,,{\an5\t(\frz360)}This line is animated and rotates 360 degrees over its duration
+Dialogue: 0,0:00:32.00,0:00:34.00,Default,,0000,0000,0000,,{\an5\move(182,157,414,311)}This line moves
+Dialogue: 0,0:00:34.00,0:00:36.00,Default,,0000,0000,0000,,{\an5\clip(126,192,487,241)}This line is only partially visible\Nso if you can see this, \clip is handled incorrectly
+Dialogue: 0,0:00:36.00,0:00:38.00,Default,,0000,0000,0000,,{\an5\clip(m 178 212 l 163 249 212 302 257 232 309 249 366 241 392 285 473 267 487 210 421 241 353 219 207 258)}And this line has a funnily-shaped clip area
+Dialogue: 0,0:00:38.00,0:00:40.00,Default,,0000,0000,0000,,{\an5\pos(321,193)}Here should be a pretty feather with a thin border and no shadow:
+Dialogue: 0,0:00:38.00,0:00:40.00,Default,,0000,0000,0000,,{\an5\bord1\shad0\p1\fscx300\fscy300\pos(316,312)}m 0 0 b 33 -3 48 -7 61 -19 b 53 -7 31 -1 1 2 m 9 0 b 9 -5 10 -6 14 -12 b 9 -5 10 -3 10 0 m 10 -1 b 10 -5 11 -8 16 -12 b 17 -12 18 -13 22 -14 b 18 -10 16 -6 15 -1 b 17 -6 19 -10 23 -14 l 26 -15 b 22 -11 20 -6 19 -2 b 24 -11 27 -14 28 -15 b 31 -16 35 -16 39 -16 b 37 -14 36 -10 36 -5 b 36 -9 38 -14 39 -16 b 41 -16 43 -16 45 -15 b 44 -13 43 -10 43 -7 l 29 -3 m 43 -7 b 44 -11 45 -13 47 -15 b 46 -13 46 -11 46 -9 b 46 -11 47 -13 49 -15 b 51 -15 48 -13 48 -9 b 49 -11 49 -14 52 -16 b 55 -16 53 -17 51 -11 l 48 -8 m 54 -13 b 53 -14 54 -15 54 -16 b 54 -15 54 -14 55 -13 b 57 -13 60 -12 62 -14 b 61 -12 55 -12 53 -12 b 55 -11 56 -10 61 -10 b 61 -7 53 -9 52 -11 b 53 -8 55 -7 58 -6 b 57 -5 56 -4 54 -3 b 49 -5 48 -6 47 -9 b 47 -6 50 -4 53 -2 b 49 -3 47 -6 45 -8 b 46 -6 49 -3 52 -1 b 46 2 45 3 43 3 b 40 0 39 -3 40 -6 b 39 -3 39 1 42 3 b 40 6 36 1 34 -4 b 35 -1 36 2 38 5 b 32 7 26 9 22 8 b 19 5 17 2 16 -1 b 17 3 19 5 20 7 b 17 4 16 2 15 0 b 15 2 17 5 19 8 b 15 9 13 3 12 0 l 25 -2 l 42 -7 m 12 0 b 13 3 13 7 17 9 b 12 7 10 1 10 0
+Dialogue: 0,0:00:40.00,0:00:42.00,Default,,0000,0000,0000,,Some other basic font style tests:\NNormal, {\b1}Boldface{\r}, {\i1}Italics{\r}, {\u1}Underline{\r}, {\s1}Strikethrough
+Dialogue: 0,0:00:42.00,0:00:44.00,Default,,0000,0000,0000,,There should be no linebreak here,\nbut there should be one here\Nso this is on a separate line.
+Dialogue: 0,0:00:44.00,0:00:46.00,Default,,0000,0000,0000,,This line is pushed left by adding some hard spaces to the right\h\h\h\h\h\h\h\h\h\h\h\h\h\h\h\h\h\h\h\h
+Dialogue: 0,0:00:44.00,0:00:46.00,Default,,0000,0000,0000,,                          Regular spaces at line start/end are ignored, so this line is centered
+Dialogue: 0,0:00:46.00,0:00:48.00,Default,,0000,0000,0000,,{\an8\q2}This is a long line but it is not broken into several because it's using the \q override tag which changes the line-wrapping mode for a single line. The tag can take several values, 0 is the default which is "smart wrapping" with top lines longer, 1 is regular wrapping, 2 is no wrapping and 3 is smart-wrapping with bottom lines longer.
+Dialogue: 0,0:00:46.00,0:00:48.00,Default,,0000,0000,0000,,{\an5\q1}This is a long line using the \q1 override tag to get "dumb" wrapping, make as long lines as possible and first wrap when it'd go off screen. This is mostly visible when the last line generated is short.
+Dialogue: 0,0:00:46.00,0:00:48.00,Default,,0000,0000,0000,,{\q3}And this line uses the \q3 wrapping style, which is similar to the \q0 default smart-wrap style, but has lower lines longer than the upper ones.
+Dialogue: 0,0:00:48.00,0:00:50.00,Default,,0000,0000,0000,,{\an5}{\bord0\t(\bord10)}This text has a growing border\N{\r\shad0\t(\shad10)}This text has an increasing shadow\N{\r\t(\fry360)}This text is rotating around the Y axis\N{\r\t(\frz720)}This text rotates {\t(\frx360)}and this one even more
+Dialogue: 0,0:00:50.00,0:00:52.00,Default,,0000,0000,0000,,{\an5\bord0\shad0}All of this has no border or shadow...\N{\1c&H0000FF&}This is bright red, {\1c&H00FF00&}green, {\1c&HFF0000}blue{\1c&HFFFFFF&}\N{\1a&H80&}50% transparent
+Dialogue: 0,0:00:52.00,0:00:54.00,Default,,0000,0000,0000,,{\fsp10}Large inter-letter spacing
+Dialogue: 0,0:00:54.00,0:00:56.00,Default,,0000,0000,0000,,{\shad0}No shadow here, just regular border, {\be1}but this is \be1 blurred edges!
+Dialogue: 0,0:00:56.00,0:00:58.00,Default,,0000,0000,0000,,{\t(1000,2000,\alpha&HFF&)}Fading out after 1 sec on screen, using \alpha. Everything should fade.
+Dialogue: 0,0:00:58.00,0:01:00.00,Default,,0000,0000,0000,,{\fad(1000,1000)}Fading in and out using \fad
+Dialogue: 0,0:01:00.00,0:01:02.00,Default,,0000,0000,0000,,{\k10}And {\k5}now {\k20}for {\kf50}ka{\kf20}ra{\K70}o{\K10}ke{\k0}!
+Dialogue: 0,0:01:02.00,0:01:04.00,Default,,0000,0000,0000,,{\an5\t()\clip(69,215,573,267)\t(1000,2000,3,\clip(573,267,573,267))}And the last thing on the programme, an animated rectangular \clip, delayed by 1 second. And it even uses acceleration...!

docs/assets/js/JavascriptSubtitlesOctopus/test2.ass

@@ -0,0 +1,49 @@
+[Script Info]
+; // 此字幕由爱幕生成
+Synch Point:1
+ScriptType:v4.00+
+Collisions:Normal
+
+[V4+ Styles]
+Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
+Style: Default, Microsoft YaHei, 20, &H00FFFFFF, &H000092FE, &H00000000, &H82000000, 0, 0, 0, 0, 100, 100, 0, 0, 1, 1, 2, 2, 10, 10, 30, 134
+Style: Style1, Microsoft YaHei, 20, &H0000DCFC, &H0000DCFC, &H00000000, &H82000000, 0, 0, 0, 0, 100, 100, 1, 0, 1, 1, 2, 2, 10, 10, 30, 134
+Style: Style2, ZCOOL KuaiLe, 20, &H0000DDA4, &H0000DDA4, &H00334D19, &H82000000, 0, 0, 0, 0, 100, 100, 1, 0, 4, 1, 3, 2, 10, 10, 50, 134
+Style: Style3, Source Han Sans CN Medium, 28, &H009E14AB, &H009E14AB, &H00009EFB, &H82000000, 0, 0, 0, 0, 100, 100, 1, 0, 1, 1, 2, 2, 10, 10, 100, 134
+
+[Events]
+Format: Layer, Start, End, Style, Actor, MarginL, MarginR, MarginV, Effect, Text
+Dialogue: 0,0:00:00.31,0:00:00.84,Style1,NTP,0000,0000,0000,,那一天\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}あの日
+Dialogue: 0,0:00:01.28,0:00:02.22,Style2,NTP,0000,0000,0000,,星星降落的日子\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}星が降った日
+Dialogue: 0,0:00:03.15,0:00:04.41,Style3,NTP,0000,0000,0000,,那简直是\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}それはまるで
+Dialogue: 0,0:00:04.45,0:00:04.97,Default,NTP,0000,0000,0000,,简直\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}まるで
+Dialogue: 0,0:00:05.12,0:00:06.30,Default,NTP,0000,0000,0000,,像梦中的景色一样\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}夢の景色のように
+Dialogue: 0,0:00:07.44,0:00:08.98,Default,NTP,0000,0000,0000,,美丽的景色\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}美しい眺めだった
+Dialogue: 0,0:00:24.60,0:00:25.09,Default,NTP,0000,0000,0000,,放学后\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}放課後
+Dialogue: 0,0:00:25.70,0:00:26.26,Default,NTP,0000,0000,0000,,不好\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}悪い
+Dialogue: 0,0:00:26.48,0:00:27.68,Default,NTP,0000,0000,0000,,我今天开始打工\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}おれ今日これからバイト
+Dialogue: 0,0:00:29.34,0:00:31.69,Default,NTP,0000,0000,0000,,已经讨厌这样的乡下了\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}もうこんな田舎嫌だよー
+Dialogue: 0,0:00:31.97,0:00:33.53,Default,NTP,0000,0000,0000,,讨厌这样的人生\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}こんな人生嫌だ
+Dialogue: 0,0:00:33.93,0:00:37.97,Default,NTP,0000,0000,0000,,来世请让我成为东京的帅哥吧\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}来世は東京のイケメン男子にしてくださーい
+Dialogue: 0,0:00:42.08,0:00:42.87,Default,NTP,0000,0000,0000,,哪里\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}どこ
+Dialogue: 0,0:00:43.05,0:00:44.17,Default,NTP,0000,0000,0000,,那么说来\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}そういえば
+Dialogue: 0,0:00:44.55,0:00:47.08,Default,NTP,0000,0000,0000,,我觉得好像一直做着奇怪的梦\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}ずっと変な夢を見てたような気がするんだけど
+Dialogue: 0,0:00:48.32,0:00:50.63,Default,NTP,0000,0000,0000,,别人的人生中…梦\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}別の人の人生の…夢
+Dialogue: 0,0:00:51.45,0:00:52.74,Default,NTP,0000,0000,0000,,这是什么\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}何だ これ
+Dialogue: 0,0:00:54.78,0:00:55.44,Default,NTP,0000,0000,0000,,这个，这个\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}これって
+Dialogue: 0,0:00:56.72,0:00:57.72,Default,NTP,0000,0000,0000,,这难道是\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}これってもしかして
+Dialogue: 0,0:00:58.08,0:00:59.33,Default,NTP,0000,0000,0000,,我们在梦中\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}俺達は夢の中で
+Dialogue: 0,0:01:00.14,0:01:01.20,Default,NTP,0000,0000,0000,,替换着\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}入れ替わってる
+Dialogue: 0,0:01:07.37,0:01:08.30,Default,NTP,0000,0000,0000,,确实的事情\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}確かなことが
+Dialogue: 0,0:01:08.76,0:01:09.54,Default,NTP,0000,0000,0000,,只有一个\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}一つだけある
+Dialogue: 0,0:01:10.33,0:01:11.04,Default,NTP,0000,0000,0000,,我们是\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}私達は
+Dialogue: 0,0:01:11.42,0:01:12.32,Default,NTP,0000,0000,0000,,见面的话绝对\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}会えば絶対
+Dialogue: 0,0:01:12.68,0:01:13.53,Default,NTP,0000,0000,0000,,马上就明白\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}すぐにわかる
+Dialogue: 0,0:01:14.25,0:01:15.28,Default,NTP,0000,0000,0000,,我想说\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}言おうと思ったんだ
+Dialogue: 0,0:01:16.08,0:01:17.58,Default,NTP,0000,0000,0000,,你是世界的无论在哪里\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}お前が世界のどこにいても
+Dialogue: 0,0:01:17.95,0:01:19.05,Default,NTP,0000,0000,0000,,一定要去见你\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}必ず会いに行くって
+Dialogue: 0,0:01:20.14,0:01:20.94,Default,NTP,0000,0000,0000,,你是\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}あなたは
+Dialogue: 0,0:01:21.36,0:01:21.80,Default,NTP,0000,0000,0000,,谁\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}誰
+Dialogue: 0,0:01:22.20,0:01:22.76,Default,NTP,0000,0000,0000,,你是\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}お前は
+Dialogue: 0,0:01:23.48,0:01:24.04,Default,NTP,0000,0000,0000,,谁\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}誰だ
+Dialogue: 0,0:01:25.69,0:01:26.47,Default,NTP,0000,0000,0000,,你的名字是\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}君の名は

docs/assets/js/common.js

@@ -1,11 +1,8 @@
 (function () {
-    var userAgent = window.navigator.userAgent;
-    var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
-    var isIE = /MSIE|Trident/.test(userAgent);
+    Artplayer.DEBUG = true;
 
-    if (isMobile || isIE) {
-        window.location.href = './mobile.html';
-        return;
+    if (Artplayer.utils.isMobile) {
+        window.location.href = './mobile.html' + location.search;
     }
 
     var $codeMirror = document.querySelector('.codeMirrorWrap');
@@ -13,59 +10,66 @@
     var $run = document.querySelector('.run');
     var $popups = document.querySelector('.popups');
     var $console = document.querySelector('.console');
-    var loaddLib = [];
+    var $typeScript = document.querySelector('#typeScript');
 
-    window.consoleLog($console);
+    var loadedLibs = [];
+    window['consoleLog']($console);
+    $typeScript.checked = localStorage.getItem('typeScript') === 'true';
 
     var editor = null;
     require.config({ paths: { vs: './assets/js/vs' } });
-    require(['vs/editor/editor.main'], function () {
-        var libUri = './assets/ts/artplayer.d.ts';
-        fetch(libUri)
-            .then((res) => res.text())
-            .then((libSource) => {
-                monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-                    noSemanticValidation: true,
-                    noSyntaxValidation: false,
-                });
-
-                monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
-                    target: monaco.languages.typescript.ScriptTarget.ES6,
-                    allowNonTsExtensions: true,
-                });
-
-                monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri);
-                monaco.editor.createModel(libSource, 'typescript', monaco.Uri.parse(libUri));
-
-                var disposable = monaco.editor.onDidCreateEditor(function () {
-                    disposable.dispose();
-                    setTimeout(initApp, 1000);
-                });
-
-                editor = monaco.editor.create($codeMirror, {
-                    theme: 'vs-dark',
-                    automaticLayout: true,
-                    model: monaco.editor.createModel(
-                        [
-                            'var art = new Artplayer({',
-                            "\tcontainer: '.artplayer-app',",
-                            "\turl: 'https://artplayer.org/assets/sample/video.mp4',",
-                            '});',
-                        ].join('\n'),
-                        'javascript',
-                    ),
-                });
-            });
-    });
-
-    function initArt(art) {
-        Artplayer.config.events.forEach(function (item) {
-            art &&
-                art.on('video:' + item, function (event) {
-                    console.log('video: ' + event.type);
-                });
+    require(['vs/editor/editor.main'], async function () {
+        monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+            noSemanticValidation: true,
+            noSyntaxValidation: false,
         });
-    }
+
+        monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+            target: monaco.languages.typescript.ScriptTarget.ES6,
+            allowNonTsExtensions: true,
+        });
+
+        var libUris = [
+            './assets/ts/artplayer.d.ts',
+            './assets/ts/artplayer-plugin-ads.d.ts',
+            './assets/ts/artplayer-plugin-control.d.ts',
+            './assets/ts/artplayer-plugin-danmuku.d.ts',
+            './assets/ts/artplayer-plugin-dash-quality.d.ts',
+            './assets/ts/artplayer-plugin-hls-quality.d.ts',
+            './assets/ts/artplayer-plugin-iframe.d.ts',
+        ];
+        
+        for (let index = 0; index < libUris.length; index++) {
+            var libUri = libUris[index];
+            var libSource = await (await fetch(libUri)).text();
+            monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri);
+            monaco.editor.createModel(libSource, 'typescript', monaco.Uri.parse(libUri));
+        }
+
+        var disposable = monaco.editor.onDidCreateEditor(function () {
+            disposable.dispose();
+            setTimeout(initApp, 1000);
+        });
+
+        editor = monaco.editor.create($codeMirror, {
+            theme: 'vs-dark',
+            automaticLayout: true,
+            quickSuggestions: {
+                other: true,
+                comments: true,
+                strings: true,
+            },
+            model: monaco.editor.createModel(
+                [
+                    'var art = new Artplayer({',
+                    "\tcontainer: '.artplayer-app',",
+                    "\turl: '/assets/sample/video.mp4',",
+                    '});',
+                ].join('\n'),
+                $typeScript.checked ? 'typescript' : 'javascript',
+            ),
+        });
+    });
 
     function getURLParameters(url) {
         return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(function (a, v) {
@@ -124,7 +128,7 @@
         libsDecode
             .split(/\r?\n/)
             .filter(function (url) {
-                return !loaddLib.includes(url);
+                return !loadedLibs.includes(url);
             })
             .forEach(function (url) {
                 var ext = getExt(url);
@@ -163,27 +167,12 @@
         }
     }
 
-    function formatDate(date) {
-        var date = new Date(Number(date));
-        var YY = date.getFullYear() + '-';
-        var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
-        var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
-        var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
-        var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
-        var ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
-        return YY + MM + DD + ' ' + hh + mm + ss;
-    }
-
     function runCode() {
-        Artplayer.instances.forEach(function (art) {
+        [...Artplayer.instances].forEach(function (art) {
             art.destroy(true);
         });
-        var code = editor.getValue();
-        eval(code);
-        initArt(Artplayer.instances[0]);
-        console.debug('Artplayer@' + Artplayer.version);
-        console.debug('Env@' + Artplayer.env);
-        console.debug('Build@' + formatDate(Artplayer.build));
+        eval(editor.getValue());
+        window.art = Artplayer.instances[0];
     }
 
     function initApp() {
@@ -194,7 +183,7 @@
 
         loadLib(libs)
             .then(function (result) {
-                loaddLib = loaddLib.concat(result);
+                loadedLibs = loadedLibs.concat(result);
                 loadCode(code, example);
             })
             .catch(function (err) {
@@ -220,6 +209,11 @@
         }
     });
 
+    $typeScript.addEventListener('change', function () {
+        localStorage.setItem('typeScript', $typeScript.checked ? 'true' : 'false');
+        window.location.reload();
+    });
+
     window.addEventListener('error', function (err) {
         console.error(err);
     });

docs/assets/js/mobile.js

@@ -1,70 +1,100 @@
-var vConsole = new VConsole();
+(function () {
+    Artplayer.DEBUG = true;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://artplayer.org/assets/sample/video.mp4',
-    title: 'One More Time One More Chance',
-    poster: '/assets/sample/poster.jpg',
-    autoSize: true,
-    loop: true,
-    mutex: true,
-    theme: '#ff0057',
-    fullscreen: true,
-    fullscreenWeb: true,
-    miniProgressBar: true,
-    moreVideoAttr: {
-        playsInline: true,
-        'webkit-playsinline': true,
-        'x5-video-player-type': 'h5',
-        'x5-video-player-fullscreen': false,
-        'x5-video-orientation': 'portraint',
-    },
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-        style: {
-            color: '#fff',
-            fontSize: '14px',
-        },
-    },
-    layers: [
-        {
-            html: `<img width="50" src="/assets/sample/layer.png">`,
-            click: function () {
-                console.info('You clicked on the custom layer');
-            },
-            style: {
-                position: 'absolute',
-                top: '10px',
-                right: '10px',
-                opacity: '.9',
-            },
-        },
-    ],
-    icons: {
-        loading: '<img src="/assets/img/ploading.gif">',
-        state: '<img width="150" heigth="150" src="/assets/img/state.svg">',
-        indicator: '<img width="16" heigth="16" src="/assets/img/indicator.svg">',
-    },
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-            speed: 5,
-            maxlength: 100,
-            margin: [10, 70],
-            opacity: 1,
-            fontSize: 14,
-            synchronousPlayback: false,
-        }),
-    ],
-    whitelist: ['*'],
-});
+    function getURLParameters(url) {
+        return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(function (a, v) {
+            return (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a;
+        }, {});
+    }
 
-Artplayer.config.events.forEach(function (item) {
-    art.on('video:' + item, function (event) {
-        console.log('video: ' + event.type);
-    });
-});
+    function getExt(url) {
+        if (url.includes('?')) {
+            return getExt(url.split('?')[0]);
+        }
 
-if (Artplayer.utils.isWechat) {
-    document.querySelector('.tip').textContent = '微信环境需手动触发播放';
-}
+        if (url.includes('#')) {
+            return getExt(url.split('#')[0]);
+        }
+
+        return url.trim().toLowerCase().split('.').pop();
+    }
+
+    function loadScript(url) {
+        return new Promise(function (resolve, reject) {
+            var define2 = window.define;
+            window.define = undefined;
+            var script = document.createElement('script');
+            script.type = 'text/javascript';
+            script.src = url;
+            script.onload = function () {
+                window.define = define2;
+                resolve(url);
+            };
+            script.onerror = function () {
+                reject(new Error('Loading script failed:' + url));
+            };
+            document.querySelector('head').appendChild(script);
+        });
+    }
+
+    function loadStyle(url) {
+        return new Promise(function (resolve, reject) {
+            var link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = url;
+            link.onload = function () {
+                resolve(url);
+            };
+            link.onerror = function () {
+                reject(new Error('Loading style failed:' + url));
+            };
+            document.querySelector('head').appendChild(link);
+        });
+    }
+
+    function loadLib(libs) {
+        var libPromise = [];
+        var libsDecode = decodeURIComponent(libs || '');
+        libsDecode
+            .split(/\r?\n/)
+            .forEach(function (url) {
+                var ext = getExt(url);
+                if (ext === 'js') {
+                    libPromise.push(loadScript(url));
+                } else if (ext === 'css') {
+                    libPromise.push(loadStyle(url));
+                }
+            });
+        return Promise.all(libPromise);
+    }
+
+    function runExample(name) {
+        fetch('./assets/example/' + name + '.js')
+            .then(function (response) {
+                return response.text();
+            })
+            .then(function (text) {
+                eval(text);
+            })
+    }
+
+    function loadCode(code, example) {
+        if (example) {
+            runExample(example);
+        } else if (code) {
+           eval(decodeURIComponent(code).trim());
+        } else {
+            runExample('mobile');
+        }
+    }
+
+    var _getURLParameters = getURLParameters(window.location.href),
+            code = _getURLParameters.code,
+            libs = _getURLParameters.libs;
+        example = _getURLParameters.example;
+
+    loadLib(libs)
+        .then(function () {
+            loadCode(code, example);
+        })
+})();

docs/assets/js/vconsole.min.js

@@ -1,12 +1,10 @@
 /*!
- * vConsole v3.2.0 (https://github.com/Tencent/vConsole)
- * 
+ * vConsole v3.15.0 (https://github.com/Tencent/vConsole)
+ *
  * Tencent is pleased to support the open source community by making vConsole available.
  * Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
  * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
  * http://opensource.org/licenses/MIT
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VConsole=t():e.VConsole=t()}(this,function(){return function(e){function t(n){if(o[n])return o[n].exports;var i=o[n]={exports:{},id:n,loaded:!1};return e[n].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),o(1);var i=o(2),a=n(i),r=o(18),l=n(r);a["default"].VConsolePlugin=l["default"],t["default"]=a["default"],e.exports=t["default"]},function(e,t){"use strict";if("undefined"==typeof Symbol){window.Symbol=function(){};var o="__symbol_iterator_key";window.Symbol.iterator=o,Array.prototype[o]=function(){var e=this,t=0;return{next:function(){return{done:e.length===t,value:e.length===t?void 0:e[t++]}}}}}},function(e,t,o){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t["default"]=e,t}function i(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),l=o(3),c=i(l),s=o(4),d=n(s),u=o(5),v=i(u);o(7);var f=o(11),p=i(f),h=o(12),g=i(h),b=o(13),m=i(b),y=o(14),_=i(y),w=o(15),x=i(w),k=o(16),C=i(k),T=o(24),O=i(T),E=o(26),S=i(E),L=o(30),j=i(L),N=o(37),P=i(N),M="#__vconsole",A=function(){function e(t){if(a(this,e),v["default"].one(M))return void console.debug("vConsole is already exists.");var o=this;if(this.version=c["default"].version,this.$dom=null,this.isInited=!1,this.option={defaultPlugins:["system","network","element","storage"]},this.activedTab="",this.tabList=[],this.pluginList={},this.switchPos={x:10,y:10,startX:0,startY:0,endX:0,endY:0},this.tool=d,this.$=v["default"],d.isObject(t))for(var n in t)this.option[n]=t[n];this._addBuiltInPlugins();var i=function(){o.isInited||(o._render(),o._mockTap(),o._bindEvent(),o._autoRun())};void 0!==document?"complete"==document.readyState?i():v["default"].bind(window,"load",i):!function(){var e=void 0,t=function o(){document&&"complete"==document.readyState?(e&&clearTimeout(e),i()):e=setTimeout(o,1)};e=setTimeout(t,1)}()}return r(e,[{key:"_addBuiltInPlugins",value:function(){this.addPlugin(new C["default"]("default","Log"));var e=this.option.defaultPlugins,t={system:{proto:O["default"],name:"System"},network:{proto:S["default"],name:"Network"},element:{proto:j["default"],name:"Element"},storage:{proto:P["default"],name:"Storage"}};if(e&&d.isArray(e))for(var o=0;o<e.length;o++){var n=t[e[o]];n?this.addPlugin(new n.proto(e[o],n.name)):console.debug("Unrecognized default plugin ID:",e[o])}}},{key:"_render",value:function(){if(!v["default"].one(M)){var e=document.createElement("div");e.innerHTML=p["default"],document.documentElement.insertAdjacentElement("beforeend",e.children[0])}this.$dom=v["default"].one(M);var t=v["default"].one(".vc-switch",this.$dom),o=1*d.getStorage("switch_x"),n=1*d.getStorage("switch_y");(o||n)&&(o+t.offsetWidth>document.documentElement.offsetWidth&&(o=document.documentElement.offsetWidth-t.offsetWidth),n+t.offsetHeight>document.documentElement.offsetHeight&&(n=document.documentElement.offsetHeight-t.offsetHeight),0>o&&(o=0),0>n&&(n=0),this.switchPos.x=o,this.switchPos.y=n,v["default"].one(".vc-switch").style.right=o+"px",v["default"].one(".vc-switch").style.bottom=n+"px");var i=window.devicePixelRatio||1,a=document.querySelector('[name="viewport"]');if(a&&a.content){var r=a.content.match(/initial\-scale\=\d+(\.\d+)?/),l=r?parseFloat(r[0].split("=")[1]):1;1>l&&(this.$dom.style.fontSize=13*i+"px")}v["default"].one(".vc-mask",this.$dom).style.display="none"}},{key:"_mockTap",value:function(){var e=700,t=10,o=void 0,n=void 0,i=void 0,a=!1,r=null;this.$dom.addEventListener("touchstart",function(e){if(void 0===o){var t=e.targetTouches[0];n=t.pageX,i=t.pageY,o=e.timeStamp,r=e.target.nodeType===Node.TEXT_NODE?e.target.parentNode:e.target}},!1),this.$dom.addEventListener("touchmove",function(e){var o=e.changedTouches[0];(Math.abs(o.pageX-n)>t||Math.abs(o.pageY-i)>t)&&(a=!0)}),this.$dom.addEventListener("touchend",function(t){if(a===!1&&t.timeStamp-o<e&&null!=r){var n=r.tagName.toLowerCase(),i=!1;switch(n){case"textarea":i=!0;break;case"input":switch(r.type){case"button":case"checkbox":case"file":case"image":case"radio":case"submit":i=!1;break;default:i=!r.disabled&&!r.readOnly}}i?r.focus():t.preventDefault();var l=t.changedTouches[0],c=document.createEvent("MouseEvents");c.initMouseEvent("click",!0,!0,window,1,l.screenX,l.screenY,l.clientX,l.clientY,!1,!Line truncated
-}),a=e.href;e.href=URL.createObjectURL(i),a&&URL.revokeObjectURL(a)}var f={},p=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},h=p(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),g=p(function(){return document.head||document.getElementsByTagName("head")[0]}),b=null,m=0,y=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=h()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var o=i(e);return n(o,t),function(e){for(var a=[],r=0;r<o.length;r++){var l=o[r],c=f[l.id];c.refs--,a.push(c)}if(e){var s=i(e);n(s,t)}for(var r=0;r<a.length;r++){var c=a[r];if(0===c.refs){for(var d=0;d<c.parts.length;d++)c.parts[d]();delete f[c.id]}}}};var _=function(){var e=[];return function(t,o){return e[t]=o,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports='<div id="__vconsole" class="">\n  <div class="vc-switch">vConsole</div>\n  <div class="vc-mask">\n  </div>\n  <div class="vc-panel">\n    <div class="vc-tabbar">\n    </div>\n    <div class="vc-topbar">\n    </div>\n    <div class="vc-content">\n    </div>\n    <div class="vc-toolbar">\n      <a class="vc-tool vc-global-tool vc-tool-last vc-hide">Hide</a>\n    </div>\n  </div>\n</div>'},function(e,t){e.exports='<a class="vc-tab" data-tab="{{id}}" id="__vc_tab_{{id}}">{{name}}</a>'},function(e,t){e.exports='<div class="vc-logbox" id="__vc_log_{{id}}">\n  \n</div>'},function(e,t){e.exports='<a class="vc-toptab vc-topbar-{{pluginID}}{{if (className)}} {{className}}{{/if}}">{{name}}</a>'},function(e,t){e.exports='<a class="vc-tool vc-tool-{{pluginID}}">{{name}}</a>'},function(e,t,o){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t["default"]=e,t}function i(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var c=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),s=function w(e,t,o){null===e&&(e=Function.prototype);var n=Object.getOwnPropertyDescriptor(e,t);if(void 0===n){var i=Object.getPrototypeOf(e);return null===i?void 0:w(i,t,o)}if("value"in n)return n.value;var a=n.get;if(void 0!==a)return a.call(o)},d=o(5),u=i(d),v=o(4),f=n(v),p=o(17),h=i(p),g=o(22),b=i(g),m=o(23),y=i(m),_=function(e){function t(){var e;a(this,t);for(var o=arguments.length,n=Array(o),i=0;o>i;i++)n[i]=arguments[i];var l=r(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(n)));return l.tplTabbox=b["default"],l.windowOnError=null,l}return l(t,e),c(t,[{key:"onReady",value:function(){var e=this;s(Object.getPrototypeOf(t.prototype),"onReady",this).call(this),u["default"].bind(u["default"].one(".vc-cmd",this.$tabbox),"submit",function(t){t.preventDefault();var o=u["default"].one(".vc-cmd-input",t.target),n=o.value;o.value="",""!==n&&e.evalCommand(n)});var o="";o+="if (!!window) {",o+="window.__vConsole_cmd_result = undefined;",o+="window.__vConsole_cmd_error = false;",o+="}";var n=document.getElementsByTagName("script"),i="";n.length>0&&(i=n[0].getAttribute("nonce")||"");var a=document.createElement("SCRIPT");a.innerHTML=o,a.setAttribute("nonce",i),document.documentElement.appendChild(a),document.documentElement.removeChild(a)}},{key:"mockConsole",value:function(){s(Object.getPrototypeOf(t.prototype),"mockConsole",this).call(this);var e=this;f.isFunction(window.onerror)&&(this.windowOnError=window.onerror),window.onerror=function(t,o,n,i,a){var r=t;o&&(r+="\n"+o.replace(location.origin,"")),(n||i)&&(r+=":"+n+":"+i);var l=!!a&&!!a.stack,c=l&&a.stack.toString()||"";e.printLog({logType:"error",logs:[r,c],noOrigin:!0}),f.isFunction(e.windowOnError)&&e.windowOnError.call(window,t,o,n,i,a)}}},{key:"evalCommand",value:function(e){this.printLog({logType:"log",content:u["default"].render(y["default"],{content:e,type:"input"}),noMeta:!0,style:""});var t="";t+="try {\n",t+="window.__vConsole_cmd_result = (function() {\n",t+="return "+e+";\n",t+="})();\n",t+="window.__vConsole_cmd_error = false;\n",t+="} catch (e) {\n",t+="window.__vConsole_cmd_result = e.message;\n",t+="window.__vConsole_cmd_error = true;\n",t+="}";var o=document.getElementsByTagName("script"),n="";o.length>0&&(n=o[0].getAttribute("noncLine truncated
-}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var c=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}();o(31);var s=o(18),d=i(s),u=o(33),v=i(u),f=o(34),p=i(f),h=o(4),g=(n(h),o(5)),b=i(g),m=function(e){function t(){var e;a(this,t);for(var o=arguments.length,n=Array(o),i=0;o>i;i++)n[i]=arguments[i];var l=r(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(n))),c=l;c.isInited=!1,c.node={},c.$tabbox=b["default"].render(v["default"],{}),c.nodes=[],c.activedElem={};var s=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;return c.observer=new s(function(e){for(var t=0;t<e.length;t++){var o=e[t];c._isInVConsole(o.target)||c.onMutation(o)}}),l}return l(t,e),c(t,[{key:"onRenderTab",value:function(e){e(this.$tabbox)}},{key:"onAddTool",value:function(e){var t=this,o=[{name:"Expend",global:!1,onClick:function(e){if(t.activedElem)if(b["default"].hasClass(t.activedElem,"vc-toggle"))for(var o=0;o<t.activedElem.childNodes.length;o++){var n=t.activedElem.childNodes[o];if(b["default"].hasClass(n,"vcelm-l")&&!b["default"].hasClass(n,"vcelm-noc")&&!b["default"].hasClass(n,"vc-toggle")){b["default"].one(".vcelm-node",n).click();break}}else b["default"].one(".vcelm-node",t.activedElem).click()}},{name:"Collapse",global:!1,onClick:function(e){t.activedElem&&(b["default"].hasClass(t.activedElem,"vc-toggle")?b["default"].one(".vcelm-node",t.activedElem).click():t.activedElem.parentNode&&b["default"].hasClass(t.activedElem.parentNode,"vcelm-l")&&b["default"].one(".vcelm-node",t.activedElem.parentNode).click())}}];e(o)}},{key:"onShow",value:function(){if(!this.isInited){this.isInited=!0,this.node=this.getNode(document.documentElement);var e=this.renderView(this.node,b["default"].one(".vc-log",this.$tabbox)),t=b["default"].one(".vcelm-node",e);t&&t.click();var o={attributes:!0,childList:!0,characterData:!0,subtree:!0};this.observer.observe(document.documentElement,o)}}},{key:"onRemove",value:function(){this.observer.disconnect()}},{key:"onMutation",value:function(e){switch(e.type){case"childList":e.removedNodes.length>0&&this.onChildRemove(e),e.addedNodes.length>0&&this.onChildAdd(e);break;case"attributes":this.onAttributesChange(e);break;case"characterData":this.onCharacterDataChange(e)}}},{key:"onChildRemove",value:function(e){var t=e.target,o=t.__vconsole_node;if(o){for(var n=0;n<e.removedNodes.length;n++){var i=e.removedNodes[n],a=i.__vconsole_node;a&&a.view&&a.view.parentNode.removeChild(a.view)}this.getNode(t)}}},{key:"onChildAdd",value:function(e){var t=e.target,o=t.__vconsole_node;if(o){this.getNode(t),o.view&&b["default"].removeClass(o.view,"vcelm-noc");for(var n=0;n<e.addedNodes.length;n++){var i=e.addedNodes[n],a=i.__vconsole_node;if(a)if(null!==e.nextSibling){var r=e.nextSibling.__vconsole_node;r.view&&this.renderView(a,r.view,"insertBefore")}else o.view&&(o.view.lastChild?this.renderView(a,o.view.lastChild,"insertBefore"):this.renderView(a,o.view))}}}},{key:"onAttributesChange",value:function(e){var t=e.target.__vconsole_node;t&&(t=this.getNode(e.target),t.view&&this.renderView(t,t.view,!0))}},{key:"onCharacterDataChange",value:function(e){var t=e.target.__vconsole_node;t&&(t=this.getNode(e.target),t.view&&this.renderView(t,t.view,!0))}},{key:"renderView",value:function(e,t,o){var n=this,i=new p["default"](e).get();switch(e.view=i,b["default"].delegate(i,"click",".vcelm-node",function(t){t.stopPropagation();var o=this.parentNode;if(!b["default"].hasClass(o,"vcelm-noc")){n.activedElem=o,b["default"].hasClass(o,"vc-toggle")?b["default"].removeClass(o,"vc-toggle"):b["default"].addClass(o,"vc-toggle");for(var i=-1,a=0;a<o.children.length;a++){var r=o.children[a];b["default"].hasClass(r,"vcelm-l")&&(i++,r.children.length>0||(e.childNodes[i]?n.renderView(e.childNodes[i],r,"replace"):r.style.display="none"))}}}),o){case"replace":t.parentNode.replaceChild(i,t);break;case"insertBefore":t.parentNode.insertBefore(i,t);break;default:t.appendChild(i)}return i}},{key:"getNode",value:function(e){if(!this._isIgnoredElement(e)){var t=e.__vconsole_node||{};if(t.nodeType=e.nodeType,t.nodeName=e.nodeName,t.tagName=e.tagName||"",t.textContent="",t.nodeType!=e.TEXT_NODE&&t.nodeType!=e.DOCUMENT_TYPE_NODE||(t.textContent=e.textContent),t.id=e.id||"",t.className=e.className||"",t.attributes=[],e.hasAttributes&&e.hasAttributes())for(var o=0;o<eLine truncated
+!function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define("VConsole",[],n):"object"==typeof exports?exports.VConsole=n():t.VConsole=n()}(this||self,(function(){return function(){var __webpack_modules__={4264:function(t,n,e){t.exports=e(7588)},5036:function(t,n,e){e(1719),e(5677),e(6394),e(5334),e(6969),e(2021),e(8328),e(2129);var o=e(1287);t.exports=o.Promise},2582:function(t,n,e){e(1646),e(6394),e(2004),e(462),e(8407),e(2429),e(1172),e(8288),e(1274),e(8201),e(6626),e(3211),e(9952),e(15),e(9831),e(7521),e(2972),e(6956),e(5222),e(2257);var o=e(1287);t.exports=o.Symbol},8257:function(t,n,e){var o=e(7583),r=e(9212),i=e(5637),a=o.TypeError;t.exports=function(t){if(r(t))return t;throw a(i(t)+" is not a function")}},1186:function(t,n,e){var o=e(7583),r=e(2097),i=e(5637),a=o.TypeError;t.exports=function(t){if(r(t))return t;throw a(i(t)+" is not a constructor")}},9882:function(t,n,e){var o=e(7583),r=e(9212),i=o.String,a=o.TypeError;t.exports=function(t){if("object"==typeof t||r(t))return t;throw a("Can't set "+i(t)+" as a prototype")}},6288:function(t,n,e){var o=e(3649),r=e(3590),i=e(4615),a=o("unscopables"),c=Array.prototype;null==c[a]&&i.f(c,a,{configurable:!0,value:r(null)}),t.exports=function(t){c[a][t]=!0}},4761:function(t,n,e){var o=e(7583),r=e(2447),i=o.TypeError;t.exports=function(t,n){if(r(n,t))return t;throw i("Incorrect invocation")}},2569:function(t,n,e){var o=e(7583),r=e(794),i=o.String,a=o.TypeError;t.exports=function(t){if(r(t))return t;throw a(i(t)+" is not an object")}},5766:function(t,n,e){var o=e(2977),r=e(6782),i=e(1825),a=function(t){return function(n,e,a){var c,u=o(n),s=i(u),l=r(a,s);if(t&&e!=e){for(;s>l;)if((c=u[l++])!=c)return!0}else for(;s>l;l++)if((t||l in u)&&u[l]===e)return t||l||0;return!t&&-1}};t.exports={includes:a(!0),indexOf:a(!1)}},4805:function(t,n,e){var o=e(2938),r=e(7386),i=e(5044),a=e(1324),c=e(1825),u=e(4822),s=r([].push),l=function(t){var n=1==t,e=2==t,r=3==t,l=4==t,f=6==t,d=7==t,v=5==t||f;return function(h,p,g,m){for(var _,b,y=a(h),w=i(y),E=o(p,g),L=c(w),T=0,x=m||u,C=n?x(h,L):e||d?x(h,0):void 0;L>T;T++)if((v||T in w)&&(b=E(_=w[T],T,y),t))if(n)C[T]=b;else if(b)switch(t){case 3:return!0;case 5:return _;case 6:return T;case 2:s(C,_)}else switch(t){case 4:return!1;case 7:s(C,_)}return f?-1:r||l?l:C}};t.exports={forEach:l(0),map:l(1),filter:l(2),some:l(3),every:l(4),find:l(5),findIndex:l(6),filterReject:l(7)}},9269:function(t,n,e){var o=e(6544),r=e(3649),i=e(4061),a=r("species");t.exports=function(t){return i>=51||!o((function(){var n=[];return(n.constructor={})[a]=function(){return{foo:1}},1!==n[t](Boolean).foo}))}},4546:function(t,n,e){var o=e(7583),r=e(6782),i=e(1825),a=e(5999),c=o.Array,u=Math.max;t.exports=function(t,n,e){for(var o=i(t),s=r(n,o),l=r(void 0===e?o:e,o),f=c(u(l-s,0)),d=0;s<l;s++,d++)a(f,d,t[s]);return f.length=d,f}},6917:function(t,n,e){var o=e(7386);t.exports=o([].slice)},5289:function(t,n,e){var o=e(7583),r=e(4521),i=e(2097),a=e(794),c=e(3649)("species"),u=o.Array;t.exports=function(t){var n;return r(t)&&(n=t.constructor,(i(n)&&(n===u||r(n.prototype))||a(n)&&null===(n=n[c]))&&(n=void 0)),void 0===n?u:n}},4822:function(t,n,e){var o=e(5289);t.exports=function(t,n){return new(o(t))(0===n?0:n)}},3616:function(t,n,e){var o=e(3649)("iterator"),r=!1;try{var i=0,a={next:function(){return{done:!!i++}},return:function(){r=!0}};a[o]=function(){return this},Array.from(a,(function(){throw 2}))}catch(t){}t.exports=function(t,n){if(!n&&!r)return!1;var e=!1;try{var i={};i[o]=function(){return{next:function(){return{done:e=!0}}}},t(i)}catch(t){}return e}},9624:function(t,n,e){var o=e(7386),r=o({}.toString),i=o("".slice);t.exports=function(t){return i(r(t),8,-1)}},3058:function(t,n,e){var o=e(7583),r=e(8191),i=e(9212),a=e(9624),c=e(3649)("toStringTag"),u=o.Object,s="Arguments"==a(function(){return arguments}());t.exports=r?a:function(t){var n,e,o;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(e=function(t,n){try{return t[n]}catch(t){}}(n=u(t),c))?e:s?a(n):"Object"==(o=a(n))&&i(n.callee)?"Arguments":o}},1509:function(t,n,e){var o=e(7386)("".replace),r=String(Error("zxcasd").stack),i=/\n\s*at [^:]*:[^\n]*/,a=i.test(r);t.exports=function(t,n){if(a&&"string"==typeof t)for(;n--;)t=o(t,i,"");return t}},3478:function(t,n,e){var o=e(2870),r=e(929),i=e(6683),a=e(4615);t.exports=function(t,n,e){for(var c=r(n),u=a.f,s=i.f,l=0;l<c.length;l++){var f=c[l];o(t,f)||e&&o(e,f)||u(t,f,s(n,f))}}},926:function(t,n,e){var o=e(6544);t.exports=!o((function(){function t(){}return t.prototype.constructor=null,Object.getPrototypeOf(new t)!==t.prototype}))},4683:function(t,n,e){"use strict";var o=e(2365).IteratorPrototype,r=e(3590),i=e(4677),a=e(8821),c=e(339),u=function(){return this};t.exports=function(t,n,e,s){var l=n+" Iterator";return t.prototype=r(o,{next:i(+!s,e)}),a(t,l,!1,!0),c[l]=u,t}},57:function(t,n,e){var o=e(8494),r=e(4615),i=e(4677);t.exports=o?function(t,n,e){return r.f(t,n,i(1,e))}:function(t,n,e){reLine truncated

docs/assets/sample/bbb-thumbnails.vtt

@@ -0,0 +1,361 @@
+WEBVTT
+
+00:00.000 --> 00:05.000
+bbb-sprite.jpg#xywh=0,0,128,72
+
+00:05.000 --> 00:10.000
+bbb-sprite.jpg#xywh=128,0,128,72
+
+00:10.000 --> 00:15.000
+bbb-sprite.jpg#xywh=256,0,128,72
+
+00:15.000 --> 00:20.000
+bbb-sprite.jpg#xywh=384,0,128,72
+
+00:20.000 --> 00:25.000
+bbb-sprite.jpg#xywh=512,0,128,72
+
+00:25.000 --> 00:30.000
+bbb-sprite.jpg#xywh=640,0,128,72
+
+00:30.000 --> 00:35.000
+bbb-sprite.jpg#xywh=768,0,128,72
+
+00:35.000 --> 00:40.000
+bbb-sprite.jpg#xywh=896,0,128,72
+
+00:40.000 --> 00:45.000
+bbb-sprite.jpg#xywh=1024,0,128,72
+
+00:45.000 --> 00:50.000
+bbb-sprite.jpg#xywh=1152,0,128,72
+
+00:50.000 --> 00:55.000
+bbb-sprite.jpg#xywh=1280,0,128,72
+
+00:55.000 --> 01:00.000
+bbb-sprite.jpg#xywh=0,72,128,72
+
+01:00.000 --> 01:05.000
+bbb-sprite.jpg#xywh=128,72,128,72
+
+01:05.000 --> 01:10.000
+bbb-sprite.jpg#xywh=256,72,128,72
+
+01:10.000 --> 01:15.000
+bbb-sprite.jpg#xywh=384,72,128,72
+
+01:15.000 --> 01:20.000
+bbb-sprite.jpg#xywh=512,72,128,72
+
+01:20.000 --> 01:25.000
+bbb-sprite.jpg#xywh=640,72,128,72
+
+01:25.000 --> 01:30.000
+bbb-sprite.jpg#xywh=768,72,128,72
+
+01:30.000 --> 01:35.000
+bbb-sprite.jpg#xywh=896,72,128,72
+
+01:35.000 --> 01:40.000
+bbb-sprite.jpg#xywh=1024,72,128,72
+
+01:40.000 --> 01:45.000
+bbb-sprite.jpg#xywh=1152,72,128,72
+
+01:45.000 --> 01:50.000
+bbb-sprite.jpg#xywh=1280,72,128,72
+
+01:50.000 --> 01:55.000
+bbb-sprite.jpg#xywh=0,144,128,72
+
+01:55.000 --> 02:00.000
+bbb-sprite.jpg#xywh=128,144,128,72
+
+02:00.000 --> 02:05.000
+bbb-sprite.jpg#xywh=256,144,128,72
+
+02:05.000 --> 02:10.000
+bbb-sprite.jpg#xywh=384,144,128,72
+
+02:10.000 --> 02:15.000
+bbb-sprite.jpg#xywh=512,144,128,72
+
+02:15.000 --> 02:20.000
+bbb-sprite.jpg#xywh=640,144,128,72
+
+02:20.000 --> 02:25.000
+bbb-sprite.jpg#xywh=768,144,128,72
+
+02:25.000 --> 02:30.000
+bbb-sprite.jpg#xywh=896,144,128,72
+
+02:30.000 --> 02:35.000
+bbb-sprite.jpg#xywh=1024,144,128,72
+
+02:35.000 --> 02:40.000
+bbb-sprite.jpg#xywh=1152,144,128,72
+
+02:40.000 --> 02:45.000
+bbb-sprite.jpg#xywh=1280,144,128,72
+
+02:45.000 --> 02:50.000
+bbb-sprite.jpg#xywh=0,216,128,72
+
+02:50.000 --> 02:55.000
+bbb-sprite.jpg#xywh=128,216,128,72
+
+02:55.000 --> 03:00.000
+bbb-sprite.jpg#xywh=256,216,128,72
+
+03:00.000 --> 03:05.000
+bbb-sprite.jpg#xywh=384,216,128,72
+
+03:05.000 --> 03:10.000
+bbb-sprite.jpg#xywh=512,216,128,72
+
+03:10.000 --> 03:15.000
+bbb-sprite.jpg#xywh=640,216,128,72
+
+03:15.000 --> 03:20.000
+bbb-sprite.jpg#xywh=768,216,128,72
+
+03:20.000 --> 03:25.000
+bbb-sprite.jpg#xywh=896,216,128,72
+
+03:25.000 --> 03:30.000
+bbb-sprite.jpg#xywh=1024,216,128,72
+
+03:30.000 --> 03:35.000
+bbb-sprite.jpg#xywh=1152,216,128,72
+
+03:35.000 --> 03:40.000
+bbb-sprite.jpg#xywh=1280,216,128,72
+
+03:40.000 --> 03:45.000
+bbb-sprite.jpg#xywh=0,288,128,72
+
+03:45.000 --> 03:50.000
+bbb-sprite.jpg#xywh=128,288,128,72
+
+03:50.000 --> 03:55.000
+bbb-sprite.jpg#xywh=256,288,128,72
+
+03:55.000 --> 04:00.000
+bbb-sprite.jpg#xywh=384,288,128,72
+
+04:00.000 --> 04:05.000
+bbb-sprite.jpg#xywh=512,288,128,72
+
+04:05.000 --> 04:10.000
+bbb-sprite.jpg#xywh=640,288,128,72
+
+04:10.000 --> 04:15.000
+bbb-sprite.jpg#xywh=768,288,128,72
+
+04:15.000 --> 04:20.000
+bbb-sprite.jpg#xywh=896,288,128,72
+
+04:20.000 --> 04:25.000
+bbb-sprite.jpg#xywh=1024,288,128,72
+
+04:25.000 --> 04:30.000
+bbb-sprite.jpg#xywh=1152,288,128,72
+
+04:30.000 --> 04:35.000
+bbb-sprite.jpg#xywh=1280,288,128,72
+
+04:35.000 --> 04:40.000
+bbb-sprite.jpg#xywh=0,360,128,72
+
+04:40.000 --> 04:45.000
+bbb-sprite.jpg#xywh=128,360,128,72
+
+04:45.000 --> 04:50.000
+bbb-sprite.jpg#xywh=256,360,128,72
+
+04:50.000 --> 04:55.000
+bbb-sprite.jpg#xywh=384,360,128,72
+
+04:55.000 --> 05:00.000
+bbb-sprite.jpg#xywh=512,360,128,72
+
+05:00.000 --> 05:05.000
+bbb-sprite.jpg#xywh=640,360,128,72
+
+05:05.000 --> 05:10.000
+bbb-sprite.jpg#xywh=768,360,128,72
+
+05:10.000 --> 05:15.000
+bbb-sprite.jpg#xywh=896,360,128,72
+
+05:15.000 --> 05:20.000
+bbb-sprite.jpg#xywh=1024,360,128,72
+
+05:20.000 --> 05:25.000
+bbb-sprite.jpg#xywh=1152,360,128,72
+
+05:25.000 --> 05:30.000
+bbb-sprite.jpg#xywh=1280,360,128,72
+
+05:30.000 --> 05:35.000
+bbb-sprite.jpg#xywh=0,432,128,72
+
+05:35.000 --> 05:40.000
+bbb-sprite.jpg#xywh=128,432,128,72
+
+05:40.000 --> 05:45.000
+bbb-sprite.jpg#xywh=256,432,128,72
+
+05:45.000 --> 05:50.000
+bbb-sprite.jpg#xywh=384,432,128,72
+
+05:50.000 --> 05:55.000
+bbb-sprite.jpg#xywh=512,432,128,72
+
+05:55.000 --> 06:00.000
+bbb-sprite.jpg#xywh=640,432,128,72
+
+06:00.000 --> 06:05.000
+bbb-sprite.jpg#xywh=768,432,128,72
+
+06:05.000 --> 06:10.000
+bbb-sprite.jpg#xywh=896,432,128,72
+
+06:10.000 --> 06:15.000
+bbb-sprite.jpg#xywh=1024,432,128,72
+
+06:15.000 --> 06:20.000
+bbb-sprite.jpg#xywh=1152,432,128,72
+
+06:20.000 --> 06:25.000
+bbb-sprite.jpg#xywh=1280,432,128,72
+
+06:25.000 --> 06:30.000
+bbb-sprite.jpg#xywh=0,504,128,72
+
+06:30.000 --> 06:35.000
+bbb-sprite.jpg#xywh=128,504,128,72
+
+06:35.000 --> 06:40.000
+bbb-sprite.jpg#xywh=256,504,128,72
+
+06:40.000 --> 06:45.000
+bbb-sprite.jpg#xywh=384,504,128,72
+
+06:45.000 --> 06:50.000
+bbb-sprite.jpg#xywh=512,504,128,72
+
+06:50.000 --> 06:55.000
+bbb-sprite.jpg#xywh=640,504,128,72
+
+06:55.000 --> 07:00.000
+bbb-sprite.jpg#xywh=768,504,128,72
+
+07:00.000 --> 07:05.000
+bbb-sprite.jpg#xywh=896,504,128,72
+
+07:05.000 --> 07:10.000
+bbb-sprite.jpg#xywh=1024,504,128,72
+
+07:10.000 --> 07:15.000
+bbb-sprite.jpg#xywh=1152,504,128,72
+
+07:15.000 --> 07:20.000
+bbb-sprite.jpg#xywh=1280,504,128,72
+
+07:20.000 --> 07:25.000
+bbb-sprite.jpg#xywh=0,576,128,72
+
+07:25.000 --> 07:30.000
+bbb-sprite.jpg#xywh=128,576,128,72
+
+07:30.000 --> 07:35.000
+bbb-sprite.jpg#xywh=256,576,128,72
+
+07:35.000 --> 07:40.000
+bbb-sprite.jpg#xywh=384,576,128,72
+
+07:40.000 --> 07:45.000
+bbb-sprite.jpg#xywh=512,576,128,72
+
+07:45.000 --> 07:50.000
+bbb-sprite.jpg#xywh=640,576,128,72
+
+07:50.000 --> 07:55.000
+bbb-sprite.jpg#xywh=768,576,128,72
+
+07:55.000 --> 08:00.000
+bbb-sprite.jpg#xywh=896,576,128,72
+
+08:00.000 --> 08:05.000
+bbb-sprite.jpg#xywh=1024,576,128,72
+
+08:05.000 --> 08:10.000
+bbb-sprite.jpg#xywh=1152,576,128,72
+
+08:10.000 --> 08:15.000
+bbb-sprite.jpg#xywh=1280,576,128,72
+
+08:15.000 --> 08:20.000
+bbb-sprite.jpg#xywh=0,648,128,72
+
+08:20.000 --> 08:25.000
+bbb-sprite.jpg#xywh=128,648,128,72
+
+08:25.000 --> 08:30.000
+bbb-sprite.jpg#xywh=256,648,128,72
+
+08:30.000 --> 08:35.000
+bbb-sprite.jpg#xywh=384,648,128,72
+
+08:35.000 --> 08:40.000
+bbb-sprite.jpg#xywh=512,648,128,72
+
+08:40.000 --> 08:45.000
+bbb-sprite.jpg#xywh=640,648,128,72
+
+08:45.000 --> 08:50.000
+bbb-sprite.jpg#xywh=768,648,128,72
+
+08:50.000 --> 08:55.000
+bbb-sprite.jpg#xywh=896,648,128,72
+
+08:55.000 --> 09:00.000
+bbb-sprite.jpg#xywh=1024,648,128,72
+
+09:00.000 --> 09:05.000
+bbb-sprite.jpg#xywh=1152,648,128,72
+
+09:05.000 --> 09:10.000
+bbb-sprite.jpg#xywh=1280,648,128,72
+
+09:10.000 --> 09:15.000
+bbb-sprite.jpg#xywh=0,720,128,72
+
+09:15.000 --> 09:20.000
+bbb-sprite.jpg#xywh=128,720,128,72
+
+09:20.000 --> 09:25.000
+bbb-sprite.jpg#xywh=256,720,128,72
+
+09:25.000 --> 09:30.000
+bbb-sprite.jpg#xywh=384,720,128,72
+
+09:30.000 --> 09:35.000
+bbb-sprite.jpg#xywh=512,720,128,72
+
+09:35.000 --> 09:40.000
+bbb-sprite.jpg#xywh=640,720,128,72
+
+09:40.000 --> 09:45.000
+bbb-sprite.jpg#xywh=768,720,128,72
+
+09:45.000 --> 09:50.000
+bbb-sprite.jpg#xywh=896,720,128,72
+
+09:50.000 --> 09:55.000
+bbb-sprite.jpg#xywh=1024,720,128,72
+
+09:55.000 --> 10:00.000
+bbb-sprite.jpg#xywh=1152,720,128,72

docs/assets/sample/danmuku-v2.xml

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><i><chatserver></chatserver><chatid>11724691</chatid><mission></mission><maxlimit></maxlimit><state></state><real_name></real_name><source></source><d p="0.465,5,25,26214,1480410348,11,e6d2b8ad,2704552969">泷：三叶，请记住我的名字“I LOVE YOU”</d><d p="0.465,5,25,16777215,1480410348,11,e6d2b8ad,2704553613">泷：三叶，请记住我的名字“I LOVE YOU”</d><d p="0.465,5,25,26112,1480410348,11,e6d2b8ad,2704554207">泷：三叶，请记住我的名字“I LOVE YOU”</d><d p="0.465,5,25,153,1480410349,11,e6d2b8ad,2704554619">泷：三叶，请记住我的名字“I LOVE YOU”</d><d p="0.465,5,25,6750054,1480410349,11,e6d2b8ad,2704555293">泷：三叶，请记住我的名字“I LOVE YOU”</d><d p="0,1,25,16777215,1480507709,1,f1118a60,2707380543"> 被秀了一脸恩爱</d><d p="0,1,25,16777215,1480507733,11,71176b2b,2707448679">和素未相识的网友一起配对啦！有点小激动~</d><d p="0.397,1,25,16777215,1480507736,11,30ae2d68,2707456541">配对成功，领到票了！~感谢B站！</d><d p="0.998,4,25,16711680,1480511354,11,784632ed,2707517761">长理携手同行~君之名</d><d p="0.464,5,25,16711680,1480511374,11,b430db82,2707587437">南宁单身狗的愤怒！！！！抢不到票！只能买！！！</d><d p="0,5,25,6750156,1485234066,11,e3205a8,2892019964">真·神作</d><d p="0.659,5,25,16777215,1494846439,11,6f2da951,3360883360">小僚机，我知道你会来看</d><d p="0.216,5,25,15138834,1627771015,1,ec179f6,52758493762945027">十个在哭，九个在狂笑(指鬼畜)</d><d p="1.103,1,25,16777215,1479974691,11,34d8ddf9,2689553545">我要把我欠的票都还了</d><d p="1.101,5,25,15138834,1479982003,11,7a51ca7e,2689798191">新海诚的票该还了！</d><d p="1.186,5,25,16711680,1480179684,11,9b7de097,2697536623">清露，牵手一起看吧</d><d p="1.242,5,25,41194,1480413988,1,1bf2e5d0,2704646713">呐，媳妇，我们一起看吧，然后订婚吧</d><d p="1.236,5,25,16777215,1480507737,1,4c53bc94,2707460573">你们能够理解我找妹子但是她登陆不上</d><d p="1.236,5,25,16777215,1480507737,11,4c53bc94,2707462659">最后迫不得已和室友配对成功，妹子又能登陆了</d><d p="1.984,1,25,16777215,1480842316,1,9ec9710f,2719145455">诚哥已经暴走碾压票房了</d><d p="1.362,5,25,16737843,1480932398,11,11000a3,2722220923">希望下辈子可以做个东京的帅哥</d><d p="1.687,1,25,16776960,1480939732,11,9d428cc8,2722641857">你的名字并出示你的驾驶证，你已经违规超速</d><d p="1.024,5,25,16777215,1481346068,11,a1d2e4fd,2735207423">希望下辈子可以做个东京的帅哥</d><d p="1.382,5,25,16707842,1487761657,9,d1f803de,3034151580">你的名字，茨木童子</d><d p="1.336,5,25,15138834,1501816307,1,116cf666,3647711960">结果跟基友看了。。。</d><d p="1.819,5,25,16777215,1523157002,11,42ca01f4,4446088750">bgm是黄昏之时 32秒开始</d><d p="1.662,4,25,9487136,1563115700,10,234a8c6a,18860487968030784">看的时候几乎从中间就开始哭，哭到坐车回家的路上还是在哭</d><d p="1.415,5,25,15138834,1626699746,1,ec179f6,52196839793360899">一个被鬼畜区玩坏的新海诚作品预告</d><d p="2.977,1,25,16777215,1479711804,8,a95074f6,2681576151">把之前欠诚哥的电影票还了！！！！</d><d p="2.403,1,25,14811775,1479711820,1,540181fb,2681602949">今晚逃晚自习来看</d><d p="2.261,1,25,16777215,1479867045,7,57aabaf6,2686476547">一天看 十次的节奏</d><d p="2.914,1,25,16777215,1479996640,11,6d5943e4,2690508451">已订票！！！坐标成都！！</d><d p="2.746,5,25,65535,1480064712,11,6719b12f,2692368809">清晨，我睁开眼睛时</d><d p="2.542,1,25,16777215,1480158460,7,b69f3e5a,2696198143">看完超级感动！！！！想和喜欢的人一起去看！！！你的名字是——SXY</d><d p="2.363,5,25,16776960,1480165758,5,c160358f,2696604905">钟晋我们一起去看吧</d><d p="2.311,5,25,16777215,1480233862,4,8017a98f,2699305393">荧荧。我们一起去看好吗。</d><d p="2.036,4,18,16777215,1480345885,7,d948d805,2703226509">目が覚めると</d><d p="2.601,1,25,41194,1480413988,1,1bf2e5d0,2704647585">呐，媳妇，我们一起看吧，然后订婚吧</d><d p="2.527,1,25,10079232,1480417658,11,2805d07,2704838747">小祁啊~好想和你一起去看啊</d><d p="2.98,1,25,16777215,1480507716,9,7c74b51c,2707397713">Morphine，其实Sekka想跟你一起去</d><d p="2.683,5,25,14811775,1480507722,9,4c28c99,2707414993">好的 安徒生</d><d p="2.12,5,25,16711680,1480507737,1,3c70614c,2707461715">邓云遥，我们一起去看吧~</d><d p="2.813,1,25,16777215,1480511374,6,1be1c658,2707587439">宝贝，咱俩一起看</d><d p="2.618,5,25,6737151,1480511393,11,2168da58,2707658573">同南宁，估计又得自己去淘票了！</d><d p="2.159,1,25,16777215,1480518663,9,e4a4c1fc,2707915557">不知道为什么只是看见这个开头就有种想哭的感</d><d p="2.03,1,25,14811775,1480536244,9,b647f440,2708348593">没抢到票。。。Line truncated

docs/assets/sample/danmuku-v3.xml

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><i><chatserver>chat.bilibili.com</chatserver><chatid>580770634</chatid><mission>0</mission><maxlimit>1500</maxlimit><state>0</state><real_name>0</real_name><source>k-v</source><d p="481.89400,1,25,16777215,1653692078,0,70e36298,1062005140992593408,11">可以去太湖捞捞试试（狗头保命</d><d p="265.37800,1,25,16777215,1653616680,0,88afabc0,1061372654017566976,11">好了，今天就到这，我感觉生物钟启动了，我要睡了</d><d p="777.55400,1,25,16777215,1653575476,0,9bcc00a2,1061027009955725568,11">当然是sha256(sha256(pw)+salt)</d><d p="13.88600,1,25,16777215,1653570775,0,966e6348,1060987581535333376,11">Swift～～～</d><d p="454.63400,1,25,16777215,1652717912,0,6d2da793,1053833248746068480,11">搞个共享数据库，像挖矿一样每个人算好的都可以上传</d><d p="177.13900,1,25,16777215,1652453333,0,fb4f660b,1051613793517396736,11">有点懵，但感到很震撼</d><d p="22.57900,1,25,16777215,1652430212,0,bdb52a9e,1051419843691098880,11">哈希值</d><d p="58.06700,1,25,16777215,1652368788,0,e91e8413,1050904578150762496,11">有了粉碎机，家里就只剩下粉碎机了</d><d p="275.65900,5,25,16777215,1652354865,0,397b3aab,1050787785968982016,11">《我知道了》</d><d p="774.77900,1,25,16777215,1652256952,0,542886c4,1049966433997495040,11">奥卡姆剃刀</d><d p="352.26200,1,25,16777215,1652247365,0,139fd1a2,1049886011934382080,11">加盐只是通过不确定的盐来隐藏确定的原值，增加彩虹表的制作难度</d><d p="395.65900,1,25,16777215,1652169656,0,e2308d98,1049234139607279872,11">哈希冲突</d><d p="346.72900,1,25,16777215,1652112430,0,54ba448a,1048754095986328064,11">《彩虹表》</d><d p="653.60600,1,25,16777215,1652101305,0,5ec1b46c,1048660766959520768,11">哈哈，这个可以使git库瞬间挂掉</d><d p="461.75200,1,25,16777215,1652101091,0,5ec1b46c,1048658979179723264,11">做个超级字典，把最常用的组合记录下来就行了</d><d p="94.11200,1,25,16777215,1652100683,0,5ec1b46c,1048655552173002240,11">哈希根本不是加密，只是摘要算法</d><d p="386.19500,1,25,16777215,1652097650,0,c4cc4296,1048630114516051968,11">组合数学开始了</d><d p="414.69100,1,25,16777215,1652084321,0,fafcfbb0,1048518297794048256,11">设计者自己找不到（doge</d><d p="59.62300,5,25,16707842,1652052664,0,971041b8,1048252744781197824,11">我会!</d><d p="445.99300,1,25,16777215,1651998604,0,53d75164,1047799249896694016,11">哎嘿 很勇哦</d><d p="641.24300,1,25,16777215,1651991247,0,ed4717ed,1047737536325133312,11">但是加盐还是有用</d><d p="408.97200,1,25,16777215,1651977907,0,4bd9a2d7,1047625636933279232,11">可以存在一个笼子里一只鸽子也没有</d><d p="511.84900,1,25,16777215,1651972503,0,f0826639,1047580298436422144,11">哈希冲突</d><d p="520.96700,5,25,16777215,1651967260,0,27acb016,1047536317854342656,11">列巴的列（补充</d><d p="558.75200,1,25,16777215,1651940306,0,860de6bd,1047310216540149504,11">《模仿游戏》来了</d><d p="505.15000,1,25,16777215,1651940233,0,860de6bd,1047309599239544064,11">电影《模仿游戏》</d><d p="488.98600,1,25,16777215,1651927542,0,44f3ad45,1047203142191739648,11">俺姆昂鸽瑞！</d><d p="586.48600,1,25,16777215,1651849723,0,29026d4b,1046550345196703488,11">烫烫烫哈哈哈哈哈哈！</d><d p="102.05200,1,25,16777215,1651839216,0,1336ac64,1046462209011973120,11">王小云，指数级缩短了MD5的碰撞时间</d><d p="55.82000,1,25,16777215,1651825875,0,38443e73,1046350293337386752,11">一半我做的登录都会生成一个密码盐，存在本地</d><d p="681.33200,1,25,16777215,1651819803,0,fc3f2a25,1046299363606827264,11">加盐也对付不了碰撞 只能对付彩虹表</d><d p="18.26500,1,25,16777215,1651816441,0,cf2bea01,1046271154899279872,11">A(欸)P(劈)P(劈)</d><d p="567.29500,1,25,16777215,1651812016,0,5309839c,1046234041289880832,11">你错了，图灵对这个并不熟</d><d p="504.07300,1,25,16777215,1651806653,0,58c10bda,1046189050064611584,11">加盐</d><d p="350.22000,1,25,16777215,1651798844,0,d3cbe582,1046123548323639040,11">所以要加盐</d><d p="59.55900,1,25,16777215,1651793262,0,dc9b4d74,1046076722316952576,11">哈希有很小很小的概率把两个不一样的东西映射成一个</d><d p="468.25000,1,25,16777215,1651762009,0,1e90bb3e,1045814547245588736,11">量子计算：这个我熟</d><d p="565.29300,1,25,16777215,1651722446,0,1b70a4,1045482667682264064,11">图灵说:这个我熟</d><d p="652.84300,1,25,16777215,1651713497,0,9e19237c,1045407604815323904,11">图片隐写</d><d p="391.57200,1,25,16777215,1651622858,0,d78de8a,1044647266629422336,11">吾生而有崖</d><d p="273.57700,1,25,16777215,1651509100,0,c8ed82e9,1043692993388749056,11">《也可以100行以内》</d><d p="494.74000,1,25,16777215,1651405107,0,8262fe93,1042820639116808192,11">数据库！</d><d p="753.23500,1,25,16777215,1651385801,0,ea9eeeda,1042658687317412864,11">火速换RSA!</d><d p="747.76900,1,25,16777215Line truncated

docs/assets/sample/danmuku-v4.json

@@ -0,0 +1 @@
+[{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u6253\u620f\u8d4f\u5fc3\u60a6\u76ee","time":60.139,"color":"#FFFFFF"},{"text":"\u6765\u770b\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u6f14\u6280\u5927\u8d4f","time":61.765,"color":"#FABE96"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u597d\u4e0a\u955c","time":61.857,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u6253\u620f\u975e\u5e38\u884c\u4e91\u6d41\u6c34","time":61,"color":"#FFFFFF"},{"text":"\u60f3\u5230\u4e86\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u6a21\u4eff\u522b\u4eba\u5b66\u7740\u4f9d\u504e\u7684\u6837\u5b50","time":61.486,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u4eea\u6001\u597d\u6c14\u8d28\u4f73","time":62.995,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u6253\u620f\u8d4f\u5fc3\u60a6\u76ee","time":62.925,"color":"#FFFFFF"},{"text":"\u770b\u4e86\u8fd9\u4e2a\u5267\u66f4\u559c\u6b22\u7f57\u4e91\u7199\u4e86","time":62.717,"color":"#FFFFFF"},{"text":"\u6211\u53ef\u592a\u559c\u6b22\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u7684\u7709\u773c\u4e86","time":63.529,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u554a\u554a\u554a\u554a","time":63.287,"color":"#FFFFFF"},{"text":"\u5927\u7231\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u7684\u989c\u503c\u6c14\u8d28","time":64.412,"color":"#FFFFFF"},{"text":"\u9ed1\u5316\u5427\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec","time":64.365,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u6f14\u6280\u975e\u5e38\u597d","time":65.875,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u6253\u620f\u771f\u7cbe\u5f69","time":66.107,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u8ff7\u7684\u6211\u4e94\u8ff7\u4e09\u9053","time":66.316,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u62ff\u7a33\u88ab\u8650\u5267\u672c","time":66.873,"color":"#FFFFFF"},{"text":"\u6765\u770b\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u6f14\u6280\u5927\u8d4f","time":67.407,"color":"#FABE96"},{"text":"\u770b\u5b8c\u4e0a\u5b98\u900f\u6765\u770b\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u8fa3","time":67.848,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u6253\u620f\u884c\u4e91\u6d41\u6c34","time":67.964,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u725b\u903c","time":67.454,"color":"#FFFFFF"},{"text":"\u7247\u5934\u90fd\u820d\u4e0d\u5f97\u8df3","time":68.336,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u6253\u620f\u5f88\u597d","time":68.661,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u51fa\u573a\u5373\u60ca\u8273","time":68.474,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u7684\u6bcf\u4e00\u4e2a\u89d2\u8272\u90fd\u8ba9\u4eba\u65e0\u6cd5\u6297\u62d2","time":68.984,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u786e\u5b9e\u503c\u5f97\u4e00\u770b","time":69.311,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u6211\u592a\u53ef\u4ee5\u4e86","time":69,"color":"#FFFFFF"},{"text":"\u770b\u4e86\u8fd9\u4e2a\u5267\u66f4\u559c\u6b22\u7f57\u4e91\u7199\u4e86","time":69.915,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u80fd\u628a\u60ac\u6d6e\u7684\u6fb9\u53f0\u70ec\u9970\u6f14\u7684\u8ba9\u4eba\u5171\u60c5","time":69,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6f14\u6280\u592a\u597d\u4e86","time":69.775,"color":"#FFFFFF"},{"text":"\u5439\u7206\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec","time":70.356,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u771f\u662f\u624b\u63a7\u798f\u5229","time":70.913,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u60c5\u5546\u6ee1\u5206","time":70.797,"color":"#FFFFFF"},{"text":"\u4e0b\u73ed\u5403\u996d\u5b8c\u5c31\u6253\u5f00\u7535\u8111","time":70.89,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u53e4\u88c5\u9ca8\u6211","time":70.1,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u597d\u5e05","time":70,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u7f57\u4e91\u7199","time":70.978,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u65f6\u9694\u4e94\u5e74\u7684\u53e4\u88c5\u4ed9\u4fa0\u957f\u6708\u70ec\u660e","time":70.867,"color":"#FFFFFF"},{"text":"\u5927\u7231\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u7684\u989c\u503c\u6c14\u8d28","time":71.238,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u7684\u6fb9\u53f0\u70ec\u975e\u5e38\u6709\u827a\u672f\u5438\u5f15\u529b","time":71,"color":"#FFFFFF"},{"text":"\u770b\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u7b80\u76f4\u662f\u79cd\u4eab\u53d7","time":72.515,"color":"#FFFFFF"},{"text":"\u597d\u559c\u6b22\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u7684\u8fd9\u4e2a\u611f\u89c9","time":72.33,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec\u597d\u82cf\u554a","time":72,"color":"#FFFFFF"},{"text":"\u559c\u6b22\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec","time":72.33,"color":"#FFFFFF"},{"text":"\u71ac\u591c\u770b\u7f57\u4e91\u7199\u6fb9\u53f0\u70ec","time":72.98,"color":"#FFFFFF"},{"text":"\u7f57\u4e91\u7199\u6fb9\u53fLine truncated

docs/assets/sample/subtitle.ass

@@ -1,97 +1,49 @@
-[Script Info]
-; This is an Advanced Sub Station Alpha v4+ script.
-Title: phpNOQ5Gi
-ScriptType: v4.00+
-Collisions: Normal
-PlayDepth: 0
+[Script Info]
+; // 此字幕由爱幕生成
+Synch Point:1
+ScriptType:v4.00+
+Collisions:Normal
 
 [V4+ Styles]
 Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
-Style: Default,Arial,20,&H00FFFFFF,&H0300FFFF,&H00000000,&H02000000,0,0,0,0,100,100,0,0,1,2,1,2,10,10,10,1
+Style: Default, Microsoft YaHei, 20, &H00FFFFFF, &H000092FE, &H00000000, &H82000000, 0, 0, 0, 0, 100, 100, 0, 0, 1, 1, 2, 2, 10, 10, 30, 134
+Style: Style1, Microsoft YaHei, 20, &H0000DCFC, &H0000DCFC, &H00000000, &H82000000, 0, 0, 0, 0, 100, 100, 1, 0, 1, 1, 2, 2, 10, 10, 30, 134
+Style: Style2, ZCOOL KuaiLe, 20, &H0000DDA4, &H0000DDA4, &H00334D19, &H82000000, 0, 0, 0, 0, 100, 100, 1, 0, 4, 1, 3, 2, 10, 10, 50, 134
+Style: Style3, Source Han Sans CN Medium, 28, &H009E14AB, &H009E14AB, &H00009EFB, &H82000000, 0, 0, 0, 0, 100, 100, 1, 0, 1, 1, 2, 2, 10, 10, 100, 134
 
 [Events]
 Format: Layer, Start, End, Style, Actor, MarginL, MarginR, MarginV, Effect, Text
-Dialogue: 0,0:00:01.50,0:00:03.95,Default,,0,0,0,,歌名：One More Time,One More Chance\N〖愿往事重来〗
-Dialogue: 0,0:00:04.00,0:00:05.95,Default,,0,0,0,,【新海诚动画】『秒速5センチメートル』\N《秒速5厘米》主题曲
-Dialogue: 0,0:00:06.00,0:00:08.95,Default,,0,0,0,,编曲：森俊之
-Dialogue: 0,0:00:09.00,0:00:11.95,Default,,0,0,0,,作词|作曲|演唱：山崎まさよし <山崎将义>
-Dialogue: 0,0:00:12.00,0:00:15.95,Default,,0,0,0,,
-Dialogue: 0,0:00:16.00,0:00:20.25,Default,,0,0,0,,これ以上何をう失(し)なえば\N【还要再失去什么】
-Dialogue: 0,0:00:20.30,0:00:23.25,Default,,0,0,0,,心は许(ゆる)されるの\N【才能让心得到宽恕?】
-Dialogue: 0,0:00:23.30,0:00:27.25,Default,,0,0,0,,どれ程(ほど)の痛(いた)みならば\N【还要再怎样痛苦】
-Dialogue: 0,0:00:27.30,0:00:30.25,Default,,0,0,0,,もう一度君に会(あ)える\N【才能与你再次相见】
-Dialogue: 0,0:00:30.30,0:00:33.25,Default,,0,0,0,,One more time
-Dialogue: 0,0:00:33.30,0:00:37.95,Default,,0,0,0,,季节(きせつ)よ うつろわないで\N【不愿看到季节的变迁】
-Dialogue: 0,0:00:38.00,0:00:41.05,Default,,0,0,0,,One more time
-Dialogue: 0,0:00:41.10,0:00:45.25,Default,,0,0,0,,ふざけあった时间(じかん)よ\N【曾与你嬉闹的时光啊】
-Dialogue: 0,0:00:45.30,0:00:49.25,Default,,0,0,0,,くいちがうときはいつも\N【每次争执的时候】
-Dialogue: 0,0:00:49.30,0:00:53.10,Default,,0,0,0,,仆が先(さき)に折(お)れたね\N【总是我先让步】
-Dialogue: 0,0:00:53.15,0:00:56.25,Default,,0,0,0,,わがままな性格(せいかく)が\N【你那任性的性格】
-Dialogue: 0,0:00:56.30,0:00:59.25,Default,,0,0,0,,なおさら爱(いと)しくさせた\N【反而令你更加可爱】
-Dialogue: 0,0:00:59.30,0:01:02.95,Default,,0,0,0,,One more chance
-Dialogue: 0,0:01:03.00,0:01:07.25,Default,,0,0,0,,记忆(きおく)に足(あし)を取(と)られて\N【回忆绊住我的脚步】
-Dialogue: 0,0:01:07.30,0:01:10.25,Default,,0,0,0,,One more chance
-Dialogue: 0,0:01:10.30,0:01:14.95,Default,,0,0,0,,次(つぎ)の场所を选(えら)べない\N【无法选择下个地方】
-Dialogue: 0,0:01:15.00,0:01:18.25,Default,,0,0,0,,いつでも捜(さが)しているよ\N【总是在一直寻觅】
-Dialogue: 0,0:01:18.30,0:01:21.95,Default,,0,0,0,,どっかに君の姿(すがた)を\N【寻觅着你的身影】
-Dialogue: 0,0:01:22.00,0:01:23.95,Default,,0,0,0,,向(むか)いのホーム\N【对面的月台上】
-Dialogue: 0,0:01:24.00,0:01:25.95,Default,,0,0,0,,路地裏(ろじうら)の窓(まど)\N【在小巷的窗口里】
-Dialogue: 0,0:01:26.00,0:01:29.25,Default,,0,0,0,,こんなとこにいるはずもないのに\N【尽管明知道你不可能在那里】
-Dialogue: 0,0:01:29.30,0:01:33.25,Default,,0,0,0,,愿(ねが)いがもしも叶(かな)うなら\N【若愿望能够实现】
-Dialogue: 0,0:01:33.30,0:01:36.55,Default,,0,0,0,,いますぐ君のもとへ\N【好想马上去到你身边】
-Dialogue: 0,0:01:36.60,0:01:40.25,Default,,0,0,0,,できないことは もう何もない\N【如今我再也不会有丝毫退缩】
-Dialogue: 0,0:01:40.30,0:01:47.30,Default,,0,0,0,,すべてかけて抱きしめてみせるよ\N【我会不顾一切将你紧紧拥抱】
-Dialogue: 0,0:01:47.35,0:01:51.95,Default,,0,0,0,,
-Dialogue: 0,0:01:52.00,0:01:55.25,Default,,0,0,0,,
-Dialogue: 0,0:01:55.30,0:01:59.25,Default,,0,0,0,,寂(さび)しさ纷(まぎ)らすだけなら\N【如果只是为了排遣寂寞】
-Dialogue: 0,0:01:59.30,0:02:02.95,Default,,0,0,0,,谁でもいいはずなのに\N【其实不管是谁都无所谓】
-Dialogue: 0,0:02:03.00,0:02:07.25,Default,,0,0,0,,星が落(お)ちそうな夜(よる)だから\N【唯有在星辰仿佛要坠落的夜晚】
-Dialogue: 0,0:02:07.30,0:02:10.25,Default,,0,0,0,,自分(じぶん)をいつわれない\N【我无法欺骗自己】
-Dialogue: 0,0:02:10.30,0:02:13.25,Default,,0,0,0,,One more time
-Dialogue: 0,0:02:13.30,0:02:17.25,Default,,0,0,0,,季节(きせつ)よ うつろわないで\N【不愿看到季节的变迁】
-Dialogue: 0,0:02:17.30,0:02:20.25,Default,,0,0,0,,One more time
-Dialogue: 0,0:02:20.30,0:02:24.60,Default,,0,0,0,,ふざけあった时间(じかん)よ\N【曾与你嬉闹的时光啊】
-Dialogue: 0,0:02:24.65,0:02:25.25,Default,,0,0,0,,
-Dialogue: 0,0:02:25.30,0:02:29.05,Default,,0,0,0,,いつでも捜(さが)しているよ\N【总是在一直寻觅】
-Dialogue: 0,0:02:29.10,0:02:32.25,Default,,0,0,0,,どっかに君(きみ)の姿(すがた)を\N【寻觅着你的身影】
-Dialogue: 0,0:02:32.30,0:02:34.25,Default,,0,0,0,,交差点(こうさてん)でも\N【每个十字路口】
-Dialogue: 0,0:02:34.30,0:02:36.25,Default,,0,0,0,,梦の中でも 【每次梦境之中】
-Dialogue: 0,0:02:36.30,0:02:39.95,Default,,0,0,0,,こんなとこにいるはずもないのに\N【尽管明知道你不可能在那里】
-Dialogue: 0,0:02:40.00,0:02:43.25,Default,,0,0,0,,奇迹(きせき)がもしも起(お)こるなら\N【若奇迹将会发生】
-Dialogue: 0,0:02:43.30,0:02:46.95,Default,,0,0,0,,今すぐ君に见せたい\N【我希望马上就能见到你】
-Dialogue: 0,0:02:47.00,0:02:50.25,Default,,0,0,0,,新しい朝(あさ) これからの仆\N【无论崭新的清晨 还是今后的自己】
-Dialogue: 0,0:02:50.30,0:02:57.25,Default,,0,0,0,,言えなかった「好き」という言叶も\N【或是那句没能说出口的「喜欢你」】
-Dialogue: 0,0:02:57.30,0:03:04.45,Default,,0,0,0,,
-Dialogue: 0,0:03:04.50,0:03:05.95,Default,,0,0,0,,
-Dialogue: 0,0:03:06.00,0:03:13.95,Default,,0,0,0,,夏の想い出がまわる\N【夏日的回忆在脑海中回旋】
-Dialogue: 0,0:03:14.00,0:03:20.95,Default,,0,0,0,,ふいに消(き)えた鼓动(こどう)\N【刹那间消失的悸动】
-Dialogue: 0,0:03:21.00,0:03:24.95,Default,,0,0,0,,いつでも捜(さが)しているよ\N【总是在一直寻觅】
-Dialogue: 0,0:03:25.00,0:03:27.95,Default,,0,0,0,,どっかに君の姿(すがた)を\N【寻觅着你的身影】
-Dialogue: 0,0:03:28.00,0:03:29.95,Default,,0,0,0,,明(あ)け方(がた)の街(まち)\N【在拂晓的街头】
-Dialogue: 0,0:03:30.00,0:03:31.95,Default,,0,0,0,,桜木町(さくらぎちょう)で\N【在种满樱树的小镇】
-Dialogue: 0,0:03:32.00,0:03:35.95,Default,,0,0,0,,こんなとこに来(く)るはずもないのに\N【尽管明知道你不可能在那里】
-Dialogue: 0,0:03:36.00,0:03:39.25,Default,,0,0,0,,愿(ねが)いがもしも叶(かな)うなら\N【若愿望能够实现】
-Dialogue: 0,0:03:39.30,0:03:43.05,Default,,0,0,0,,今すぐ君のもとへ\N【现在马上去到你身边】
-Dialogue: 0,0:03:43.10,0:03:46.80,Default,,0,0,0,,できないことは もう何(なに)もない\N【如今我再也不会有丝毫退缩】
-Dialogue: 0,0:03:46.85,0:03:50.60,Default,,0,0,0,,すべてかけて抱きしめてみせるよ\N【我会不顾一切紧紧将你拥抱】
-Dialogue: 0,0:03:50.65,0:03:54.25,Default,,0,0,0,,いつでも捜(さが)しているよ\N【总是在一直寻觅】
-Dialogue: 0,0:03:54.30,0:03:57.70,Default,,0,0,0,,どっかに君のかけらを\N【寻觅着你的片断】
-Dialogue: 0,0:03:57.75,0:03:59.25,Default,,0,0,0,,旅先(たびさき)の店(みせ)\N【在旅途中的小店】
-Dialogue: 0,0:03:59.30,0:04:01.45,Default,,0,0,0,,新闻(しんぶん)の隅(すみ)\N【在报纸的角落】
-Dialogue: 0,0:04:01.50,0:04:04.95,Default,,0,0,0,,こんなとこにあるはずもないのに\N【尽管明知道你不可能在那里】
-Dialogue: 0,0:04:05.00,0:04:08.25,Default,,0,0,0,,奇迹(きせき)がもしも起(お)こるなら\N【若奇迹将会发生】
-Dialogue: 0,0:04:08.30,0:04:12.25,Default,,0,0,0,,今すぐ君に见せたい\N【我希望现在就能见到你】
-Dialogue: 0,0:04:12.30,0:04:16.05,Default,,0,0,0,,新しい朝(あさ) これからの仆\N【无论崭新的清晨 还是今后的自己】
-Dialogue: 0,0:04:16.10,0:04:19.40,Default,,0,0,0,,言えなかった「好き」という言叶も\N【或是那句没能说出口的「喜欢你」】
-Dialogue: 0,0:04:19.45,0:04:19.95,Default,,0,0,0,,
-Dialogue: 0,0:04:20.00,0:04:22.95,Default,,0,0,0,,いつでも捜(さが)してしまう\N【总是在一直寻觅】
-Dialogue: 0,0:04:23.00,0:04:26.95,Default,,0,0,0,,どっかに君の笑颜(えがお)を\N【寻觅着你的笑容】
-Dialogue: 0,0:04:27.00,0:04:30.25,Default,,0,0,0,,急行(きゅうこう)待ちの 踏切(ふみきり)あたり\N【哪怕在等待列车通过的铁路道口】
-Dialogue: 0,0:04:30.30,0:04:34.25,Default,,0,0,0,,こんなとこにいるはずもないのに\N【虽然明明知道你不可能在那里】
-Dialogue: 0,0:04:34.30,0:04:37.95,Default,,0,0,0,,命(いのち)が缲(く)り返(かえ)すならば\N【如果生命能够重来】
-Dialogue: 0,0:04:38.00,0:04:41.05,Default,,0,0,0,,何度(なんど)も君のもとへ\N【无论几次我都要去你身边】
-Dialogue: 0,0:04:41.10,0:04:45.15,Default,,0,0,0,,欲(ほ)しいものなど もう何もない\N【那时我一定别无所求】
-Dialogue: 0,0:04:45.20,0:04:52.75,Default,,0,0,0,,君のほかに大切なものなど\N【再也没有什么比你更加重要】
-Dialogue: 0,0:04:52.80,0:05:10.95,Default,,0,0,0,,
-Dialogue: 0,0:05:11.00,0:05:15.45,Default,,0,0,0,,
-Dialogue: 0,0:05:15.50,0:05:25.50,Default,,0,0,0,,－－终わり－－
+Dialogue: 0,0:00:00.31,0:00:00.84,Style1,NTP,0000,0000,0000,,那一天\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}あの日
+Dialogue: 0,0:00:01.28,0:00:02.22,Style2,NTP,0000,0000,0000,,星星降落的日子\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}星が降った日
+Dialogue: 0,0:00:03.15,0:00:04.41,Style3,NTP,0000,0000,0000,,那简直是\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}それはまるで
+Dialogue: 0,0:00:04.45,0:00:04.97,Default,NTP,0000,0000,0000,,简直\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}まるで
+Dialogue: 0,0:00:05.12,0:00:06.30,Default,NTP,0000,0000,0000,,像梦中的景色一样\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}夢の景色のように
+Dialogue: 0,0:00:07.44,0:00:08.98,Default,NTP,0000,0000,0000,,美丽的景色\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}美しい眺めだった
+Dialogue: 0,0:00:24.60,0:00:25.09,Default,NTP,0000,0000,0000,,放学后\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}放課後
+Dialogue: 0,0:00:25.70,0:00:26.26,Default,NTP,0000,0000,0000,,不好\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}悪い
+Dialogue: 0,0:00:26.48,0:00:27.68,Default,NTP,0000,0000,0000,,我今天开始打工\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}おれ今日これからバイト
+Dialogue: 0,0:00:29.34,0:00:31.69,Default,NTP,0000,0000,0000,,已经讨厌这样的乡下了\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}もうこんな田舎嫌だよー
+Dialogue: 0,0:00:31.97,0:00:33.53,Default,NTP,0000,0000,0000,,讨厌这样的人生\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}こんな人生嫌だ
+Dialogue: 0,0:00:33.93,0:00:37.97,Default,NTP,0000,0000,0000,,来世请让我成为东京的帅哥吧\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}来世は東京のイケメン男子にしてくださーい
+Dialogue: 0,0:00:42.08,0:00:42.87,Default,NTP,0000,0000,0000,,哪里\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}どこ
+Dialogue: 0,0:00:43.05,0:00:44.17,Default,NTP,0000,0000,0000,,那么说来\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}そういえば
+Dialogue: 0,0:00:44.55,0:00:47.08,Default,NTP,0000,0000,0000,,我觉得好像一直做着奇怪的梦\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}ずっと変な夢を見てたような気がするんだけど
+Dialogue: 0,0:00:48.32,0:00:50.63,Default,NTP,0000,0000,0000,,别人的人生中…梦\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}別の人の人生の…夢
+Dialogue: 0,0:00:51.45,0:00:52.74,Default,NTP,0000,0000,0000,,这是什么\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}何だ これ
+Dialogue: 0,0:00:54.78,0:00:55.44,Default,NTP,0000,0000,0000,,这个，这个\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}これって
+Dialogue: 0,0:00:56.72,0:00:57.72,Default,NTP,0000,0000,0000,,这难道是\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}これってもしかして
+Dialogue: 0,0:00:58.08,0:00:59.33,Default,NTP,0000,0000,0000,,我们在梦中\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}俺達は夢の中で
+Dialogue: 0,0:01:00.14,0:01:01.20,Default,NTP,0000,0000,0000,,替换着\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}入れ替わってる
+Dialogue: 0,0:01:07.37,0:01:08.30,Default,NTP,0000,0000,0000,,确实的事情\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}確かなことが
+Dialogue: 0,0:01:08.76,0:01:09.54,Default,NTP,0000,0000,0000,,只有一个\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}一つだけある
+Dialogue: 0,0:01:10.33,0:01:11.04,Default,NTP,0000,0000,0000,,我们是\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}私達は
+Dialogue: 0,0:01:11.42,0:01:12.32,Default,NTP,0000,0000,0000,,见面的话绝对\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}会えば絶対
+Dialogue: 0,0:01:12.68,0:01:13.53,Default,NTP,0000,0000,0000,,马上就明白\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}すぐにわかる
+Dialogue: 0,0:01:14.25,0:01:15.28,Default,NTP,0000,0000,0000,,我想说\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}言おうと思ったんだ
+Dialogue: 0,0:01:16.08,0:01:17.58,Default,NTP,0000,0000,0000,,你是世界的无论在哪里\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}お前が世界のどこにいても
+Dialogue: 0,0:01:17.95,0:01:19.05,Default,NTP,0000,0000,0000,,一定要去见你\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}必ず会いに行くって
+Dialogue: 0,0:01:20.14,0:01:20.94,Default,NTP,0000,0000,0000,,你是\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}あなたは
+Dialogue: 0,0:01:21.36,0:01:21.80,Default,NTP,0000,0000,0000,,谁\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}誰
+Dialogue: 0,0:01:22.20,0:01:22.76,Default,NTP,0000,0000,0000,,你是\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}お前は
+Dialogue: 0,0:01:23.48,0:01:24.04,Default,NTP,0000,0000,0000,,谁\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}誰だ
+Dialogue: 0,0:01:25.69,0:01:26.47,Default,NTP,0000,0000,0000,,你的名字是\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}君の名は

docs/assets/sample/subtitle.cn.srt

@@ -0,0 +1,135 @@
+1
+00:00:00,306 --> 00:00:00,844
+那一天
+
+2
+00:00:01,280 --> 00:00:02,220
+星星降落的日子
+
+3
+00:00:03,148 --> 00:00:04,412
+那简直是
+
+4
+00:00:04,446 --> 00:00:04,966
+简直
+
+5
+00:00:05,120 --> 00:00:06,300
+像梦中的景色一样
+
+6
+00:00:07,438 --> 00:00:08,978
+美丽的景色
+
+7
+00:00:24,596 --> 00:00:25,089
+放学后
+
+8
+00:00:25,705 --> 00:00:26,261
+不好
+
+9
+00:00:26,475 --> 00:00:27,679
+我今天开始打工
+
+10
+00:00:29,345 --> 00:00:31,689
+已经讨厌这样的乡下了
+
+11
+00:00:31,969 --> 00:00:33,527
+讨厌这样的人生
+
+12
+00:00:33,927 --> 00:00:37,970
+来世请让我成为东京的帅哥吧
+
+13
+00:00:42,083 --> 00:00:42,874
+哪里
+
+14
+00:00:43,052 --> 00:00:44,166
+那么说来
+
+15
+00:00:44,554 --> 00:00:47,078
+我觉得好像一直做着奇怪的梦
+
+16
+00:00:48,324 --> 00:00:50,626
+别人的人生中…梦
+
+17
+00:00:51,452 --> 00:00:52,740
+这是什么
+
+18
+00:00:54,778 --> 00:00:55,442
+这个，这个
+
+19
+00:00:56,724 --> 00:00:57,724
+这难道是
+
+20
+00:00:58,076 --> 00:00:59,328
+我们在梦中
+
+21
+00:01:00,136 --> 00:01:01,202
+替换着
+
+22
+00:01:07,369 --> 00:01:08,297
+确实的事情
+
+23
+00:01:08,757 --> 00:01:09,541
+只有一个
+
+24
+00:01:10,325 --> 00:01:11,037
+我们是
+
+25
+00:01:11,425 --> 00:01:12,317
+见面的话绝对
+
+26
+00:01:12,681 --> 00:01:13,531
+马上就明白
+
+27
+00:01:14,255 --> 00:01:15,279
+我想说
+
+28
+00:01:16,075 --> 00:01:17,579
+你是世界的无论在哪里
+
+29
+00:01:17,955 --> 00:01:19,051
+一定要去见你
+
+30
+00:01:20,141 --> 00:01:20,943
+你是
+
+31
+00:01:21,361 --> 00:01:21,803
+谁
+
+32
+00:01:22,197 --> 00:01:22,759
+你是
+
+33
+00:01:23,483 --> 00:01:24,039
+谁
+
+34
+00:01:25,693 --> 00:01:26,465
+你的名字是

docs/assets/sample/subtitle.jp.srt

@@ -0,0 +1,135 @@
+1
+00:00:00,306 --> 00:00:00,844
+あの日
+
+2
+00:00:01,280 --> 00:00:02,220
+星が降った日
+
+3
+00:00:03,148 --> 00:00:04,412
+それはまるで
+
+4
+00:00:04,446 --> 00:00:04,966
+まるで
+
+5
+00:00:05,120 --> 00:00:06,300
+夢の景色のように
+
+6
+00:00:07,438 --> 00:00:08,978
+美しい眺めだった
+
+7
+00:00:24,596 --> 00:00:25,089
+放課後
+
+8
+00:00:25,705 --> 00:00:26,261
+悪い
+
+9
+00:00:26,475 --> 00:00:27,679
+おれ今日これからバイト
+
+10
+00:00:29,345 --> 00:00:31,689
+もうこんな田舎嫌だよー
+
+11
+00:00:31,969 --> 00:00:33,527
+こんな人生嫌だ
+
+12
+00:00:33,927 --> 00:00:37,970
+来世は東京のイケメン男子にしてくださーい
+
+13
+00:00:42,083 --> 00:00:42,874
+どこ
+
+14
+00:00:43,052 --> 00:00:44,166
+そういえば
+
+15
+00:00:44,554 --> 00:00:47,078
+ずっと変な夢を見てたような気がするんだけど
+
+16
+00:00:48,324 --> 00:00:50,626
+別の人の人生の…夢
+
+17
+00:00:51,452 --> 00:00:52,740
+何だ これ
+
+18
+00:00:54,778 --> 00:00:55,442
+これって
+
+19
+00:00:56,724 --> 00:00:57,724
+これってもしかして
+
+20
+00:00:58,076 --> 00:00:59,328
+俺達は夢の中で
+
+21
+00:01:00,136 --> 00:01:01,202
+入れ替わってる
+
+22
+00:01:07,369 --> 00:01:08,297
+確かなことが
+
+23
+00:01:08,757 --> 00:01:09,541
+一つだけある
+
+24
+00:01:10,325 --> 00:01:11,037
+私達は
+
+25
+00:01:11,425 --> 00:01:12,317
+会えば絶対
+
+26
+00:01:12,681 --> 00:01:13,531
+すぐにわかる
+
+27
+00:01:14,255 --> 00:01:15,279
+言おうと思ったんだ
+
+28
+00:01:16,075 --> 00:01:17,579
+お前が世界のどこにいても
+
+29
+00:01:17,955 --> 00:01:19,051
+必ず会いに行くって
+
+30
+00:01:20,141 --> 00:01:20,943
+あなたは
+
+31
+00:01:21,361 --> 00:01:21,803
+誰
+
+32
+00:01:22,197 --> 00:01:22,759
+お前は
+
+33
+00:01:23,483 --> 00:01:24,039
+誰だ
+
+34
+00:01:25,693 --> 00:01:26,465
+君の名は

docs/assets/sample/subtitle.srt

@@ -1,402 +1,169 @@
-1
-00:00:01,500 --> 00:00:03,950
-One More Time,One More Chance
-愿往事重来
+1
+00:00:00,306 --> 00:00:00,844
+那一天
+あの日
 
 2
-00:00:04,000 --> 00:00:05,950
-秒速5センチメートル
-秒速5厘米
+00:00:01,280 --> 00:00:02,220
+星星降落的日子
+星が降った日
 
 3
-00:00:06,000 --> 00:00:08,950
-编曲：森俊之
+00:00:03,148 --> 00:00:04,412
+那简直是
+それはまるで
 
 4
-00:00:09,000 --> 00:00:11,950
-山崎まさよし
-山崎将义
+00:00:04,446 --> 00:00:04,966
+简直
+まるで
 
 5
-00:00:12,000 --> 00:00:15,950
-
+00:00:05,120 --> 00:00:06,300
+像梦中的景色一样
+夢の景色のように
 
 6
-00:00:16,000 --> 00:00:20,250
-これ以上何をう失(し)なえば 
-还要再失去什么
+00:00:07,438 --> 00:00:08,978
+美丽的景色
+美しい眺めだった
 
 7
-00:00:20,300 --> 00:00:23,250
-心は许(ゆる)されるの 
-才能让心得到宽恕?
+00:00:24,596 --> 00:00:25,089
+放学后
+放課後
 
 8
-00:00:23,300 --> 00:00:27,250
-どれ程(ほど)の痛(いた)みならば 
-还要再怎样痛苦
+00:00:25,705 --> 00:00:26,261
+不好
+悪い
 
 9
-00:00:27,300 --> 00:00:30,250
-もう一度君に会(あ)える 
-才能与你再次相见
+00:00:26,475 --> 00:00:27,679
+我今天开始打工
+おれ今日これからバイト
 
 10
-00:00:30,300 --> 00:00:33,250
-One more time
+00:00:29,345 --> 00:00:31,689
+已经讨厌这样的乡下了
+もうこんな田舎嫌だよー
 
 11
-00:00:33,300 --> 00:00:37,950
-季节(きせつ)よ うつろわないで 
-不愿看到季节的变迁
+00:00:31,969 --> 00:00:33,527
+讨厌这样的人生
+こんな人生嫌だ
 
 12
-00:00:38,000 --> 00:00:41,050
-One more time
+00:00:33,927 --> 00:00:37,970
+来世请让我成为东京的帅哥吧
+来世は東京のイケメン男子にしてくださーい
 
 13
-00:00:41,100 --> 00:00:45,250
-ふざけあった时间(じかん)よ 
-曾与你嬉闹的时光啊
+00:00:42,083 --> 00:00:42,874
+哪里
+どこ
 
 14
-00:00:45,300 --> 00:00:49,250
-くいちがうときはいつも 
-每次争执的时候
+00:00:43,052 --> 00:00:44,166
+那么说来
+そういえば
 
 15
-00:00:49,300 --> 00:00:53,100
-仆が先(さき)に折(お)れたね 
-总是我先让步
+00:00:44,554 --> 00:00:47,078
+我觉得好像一直做着奇怪的梦
+ずっと変な夢を見てたような気がするんだけど
 
 16
-00:00:53,150 --> 00:00:56,250
-わがままな性格(せいかく)が 
-你那任性的性格
+00:00:48,324 --> 00:00:50,626
+别人的人生中…梦
+別の人の人生の…夢
 
 17
-00:00:56,300 --> 00:00:59,250
-なおさら爱(いと)しくさせた 
-反而令你更加可爱
+00:00:51,452 --> 00:00:52,740
+这是什么
+何だ これ
 
 18
-00:00:59,300 --> 00:01:02,950
-One more chance
+00:00:54,778 --> 00:00:55,442
+这个，这个
+これって
 
 19
-00:01:03,000 --> 00:01:07,250
-记忆(きおく)に足(あし)を取(と)られて 
-回忆绊住我的脚步
+00:00:56,724 --> 00:00:57,724
+这难道是
+これってもしかして
 
 20
-00:01:07,300 --> 00:01:10,250
-One more chance
+00:00:58,076 --> 00:00:59,328
+我们在梦中
+俺達は夢の中で
 
 21
-00:01:10,300 --> 00:01:14,950
-次(つぎ)の场所を选(えら)べない 
-无法选择下个地方
+00:01:00,136 --> 00:01:01,202
+替换着
+入れ替わってる
 
 22
-00:01:15,000 --> 00:01:18,250
-いつでも捜(さが)しているよ 
-总是在一直寻觅
+00:01:07,369 --> 00:01:08,297
+确实的事情
+確かなことが
 
 23
-00:01:18,300 --> 00:01:21,950
-どっかに君の姿(すがた)を 
-寻觅着你的身影
+00:01:08,757 --> 00:01:09,541
+只有一个
+一つだけある
 
 24
-00:01:22,000 --> 00:01:23,950
-向(むか)いのホーム 
-对面的月台上
+00:01:10,325 --> 00:01:11,037
+我们是
+私達は
 
 25
-00:01:24,000 --> 00:01:25,950
-路地裏(ろじうら)の窓(まど) 
-在小巷的窗口里
+00:01:11,425 --> 00:01:12,317
+见面的话绝对
+会えば絶対
 
 26
-00:01:26,000 --> 00:01:29,250
-こんなとこにいるはずもないのに
-尽管明知道你不可能在那里
+00:01:12,681 --> 00:01:13,531
+马上就明白
+すぐにわかる
 
 27
-00:01:29,300 --> 00:01:33,250
-愿(ねが)いがもしも叶(かな)うなら 
-若愿望能够实现
+00:01:14,255 --> 00:01:15,279
+我想说
+言おうと思ったんだ
 
 28
-00:01:33,300 --> 00:01:36,550
-いますぐ君のもとへ 
-好想马上去到你身边
+00:01:16,075 --> 00:01:17,579
+你是世界的无论在哪里
+お前が世界のどこにいても
 
 29
-00:01:36,600 --> 00:01:40,250
-できないことは もう何もない 
-如今我再也不会有丝毫退缩
+00:01:17,955 --> 00:01:19,051
+一定要去见你
+必ず会いに行くって
 
 30
-00:01:40,300 --> 00:01:47,300
-すべてかけて抱きしめてみせるよ 
-我会不顾一切将你紧紧拥抱
+00:01:20,141 --> 00:01:20,943
+你是
+あなたは
 
 31
-00:01:47,350 --> 00:01:51,950
-
+00:01:21,361 --> 00:01:21,803
+谁
+誰
 
 32
-00:01:52,000 --> 00:01:55,250
-
+00:01:22,197 --> 00:01:22,759
+你是
+お前は
 
 33
-00:01:55,300 --> 00:01:59,250
-寂(さび)しさ纷(まぎ)らすだけなら
-如果只是为了排遣寂寞
+00:01:23,483 --> 00:01:24,039
+谁
+誰だ
 
 34
-00:01:59,300 --> 00:02:02,950
-谁でもいいはずなのに 
-其实不管是谁都无所谓
-
-35
-00:02:03,000 --> 00:02:07,250
-星が落(お)ちそうな夜(よる)だから 
-唯有在星辰仿佛要坠落的夜晚
-
-36
-00:02:07,300 --> 00:02:10,250
-自分(じぶん)をいつわれない 
-我无法欺骗自己
-
-37
-00:02:10,300 --> 00:02:13,250
-One more time
-
-38
-00:02:13,300 --> 00:02:17,250
-季节(きせつ)よ うつろわないで 
-不愿看到季节的变迁
-
-39
-00:02:17,300 --> 00:02:20,250
-One more time
-
-40
-00:02:20,300 --> 00:02:24,600
-ふざけあった时间(じかん)よ 
-曾与你嬉闹的时光啊
-
-41
-00:02:24,650 --> 00:02:25,250
-
-
-42
-00:02:25,300 --> 00:02:29,050
-いつでも捜(さが)しているよ 
-总是在一直寻觅
-
-43
-00:02:29,100 --> 00:02:32,250
-どっかに君(きみ)の姿(すがた)を 
-寻觅着你的身影
-
-44
-00:02:32,300 --> 00:02:34,250
-交差点(こうさてん)でも 
-每个十字路口
-
-45
-00:02:34,300 --> 00:02:36,250
-梦の中でも 每次梦境之中
-
-46
-00:02:36,300 --> 00:02:39,950
-こんなとこにいるはずもないのに 
-尽管明知道你不可能在那里
-
-47
-00:02:40,000 --> 00:02:43,250
-奇迹(きせき)がもしも起(お)こるなら 
-若奇迹将会发生
-
-48
-00:02:43,300 --> 00:02:46,950
-今すぐ君に见せたい 
-我希望马上就能见到你
-
-49
-00:02:47,000 --> 00:02:50,250
-新しい朝(あさ) これからの仆 
-无论崭新的清晨 还是今后的自己
-
-50
-00:02:50,300 --> 00:02:57,250
-言えなかった「好き」という言叶も 
-或是那句没能说出口的「喜欢你」
-
-51
-00:02:57,300 --> 00:03:04,450
-
-
-52
-00:03:04,500 --> 00:03:05,950
-
-
-53
-00:03:06,000 --> 00:03:13,950
-夏の想い出がまわる 
-夏日的回忆在脑海中回旋
-
-54
-00:03:14,000 --> 00:03:20,950
-ふいに消(き)えた鼓动(こどう) 
-刹那间消失的悸动
-
-55
-00:03:21,000 --> 00:03:24,950
-いつでも捜(さが)しているよ 
-总是在一直寻觅
-
-57
-00:03:25,000 --> 00:03:27,950
-どっかに君の姿(すがた)を 
-寻觅着你的身影
-
-58
-00:03:28,000 --> 00:03:29,950
-明(あ)け方(がた)の街(まち) 
-在拂晓的街头
-
-59
-00:03:30,000 --> 00:03:31,950
-桜木町(さくらぎちょう)で 
-在种满樱树的小镇
-
-60
-00:03:32,000 --> 00:03:35,950
-こんなとこに来(く)るはずもないのに 
-尽管明知道你不可能在那里
-
-61
-00:03:36,000 --> 00:03:39,250
-愿(ねが)いがもしも叶(かな)うなら 
-若愿望能够实现
-
-62
-00:03:39,300 --> 00:03:43,050
-今すぐ君のもとへ 
-现在马上去到你身边
-
-63
-00:03:43,100 --> 00:03:46,800
-できないことは もう何(なに)もない 
-如今我再也不会有丝毫退缩
-
-64
-00:03:46,850 --> 00:03:50,600
-すべてかけて抱きしめてみせるよ 
-我会不顾一切紧紧将你拥抱
-
-65
-00:03:50,650 --> 00:03:54,250
-いつでも捜(さが)しているよ 
-总是在一直寻觅
-
-66
-00:03:54,300 --> 00:03:57,700
-どっかに君のかけらを 
-寻觅着你的片断
-
-67
-00:03:57,750 --> 00:03:59,250
-旅先(たびさき)の店(みせ) 
-在旅途中的小店
-
-68
-00:03:59,300 --> 00:04:01,450
-新闻(しんぶん)の隅(すみ) 
-在报纸的角落
-
-69
-00:04:01,500 --> 00:04:04,950
-こんなとこにあるはずもないのに 
-尽管明知道你不可能在那里
-
-70
-00:04:05,000 --> 00:04:08,250
-奇迹(きせき)がもしも起(お)こるなら 
-若奇迹将会发生
-
-71
-00:04:08,300 --> 00:04:12,250
-今すぐ君に见せたい 
-我希望现在就能见到你
-
-72
-00:04:12,300 --> 00:04:16,050
-新しい朝(あさ) これからの仆 
-无论崭新的清晨 还是今后的自己
-
-73
-00:04:16,100 --> 00:04:19,400
-言えなかった「好き」という言叶も 
-或是那句没能说出口的「喜欢你」
-
-74
-00:04:19,450 --> 00:04:19,950
-
-
-75
-00:04:20,000 --> 00:04:22,950
-いつでも捜(さが)してしまう 
-总是在一直寻觅
-
-76
-00:04:23,000 --> 00:04:26,950
-どっかに君の笑颜(えがお)を 
-寻觅着你的笑容
-
-77
-00:04:27,000 --> 00:04:30,250
-急行(きゅうこう)待ちの 踏切(ふみきり)あたり
-哪怕在等待列车通过的铁路道口
-
-78
-00:04:30,300 --> 00:04:34,250
-こんなとこにいるはずもないのに 
-虽然明明知道你不可能在那里
-
-79
-00:04:34,300 --> 00:04:37,950
-命(いのち)が缲(く)り返(かえ)すならば 
-如果生命能够重来
-
-80
-00:04:38,000 --> 00:04:41,050
-何度(なんど)も君のもとへ 
-无论几次我都要去你身边
-
-81
-00:04:41,100 --> 00:04:45,150
-欲(ほ)しいものなど もう何もない 
-那时我一定别无所求
-
-82
-00:04:45,200 --> 00:04:52,750
-君のほかに大切なものなど 
-再也没有什么比你更加重要
-
-83
-00:04:52,800 --> 00:05:10,950
-
-
-84
-00:05:11,000 --> 00:05:15,450
-
-
-85
-00:05:15,500 --> 00:05:25,500
-－－终わり－－
-
+00:01:25,693 --> 00:01:26,465
+你的名字是
+君の名は

docs/assets/sample/subtitle.vtt

@@ -1,404 +1,171 @@
-WEBVTT
+WEBVTT
 
 1
-00:00:01.500 --> 00:00:03.950
-歌名：One More Time,One More Chance
-愿往事重来
+00:00:00.306 --> 00:00:00.844
+那一天
+あの日
 
 2
-00:00:04.000 --> 00:00:05.950
-秒速5センチメートル
-秒速5厘米
+00:00:01.280 --> 00:00:02.220
+星星降落的日子
+星が降った日
 
 3
-00:00:06.000 --> 00:00:08.950
-编曲：森俊之
+00:00:03.148 --> 00:00:04.412
+那简直是
+それはまるで
 
 4
-00:00:09.000 --> 00:00:11.950
-山崎まさよし
-山崎将义
+00:00:04.446 --> 00:00:04.966
+简直
+まるで
 
 5
-00:00:12.000 --> 00:00:15.950
-
+00:00:05.120 --> 00:00:06.300
+像梦中的景色一样
+夢の景色のように
 
 6
-00:00:16.000 --> 00:00:20.250
-これ以上何をう失(し)なえば 
-还要再失去什么
+00:00:07.438 --> 00:00:08.978
+美丽的景色
+美しい眺めだった
 
 7
-00:00:20.300 --> 00:00:23.250
-心は许(ゆる)されるの 
-才能让心得到宽恕?
+00:00:24.596 --> 00:00:25.089
+放学后
+放課後
 
 8
-00:00:23.300 --> 00:00:27.250
-どれ程(ほど)の痛(いた)みならば 
-还要再怎样痛苦
+00:00:25.705 --> 00:00:26.261
+不好
+悪い
 
 9
-00:00:27.300 --> 00:00:30.250
-もう一度君に会(あ)える 
-才能与你再次相见
+00:00:26.475 --> 00:00:27.679
+我今天开始打工
+おれ今日これからバイト
 
 10
-00:00:30.300 --> 00:00:33.250
-One more time
+00:00:29.345 --> 00:00:31.689
+已经讨厌这样的乡下了
+もうこんな田舎嫌だよー
 
 11
-00:00:33.300 --> 00:00:37.950
-季节(きせつ)よ うつろわないで 
-不愿看到季节的变迁
+00:00:31.969 --> 00:00:33.527
+讨厌这样的人生
+こんな人生嫌だ
 
 12
-00:00:38.000 --> 00:00:41.050
-One more time
+00:00:33.927 --> 00:00:37.970
+来世请让我成为东京的帅哥吧
+来世は東京のイケメン男子にしてくださーい
 
 13
-00:00:41.100 --> 00:00:45.250
-ふざけあった时间(じかん)よ 
-曾与你嬉闹的时光啊
+00:00:42.083 --> 00:00:42.874
+哪里
+どこ
 
 14
-00:00:45.300 --> 00:00:49.250
-くいちがうときはいつも 
-每次争执的时候
+00:00:43.052 --> 00:00:44.166
+那么说来
+そういえば
 
 15
-00:00:49.300 --> 00:00:53.100
-仆が先(さき)に折(お)れたね 
-总是我先让步
+00:00:44.554 --> 00:00:47.078
+我觉得好像一直做着奇怪的梦
+ずっと変な夢を見てたような気がするんだけど
 
 16
-00:00:53.150 --> 00:00:56.250
-わがままな性格(せいかく)が 
-你那任性的性格
+00:00:48.324 --> 00:00:50.626
+别人的人生中…梦
+別の人の人生の…夢
 
 17
-00:00:56.300 --> 00:00:59.250
-なおさら爱(いと)しくさせた 
-反而令你更加可爱
+00:00:51.452 --> 00:00:52.740
+这是什么
+何だ これ
 
 18
-00:00:59.300 --> 00:01:02.950
-One more chance
+00:00:54.778 --> 00:00:55.442
+这个，这个
+これって
 
 19
-00:01:03.000 --> 00:01:07.250
-记忆(きおく)に足(あし)を取(と)られて 
-回忆绊住我的脚步
+00:00:56.724 --> 00:00:57.724
+这难道是
+これってもしかして
 
 20
-00:01:07.300 --> 00:01:10.250
-One more chance
+00:00:58.076 --> 00:00:59.328
+我们在梦中
+俺達は夢の中で
 
 21
-00:01:10.300 --> 00:01:14.950
-次(つぎ)の场所を选(えら)べない 
-无法选择下个地方
+00:01:00.136 --> 00:01:01.202
+替换着
+入れ替わってる
 
 22
-00:01:15.000 --> 00:01:18.250
-いつでも捜(さが)しているよ 
-总是在一直寻觅
+00:01:07.369 --> 00:01:08.297
+确实的事情
+確かなことが
 
 23
-00:01:18.300 --> 00:01:21.950
-どっかに君の姿(すがた)を 
-寻觅着你的身影
+00:01:08.757 --> 00:01:09.541
+只有一个
+一つだけある
 
 24
-00:01:22.000 --> 00:01:23.950
-向(むか)いのホーム 
-对面的月台上
+00:01:10.325 --> 00:01:11.037
+我们是
+私達は
 
 25
-00:01:24.000 --> 00:01:25.950
-路地裏(ろじうら)の窓(まど) 
-在小巷的窗口里
+00:01:11.425 --> 00:01:12.317
+见面的话绝对
+会えば絶対
 
 26
-00:01:26.000 --> 00:01:29.250
-こんなとこにいるはずもないのに
-尽管明知道你不可能在那里
+00:01:12.681 --> 00:01:13.531
+马上就明白
+すぐにわかる
 
 27
-00:01:29.300 --> 00:01:33.250
-愿(ねが)いがもしも叶(かな)うなら 
-若愿望能够实现
+00:01:14.255 --> 00:01:15.279
+我想说
+言おうと思ったんだ
 
 28
-00:01:33.300 --> 00:01:36.550
-いますぐ君のもとへ 
-好想马上去到你身边
+00:01:16.075 --> 00:01:17.579
+你是世界的无论在哪里
+お前が世界のどこにいても
 
 29
-00:01:36.600 --> 00:01:40.250
-できないことは もう何もない 
-如今我再也不会有丝毫退缩
+00:01:17.955 --> 00:01:19.051
+一定要去见你
+必ず会いに行くって
 
 30
-00:01:40.300 --> 00:01:47.300
-すべてかけて抱きしめてみせるよ 
-我会不顾一切将你紧紧拥抱
+00:01:20.141 --> 00:01:20.943
+你是
+あなたは
 
 31
-00:01:47.350 --> 00:01:51.950
-
+00:01:21.361 --> 00:01:21.803
+谁
+誰
 
 32
-00:01:52.000 --> 00:01:55.250
-
+00:01:22.197 --> 00:01:22.759
+你是
+お前は
 
 33
-00:01:55.300 --> 00:01:59.250
-寂(さび)しさ纷(まぎ)らすだけなら
-如果只是为了排遣寂寞
+00:01:23.483 --> 00:01:24.039
+谁
+誰だ
 
 34
-00:01:59.300 --> 00:02:02.950
-谁でもいいはずなのに 
-其实不管是谁都无所谓
-
-35
-00:02:03.000 --> 00:02:07.250
-星が落(お)ちそうな夜(よる)だから 
-唯有在星辰仿佛要坠落的夜晚
-
-36
-00:02:07.300 --> 00:02:10.250
-自分(じぶん)をいつわれない 
-我无法欺骗自己
-
-37
-00:02:10.300 --> 00:02:13.250
-One more time
-
-38
-00:02:13.300 --> 00:02:17.250
-季节(きせつ)よ うつろわないで 
-不愿看到季节的变迁
-
-39
-00:02:17.300 --> 00:02:20.250
-One more time
-
-40
-00:02:20.300 --> 00:02:24.600
-ふざけあった时间(じかん)よ 
-曾与你嬉闹的时光啊
-
-41
-00:02:24.650 --> 00:02:25.250
-
-
-42
-00:02:25.300 --> 00:02:29.050
-いつでも捜(さが)しているよ 
-总是在一直寻觅
-
-43
-00:02:29.100 --> 00:02:32.250
-どっかに君(きみ)の姿(すがた)を 
-寻觅着你的身影
-
-44
-00:02:32.300 --> 00:02:34.250
-交差点(こうさてん)でも 
-每个十字路口
-
-45
-00:02:34.300 --> 00:02:36.250
-梦の中でも 每次梦境之中
-
-46
-00:02:36.300 --> 00:02:39.950
-こんなとこにいるはずもないのに 
-尽管明知道你不可能在那里
-
-47
-00:02:40.000 --> 00:02:43.250
-奇迹(きせき)がもしも起(お)こるなら 
-若奇迹将会发生
-
-48
-00:02:43.300 --> 00:02:46.950
-今すぐ君に见せたい 
-我希望马上就能见到你
-
-49
-00:02:47.000 --> 00:02:50.250
-新しい朝(あさ) これからの仆 
-无论崭新的清晨 还是今后的自己
-
-50
-00:02:50.300 --> 00:02:57.250
-言えなかった「好き」という言叶も 
-或是那句没能说出口的「喜欢你」
-
-51
-00:02:57.300 --> 00:03:04.450
-
-
-52
-00:03:04.500 --> 00:03:05.950
-
-
-53
-00:03:06.000 --> 00:03:13.950
-夏の想い出がまわる 
-夏日的回忆在脑海中回旋
-
-54
-00:03:14.000 --> 00:03:20.950
-ふいに消(き)えた鼓动(こどう) 
-刹那间消失的悸动
-
-55
-00:03:21.000 --> 00:03:24.950
-いつでも捜(さが)しているよ 
-总是在一直寻觅
-
-56
-00:03:25.000 --> 00:03:27.950
-どっかに君の姿(すがた)を 
-寻觅着你的身影
-
-57
-00:03:28.000 --> 00:03:29.950
-明(あ)け方(がた)の街(まち) 
-在拂晓的街头
-
-58
-00:03:30.000 --> 00:03:31.950
-桜木町(さくらぎちょう)で 
-在种满樱树的小镇
-
-59
-00:03:32.000 --> 00:03:35.950
-こんなとこに来(く)るはずもないのに 
-尽管明知道你不可能在那里
-
-60
-00:03:36.000 --> 00:03:39.250
-愿(ねが)いがもしも叶(かな)うなら 
-若愿望能够实现
-
-61
-00:03:39.300 --> 00:03:43.050
-今すぐ君のもとへ 
-现在马上去到你身边
-
-62
-00:03:43.100 --> 00:03:46.800
-できないことは もう何(なに)もない 
-如今我再也不会有丝毫退缩
-
-63
-00:03:46.850 --> 00:03:50.600
-すべてかけて抱きしめてみせるよ 
-我会不顾一切紧紧将你拥抱
-
-64
-00:03:50.650 --> 00:03:54.250
-いつでも捜(さが)しているよ 
-总是在一直寻觅
-
-65
-00:03:54.300 --> 00:03:57.700
-どっかに君のかけらを 
-寻觅着你的片断
-
-66
-00:03:57.750 --> 00:03:59.250
-旅先(たびさき)の店(みせ) 
-在旅途中的小店
-
-67
-00:03:59.300 --> 00:04:01.450
-新闻(しんぶん)の隅(すみ) 
-在报纸的角落
-
-68
-00:04:01.500 --> 00:04:04.950
-こんなとこにあるはずもないのに 
-尽管明知道你不可能在那里
-
-69
-00:04:05.000 --> 00:04:08.250
-奇迹(きせき)がもしも起(お)こるなら 
-若奇迹将会发生
-
-70
-00:04:08.300 --> 00:04:12.250
-今すぐ君に见せたい 
-我希望现在就能见到你
-
-71
-00:04:12.300 --> 00:04:16.050
-新しい朝(あさ) これからの仆 
-无论崭新的清晨 还是今后的自己
-
-72
-00:04:16.100 --> 00:04:19.400
-言えなかった「好き」という言叶も 
-或是那句没能说出口的「喜欢你」
-
-73
-00:04:19.450 --> 00:04:19.950
-
-
-74
-00:04:20.000 --> 00:04:22.950
-いつでも捜(さが)してしまう 
-总是在一直寻觅
-
-75
-00:04:23.000 --> 00:04:26.950
-どっかに君の笑颜(えがお)を 
-寻觅着你的笑容
-
-76
-00:04:27.000 --> 00:04:30.250
-急行(きゅうこう)待ちの 踏切(ふみきり)あたり
-哪怕在等待列车通过的铁路道口
-
-77
-00:04:30.300 --> 00:04:34.250
-こんなとこにいるはずもないのに 
-虽然明明知道你不可能在那里
-
-78
-00:04:34.300 --> 00:04:37.950
-命(いのち)が缲(く)り返(かえ)すならば 
-如果生命能够重来
-
-79
-00:04:38.000 --> 00:04:41.050
-何度(なんど)も君のもとへ 
-无论几次我都要去你身边
-
-80
-00:04:41.100 --> 00:04:45.150
-欲(ほ)しいものなど もう何もない 
-那时我一定别无所求
-
-81
-00:04:45.200 --> 00:04:52.750
-君のほかに大切なものなど 
-再也没有什么比你更加重要
-
-82
-00:04:52.800 --> 00:05:10.950
-
-
-83
-00:05:11.000 --> 00:05:15.450
-
-
-84
-00:05:15.500 --> 00:05:25.500
-－－终わり－－
-
+00:01:25.693 --> 00:01:26.465
+你的名字是
+君の名は