diff --git a/docs/assets/example/backlight.js b/docs/assets/example/backlight.js
index 06ab52b1b..0583aa641 100644
--- a/docs/assets/example/backlight.js
+++ b/docs/assets/example/backlight.js
@@ -1,7 +1,6 @@
-var url = 'https://zhw2590582.github.io/assets-cdn';
var art = new Artplayer({
container: '.artplayer-app',
- url: url + '/video/your-name.mp4',
+ url: '/assets/sample/video.mp4',
autoSize: true,
light: true,
localVideo: true,
diff --git a/docs/assets/example/blur.js b/docs/assets/example/blur.js
index d205bbb49..ba815af0f 100644
--- a/docs/assets/example/blur.js
+++ b/docs/assets/example/blur.js
@@ -1,7 +1,6 @@
-var url = 'https://zhw2590582.github.io/assets-cdn';
var art = new Artplayer({
container: '.artplayer-app',
- url: url + '/video/your-name.mp4',
+ url: '/assets/sample/video.mp4',
autoSize: true,
moreVideoAttr: {
crossOrigin: 'anonymous',
diff --git a/docs/assets/example/danmuku.js b/docs/assets/example/danmuku.js
index 9bd40c3b5..1882fc70f 100644
--- a/docs/assets/example/danmuku.js
+++ b/docs/assets/example/danmuku.js
@@ -1,14 +1,13 @@
-var url = 'https://zhw2590582.github.io/assets-cdn';
var art = new Artplayer({
container: '.artplayer-app',
- url: url + '/video/your-name.mp4',
+ url: '/assets/sample/video.mp4',
autoSize: true,
setting: true,
playbackRate: true,
fullscreenWeb: true,
plugins: [
artplayerPluginDanmuku({
- danmuku: url + '/danmuku/your-name.xml',
+ danmuku: '/assets/sample/danmuku.xml',
speed: 5,
maxlength: 50,
margin: [10, 100],
diff --git a/docs/assets/example/gif.js b/docs/assets/example/gif.js
index d1338512f..7f25f4c35 100644
--- a/docs/assets/example/gif.js
+++ b/docs/assets/example/gif.js
@@ -1,7 +1,6 @@
-var url = 'https://zhw2590582.github.io/assets-cdn';
var art = new Artplayer({
container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+ url: '/assets/sample/video.mp4',
title: '【新海诚动画】『秒速5センチメートル』',
autoSize: true,
localVideo: true,
diff --git a/docs/assets/example/github.js b/docs/assets/example/github.js
index d19c5fa12..906262be0 100644
--- a/docs/assets/example/github.js
+++ b/docs/assets/example/github.js
@@ -6,10 +6,9 @@ var danmuku = new ArtplayerToolGithub({
clientSecret: '7bb6fa67ef6e525e5bd5fda46cd3925ecc4a3760',
});
-var url = 'https://zhw2590582.github.io/assets-cdn';
var art = new Artplayer({
container: '.artplayer-app',
- url: url + '/video/your-name.mp4',
+ url: '/assets/sample/video.mp4',
autoSize: true,
controls: [
{
diff --git a/docs/assets/example/index.js b/docs/assets/example/index.js
index 7e5fbfe14..b285d2479 100644
--- a/docs/assets/example/index.js
+++ b/docs/assets/example/index.js
@@ -1,9 +1,8 @@
-var url = 'https://zhw2590582.github.io/assets-cdn';
var art = new Artplayer({
container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+ url: '/assets/sample/video.mp4',
title: 'One More Time One More Chance',
- poster: url + '/image/one-more-time-one-more-chance-poster.jpg',
+ poster: '/assets/sample/poster.jpg',
volume: 0.5,
isLive: false,
muted: false,
@@ -59,22 +58,22 @@ var art = new Artplayer({
{
default: true,
name: 'SD 480P',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+ url: '/assets/sample/video.mp4',
},
{
name: 'HD 720P',
- url: url + '/video/one-more-time-one-more-chance-720p.mp4',
+ url: '/assets/sample/video.mp4',
},
],
thumbnails: {
- url: url + '/image/one-more-time-one-more-chance-thumbnails.png',
+ url: '/assets/sample/thumbnails.png',
number: 100,
width: 160,
height: 90,
column: 10,
},
subtitle: {
- url: url + '/subtitle/one-more-time-one-more-chance.srt',
+ url: '/assets/sample/subtitle.srt',
style: {
color: '#03A9F4',
},
diff --git a/docs/assets/example/playlist.js b/docs/assets/example/playlist.js
deleted file mode 100644
index 7a50bb5b4..000000000
--- a/docs/assets/example/playlist.js
+++ /dev/null
@@ -1,45 +0,0 @@
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/your-name.mp4',
- poster: url + '/image/one-more-time-one-more-chance-poster.jpg',
- autoSize: true,
- controls: [
- {
- name: 'playlist',
- position: 'right',
- html: 'Playlist',
- click: () => {
- art.plugins.artplayerPluginPlaylist.show();
- },
- },
- {
- name: 'prev',
- position: 'right',
- html: 'Prev',
- click: () => {
- art.plugins.artplayerPluginPlaylist.prev();
- },
- },
- {
- name: 'next',
- position: 'right',
- html: 'Next',
- click: () => {
- art.plugins.artplayerPluginPlaylist.next();
- },
- },
- ],
- plugins: [
- artplayerPluginPlaylist([
- {
- title: 'Your name',
- url: url + '/video/your-name.mp4',
- },
- {
- title: 'One more time one more chance',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- },
- ]),
- ],
-});
diff --git a/docs/assets/sample/danmuku.xml b/docs/assets/sample/danmuku.xml
new file mode 100644
index 000000000..bedb5b671
--- /dev/null
+++ b/docs/assets/sample/danmuku.xml
@@ -0,0 +1 @@
+chat.bilibili.com346009950100000k-v成长是不是意味着失去看了十几变了你和我走过6年学生时代，但却无奈的止步于现实一点时间，一个机会。原版无可替代我喜欢你啊！！！！泪目惹！！？谁发明的火车，拉出去斩了。我希望自己能成为一个有故事的人歌词感人时间和距离冲淡了一切大爱秒五每一秒都是壁纸系列是的循环已开，爬不出去了经费燃烧这里的星空真的让我惊艳了好久悲剧在男孩踌躇时就已酿成小时候，男孩犹豫不前，女孩在等他，也是在“等”他长大后，男孩依然在过去徘徊，但女孩已不再等他了这就是他们为什么总在平行线上悲剧在男孩开始的犹豫时已酿成，只能补救不能避免像我......如今再想起平行线上的她，感觉已来不及了回忆中的女孩还在等他，而现实的女孩已不再等他了为什么不能有个明理看到贵树的镜头还有那句没能说出的我爱你看红字看了秒五心堵得难受现在有时候还会刻意去路过一些有回忆的地方 明明已经过去好久了贵树是程序员好想哭如果奇迹能够发生我来的比较迟明理我扬起嘴角看着我那一败涂地的坚持，仅此一次、仅此一生、看了四遍还是蛮心疼女二的这首歌之前是两人的独白我觉得完美没有遗憾不敢看第二遍的电影再给我一次机会我还是说不出，毕竟这是现实啊越听感觉越伤感，哪怕以后想起贵树那封信大概是分手信吧人家都结婚了，或许不相见不打扰才是真正的温柔我喜欢过你又想起那不舍得放下的初恋好久之前看的挺好的画面很漂亮看完想飞到马来西亚找他，又哭了哭笑了笑。no more time,no more chance.炸火车愿时光可以冲淡一切喜欢有种感觉只有年轻才有硬币还有何用我已喜欢过的如今你有你的婚姻，我有我的爱人，只希望我们同样幸福！いつでも探してしまう没有初恋心痛画质大赞望各自珍重你是我最重要的错过了就错过了画质啊即使听歌都想哭啊one more time现实总会把我们变成另一个模样每一帧都是辞职系列伤感啊炸火车炸火车过了这么久再看到还是会心动每次听都会有触动我们始终不能在一起愿往事重来。每一张都想截永恒的作品未闻花香 最难忘记之一、 结局66666666时间和空间是最大障碍啊也许没追上去是最好结局了听一次哭一次，虽然我已经不记得电影情节了百步零，一生吟，秋至雨铃铃，莫言红尘多情，只道当时心青。对不起炸火车哪里来的女二恋爱恋爱的的酸臭味酸臭味主要主要他们他们没有没有手机手机又回来听了，真心不错，秒五有缘无份的动画漫新海诚动画的主题有缘无份好想去找她心疼女二+1不敢再看第二遍＋1你知道我在想你么私はあなたが好きで、妹（｡ò ∀ ó｡）人间不只有眼前的苟且，还有诗和远方。加一些人物对白就更好了星空让我想到三体来之不易，失之易去，人，才会懂得珍惜有人相伴总是好的真是不忍心看第二遍结局改的很好，圆了他们的一个梦有人啊秒五更像是人生画质狂魔新海诚心疼澄田+1扎火车希望有第二部希望表白的人都能在一起多点时间多点机会致郁 难受死了时间可能会冲淡，但绝对不会磨灭心好疼 但是感觉这个结局很完美我哭了对不起两个人，想不到你也在。我喜欢你，多年来还是如此因为这是DVD版的 跟动画原版的片段有些出入漫画结局还是可以的刚才歌词错了··循环好多天了每次听都超感动火车炸了又能怎么样，明里都要嫁人了错 是异地恋姐弟恋狂魔炸火车结局太悲伤1814年英国史蒂芬孙发明火车想哭最后那个片段哎。。。另一个人你好我们仰望着同一片天空却看着不同的地方。一朵花坠落的速度 , 连时间都放慢了脚步 .时间带着明显的恶意 缓缓在我的身上流逝只是生活著，悲伤的事物就会逐渐累积。横亘在我们面前的是那沉重的人生和漫长的时间，让人望而却步车站与车站之间的距离难以置信的远 电车每到一站停留时间难以置信的长感谢up！最开始看的新海诚的作品你好啊铁道游击队现实500万吨TNT已准备完成，炸炸炸！！！！！54厘米我哭了 真的 想到了昨天和前女友见面 她都忘了我的名字500万吨TNT已埋好，长官，下达命令吧！！！听一次 就想哭一次 循环5遍就哭了 唉 祝好运 铅心间距离进了一厘米结尾放上小时候的这段，简直虐上加虐，有木有。。。即使不能在一起，我还是很爱你这辈子栽了，秒前面那个，三次元不可能比二次元还美好的这里字幕错了。。这部电影，我宁愿看不懂炸火车！我该以怎样的速度，在能与你相见当帷幕落下，我只希望你还在我身旁开口跪这歌不好听 我就听了400遍而已此时无声胜有声秒速五厘米真的好看看见他们在火车过时错过了，心里很伤心新海诚火车来的真不是时候这歌不好听，我也就每天听几十遍而已太虐了。。。。。只是 我还喜欢你我又看看了让我去zh让我去杀了史蒂芬逊if i am awarded one more chance......女主离开了火车，也斩断了思念，男主也懂了做得不错结局其实算最好的结局了，起码男主做到放下了现实中又有多少人放得下，沉浸在痛苦和思念之中百听不厌至今没敢看第二遍喜欢你个人还是喜欢未曾放弃寻找的君名 经费在燃烧所以说修仙吧，我欲逆天，大乘无边，踏碎苍穹，超脱宇宙前面那个三次元不可能比二次元好的，你享受过世界吗生来只为与你相爱之后分离秒五一生的电影看了一百多遍了扎心了，老铁真虐心，但还是想看我喜欢你不敢看第二次的等等我 看一次哭一次很写实的 但是太虐了 控制不住我自己啊很多人认识新海诚都是从秒5开始的吧起一身鸡皮疙瘩 眼看泪崩暂停看红字感谢你的喜欢 也对不起你的喜欢御姐控 脚控 电车控 壁纸狂魔，猜一动画家。。。。只是想到，就心酸。已经3年了，不会哭了如果还能回到从前我会选择抱紧你永远的错过你了，对不起！婚礼我还是不去了吧结局很现实不紧紧抓住 就慢慢流走你忘记我只是流泪的瞬间，但我忘记你却用了整整13年。同一片星空因为现实所以放弃了看这部动漫N次不知道在这部动漫流了多少眼泪了有没有看过这部动漫没有流泪的这部本来就是讲人生的啊...不过是不是真人的可惜的是最后女主还是和别的男人结婚了男猪还是单身好可惜啊第二首听哭的BGM第一次看完整的MV不敢看第二遍+1，小心脏受不了。入宅之作一直不喜欢结局，很无奈很无能优雅男声 好听 当然也好看~+1one more time我爱你好好听啊秒五的剧本很写实，现实的问题曾经我很喜欢一个人，希望以后也能遇到这么一个人炸火车炸火车！！！或许这就是爱情吧感情 我向你认输每次看到1人正在看总以为有小伙伴，但又很快反应过来其实是自己。。。。喜欢一个人12年了超喜欢女二初恋在12年前好蓝过没什么大不了心都碎了没有初恋+1那个手机根本就发不出消息啊所以说那些消息只是给自己看的阿姨洗铁路听着像哭……这个哭腔，让我觉得好悲伤还没看就爱上歌学姐我宣你别急着炸 这是补充原片片头来年一起看樱花有组队炸火车的么 组我一个(*^ω^*)女三把头发散开来 其实是最漂亮的一个特别喜欢有很多东西，恰似命运只有我是看了第二个故事才哭的吗？同样不敢看第二次。。。。炸火车的加多一个！！！炸火车我喜欢你One more day to revolution!!炸火车分手10年再看秒5 还是哭了，哎，今年第12年了，更多是缅怀吧难以释怀的青春炸火车+1第一次喜欢一个人的感觉，就是这首歌七年来我也许听了一千多遍，每一个音符，都是一次心跳感觉女声的好听尽管明知道你不可能在那里看了很多次了最心疼的还是水野理纱同款笔，同款橡皮揪心这里的泪在言叶之停哭出来了这一小段的光影就像在玩音乐游戏一样去看官方漫画吧，贵树最后和花苗在一起了。我喜欢你五年多的感情，今天分手再说最后一次爱你 享受过世界。然后世界就给了我一巴掌 期待与你的下次见面炸火车！！电车狂魔类目炸火车突然好想听玉置浩二唱这首歌。准备炸火车看到 神作 又进来了想去大连找你准备炸火车了炸火车准备心疼女二，不过不喜欢也没办法特想去炸火车啊这首其实我更喜欢哪个英文版的说第二个故事那个 等等我喜欢过一个男孩子叫LT都是男的吧一個轉身太快，一個沒有勇氣，一個永遠的遺憾听了很让人心碎与感叹的一首歌至少他们还在同一个国家现在看没感觉了，男主太柔弱了，我久直接冲她家去了，现在她是我老婆~看了秒五才明白为什么有人看你的名字会哭最爱秒五13年.我喜欢你又到樱花开放的时间了听完已哭我喜欢这个结局看完秒五很难受。。没有改结局 这是小时候 更虐放屁 老子喜欢了一个人整整四年QAQ错的时间遇到了对的人信。。啊啊啊啊啊、、、对不起。。。。。とても良いでうとても良いぢ氏とても良いです哇，我刚失恋朋友推荐我看这个，然后刚把他送非洲去了就是不火系列星期六去武大看樱花，有人吗你还在吗？感觉如果炸了火车，女主也不会接受男主的，违和感好强仪心疼花苗水野第一次看的时候眼泪完全止不住没有流泪哦，循环了无数次，已经流不出来了当年的那些感动T T成长不是意味着要失去而是让你学会主动放弃画质感人两人异地、、、现在很庆幸没在一起好き大好きです不敢看第三遍····心酸。。。。纵使我们通信了1000条短信，我们的心的距离也只能拉近一厘米而已自从看了动画后，看了一遍小说的，依然是悲伤到无法附加虽然看了这么多遍还是没看懂秒五，不过不管看了多少遍画面还是那么细腻我是真的喜欢你 也是真的对不起没看懂秒五，我太年轻？男主最后释然了 最悲催的就是有缘无份 错过了异地恋太辛苦 炸火车毕竟新海诚。= = 在秒五里 最想说 谢诚哥给了君名一个开放的结局。回忆中的那个明理还在等他。无可奈何花落去，却再也没有似曾相识燕归来了这个看书角度好美画质感人画质赞只是再也回不去了，我喜欢你哔哩哔哩-(゜-゜)つロ乾杯~今天刚刚看完( •̥́ ˍ •̀ू )嘤嘤嘤~还有以后的苟且，以后的以后的苟且。电车张作霖这火车的那个别跑放屁老子喜欢一个人整整七年什么叫做喜欢不要让你的青春 敷衍成一个名字就算没有火车，结局也是一样的boom～boom桌面动图wallpaper engine 里有炸火车那位，你认真的？炸火车的，希望你也在火车上“看，真像雪花一样啊。”明里这样说到。奇迹如果能够发生，我要立刻来到你的身边说出那句我喜欢你思念备距离拉远，记忆被时间冲淡。不敢想象忘记你的那天近在眼前，却遥不可及的你啊你不是一个人时间与距离，带了的悲剧表白的都是备胎前任昨天分享了这个视频你看到这了吗pcx红字好评yh……错过就错过了遗憾是种悲伤。那年夏天的我喜欢你，夏末的时候跟你的不告而别~对不起。你们炸不了火车的，因为这辆火车由我来守护！说真的，炸了火车那就不是我的青春了秒5看一次泪崩一次...感觉心脏被刺穿了..Cays要爱就要勇于自私不放手（前提两人是互相喜欢）修身弹幕？看了秒五最喜欢女2喜欢你喜欢你喜欢你不就是老大吗，我忘记你还不行？问题不在火车上，有什么更宽广的东西横在他们之间。真的不知道，如果失去你我会怎么样？2017.05.29.忍了十多年，终于还是看了.你在看吗 小月亮说翻唱中文的，你是认真的？但是真得好远啊感觉虐的话2倍新世界我没流 但是感觉难受炸火车，必须炸了没看懂+1爱，不分次元种族，世界，时间，但凡生命，便有爱想找人一起陪我再看一遍秒速五厘米女主比男主先放下了对方，炸火车有什么用我也想成为有故事的人~~每次听都会有莫名的失落感感觉歌唱出了我的心声真的很喜欢你 谢谢你ZymあいたかったZym僕.....あいたかった只能做朋友吧57天 谢谢你如果他们各自的信送给对方，结局 还会是这样吗一点五倍新世界二次元最美二次元最美泪目我也没哭，看完很心累想听更多版本 这一次b站让我失望了…最喜欢开头的这一段君名结局开放吗，明摆着的HE啊如果看过的话都知道吧.电影里的结局的火车和这里的火车的位置不一样喜欢你秒五不是悲剧，请不要悲剧来形容他不要评论秒五，因为没有资格。静静地在心里就好了你等一个人很久为什么要说出来，有必要吗。自作多情个人最喜欢女2小肉，想念你就算发一千条短信，我们相互之间的心，也只会最多靠近一厘米如果樱花掉落的速度是每秒五厘米 那么两颗心多久才能接近没谁了铁道游击队的出来炸火车了铁道游击队的，出来炸火车了开口跪这首歌唱的是孤独吧。爱上一个人后，失去了她后的。那种孤独。好喜欢这段的剪辑喜欢你对不起对不起我不知道你喜不喜欢我时间是世界上最远的距离死海诚23333233好虐啊233333新海诚炸火车23333333333我看看明天还有我的弹幕不666いつでも探しているよ どっかに君の姿を下雨了，我很想你，别离开我好吗@大黑熊いつでも さが しているよ どっかに きみ の すがた を我向往着有点后悔看了这部番我愿进番与火车同归于尽爆破团准备完毕爆破！我喜欢你这个结局应该是最完美的结局了炸火车+1同感同感，炸了火车!2017/8/27我在看谢谢同时还有三个人也在看时间能改变很多东西，对不起我记不得怎么开始的，也记不得怎么结束的。让我畏惧的已经没有了+1爱你，苏灵巧他结婚了，祝他幸福新海诚是受了多大的刺激 每部都这么扎心我爱你好难过我无法欺骗自己异地恋的痛苦秒五最后的mv配上主题曲，真是神作！第一次感觉悲剧结尾也挺好的！炸火车每次活的像个丧尸的时候就回来看看这个番如果只是排遣寂寞的话，我想找谁都可以但在这繁星欲坠之夜，我无法欺骗我自己贼想哭每次听就难受分手信的那个，希望你看看小说我喜欢过你 lsr我喜欢你等着等着，一直等，最后你还是走了只有错过，才会珍惜。。。如果他们交换了信。或许就不是这样了薛雯 如果一切可以重来 我我错了 你回来好不好喜欢你3 我喜欢你哈哈suki da故事你真的在听吗一个在南工一个在南师，我们的距离并不遥远，遥远的是心的屏障。依旧感动我喜欢你、我喜欢你这两个人还是小孩子的样子 你们没发现吗这里riw歌词错了LZZ虐此处日语字母错了，最后应为してしまぅ结局其实和火车无关今秋相识，你那么温柔，我和你之间隔的哪只有一列火车 是日本海啊！回忆涌起欸，居然有另一个小伙伴在跟我一起看另一个小伙伴你好啊开头这里音乐和画面配合的简直太棒了znt想你，很想喜欢你爱情就是这样吧爱情就是这样吧能不能别发底部弹幕能不能别发底部弹幕能听见吗知道啦还有一首一年了，你就在隔壁班，偶尔也能看见，距离高考192天，我还是喜欢你陪我去看烟花吧，君名开始，烟花结束吧我喜欢邱振宇啊我喜欢你，你却装作不知道怎么只有我一个人……低端弹幕能别挡吗？心才是最远的距离对不起，我现在还是放不下你红字好评十年了，你真的感觉不到吗。结尾最悲伤炸火车爱情就是这样了对不起，晓雪。我也没递出我写的心（信）我从09年开始看然后听这歌，不知道听了多少遍我喜欢你好像不是原版要是没有遗憾，那人生该多无趣啊wwww 如果哪年我勇敢一点或许我喜欢你四年了，还是没能忘记你，丁莉看完难受看的心酸希望我喜欢的他忘记我我也喜欢你！！信的内容是会一直等男主……成为男主的恋人……小说看的……这种情感是普遍的啊无所谓在哪感动不等于爱情难受的听这首歌却不知道想起谁好1216求而不得是最苦！我钟意你si ki dei会いでい看了两遍 第一次毫无感觉第二次泪目说实话 第一段纯真的爱情第二段执着的爱情第三段现实的爱情三年半得我依旧单身画质狂魔新海诚我下换你我喜欢你对不起说炸火车的 太年轻了炸了火车又能如何，女主会转过头来看男主吗？只是男主还没放下其实君名最开始的结局是男主没能改变历史，因为做成商业区，懂了吧四年很长吗？初一到大四，我永远是做千斤顶的那个人我不喜欢你了这是我和你看的第二遍泪目one more time 又一次播放，停不下来表白的都去现实里勇敢出说来吧，不然这首歌会让你感触更深！忠告到头来感动了自己syj 真的 祝你幸福。你会等我的对吧 wjy教大家一个新学的词来形容这个：怅然若失 听了这么久 还是听不腻扎火车我真的很喜欢秒五。。喜欢你如果只是为了排遣寂寞，我想找谁都可以喜欢的人不喜欢我日常炸火车重金悬赏新海诚住址新海诚的电影总能刺痛那些有相同经历的人很多人就是这样在不知不觉中错过了所以啊 喜欢就上啊cl 是人生 秒速五厘米 是一部分人的人生经历对你却不能喜欢最喜欢的歌无论多长时间，我愿意变成风守护着你我不喜欢你了这次我想再失去你了One more time 今夜星光满不老姐，对不起时间，现实最大的隔阂直到现在我还没有勇气面对她。傻的吗，你一句话我马上把机票撕了我喜欢你心酸最心疼花苗明里输给了时间，远野输给了空间（或者是勇气）……真的，我放不下…………………………每次想你都来看一遍我喜欢你one more time瞬间戳泪点泪目炸火车的有吗伤感人总是要长大的其实另一个伙伴是自己把壁纸狂魔新海诚十年之后，然我们身处千里之外我不知道他有没有放下我们的坚持到底是为了什么？我作为一个00后，却经历80后90后的精神世界他结婚了，祝他幸福现在有多少人在哭呢找不到了，你在哪？我在找你，你知道吗？yyf一起看樱花吗？炸火车的加我一个我要这硬币有何用每日任务对不起，我已近哭不出来了回首再见，宛若隔世说炸火车的根本没看懂兄弟们炸火车了阿弥陀佛，求不得看不懂反而是好事吧爱而不得看了一次电影，好久才缓过来樱花又开了一起看樱花的不是你了这歌只有高潮部分好听兄弟们，你们二营长又回来了，我出一个硬币招兵买马炸火车去炸火车前你需要给城哥寄点刀片我喜欢你我喜欢你新海诚在这部动漫里建立了名为美好之物，然后又一点一点的摧毁了给我们看最想保护的人却只能眼睁睁的看着她越走越远。。难受这里用しまう。。真的扎心了喜欢你我也非常喜欢看樱花结局暖心我喜欢你想唱这首歌给你听我喜欢你记得那次开会，我从后面抱着你，你少见的没有推开我，很热，但还是不想松手，多想时间就停在那个时候。Onemoretime,Onemorechancehonemoretime,onemorechance.多一次尝试，多一次机会.如果她姓张，那么名字一定是珊虽然不是一直都在寻找你，但是在某个瞬间希望见到你。人生若只如初见，何事秋风悲画扇我爱你她结婚了都有喜欢的人吧像吃了块石头那样辛苦炸火车的带我一个这个…喜欢你动画是男主视角，所看不到女主那些年的辛酸吧～在到处有动车的中国，那点距离，不存在的。最苦是相思，最远是阴阳说住址吧我买五吨刀片邮寄我讨厌你 你离我远一点 我觉得你很恶心哪儿好听了喜欢你想去四川找你一看这个就难受，特别是最后那个画面最喜欢！但不敢看第二遍的电影我喜欢你有些翻唱是真的恶心！寻找yyf，那个是认真的嘛？想你，盼盼…十几年了喜欢你只不过大概北京到南京小仟，靖哥想你了，虽然你不会上b站来，但是，我也只能在这儿对不起 我对不起你如果我没有执着的挽回，是不是就不会体验到什么叫做心疼到死的感觉我最喜欢的一部动漫电影，也是我不愿意看第二遍的电影可怕我喜欢你啊～～太压抑想她喜欢上一个人第一感觉就是自卑与委屈不知为何，看这部番的时候，虐的很心痛，很真实……为花苗难受我喜欢你啊我不喜欢你们喜欢男主最后的释怀我想我女朋友了孙坤，知道我是谁?想你了回憶望著火箭升空的此刻，他們的童年結束了火車上有另一個13歲男孩，去_所以全是些垃圾歌姣姣，我喜欢你我喜欢你需要重复的看错过了就是错过了忘不了，斩不断，理还乱..........祝他幸福 一厢情愿，就得愿赌服输。就算独留我一人也喜欢你秒五看完觉得心里很压抑不知道为什么米娜桑 都要加油啊我十七岁 是不是也该谈一场恋爱...?想去桂林阳朔找你炸火车喜欢我喜欢你。曾经。很喜欢很喜欢。one more time必须炸火车🚉召唤核弹头炸火车日本歌词写的是真的好！！最喜欢这里我决定下次看秒五开弹幕…这只鸟看得我好难过嗯，你太年轻，还相信所有故事都会有结局。不知道去哪儿寻找，来回踱步，荒度光阴1人正在观看樱花的速度是每秒五厘米，我该用怎样的速度才能与你相遇樱花，下落的速度是每秒五厘米，我该用怎样的速度才能与你相遇――秒速五厘米张思佳 我想你了看一遍，哭一遍心里满满的都是你，怎么办我们还要越来越坏还是一样的结局如果能一直年少w 最后这一段回忆杀蔡雨豪，nx蔡雨豪，想你CQY我忘不掉你啊我喜欢你就算发了一千条消息，我们的距离也只能拉近一厘米三分四十七秒唯一一部让我痛哭流涕的电影我喜欢你我喜欢你年轻真好哭了真的炸！吃我一雷炸子！炸火车的算我一个繁星欲坠一帧一壁纸她嫁人是一定的，我们只是想让他俩见一面.虽然你说了分手，我会好好过自己的生活的很平凡的故事，但真的挺虐心远野君的独白一个以为你会追，一个以为你会等无名指上的戒指，早已说明了一切，就算没有火车年少时的相遇，早已成为心殇贵树眼神里一直有种悲伤再见，YM，既然已经错过，就只能释然挡住他们的，是时间，是距离对不起，虽然现在不会再提起，但也没有忘记记住这辆火车宋美婷宋美婷，忘不了你你还好吗阿娜达？离开了你总会想你。但抛弃了我你还早点死掉吧再次炸火车上官，真遗憾没和你说句话啊每个行动不一定是正确的，但有意义的地方在于他产生的结果是否如意我喜欢你哈哈哈哈哈哈哈良心画质可怜女二炸火车的太年轻自己经历的时候也没发觉多么的痛苦，画在画里真的让我痛哭流涕…… 我真的错过了很多望诸君，初心不改我爱你希望你都好，我现在很好炸火车爱你吗嗨咋火车之前有一个男生给我听这首歌的时候，没有感受出他的深意，等到听懂时，却已经，，，中间发生过一些事，很对不起他，再到后来也不敢联系他，悄悄在心里说对不起，希望他早就已经走出来之前有一个男生给我听这首歌的时候，没有感受出他的深意，等到听懂时，却已经，，，中间发生过一些事，很对不起他，再到后来也不敢联系他，悄悄在心里说对不起，希望他早就已经走出来第一次听的时候没有听懂，等听懂的时候，就错过了黄春兰 我现在正在想着你感动以前的我真的好喜欢你我喜欢你啊这个音乐是真让我胃疼，不过我还是喜欢真正的悲剧在于谁都没做错，谁也没变心，更都没有说分手，然而一切都结束了明明很脆弱，却一直假装坚强去年到今年我还是单身I liked you real突然之间悸动已经消失13 表示能看懂突然之间悸动已经消失我又想起你了新海诚我最喜欢的就是这部了她在深圳，我在成都我喜欢你难受啊啊啊啊啊啊啊啊我也会想你，但已经不是非你不可了。。wyj再见我喜欢你我喜欢你呀未能说出口的那句我喜欢你呀不知道喜欢的感觉……但是莫名心痛就算没有火车 两人对彼此都没有了心动的感觉渐渐有了隔阂 日常的繁琐让他们喘不过气因为陈一发儿长的很像你啊感谢今生有你，谢谢了，我爱你♡输在了空间和时间上了其实我是来截图的！我喜欢你！什么时候还能见到你！玩什么】【、、】为什么我的眼里常含泪水每一帧都是壁纸的动漫SHSHSH我喜欢你新海诚不相信爱情咖啡色外套是在向瑟堡的雨伞致敬我喜欢你到处都是你的影子，我却寻找不到你的身影。王映橦对不起，我还是没能放下你最终，还是没有狠下心放下你。哪里都是你的影子，我却看不到你的身影。我想我不知不觉喜欢上你了。p我喜欢你已经没有正当的理由再相遇了，而我只偷偷从考试座位贴纸知道你的名字，张飚我想我大概喜欢你以上均为分手名单同志们啊 炸火车了想离开的人从来不需要借口愿留下的人从来不需要挽留我将送我喜欢的人离开从此情书写于山鬼，心事寄予西风你没有什么吸引我的地方，但就是没来由的想对你好，只想对你好。罗馨雨我下辈子一定要娶你我要结婚了，再也没有五厘米的距离了我还在喜欢着你怎么办对不起tokoyo、突然之间悸动已经消失已经看了三十多遍了，还是不能释怀啊轩轩看到我！(´｡• ᵕ •｡`) ♡紅字就是扯淡，根本沒看懂。再见我可能是爱无能 ， 真的不知道怎么去表达自己，一种无力感八年前的相遇，三年后的淡忘，到如今的感慨我喜欢你我喜欢你，都是我不会去表白你好，再见0喜欢你真的喜欢你这么多年了我还是忘不了wzw请别忘记我那你又是喜欢三次元的什么？她不过是水，钙，碳，微量元素罢了我真的很喜欢你李仙凤我稀饭你为了不让你我失望，所以江湖不见吧(*^ω^*)，愿你一生幸福炸火车能怎么样，相遇那段女主已经带上了婚戒，而且回头后走掉了，说明已经发下了，结局还是没有改变如果...或许...，世上没有如果，青春只有一次一切都没完结我喜欢你那些人不明白⊙_⊙，两情相悦也不一定会在一起四年了，我终于可以在看秒五的时候释然地想起你，只是想起，不想不敢现实里面表白 跑这里？我喜欢你我好想你炸什么，擦了呗坤妈洼远野贵树&筱原明里喜欢一个人，我现在爱你，以后也一样时间终将会给我们答案你好啊，陌生人是新海诚让我忘不掉你因为你我的自私，我们互相怨恨彼此，从前的喜欢不复存在你的婚礼我只能从别人口中得知 抱歉还是没办法忘记你LT?老铁吗。 滑稽爱情不是一个人的事在听这首歌的b找朋友们祝你们都有自己美好的感情结局！深海鱼bissq s y 好难受好きだ炸车队准备我喜欢你以前我嘲笑别人如此，最后我却和我嘲笑的人一样，真的可笑有时候真恨国土面积实在太广每当这旋律响起，过往画面全在脑中浮现这歌至少听了500遍炸火车1/10000炸火车1/10000000000黄心艺 能看到么 为高三的我们留个言新婚快乐ZW♥RML爱，不顾迢迢千里，不愿与你分离不想成长只想你心目中第一每次听这歌都有种呼吸困难的感觉神作配神曲大爱11111111111114545454545454545454545454545455454545454545455445111111111111111111111111111111111111111114545炸火车·准备あなたが好きです听了1000遍了玩茅台看一次扎一次好多头皮屑我连当主角的命都没有，只能当女二的身份，人生啊我喜欢你2019 1 29糖哥以前不懂，现在能哭着听完了我喜欢你小白兔我喜欢你，你却很不在乎李娜我永远爱你永远！想你 如果可以我们可以见一次吗我找的不是bug，是你～～(ಡωಡ) 看到老姐对不起，我真的笑炸了我喜欢你琳我回来了你说，谁都不是不可替代的，对吗对不起，我喜欢你王子琳我也没看到想起小时候暗恋的女同学，我在江西萍乡，他在甘肃天水我在江西萍乡，她在甘肃天水秒五真的很好想想现在的异地恋吧我喜欢你，鳴过年过好又要一个人打拼，啊！好想停留在这段时间里。我喜欢你心疼女二2019/2/15 我们在一起了心中的初戀你放下了嗎我喜欢你岁数越大 越不敢了。曾经以为一辈子就她了。最后还是自己。忘了在别的哪里看到的的评论：《言叶之庭》告诉你爱情可以超越年龄，《星之梦》告诉你爱情可以超越时间，《你的名字。》告诉你爱情可以超越空间，《秒速五厘米》告诉你，那些全是扯淡，爱情经不起任何考验。我喜欢你我喜欢你怎么才能跟你在一起无论怎么样努力，我们都不能在一起……渡劫 我喜欢你杜杰 我喜欢你 喜欢你杜杰 我喜欢你周盛晖大笨蛋，要幸福啊z我喜欢你新海诚不相信爱情，巧了 我也是听了很多遍，直到这次 泪目了对不起 不能喜欢你一直循环这已经不痛了dudu我们只能做朋友吧有经历的人看到这太痛苦了即使没有那辆火车，他俩也不可能在一起了。你已经忘记我了吧LJ爱五年了其实13年前列车门关闭时，男主和女主的心就越来越远了，炸了也没用萍乡的兄弟，老乡啊，有勇气就去找她，不然就忘记了吧我喜欢你对不起感谢新海给予我们的精品 即使结局并不是我们所希望的那样！但这就是现实！宫水和立花会带着贵树明理的份一直爱下去垃圾歌曲，再来亿遍一个平凡到不能再平凡的故事，但却虐心！我喜欢你，真的非常非常喜欢！.....曾经.....！希望新海 能做一个女主视角的！我要再哭亿遍你知道我这些年有多想你吗？每天一遍睡觉之前再来一遍我没看这个故事的时候光听这个歌就莫名泪水 19 4 10 看完没有没炸又能怎么样呢？女主已经有丈夫了火车没有又能怎么样。女主已经有人了欢迎收看治愈番秒五收到了 谢谢只有特别喜欢，却没有特别坚持懦弱的我连喜欢的人都不敢表白ずっと探し続けていた君が好きだあなたの大切さは私にとってすべてを超えている好喜欢这个小陈同学，我喜欢你哦～我，曾经喜欢你我真是喜欢你，可是我知道我不爱你好难过想你我又来看一遍在爱情里原来大家都这么卑微的啊！今天第一天到新单位上班 分手的第四天 加油丸茅台我不喜欢你了高三 上课偷偷看的 高三上课偷偷看的 高三上课偷偷看的高三上课偷偷看的 回忆起了傻默默，我喜欢你的呀默默，我还是挺喜欢你的……默默如果看到这个视频了话，不知你是否安好呢？！她就在我身边，可是那句我喜欢你就是说不出口，因为我也是女生我想有单纯喜欢你的感觉，也想有深深爱着你的感觉我喜欢你我中意你这个世界最大的阻碍就是时间和距离 可能阻碍着任何一件事物或者微妙的感情jj几刷多磨孤独啊
\ No newline at end of file
diff --git a/docs/assets/sample/layer.png b/docs/assets/sample/layer.png
new file mode 100644
index 000000000..8df7bc4b6
Binary files /dev/null and b/docs/assets/sample/layer.png differ
diff --git a/docs/assets/sample/poster.jpg b/docs/assets/sample/poster.jpg
new file mode 100644
index 000000000..8de637316
Binary files /dev/null and b/docs/assets/sample/poster.jpg differ
diff --git a/docs/assets/sample/subtitle.srt b/docs/assets/sample/subtitle.srt
new file mode 100644
index 000000000..6e78e6d03
--- /dev/null
+++ b/docs/assets/sample/subtitle.srt
@@ -0,0 +1,401 @@
+1
+00:00:01,500 --> 00:00:03,950
+歌名：One More Time,One More Chance
+〖愿往事重来〗
+
+2
+00:00:04,000 --> 00:00:05,950
+【新海诚动画】『秒速5センチメートル』
+《秒速5厘米》主题曲
+
+3
+00:00:06,000 --> 00:00:08,950
+编曲：森俊之
+
+4
+00:00:09,000 --> 00:00:11,950
+作词|作曲|演唱：山崎まさよし <山崎将义>
+
+5
+00:00:12,000 --> 00:00:15,950
+
+
+6
+00:00:16,000 --> 00:00:20,250
+これ以上何をう失(し)なえば
+【还要再失去什么】
+
+7
+00:00:20,300 --> 00:00:23,250
+心は许(ゆる)されるの
+【才能让心得到宽恕?】
+
+8
+00:00:23,300 --> 00:00:27,250
+どれ程(ほど)の痛(いた)みならば
+【还要再怎样痛苦】
+
+9
+00:00:27,300 --> 00:00:30,250
+もう一度君に会(あ)える
+【才能与你再次相见】
+
+10
+00:00:30,300 --> 00:00:33,250
+One more time
+
+11
+00:00:33,300 --> 00:00:37,950
+季节(きせつ)よ うつろわないで
+【不愿看到季节的变迁】
+
+12
+00:00:38,000 --> 00:00:41,050
+One more time
+
+13
+00:00:41,100 --> 00:00:45,250
+ふざけあった时间(じかん)よ
+【曾与你嬉闹的时光啊】
+
+14
+00:00:45,300 --> 00:00:49,250
+くいちがうときはいつも
+【每次争执的时候】
+
+15
+00:00:49,300 --> 00:00:53,100
+仆が先(さき)に折(お)れたね
+【总是我先让步】
+
+16
+00:00:53,150 --> 00:00:56,250
+わがままな性格(せいかく)が
+【你那任性的性格】
+
+17
+00:00:56,300 --> 00:00:59,250
+なおさら爱(いと)しくさせた
+【反而令你更加可爱】
+
+18
+00:00:59,300 --> 00:01:02,950
+One more chance
+
+19
+00:01:03,000 --> 00:01:07,250
+记忆(きおく)に足(あし)を取(と)られて
+【回忆绊住我的脚步】
+
+20
+00:01:07,300 --> 00:01:10,250
+One more chance
+
+21
+00:01:10,300 --> 00:01:14,950
+次(つぎ)の场所を选(えら)べない
+【无法选择下个地方】
+
+22
+00:01:15,000 --> 00:01:18,250
+いつでも捜(さが)しているよ
+【总是在一直寻觅】
+
+23
+00:01:18,300 --> 00:01:21,950
+どっかに君の姿(すがた)を
+【寻觅着你的身影】
+
+24
+00:01:22,000 --> 00:01:23,950
+向(むか)いのホーム
+【对面的月台上】
+
+25
+00:01:24,000 --> 00:01:25,950
+路地裏(ろじうら)の窓(まど)
+【在小巷的窗口里】
+
+26
+00:01:26,000 --> 00:01:29,250
+こんなとこにいるはずもないのに
+【尽管明知道你不可能在那里】
+
+27
+00:01:29,300 --> 00:01:33,250
+愿(ねが)いがもしも叶(かな)うなら
+【若愿望能够实现】
+
+28
+00:01:33,300 --> 00:01:36,550
+いますぐ君のもとへ
+【好想马上去到你身边】
+
+29
+00:01:36,600 --> 00:01:40,250
+できないことは もう何もない
+【如今我再也不会有丝毫退缩】
+
+30
+00:01:40,300 --> 00:01:47,300
+すべてかけて抱きしめてみせるよ
+【我会不顾一切将你紧紧拥抱】
+
+31
+00:01:47,350 --> 00:01:51,950
+
+
+32
+00:01:52,000 --> 00:01:55,250
+
+
+33
+00:01:55,300 --> 00:01:59,250
+寂(さび)しさ纷(まぎ)らすだけなら
+【如果只是为了排遣寂寞】
+
+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
+－－终わり－－
+
diff --git a/docs/assets/sample/subtitle.vtt b/docs/assets/sample/subtitle.vtt
new file mode 100644
index 000000000..d7a9ba0d5
--- /dev/null
+++ b/docs/assets/sample/subtitle.vtt
@@ -0,0 +1,403 @@
+WEBVTT
+
+1
+00:00:01.500 --> 00:00:03.950
+歌名：One More Time,One More Chance
+〖愿往事重来〗
+
+2
+00:00:04.000 --> 00:00:05.950
+【新海诚动画】『秒速5センチメートル』
+《秒速5厘米》主题曲
+
+3
+00:00:06.000 --> 00:00:08.950
+编曲：森俊之
+
+4
+00:00:09.000 --> 00:00:11.950
+作词|作曲|演唱：山崎まさよし <山崎将义>
+
+5
+00:00:12.000 --> 00:00:15.950
+
+
+6
+00:00:16.000 --> 00:00:20.250
+これ以上何をう失(し)なえば
+【还要再失去什么】
+
+7
+00:00:20.300 --> 00:00:23.250
+心は许(ゆる)されるの
+【才能让心得到宽恕?】
+
+8
+00:00:23.300 --> 00:00:27.250
+どれ程(ほど)の痛(いた)みならば
+【还要再怎样痛苦】
+
+9
+00:00:27.300 --> 00:00:30.250
+もう一度君に会(あ)える
+【才能与你再次相见】
+
+10
+00:00:30.300 --> 00:00:33.250
+One more time
+
+11
+00:00:33.300 --> 00:00:37.950
+季节(きせつ)よ うつろわないで
+【不愿看到季节的变迁】
+
+12
+00:00:38.000 --> 00:00:41.050
+One more time
+
+13
+00:00:41.100 --> 00:00:45.250
+ふざけあった时间(じかん)よ
+【曾与你嬉闹的时光啊】
+
+14
+00:00:45.300 --> 00:00:49.250
+くいちがうときはいつも
+【每次争执的时候】
+
+15
+00:00:49.300 --> 00:00:53.100
+仆が先(さき)に折(お)れたね
+【总是我先让步】
+
+16
+00:00:53.150 --> 00:00:56.250
+わがままな性格(せいかく)が
+【你那任性的性格】
+
+17
+00:00:56.300 --> 00:00:59.250
+なおさら爱(いと)しくさせた
+【反而令你更加可爱】
+
+18
+00:00:59.300 --> 00:01:02.950
+One more chance
+
+19
+00:01:03.000 --> 00:01:07.250
+记忆(きおく)に足(あし)を取(と)られて
+【回忆绊住我的脚步】
+
+20
+00:01:07.300 --> 00:01:10.250
+One more chance
+
+21
+00:01:10.300 --> 00:01:14.950
+次(つぎ)の场所を选(えら)べない
+【无法选择下个地方】
+
+22
+00:01:15.000 --> 00:01:18.250
+いつでも捜(さが)しているよ
+【总是在一直寻觅】
+
+23
+00:01:18.300 --> 00:01:21.950
+どっかに君の姿(すがた)を
+【寻觅着你的身影】
+
+24
+00:01:22.000 --> 00:01:23.950
+向(むか)いのホーム
+【对面的月台上】
+
+25
+00:01:24.000 --> 00:01:25.950
+路地裏(ろじうら)の窓(まど)
+【在小巷的窗口里】
+
+26
+00:01:26.000 --> 00:01:29.250
+こんなとこにいるはずもないのに
+【尽管明知道你不可能在那里】
+
+27
+00:01:29.300 --> 00:01:33.250
+愿(ねが)いがもしも叶(かな)うなら
+【若愿望能够实现】
+
+28
+00:01:33.300 --> 00:01:36.550
+いますぐ君のもとへ
+【好想马上去到你身边】
+
+29
+00:01:36.600 --> 00:01:40.250
+できないことは もう何もない
+【如今我再也不会有丝毫退缩】
+
+30
+00:01:40.300 --> 00:01:47.300
+すべてかけて抱きしめてみせるよ
+【我会不顾一切将你紧紧拥抱】
+
+31
+00:01:47.350 --> 00:01:51.950
+
+
+32
+00:01:52.000 --> 00:01:55.250
+
+
+33
+00:01:55.300 --> 00:01:59.250
+寂(さび)しさ纷(まぎ)らすだけなら
+【如果只是为了排遣寂寞】
+
+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
+－－终わり－－
+
diff --git a/docs/assets/sample/thumbnails.png b/docs/assets/sample/thumbnails.png
new file mode 100644
index 000000000..42f844be8
Binary files /dev/null and b/docs/assets/sample/thumbnails.png differ
diff --git a/docs/assets/sample/video.flv b/docs/assets/sample/video.flv
new file mode 100644
index 000000000..375acb751
Binary files /dev/null and b/docs/assets/sample/video.flv differ
diff --git a/docs/assets/sample/video.mp4 b/docs/assets/sample/video.mp4
new file mode 100644
index 000000000..386ebf6f2
Binary files /dev/null and b/docs/assets/sample/video.mp4 differ
diff --git a/docs/document/README.md b/docs/document/README.md
index 624da42d7..a50d169da 100644
--- a/docs/document/README.md
+++ b/docs/document/README.md
@@ -1,1789 +1,77 @@
-# Getting started
-
## Install
Install with `npm`
-```
+```bash
$ npm install artplayer
```
-Or install with `yarn`
+Install with `yarn`
-```
+```bash
$ yarn add artplayer
```
+Then load through the module
+
```js
+// ES6
import Artplayer from 'artplayer';
+
+// CommonJS
+const Artplayer = require('artplayer');
```
Or umd builds are also available
```html
+
+
+
+
+
+
+
```
-Will expose the global variable to `window.Artplayer`.
+?> Will expose the global variable to `window.Artplayer`.
## Usage
```html
-
+
+
+
+ ArtPlayer
+
+
+
+
+
+
+
+
```
-```js
-var art = new Artplayer({
- container: '.artplayer-app',
- url: 'path/to/video.mp4',
-});
-```
+!> The size of the player depends on the size of the `container`, so don’t forget to set the `height` and `width` of the `container`.
-# Configuration
+## Demo
-## container
+[https://artplayer.org](https://artplayer.org)
-- Type: `String、Element`
-- Default: `#artplayer`
-- Required: `true`
-
-DOM container of the player
+?> Most of the code in this document is directly linked to the demo by click the `Run Code`.
[Run Code](/Configuration.container)
```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
var art = new Artplayer({
container: '.artplayer-app',
- // container: document.querySelector('.artplayer-app'),
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
-});
-```
-
-You may need to initialize a size for the container element, like:
-
-```css
-.artplayer-app {
- width: 400px;
- height: 300px;
-}
-```
-
-## url
-
-- Type: `String`
-- Default: `''`
-- Required: `true`
-
-Video source url, Three video file formats are supported: `mp4`, `ogg`, `webm`
-
-[Run Code](/Configuration.url)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- // url: url + '/video/one-more-time-one-more-chance-480p.ogg',
- // url: url + '/video/one-more-time-one-more-chance-480p.webm',
-});
-```
-
-## type
-
-- Type: `String`
-- Default: `''`
-
-Specify the format for the `url`, use with `customType`
-
-[Run Code](/Configuration.type)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.flv',
- type: 'flv',
-});
-```
-
-## customType
-
-- Type: `Object`
-- Default: `{}`
-
-Customize when loading third-party libraries
-
-[Run Code](/Configuration.customType)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.flv',
- type: 'flv',
- customType: {
- flv: function (video, url, art) {
- // video: The video element
- // url: The video url
- // art: The Artplayer instance
- },
- },
-});
-```
-
-## whitelist
-
-- Type: `Array`
-- Default: `[]`
-
-The current player uses the simplest native components on mobile devices, but you can filter this feature through whitelist. `whitelist` accept `String`, `function`, and `regular` expressions, contrast information comes from `window.navigator.userAgent`
-
-By default, non-whitelisted devices only set video native properties and third-party dependencies.
-
-`*` is a special value indicating that all mobile devices have the Artplayer UI enabled
-
-[Open with mobile](https://artplayer.org/mobile.html)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- whitelist: ['iPhone OS 11'],
- // whitelist: ['*'],
- // whitelist: [(ua) => /iPhone OS 11/gi.test(ua)],
- // whitelist: [/iPhone OS 11/gi]
-});
-```
-
-## poster
-
-- Type: `String`
-- Default: `''`
-
-Video poster image url
-
-[Run Code](/Configuration.poster)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- poster: url + '/image/one-more-time-one-more-chance-poster.jpg',
-});
-```
-
-## title
-
-- Type: `String`
-- Default: `''`
-
-Video title, will be shown in `screenshot` file name and `pip` mode
-
-[Run Code](/Configuration.title)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- title: '【新海诚动画】『秒速5センチメートル』',
-});
-```
-
-## volume
-
-- Type: `Number`
-- Default: `0.7`
-
-Default volume, player will cache the last volume, which may be overwritten
-
-[Run Code](/Configuration.volume)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- volume: 0.5,
-});
-```
-
-## muted
-
-- Type: `Boolean`
-- Default: `false`
-
-Whether to mute by default
-
-[Run Code](/Configuration.muted)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- muted: true,
-});
-```
-
-## autoplay
-
-- Type: `Boolean`
-- Default: `false`
-
-Whether to play automatically, sometimes it doesn't necessarily succeed
-
-More info: [autoplay-policy-changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)
-
-[Run Code](/Configuration.autoplay)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- autoplay: true,
-});
-```
-
-## autoSize
-
-- Type: `Boolean`
-- Default: `false`
-
-Keep the original video aspect ratio and automatically zoom
-
-[Run Code](/Configuration.autoSize)
-
-```js
-// Zoom browser window
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- autoSize: true,
-});
-```
-
-## autoMin
-
-- Type: `Boolean`
-- Default: `false`
-
-When the player scrolls out of the viewport, the mini player mode is automatically enabled
-
-[Run Code](/Configuration.autoMin)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- autoMin: true,
-});
-```
-
-## loop
-
-- Type: `Boolean`
-- Default: `false`
-
-Automatic loop playback
-
-[Run Code](/Configuration.loop)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- loop: true,
-});
-```
-
-## playbackRate
-
-- Type: `Boolean`
-- Default: `false`
-
-Whether to show playback rate controller in the contextmenu and setting panel
-
-[Run Code](/Configuration.playbackRate)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- playbackRate: true,
- setting: true,
-});
-```
-
-## aspectRatio
-
-- Type: `Boolean`
-- Default: `false`
-
-Whether to show aspect ratio controller in the contextmenu and setting panel
-
-[Run Code](/Configuration.aspectRatio)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- aspectRatio: true,
- setting: true,
-});
-```
-
-## screenshot
-
-- Type: `Boolean`
-- Default: `false`
-
-Whether to show screenshot controller in the bottom, If the video resource exists cross-domain, the screenshot may fail. Unless serves this url with the correct `Access-Control-Allow-Origin`, and Set the video's `crossOrigin` property to `anonymous`
-
-[Run Code](/Configuration.screenshot)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- screenshot: true,
-
- // Optional
- moreVideoAttr: {
- crossOrigin: 'anonymous',
- },
-});
-```
-
-## setting
-
-- Type: `Boolean`
-- Default: `false`
-
-Whether to show setting controller in the bottom
-
-[Run Code](/Configuration.setting)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- setting: true,
-});
-```
-
-## pip
-
-- Type: `Boolean`
-- Default: `false`
-
-Whether to show pip controller in the bottom, it will give priority to the native picture-in-picture feature.
-
-More info: [picture-in-picture](https://developers.google.com/web/updates/2017/09/picture-in-picture)
-
-[Run Code](/Configuration.pip)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- pip: true,
-});
-```
-
-## fullscreen
-
-- Type: `Boolean`
-- Default: `false`
-
-Whether to show window fullscreen controller in the bottom
-
-[Run Code](/Configuration.fullscreen)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- fullscreen: true,
-});
-```
-
-## fullscreenWeb
-
-- Type: `Boolean`
-- Default: `false`
-
-Whether to show web page fullscreen controller in the bottom
-
-[Run Code](/Configuration.fullscreenWeb)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- fullscreenWeb: true,
-});
-```
-
-## mutex
-
-- Type: `Boolean`
-- Default: `true`
-
-Player mutually exclusive, only one player can play at a time
-
-[Run Code](/Configuration.mutex)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- mutex: true,
-});
-```
-
-## light
-
-- Type: `Boolean`
-- Default: `false`
-
-Whether to display the light mode in the context menu
-
-[Run Code](/Configuration.light)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- light: true,
-});
-```
-
-## backdrop
-
-- Type: `Boolean`
-- Default: `true`
-
-Whether to use blurred background in the context menu and settings panel
-
-[Run Code](/Configuration.backdrop)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- backdrop: true,
-});
-```
-
-## hotkey
-
-- Type: `Boolean`
-- Default: `true`
-
-Whether to use hotkey
-
-[Run Code](/Configuration.hotkey)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- hotkey: true,
-});
-```
-
-| Key | Description |
-| ------- | --------------- |
-| `↑` | Increase volume |
-| `↓` | Decrease volume |
-| `←` | Seek backward |
-| `→` | Seek forward |
-| `space` | Toggle playback |
-
-## lang
-
-- Type: `String`
-- Default: `navigator.language.toLowerCase()`
-
-Default display language: en, zh-cn, zh-tw
-
-[Run Code](/Configuration.lang)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- lang: 'en',
-});
-```
-
-## icons
-
-- Type: `Object`
-- Default: `{}`
-
-Replace the default icon
-
-[Run Code](/Configuration.icons)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- icons: {
- loading: '',
- state: '',
- play: '',
- pause: '',
- volume: '',
- volumeClose: '',
- subtitle: '',
- screenshot: '',
- setting: '',
- fullscreen: '',
- fullscreenWeb: '',
- pip: '',
- },
-});
-```
-
-## theme
-
-- Type: `String`
-- Default: `#f00`
-
-Default theme color
-
-[Run Code](/Configuration.theme)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- theme: '#ffad00',
-});
-```
-
-## subtitleOffset
-
-- Type: `Boolean`
-- Default: `false`
-
-Subtitle time offset plugin
-
-[Run Code](/Configuration.subtitleOffset)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- subtitle: {
- url: url + '/subtitle/one-more-time-one-more-chance.srt',
- },
- setting: true,
- subtitleOffset: true,
-});
-```
-
-## miniProgressBar
-
-- Type: `Boolean`
-- Default: `false`
-
-Mini progress bar plugin
-
-[Run Code](/Configuration.miniProgressBar)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- miniProgressBar: true,
-});
-```
-
-## localVideo
-
-- Type: `Boolean`
-- Default: `false`
-
-Local video preview plugin. By default, a configuration is added in the settings panel.
-
-[Run Code](/Configuration.localVideo)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- localVideo: true,
- controls: [
- {
- name: 'preview',
- position: 'right',
- html: 'OPEN VIDEO',
- mounted: ($preview) => {
- art.plugins.localVideo.attach($preview);
- },
- },
- ],
-});
-```
-
-## localSubtitle
-
-- Type: `Boolean`
-- Default: `false`
-
-Local subtitle preview plugin. By default, a configuration is added in the settings panel.
-
-[Run Code](/Configuration.localSubtitle)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- localSubtitle: true,
- controls: [
- {
- name: 'preview',
- position: 'right',
- html: 'OPEN SUBTITLE',
- mounted: ($preview) => {
- art.plugins.localSubtitle.attach($preview);
- },
- },
- ],
-});
-```
-
-## networkMonitor
-
-- Type: `Boolean`
-- Default: `false`
-
-A network monitor is used to monitor the blocking of the video.
-
-[Run Code](/Configuration.networkMonitor)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- networkMonitor: true,
-});
-
-// Is the ratio of the time the video is blocked to the time the video has been played.
-// For example, when the ratio is equal to 0.3, it means that every 10 seconds of sampling time, it is blocked for three seconds.
-
-let notice = false;
-art.on('networkMonitor', (ratio) => {
- if (ratio >= 0.5 && !notice) {
- notice = true;
- console.log('Current network condition is not good');
- }
-});
-
-// Modify sampling time, the unit is milliseconds, default 10 seconds.
-art.plugins.networkMonitor.sample(30000);
-```
-
-## subtitle
-
-- Type: `Object`
-- Default: `{}`
-
-Custom subtitle
-
-| propertie | type | Description |
-| --------- | -------- | ---------------------------------------- |
-| `url` | `String` | Subtitle url, support vtt and srt format |
-| `style` | `Object` | Subtitle style |
-
-[Run Code](/Configuration.subtitle)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- subtitle: {
- url: url + '/subtitle/one-more-time-one-more-chance.srt',
- style: {
- color: '#03A9F4',
- 'font-size': '30px',
- },
- },
-});
-```
-
-## thumbnails
-
-- Type: `Object`
-- Default: `{}`
-
-Custom thumbnails in the progress bar with lazy load
-
-| propertie | type | Description |
-| --------- | -------- | -------------------------------------- |
-| `url` | `String` | Thumbnails image url |
-| `number` | `Number` | Total number of thumbnails |
-| `width` | `Number` | The width of each thumbnail |
-| `height` | `Number` | The height of each thumbnail |
-| `column` | `Number` | Total number of columns for thumbnails |
-
-[Run Code](/Configuration.thumbnails)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- thumbnails: {
- url: url + '/image/one-more-time-one-more-chance-thumbnails.png',
- number: 100,
- width: 160,
- height: 90,
- column: 10,
- },
-});
-```
-
-## moreVideoAttr
-
-- Type: `Object`
-- Default: `{'controls': false,'preload': 'metadata'}`
-
-More video Attributes, these properties will be written directly to the video element
-
-[Run Code](/Configuration.moreVideoAttr)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- moreVideoAttr: {
- 'webkit-playsinline': true,
- playsInline: true,
- },
-});
-```
-
-## quality
-
-- Type: `Array`
-- Default: `[]`
-
-Custom quality, The type of quality is an object
-
-| propertie | type | Description |
-| --------- | --------- | ------------------------------------------------------------------------------ |
-| `default` | `Boolean` | Whether the default quality, if not specified, the first quality will be taken |
-| `name` | `String` | Quality name to show |
-| `url` | `String` | Video url |
-
-[Run Code](/Configuration.quality)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- quality: [
- {
- default: true,
- name: 'SD 480P',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- },
- {
- name: 'HD 720P',
- url: url + '/video/one-more-time-one-more-chance-720p.mp4',
- },
- ],
-});
-```
-
-## highlight
-
-- Type: `Array`
-- Default: `[]`
-
-Custom highlight, The type of highlight is an object
-
-| propertie | type | Description |
-| --------- | -------- | ---------------- |
-| `time` | `Number` | highlight second |
-| `text` | `String` | highlight text |
-
-[Run Code](/Configuration.highlight)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- highlight: [
- {
- time: 60,
- text: 'One more chance',
- },
- {
- time: 120,
- text: '谁でもいいはずなのに',
- },
- {
- time: 180,
- text: '夏の想い出がまわる',
- },
- {
- time: 240,
- text: 'こんなとこにあるはずもないのに',
- },
- {
- time: 300,
- text: '－－终わり－－',
- },
- ],
-});
-```
-
-## layers
-
-- Type: `Array`
-- Default: `[]`
-
-Custom layer, The type of layer is an object or function
-
-| propertie | type | Description |
-| --------- | ------------------- | --------------------------------------------- |
-| `disable` | `Boolean` | Whether to disable |
-| `name` | `String` | The unique name , used for the class name |
-| `index` | `Number` | The unique index, used for the priority level |
-| `html` | `String`、`Element` | The dom element |
-| `style` | `Object` | The style object |
-| `click` | `Function` | Click event |
-| `mounted` | `Function` | Callback after mounted |
-| `tooltip` | `String` | Tooltip text |
-
-[Run Code](/Configuration.layers)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- layers: [
- {
- html: `
`,
- style: {
- position: 'absolute',
- top: '20px',
- right: '20px',
- opacity: '.9',
- },
- },
- ],
-});
-```
-
-## contextmenu
-
-- Type: `Array`
-- Default: `[]`
-
-Custom contextmenu, The type of layer is an object or function
-
-| propertie | type | Description |
-| --------- | ------------------- | --------------------------------------------- |
-| `disable` | `Boolean` | Whether to disable |
-| `name` | `String` | The unique name , used for the class name |
-| `index` | `Number` | The unique index, used for the priority level |
-| `html` | `String`、`Element` | The dom element |
-| `style` | `Object` | The style object |
-| `click` | `Function` | Click event |
-| `mounted` | `Function` | Callback after mounted |
-| `tooltip` | `String` | Tooltip text |
-
-[Run Code](/Configuration.contextmenu)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- contextmenu: [
- {
- html: 'Custom menu',
- click: function (contextmenu) {
- console.info('You clicked on the custom menu');
- contextmenu.show = false;
- },
- },
- ],
-});
-```
-
-## controls
-
-- Type: `Array`
-- Default: `[]`
-
-Custom controls, The type of controls is an object or function
-
-| propertie | type | Description |
-| ---------- | ------------------- | ----------------------------------------------------------------- |
-| `disable` | `Boolean` | Whether to disable |
-| `name` | `String` | The unique name , used for the class name |
-| `index` | `Number` | The unique index, used for the priority level |
-| `html` | `String`、`Element` | The dom element |
-| `style` | `Object` | The style object |
-| `click` | `Function` | Click event |
-| `mounted` | `Function` | Callback after mounted |
-| `position` | `String` | The position where the controller appears: `top`, `left`, `right` |
-| `tooltip` | `String` | Tooltip text |
-
-[Run Code](/Configuration.controls)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- controls: [
- {
- name: 'myController',
- position: 'right',
- index: 10,
- html: 'myController',
- tooltip: 'This is my controller',
- click: function () {
- console.log('myController');
- },
- },
- ],
-});
-```
-
-## plugins
-
-- Type: `Array`
-- Default: `[]`
-
-Custom plugins, The type of plugin is a function
-
-[Run Code](/Configuration.plugins)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- plugins: [
- function myPlugin(art) {
- // Do something you like here.
- // You can also return an object for external calls.
- console.info('myPlugin running...');
- return {
- // This exposes plugin properties or methods for others to use. Like:
- something: 'something',
- doSomething: function () {
- console.info('Do something here...');
- },
- };
- },
- ],
-});
-
-// Call plugin from the outside
-art.plugins.myPlugin.doSomething();
-```
-
-# Instance properties
-
-## Instance
-
-| propertie | type | Description |
-| ----------- | ---------- | ------------------------------------------------ |
-| `isFocus` | `Boolean` | Return the focus state |
-| `userAgent` | `String` | The user agent |
-| `isMobile` | `boolean` | Whether mobile access |
-| `isDestroy` | `Boolean` | Return the destroy state |
-| `option` | `Object` | Return the merge option |
-| `destroy` | `Function` | Destroy instance, will not remove dom by default |
-
-[Run Code](/Properties.instance)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
-});
-
-console.log('isFocus', art.isFocus);
-console.log('isDestroy', art.isDestroy);
-console.log('option', art.option);
-
-setTimeout(function () {
- // remove dom
- art.destroy();
-
- // keep dom
- // art.destroy(false);
-}, 1000);
-```
-
-## player
-
-Player core function.
-
-All player properties and methods can be accessed directly through the instance. For example, the following properties are all equal:
-
-```js
-art.currentTime === art.player.currentTime;
-art.volume === art.player.volume;
-art.seek === art.player.seek;
-```
-
-| propertie | type | Description |
-| ------------------------ | ---------- | ------------------------------------------------------------------------------------------------- |
-| `aspectRatio` | `String` | Set aspect ratio, Currently only accepts three values：`default`, `4:3`, `16:9` and `false` |
-| `aspectRatioReset` | `Boolean` | Recalculate the aspect ratio |
-| `url` | `String` | `Getter` and `Setter` of the video url |
-| `autoSize` | `Boolean` | Set auto size |
-| `currentTime` | `Number` | `Getter` and `Setter` of the current time |
-| `duration` | `Number` | `Getter` of the duration |
-| `flip` | `String` | Set flip, Currently only accepts three values：`normal`, `horizontal`, `vertical` and `false` |
-| `fullscreen` | `Boolean` | Enable or disable fullscreen |
-| `fullscreenToggle` | `Boolean` | Toggle fullscreen |
-| `fullscreenWeb` | `Boolean` | Enable or disable web fullscreen |
-| `fullscreenWebToggle` | `Boolean` | Toggle web fullscreen |
-| `fullscreenRotate` | `Boolean` | Enable or disable web fullscreen on the mobile |
-| `fullscreenRotateToggle` | `Boolean` | Toggle web fullscreen on the mobile |
-| `loaded` | `Number` | Return the proportion of the load |
-| `pause` | `Boolean` | Pause playback |
-| `pip` | `Boolean` | Enable or disable pip |
-| `pipToggle` | `Boolean` | Toggle pip |
-| `min` | `Boolean` | Enable or disable min player |
-| `minToggle` | `Boolean` | Toggle min player |
-| `playbackRate` | `String` | Set playbackRate, Currently only accepts three values：`0.5`, `0.75`, `1.0`, `1.25`, `1.5`, `2.0` |
-| `playbackRateReset` | `Boolean` | Recalculate the playback rate |
-| `played` | `Number` | Return the proportion of the played |
-| `playing` | `Boolean` | Return to playing state |
-| `play` | `Boolean` | Start playback |
-| `screenshot` | `Function` | Download a screenshot of current time |
-| `seek` | `Number` | Set the current time |
-| `forward` | `Number` | Video fast forward |
-| `backward` | `Number` | Video fast backward |
-| `switchQuality` | `Function` | Switch video quality |
-| `switchUrl` | `Function` | Switch video url |
-| `toggle` | `Boolean` | Toggle play and pause |
-| `volume` | `Number` | `Getter` and `Setter` of the current volume |
-| `muted` | `Boolean` | `Getter` and `Setter` of the muted |
-| `light` | `Boolean` | `Getter` and `Setter` of the light mode |
-| `url` | `String` | `Getter` and `Setter` of the video url |
-| `loop` | `Arrary` | `Getter` and `Setter` of the interval loop |
-
-[Run Code](/Properties.player)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
-});
-
-art.on('ready', () => {
- art.player.seek = 5;
- art.player.screenshot();
-});
-```
-
-## storage
-
-The player will automatically add a `localStorage` object named `artplayer_settings`, Now the player will only set and read the `volume` value.
-
-| propertie | type | Description |
-| --------- | ---------- | ----------------- |
-| `get` | `Function` | Get a storage |
-| `set` | `Function` | Set a storage |
-| `del` | `Function` | Delete a storage |
-| `clean` | `Function` | Clean all storage |
-
-[Run Code](/Properties.storage)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
-});
-
-art.storage.set('your-key', 'your-value');
-console.log(art.storage.get('your-key'));
-```
-
-## i18n
-
-The current support i18n has: `en`, `zh-cn`, `zh-tw`
-
-| propertie | type | Description |
-| --------- | ---------- | ------------------------------- |
-| `get` | `Function` | Get the a i18n value |
-| `update` | `Function` | Pass in a parameter for merging |
-
-[Run Code](/Properties.i18n)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- lang: 'jp',
-});
-
-console.log(art.i18n.get('Play'));
-art.i18n.update({
- 'zh-cn': {
- Language: '简体',
- },
- 'zh-tw': {
- Language: '繁體',
- },
- jp: {
- Language: '日文',
- },
-});
-console.log(art.i18n.get('Language'));
-```
-
-## hotkey
-
-| propertie | type | Description |
-| --------- | ---------- | ------------ |
-| `add` | `function` | Add a hotkey |
-
-[Run Code](/Properties.hotkey)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
-});
-
-// Add a hotkey
-art.hotkey.add(27, function (event) {
- console.log('You pressed esc button');
-});
-```
-
-## whitelist
-
-| propertie | type | Description |
-| --------- | --------- | ------------------------------------- |
-| `state` | `Boolean` | Whether to enable the UI on the phone |
-
-## notice
-
-- Type: `Object`
-
-| propertie | type | Description |
-| --------- | -------- | -------------- |
-| `show` | `setter` | Show a message |
-
-[Run Code](/Properties.notice)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
-});
-
-// auto hide
-art.notice.show = 'some message';
-```
-
-## events
-
-Agent for managing native events
-
-- Type: `Object`
-
-| propertie | type | Description |
-| --------- | ---------- | ------------------------------------------------------------------------------------ |
-| `proxy` | `Function` | A proxy for `addEventListener` and `removeEventListener` to manage event destruction |
-| `hover` | `Function` | Hover simplified proxy |
-| `loadImg` | `Function` | Determine whether to finish the picture |
-| `destroy` | `Function` | Destroy all events |
-
-[Run Code](/Properties.events)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
-});
-
-var target = document.querySelector('body');
-art.events.proxy(target, 'click', function (e) {
- console.log('body click');
-});
-```
-
-## layers
-
-Layer manager, and every layer has `show` and `hide` funciton
-
-- Type: `Object`
-
-| propertie | type | Description |
-| --------- | ---------- | ----------------------- |
-| `add` | `Function` | Dynamically add a layer |
-| `show` | `setter` | Show or hide |
-
-[Run Code](/Properties.layers)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
-});
-
-art.layers.add({
- html: ``,
- style: {
- position: 'absolute',
- top: '20px',
- right: '20px',
- opacity: '.9',
- },
-});
-```
-
-## controls
-
-Controls manager, and every control has `show` setter
-
-- Type: `Object`
-
-| propertie | type | Description |
-| --------- | ---------- | ------------------------- |
-| `add` | `Function` | Dynamically add a control |
-| `show` | `setter` | Show or hide |
-
-[Run Code](/Properties.controls)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
-});
-
-art.controls.add({
- name: 'myController',
- position: 'right',
- index: 10,
- html: 'myController',
- tooltip: 'This is my controller',
- click: function () {
- console.log('myController');
- },
-});
-```
-
-## contextmenu
-
-Contextmenu manager, and every contextmenu has `show` setter
-
-- Type: `Object`
-
-| propertie | type | Description |
-| --------- | ---------- | ----------------------------- |
-| `add` | `Function` | Dynamically add a contextmenu |
-| `show` | `setter` | Show or hide |
-
-[Run Code](/Properties.contextmenu)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
-});
-
-art.contextmenu.add({
- html: 'Custom menu',
- click: function (contextmenu) {
- console.info('You clicked on the custom menu');
- contextmenu.show = false;
- },
-});
-```
-
-## subtitle
-
-- Type: `Object`
-
-| propertie | type | Description |
-| --------- | ---------- | ---------------- |
-| `init` | `Function` | Init subtitle |
-| `show` | `setter` | Show or hide |
-| `switch` | `Function` | Switch subtitle |
-| `url` | `getter` | get subtitle url |
-
-[Run Code](/Properties.subtitle)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- subtitle: {
- url: url + '/subtitle/one-more-time-one-more-chance.srt',
- },
- controls: [
- {
- position: 'right',
- index: 10,
- html: 'subtitle 01',
- click: function () {
- art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.srt', 'srt subtitle name');
- },
- },
- {
- position: 'right',
- index: 20,
- html: 'subtitle 02',
- click: function () {
- art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.vtt', 'vtt subtitle name');
- },
- },
- ],
-});
-```
-
-## loading
-
-- Type: `Object`
-
-| propertie | type | Description |
-| --------- | -------- | ------------ |
-| `show` | `setter` | Show or hide |
-
-[Run Code](/Properties.loading)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
-});
-
-art.on('ready', function () {
- // Show the loading
- art.loading.show = true;
- setTimeout(function () {
- // Hide the loading
- art.loading.show = false;
- }, 5000);
-});
-```
-
-## mask
-
-- Type: `Object`
-
-| propertie | type | Description |
-| --------- | -------- | ------------ |
-| `show` | `setter` | Show or hide |
-
-[Run Code](/Properties.mask)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
-});
-
-art.on('ready', function () {
- // Show the mask
- art.mask.show = true;
- setTimeout(function () {
- // Hide the mask
- art.mask.show = false;
- }, 5000);
-});
-```
-
-## setting
-
-Setting manager, and every setting has `show` and `hide` funciton
-
-- Type: `Object`
-
-| propertie | type | Description |
-| --------- | ---------- | ------------------------- |
-| `add` | `Function` | Dynamically add a setting |
-| `show` | `setter` | Show or hide |
-
-[Run Code](/Properties.setting)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
- setting: true,
-});
-
-art.on('ready', function () {
- // Add a setting
- art.setting.add({
- html: 'Your Setting',
- name: 'yourSetting',
- });
-
- // Show the setting
- art.setting.show = true;
- setTimeout(function () {
- // Hide the setting
- art.setting.show = false;
- }, 5000);
-});
-```
-
-## plugins
-
-Plugins manager
-
-- Type: `Object`
-
-| propertie | type | Description |
-| --------- | ---------- | ------------------------ |
-| `add` | `Function` | Dynamically add a plugin |
-
-[Run Code](/Properties.plugins)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- url: url + '/video/one-more-time-one-more-chance-480p.mp4',
-});
-
-art.plugins.add(function myPlugin(art) {
- // Do something you like here.
- // You can also return an object for external calls.
- console.info('myPlugin running...');
- return {
- // This exposes plugin properties or methods for others to use. Like:
- something: 'something',
- doSomething: function () {
- console.info('Do something here...');
- },
- };
-});
-
-// Call plugin from the outside
-art.plugins.myPlugin.something === 'something';
-art.plugins.myPlugin.doSomething();
-```
-
-# Class static properties
-
-All properties are read only
-
-| propertie | type | Description |
-| --------------------- | -------- | ------------------------- |
-| `Artplayer.version` | `String` | Version Information |
-| `Artplayer.env` | `String` | Environmental variable |
-| `Artplayer.config` | `Object` | Configuration information |
-| `Artplayer.utils` | `Object` | Utils function |
-| `Artplayer.option` | `Object` | Default option |
-| `Artplayer.instances` | `Array` | Instance collection |
-| `Artplayer.scheme` | `Array` | Option scheme |
-| `Artplayer.Emitter` | `Array` | Emitter constructor |
-| `Artplayer.validator` | `Array` | Option validator |
-| `Artplayer.kindOf` | `Array` | Data type detection tool |
-
-# Event
-
-```js
-art.on('ready', function (args) {
- console.log('The player can play');
-});
-```
-
-## Instance
-
-| Event | Description | Parameter |
-| --------------------- | --------------------------------------- | ----------------------- |
-| `ready` | When the video can be played | `undefined` |
-| `play` | When the video play | `undefined` |
-| `pause` | When the video pause | `undefined` |
-| `seek` | When the video seek | Video current time |
-| `volume` | When the video volume change | Video volume value |
-| `destroy` | When the instance is destroyed | `undefined` |
-| `focus` | When the player gets focus | `undefined` |
-| `blur` | When the player loses focus | `undefined` |
-| `hoverenter` | When the mouse is moved into the player | `undefined` |
-| `hoverleave` | When the mouse is moved out the player | `undefined` |
-| `resize` | When the player resize | Player size |
-| `mousemove` | When the mouse moves over the player | `undefined` |
-| `aspectRatioChange` | When aspect ratio change | Aspect ratio |
-| `aspectRatioRemove` | When aspect ratio remove | `undefined` |
-| `aspectRatioReset` | When aspect ratio reset | `undefined` |
-| `customType` | After triggering CustomType | Type name |
-| `urlChange` | After the video url change | Video url |
-| `autoSizeChange` | When the player auto size change | Player size |
-| `autoSizeRemove` | When the player auto size remove | `undefined` |
-| `flipChange` | When the player flip change | Flip name |
-| `flipRemove` | When the player flip remove | `undefined` |
-| `fullscreenChange` | When the full screen status change | Whether full screen |
-| `fullscreenWebChange` | When entering web full screen | Whether web full screen |
-| `pipChange` | When entering picture in picture | Whether in pip |
-| `minChange` | When entering min player | Whether in min player |
-| `playbackRateChange` | When playback rate change | Playback rate |
-| `playbackRateRemove` | When playback rate remove | `undefined` |
-| `playbackRateReset` | When playback rate reset | `undefined` |
-| `screenshot` | When a screenshot occurs | Image data uri |
-| `switch` | When switching video url | Video url |
-| `loopAdd` | When an interval loop is added | Interval arrary |
-| `loopRemove` | When the interval loop is deleted | `undefined` |
-| `loopStart` | When entering the interval cycle | Interval arrary |
-
-## Video (Native event)
-
-You can use all the native events of video directly: [MDN web docs - Media events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events).
-
-But be careful to add the `video` prefix in front of the event:
-
-```js
-art.on('video:canplay', function (event) {
- console.log(event);
-});
-```
-
-## Subtitle
-
-| Event | Description | Parameter |
-| ----------------- | ----------------------------- | --------------------- |
-| `subtitle:update` | When the subtitles change | Current subtitle text |
-| `subtitle:switch` | When switching subtitles | Current subtitle url |
-| `subtitle:load` | When the subtitles loaded | Current subtitle url |
-| `subtitle:err` | When the subtitles load error | Error object |
-| `subtitle:toggle` | When displaying subtitles | Whether to show |
-
-## Notice
-
-| Event | Description | Parameter |
-| --------------- | ---------------------- | --------------- |
-| `notice:toggle` | When displaying notice | Whether to show |
-
-## Mask
-
-| Event | Description | Parameter |
-| ------------- | -------------------- | --------------- |
-| `mask:toggle` | When displaying mask | Whether to show |
-
-## Loading
-
-| Event | Description | Parameter |
-| ---------------- | ----------------------- | --------------- |
-| `loading:toggle` | When displaying loading | Whether to show |
-
-## Layer
-
-| Event | Description | Parameter |
-| -------------- | ----------------------- | ------------------- |
-| `layer:add` | When adding a new layer | Layer configuration |
-| `layer:toggle` | When displaying layer | Whether to show |
-
-## Info
-
-| Event | Description | Parameter |
-| ------------- | -------------------- | --------------- |
-| `info:toggle` | When displaying info | Whether to show |
-
-## Hotkey
-
-| Event | Description | Parameter |
-| -------- | ---------------------------- | ------------------- |
-| `hotkey` | When the hotkey is triggered | Hotkey event object |
-
-## Setting
-
-| Event | Description | Parameter |
-| ---------------- | ------------------------- | --------------------- |
-| `setting:add` | When adding a new setting | Setting configuration |
-| `setting:toggle` | When displaying setting | Whether to show |
-
-## Contextmenu
-
-| Event | Description | Parameter |
-| -------------------- | ----------------------------- | ------------------------- |
-| `contextmenu:add` | When adding a new contextmenu | Contextmenu configuration |
-| `contextmenu:toggle` | When displaying contextmenu | Whether to show |
-
-## Control
-
-| Event | Description | Parameter |
-| ---------------- | ------------------------- | --------------------- |
-| `control:add` | When adding a new control | Control configuration |
-| `control:toggle` | When displaying control | Whether to show |
-
-## Plugins
-
-| Event | Description | Parameter |
-| ------------ | ------------------------ | -------------------- |
-| `plugin:add` | When adding a new plugin | Plugin configuration |
-
-# Third-party libraries
-
-## flv.js
-
-- HomePage: [https://github.com/Bilibili/flv.js](https://github.com/Bilibili/flv.js)
-
-[Run Code](/lib=https://cdn.bootcss.com/flv.js/1.4.2/flv.js)
-
-```js
-var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
- container: '.artplayer-app',
- autoplay: true,
- url: url + '/video/one-more-time-one-more-chance-480p.flv',
- customType: {
- flv: function (video, url) {
- const flvPlayer = flvjs.createPlayer({
- type: 'flv',
- url: url,
- });
- flvPlayer.attachMediaElement(video);
- flvPlayer.load();
- },
- },
-});
-```
-
-## hls.js
-
-- HomePage: [https://github.com/video-dev/hls.js](https://github.com/video-dev/hls.js)
-
-[Run Code](/lib=https://cdn.bootcss.com/hls.js/0.10.1/hls.js)
-
-```js
-var art = new Artplayer({
- container: '.artplayer-app',
- autoplay: true,
- url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
- customType: {
- m3u8: function (video, url) {
- var hls = new Hls();
- hls.loadSource(url);
- hls.attachMedia(video);
- },
- },
-});
-```
-
-## dash.js
-
-- HomePage: [https://github.com/Dash-Industry-Forum/dash.js](https://github.com/Dash-Industry-Forum/dash.js)
-
-[Run Code](/lib=https://cdn.bootcss.com/dashjs/2.9.2/dash.all.min.js)
-
-```js
-var art = new Artplayer({
- container: '.artplayer-app',
- autoplay: true,
- url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd',
- customType: {
- mpd: function (video, url) {
- var player = dashjs.MediaPlayer().create();
- player.initialize(video, url, true);
- },
- },
-});
-```
-
-## shaka-player
-
-- HomePage: [https://github.com/google/shaka-player](https://github.com/google/shaka-player)
-
-[Run Code](/lib=https://cdn.bootcss.com/shaka-player/2.5.0-beta/shaka-player.compiled.js)
-
-```js
-var art = new Artplayer({
- container: '.artplayer-app',
- autoplay: true,
- url: '//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd',
- customType: {
- mpd: function (video, url) {
- shaka.polyfill.installAll();
- var player = new shaka.Player(video);
- player.load(url);
- },
- },
-});
-```
-
-## webtorrent
-
-- HomePage: [https://github.com/webtorrent/webtorrent](https://github.com/webtorrent/webtorrent)
-
-[Run Code](/lib=https://cdn.bootcss.com/webtorrent/0.102.4/webtorrent.min.js)
-
-```js
-var art = new Artplayer({
- container: '.artplayer-app',
- autoplay: true,
- url:
- 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4',
- type: 'torrent',
- customType: {
- torrent: function (video, url, art) {
- var client = new WebTorrent();
- art.loading.show = true;
- client.add(url, function (torrent) {
- var file = torrent.files[0];
- file.renderTo(video, {
- autoplay: true,
- });
- });
- },
- },
+ url: '/assets/sample/video.mp4',
});
```
diff --git a/docs/document/_sidebar.md b/docs/document/_sidebar.md
new file mode 100644
index 000000000..1f5b848d1
--- /dev/null
+++ b/docs/document/_sidebar.md
@@ -0,0 +1,6 @@
+- [Getting started](/)
+- [Options](/options)
+- [Properties](/properties)
+- [Events](/events)
+- [Class](/class)
+- [Libraries](/libraries)
diff --git a/docs/document/class.md b/docs/document/class.md
new file mode 100644
index 000000000..9e07360a0
--- /dev/null
+++ b/docs/document/class.md
@@ -0,0 +1,99 @@
+## version
+
+- Type: `String`
+
+[Run Code](/Class.version)
+
+```js
+console.log(Artplayer.version);
+```
+
+## env
+
+- Type: `String`
+
+[Run Code](/Class.env)
+
+```js
+console.log(Artplayer.env);
+```
+
+## config
+
+- Type: `Object`
+
+[Run Code](/Class.config)
+
+```js
+console.log(Artplayer.config);
+```
+
+## utils
+
+- Type: `Object`
+
+[Run Code](/Class.utils)
+
+```js
+console.log(Artplayer.utils);
+```
+
+## option
+
+- Type: `Object`
+
+[Run Code](/Class.option)
+
+```js
+console.log(Artplayer.option);
+```
+
+## instances
+
+- Type: `Array`
+
+[Run Code](/Class.instances)
+
+```js
+console.log(Artplayer.instances.length);
+```
+
+## scheme
+
+- Type: `Object`
+
+[Run Code](/Class.scheme)
+
+```js
+console.log(Artplayer.scheme);
+```
+
+## Emitter
+
+- Type: `Function`
+
+[Run Code](/Class.Emitter)
+
+```js
+console.log(Artplayer.Emitter);
+```
+
+## validator
+
+- Type: `Function`
+
+[Run Code](/Class.validator)
+
+```js
+console.log(Artplayer.validator);
+```
+
+## kindOf
+
+- Type: `Function`
+
+[Run Code](/Class.kindOf)
+
+```js
+console.log(Artplayer.kindOf);
+```
diff --git a/docs/document/common.js b/docs/document/common.js
deleted file mode 100644
index 2357469a5..000000000
--- a/docs/document/common.js
+++ /dev/null
@@ -1,25 +0,0 @@
-(function () {
- window.runCode = function(hook) {
- hook.ready(function() {
- Array.from(document.querySelectorAll('.markdown-section a'))
- .filter(function(item) {
- return item.innerHTML === 'Run Code';
- })
- .forEach(function(item) {
- item.addEventListener('click', function(event) {
- event.preventDefault();
- var codeElement = item.parentElement.nextElementSibling;
- if (
- codeElement.tagName === 'PRE' &&
- codeElement.dataset.lang === 'js'
- ) {
- var libs = item.href.split('/lib=')[1] || '';
- var code = encodeURIComponent(codeElement.innerText);
- var url = 'https://artplayer.org/?libs=' + libs + '&code=' + code;
- window.open(url);
- }
- });
- });
- });
- };
-})();
diff --git a/docs/document/events.md b/docs/document/events.md
new file mode 100644
index 000000000..1357898be
--- /dev/null
+++ b/docs/document/events.md
@@ -0,0 +1,129 @@
+```js
+art.on('ready', function (args) {
+ console.log('The player can play');
+});
+```
+
+## Instance
+
+| Event | Description | Parameter |
+| --------------------- | --------------------------------------- | ----------------------- |
+| `ready` | When the video can be played | `undefined` |
+| `play` | When the video play | `undefined` |
+| `pause` | When the video pause | `undefined` |
+| `seek` | When the video seek | Video current time |
+| `volume` | When the video volume change | Video volume value |
+| `destroy` | When the instance is destroyed | `undefined` |
+| `focus` | When the player gets focus | `undefined` |
+| `blur` | When the player loses focus | `undefined` |
+| `hoverenter` | When the mouse is moved into the player | `undefined` |
+| `hoverleave` | When the mouse is moved out the player | `undefined` |
+| `resize` | When the player resize | Player size |
+| `mousemove` | When the mouse moves over the player | `undefined` |
+| `aspectRatioChange` | When aspect ratio change | Aspect ratio |
+| `aspectRatioRemove` | When aspect ratio remove | `undefined` |
+| `aspectRatioReset` | When aspect ratio reset | `undefined` |
+| `customType` | After triggering CustomType | Type name |
+| `urlChange` | After the video url change | Video url |
+| `autoSizeChange` | When the player auto size change | Player size |
+| `autoSizeRemove` | When the player auto size remove | `undefined` |
+| `flipChange` | When the player flip change | Flip name |
+| `flipRemove` | When the player flip remove | `undefined` |
+| `fullscreenChange` | When the full screen status change | Whether full screen |
+| `fullscreenWebChange` | When entering web full screen | Whether web full screen |
+| `pipChange` | When entering picture in picture | Whether in pip |
+| `minChange` | When entering min player | Whether in min player |
+| `playbackRateChange` | When playback rate change | Playback rate |
+| `playbackRateRemove` | When playback rate remove | `undefined` |
+| `playbackRateReset` | When playback rate reset | `undefined` |
+| `screenshot` | When a screenshot occurs | Image data uri |
+| `switch` | When switching video url | Video url |
+| `loopAdd` | When an interval loop is added | Interval arrary |
+| `loopRemove` | When the interval loop is deleted | `undefined` |
+| `loopStart` | When entering the interval cycle | Interval arrary |
+
+## Video (Native event)
+
+You can use all the native events of video directly: [MDN web docs - Media events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events).
+
+But be careful to add the `video` prefix in front of the event:
+
+```js
+art.on('video:canplay', function (event) {
+ console.log(event);
+});
+```
+
+## Subtitle
+
+| Event | Description | Parameter |
+| ----------------- | ----------------------------- | --------------------- |
+| `subtitle:update` | When the subtitles change | Current subtitle text |
+| `subtitle:switch` | When switching subtitles | Current subtitle url |
+| `subtitle:load` | When the subtitles loaded | Current subtitle url |
+| `subtitle:err` | When the subtitles load error | Error object |
+| `subtitle:toggle` | When displaying subtitles | Whether to show |
+
+## Notice
+
+| Event | Description | Parameter |
+| --------------- | ---------------------- | --------------- |
+| `notice:toggle` | When displaying notice | Whether to show |
+
+## Mask
+
+| Event | Description | Parameter |
+| ------------- | -------------------- | --------------- |
+| `mask:toggle` | When displaying mask | Whether to show |
+
+## Loading
+
+| Event | Description | Parameter |
+| ---------------- | ----------------------- | --------------- |
+| `loading:toggle` | When displaying loading | Whether to show |
+
+## Layer
+
+| Event | Description | Parameter |
+| -------------- | ----------------------- | ------------------- |
+| `layer:add` | When adding a new layer | Layer configuration |
+| `layer:toggle` | When displaying layer | Whether to show |
+
+## Info
+
+| Event | Description | Parameter |
+| ------------- | -------------------- | --------------- |
+| `info:toggle` | When displaying info | Whether to show |
+
+## Hotkey
+
+| Event | Description | Parameter |
+| -------- | ---------------------------- | ------------------- |
+| `hotkey` | When the hotkey is triggered | Hotkey event object |
+
+## Setting
+
+| Event | Description | Parameter |
+| ---------------- | ------------------------- | --------------------- |
+| `setting:add` | When adding a new setting | Setting configuration |
+| `setting:toggle` | When displaying setting | Whether to show |
+
+## Contextmenu
+
+| Event | Description | Parameter |
+| -------------------- | ----------------------------- | ------------------------- |
+| `contextmenu:add` | When adding a new contextmenu | Contextmenu configuration |
+| `contextmenu:toggle` | When displaying contextmenu | Whether to show |
+
+## Control
+
+| Event | Description | Parameter |
+| ---------------- | ------------------------- | --------------------- |
+| `control:add` | When adding a new control | Control configuration |
+| `control:toggle` | When displaying control | Whether to show |
+
+## Plugins
+
+| Event | Description | Parameter |
+| ------------ | ------------------------ | -------------------- |
+| `plugin:add` | When adding a new plugin | Plugin configuration |
diff --git a/docs/document/index.html b/docs/document/index.html
index c89fb6413..f6ab9f940 100644
--- a/docs/document/index.html
+++ b/docs/document/index.html
@@ -1,36 +1,69 @@
+
ArtPlayer Document
-
+
-
+
+
-
-
+ Loading
-
+
+
-
+
+