mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-11 13:56:15 -08:00
优化docs
This commit is contained in:
Harvey committed
1 parent
bafbd78018
commit
caa0128d37
24 files changed
+2667
-1850
No files matched your search
@@ -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,
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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],
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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: [
|
||||
{
|
||||
|
||||
@@ -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',
|
||||
},
|
||||
|
||||
@@ -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',
|
||||
},
|
||||
]),
|
||||
],
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><i><chatserver>chat.bilibili.com</chatserver><chatid>34600995</chatid><mission>0</mission><maxlimit>1000</maxlimit><state>0</state><real_name>0</real_name><source>k-v</source><d p="146.86400,1,25,16777215,1466672718,0,93e12d9a,11143261872193540">成长是不是意味着失去</d><d p="54.08100,1,25,16777215,1466672727,0,f9968dae,11143261873242116">看了十几变了</d><d p="233.77000,1,25,16777215,1466694686,0,d62a685d,11143261874814980">你和我走过6年学生时代，但却无奈的止步于现实</d><d p="68.61400,5,25,16711680,1467025679,0,7c4de0b4,11143261877436420">一点时间，一个机会。</d><d p="140.47700,1,25,16777215,1467346364,0,ce211688,11143261880582148">原版无可替代</d><d p="189.14600,1,25,16777215,1467544035,0,74e714b2,11143261885825028">我喜欢你啊！！！！泪目惹！！？</d><d p="137.51500,1,25,14811775,1467547693,0,66c09821,11143261887397892">谁发明的火车，拉出去斩了。</d><d p="147.35900,1,25,16777215,1467547696,0,1d49c4a4,11143261888970756">我希望自己能成为一个有故事的人</d><d p="73.45400,1,25,16777215,1467943859,0,dfff46d8,11143261890019332">歌词感人</d><d p="222.38000,1,25,16777215,1467947462,0,dfff46d8,11143261891067908">时间和距离冲淡了一切</d><d p="100.98600,1,25,16777215,1467994334,0,4265df06,11143261893165060">大爱秒五</d><d p="26.19700,1,25,15138834,1467994351,0,ded1e585,11143261893689348">每一秒都是壁纸系列</d><d p="151.17700,1,25,16777215,1468156171,0,b365d11a,11143261927768068">是的</d><d p="108.25100,1,25,16777215,1468231601,0,bfe5df8b,11143261929340932">循环已开，爬不出去了</d><d p="119.96100,1,25,16777215,1468386119,0,87a73c96,11143261930389508">经费燃烧</d><d p="151.92900,1,25,16777215,1468941081,0,be6c732c,11143261931438084">这里的星空真的让我惊艳了好久</d><d p="68.33700,5,25,16711680,1469005528,0,796721d4,11143261933010948">悲剧在男孩踌躇时就已酿成</d><d p="303.16900,5,25,16711680,1469005529,0,796721d4,11143261934059524">小时候，男孩犹豫不前，女孩在等他，也是在“等”他</d><d p="303.27900,5,25,16711680,1469005530,0,796721d4,11143261937729540">长大后，男孩依然在过去徘徊，但女孩已不再等他了</d><d p="303.27900,5,25,16711680,1469005530,0,796721d4,11143261939302404">这就是他们为什么总在平行线上</d><d p="303.27900,5,25,16711680,1469005531,0,796721d4,11143261940350980">悲剧在男孩开始的犹豫时已酿成，只能补救不能避免</d><d p="303.27900,5,25,16711680,1469005532,0,796721d4,11143261941399556">像我......如今再想起平行线上的她，感觉已来不及了</d><d p="319.10000,1,25,16777215,1469005534,0,796721d4,11143261942448132">回忆中的女孩还在等他，而现实的女孩已不再等他了</d><d p="25.62000,1,25,14811775,1469286711,0,faa38ec8,11143261945069572">为什么不能有个明理看到贵树的镜头</d><d p="269.51100,5,25,11890,1469351108,0,dbb764c3,11143261946118148">还有那句没能说出的我爱你</d><d p="307.12400,1,25,16777215,1469696753,0,2046d708,11143261947166724">看红字</d><d p="70.56000,1,25,16711680,1469696757,0,8d5c1186,11143261948739588">看了秒五心堵得难受</d><d p="208.98000,1,25,16777215,1469895139,0,87de2803,11143261949263876">现在有时候还会刻意去路过一些有回忆的地方 明明已经过去好久了</d><d p="108.45800,1,25,16777215,1470060644,0,243d1bd8,11143261950312452">贵树是程序员</d><d p="103.35500,1,25,16777215,1470643461,0,5eeae8f8,11143261980721156">好想哭</d><d p="172.08400,1,25,16777215,1470643462,0,5eeae8f8,11143261981769732">如果奇迹能够发生</d><d p="114.99600,1,25,16777215,1470751854,0,a91a579a,11143261982818308">我来的比较迟</d><d p="128.62800,1,25,16777215,1470751854,0,a91a579a,11143261984391172">明理</d><d p="94.73400,1,25,16777215,1470751859,0,98f27656,11143261985964036">我扬起嘴角看着我那一败涂地的坚持，仅此一次、仅此一生、</d><d p="143.61200,1,25,16777215,1471251912,0,d9780efa,11143261993828356">看了四遍还是蛮心疼女二的</d><d p="188.66300,1,25,16777215,1471302431,0,309b7fdf,11143261996449796">这首歌之前是两人的独白我觉得完美没有遗憾</d><d p="36.73700,1,25,16777215,1471539709,0,e425a73b,11143261998022660">不敢看第二遍的电影</d><d p="298.42600,1,25,16777215,1471781304,0,cfa77c8b,11143262001168388">再给我一次机会我还是说不出，毕竟这是现实啊</d><d p="99.74000,1,25,14811775,1471792291,0,faa38ec8,11143262002216964">越听感觉越伤感，哪怕以后想起</d><d p="223.98000,1,25,16707842,1471792293,0,faa38ec8,11143262003265540">贵树那封信大概是分手信吧</d><d p="237.35800,1,25,14811775,1471888942,0,6a0f87bc,11143262027382788">人家都结婚了，或许不相见不打扰才是真正的温柔</d><d p="281.65800,1,25,16777215,1472576490,0,eec7bd83,11143262032625668">我喜欢过你</d><d p="4.26900,1,25,16777215,1472662895,0,cf9abc49,1114Line truncated
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
@@ -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
|
||||
－－终わり－－
|
||||
|
||||
@@ -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
|
||||
－－终わり－－
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 753 KiB |
Binary file not shown.
Binary file not shown.
+39
-1751
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,6 @@
|
||||
- [Getting started](/)
|
||||
- [Options](/options)
|
||||
- [Properties](/properties)
|
||||
- [Events](/events)
|
||||
- [Class](/class)
|
||||
- [Libraries](/libraries)
|
||||
@@ -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);
|
||||
```
|
||||
@@ -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);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
})();
|
||||
@@ -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 |
|
||||
+44
-11
@@ -1,36 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>ArtPlayer Document</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta name="keywords" content="artplayer,html5,video,player">
|
||||
<meta name="description" content="ArtPlayer is a modern HTML5 video player">
|
||||
<link rel="shortcut icon" href="./favicon.ico">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/docsify/lib/themes/vue.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="./common.js"></script>
|
||||
<div id="app">Loading</div>
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: 'ArtPlayer',
|
||||
repo: 'zhw2590582/ArtPlayer',
|
||||
maxLevel: 4,
|
||||
auto2top: true,
|
||||
subMaxLevel: 2,
|
||||
plugins: [window.runCode]
|
||||
loadSidebar: true,
|
||||
plugins: [function (hook) {
|
||||
hook.ready(function () {
|
||||
document.addEventListener('click', function (event) {
|
||||
if (event.target.tagName === 'A' && event.target.innerHTML === 'Run Code') {
|
||||
event.preventDefault();
|
||||
var codeElement = event.target.parentElement.nextElementSibling;
|
||||
if (
|
||||
codeElement.tagName === 'PRE' &&
|
||||
codeElement.dataset.lang === 'js'
|
||||
) {
|
||||
var libs = event.target.href.split('/lib=')[1] || '';
|
||||
var code = encodeURIComponent(codeElement.innerText);
|
||||
var url = 'http://localhost:8081/?libs=' + libs + '&code=' + code;
|
||||
window.open(url);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
<script src="https://unpkg.com/docsify@4.10.2/lib/docsify.min.js"></script>
|
||||
<script src="https://unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
<script src="https://unpkg.com/docsify/lib/plugins/search.min.js"></script>
|
||||
<script>
|
||||
var _hmt = _hmt || [];
|
||||
(function() {
|
||||
var isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
window.location.hostname === '[::1]' ||
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
);
|
||||
var _hmt = _hmt || [];
|
||||
(function () {
|
||||
if (!isLocalhost) {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "https://hm.baidu.com/hm.js?b6c9b8bafbf5fe7225160101dafbbc7d";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,113 @@
|
||||
## 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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
autoplay: true,
|
||||
url: '/assets/sample/video.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,
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,941 @@
|
||||
## container
|
||||
|
||||
- Type: `String、Element`
|
||||
- Default: `#artplayer`
|
||||
- Required: `true`
|
||||
|
||||
DOM container of the player
|
||||
|
||||
[Run Code](/Configuration.container)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
// container: document.querySelector('.artplayer-app'),
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
```
|
||||
|
||||
## type
|
||||
|
||||
- Type: `String`
|
||||
- Default: `''`
|
||||
|
||||
Specify the format for the `url`, use with `customType`
|
||||
|
||||
[Run Code](/Configuration.type)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'path/to/video.flv',
|
||||
type: 'flv',
|
||||
});
|
||||
```
|
||||
|
||||
## customType
|
||||
|
||||
- Type: `Object`
|
||||
- Default: `{}`
|
||||
|
||||
Customize when loading third-party libraries
|
||||
|
||||
[Run Code](/Configuration.customType)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'path/to/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
poster: '/assets/sample/poster.jpeg',
|
||||
});
|
||||
```
|
||||
|
||||
## title
|
||||
|
||||
- Type: `String`
|
||||
- Default: `''`
|
||||
|
||||
Video title, will be shown in `screenshot` file name and `pip` mode
|
||||
|
||||
[Run Code](/Configuration.title)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
volume: 0.5,
|
||||
});
|
||||
```
|
||||
|
||||
## muted
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to mute by default
|
||||
|
||||
[Run Code](/Configuration.muted)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
autoMin: true,
|
||||
});
|
||||
```
|
||||
|
||||
## loop
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Automatic loop playback
|
||||
|
||||
[Run Code](/Configuration.loop)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
pip: true,
|
||||
});
|
||||
```
|
||||
|
||||
## fullscreen
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to show window fullscreen controller in the bottom
|
||||
|
||||
[Run Code](/Configuration.fullscreen)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
fullscreen: true,
|
||||
});
|
||||
```
|
||||
|
||||
## fullscreenWeb
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to show web page fullscreen controller in the bottom
|
||||
|
||||
[Run Code](/Configuration.fullscreenWeb)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
mutex: true,
|
||||
});
|
||||
```
|
||||
|
||||
## light
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to display the light mode in the context menu
|
||||
|
||||
[Run Code](/Configuration.light)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
backdrop: true,
|
||||
});
|
||||
```
|
||||
|
||||
## hotkey
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `true`
|
||||
|
||||
Whether to use hotkey
|
||||
|
||||
[Run Code](/Configuration.hotkey)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
lang: 'en',
|
||||
});
|
||||
```
|
||||
|
||||
## icons
|
||||
|
||||
- Type: `Object`
|
||||
- Default: `{}`
|
||||
|
||||
Replace the default icon
|
||||
|
||||
[Run Code](/Configuration.icons)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
theme: '#ffad00',
|
||||
});
|
||||
```
|
||||
|
||||
## subtitleOffset
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Subtitle time offset plugin
|
||||
|
||||
[Run Code](/Configuration.subtitleOffset)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
subtitle: {
|
||||
url: '/assets/sample/subtitle.srt',
|
||||
},
|
||||
setting: true,
|
||||
subtitleOffset: true,
|
||||
});
|
||||
```
|
||||
|
||||
## miniProgressBar
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Mini progress bar plugin
|
||||
|
||||
[Run Code](/Configuration.miniProgressBar)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
subtitle: {
|
||||
url: '/assets/sample/subtitle.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
thumbnails: {
|
||||
url: '/assets/sample/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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
quality: [
|
||||
{
|
||||
default: true,
|
||||
name: 'SD 480P',
|
||||
url: '/assets/sample/video.mp4',
|
||||
},
|
||||
{
|
||||
name: 'HD 720P',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
layers: [
|
||||
{
|
||||
html: `<img style="width: 100px" src="/assets/sample/layer.png">`,
|
||||
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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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();
|
||||
```
|
||||
@@ -0,0 +1,479 @@
|
||||
## 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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.layers.add({
|
||||
html: `<img style="width: 100px" src="${url}/image/your-name.png">`,
|
||||
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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
subtitle: {
|
||||
url: '/assets/sample/subtitle.srt',
|
||||
},
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
index: 10,
|
||||
html: 'subtitle 01',
|
||||
click: function () {
|
||||
art.subtitle.switch('/assets/sample/subtitle.srt', 'srt subtitle name');
|
||||
},
|
||||
},
|
||||
{
|
||||
position: 'right',
|
||||
index: 20,
|
||||
html: 'subtitle 02',
|
||||
click: function () {
|
||||
art.subtitle.switch('/assets/sample/subtitle.vtt', 'vtt subtitle name');
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## loading
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | -------- | ------------ |
|
||||
| `show` | `setter` | Show or hide |
|
||||
|
||||
[Run Code](/Properties.loading)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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 art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.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();
|
||||
```
|
||||
Reference in new issue
Block a user