diff --git a/docs/document/404.html b/docs/document/404.html index dba09561e..9b3377509 100644 --- a/docs/document/404.html +++ b/docs/document/404.html @@ -5,20 +5,18 @@ 404 | Artplayer.js - - - - - - - - - - + + + + + + + -
Artplayer.js

Appearance

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
Take me home
- +
Artplayer.js

Appearance

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
Take me home
+ \ No newline at end of file diff --git a/docs/document/advanced/built-in.html b/docs/document/advanced/built-in.html index 5af077260..3aec73c51 100644 --- a/docs/document/advanced/built-in.html +++ b/docs/document/advanced/built-in.html @@ -5,209 +5,207 @@ 高级属性 | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

高级属性 ​

这里的 高级属性 是指挂载在 实例 的 二级属性，比较少用

option ​

播放器的选项

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    
Artplayer.js
Appearance
On this page
高级属性 ​
这里的 高级属性 是指挂载在 实例 的 二级属性，比较少用
option ​
播放器的选项
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info(art.option);
提示
假如直接修改这个 option 对象，播放器不会马上做出响应
template ​
管理播放器所有的 DOM 元素
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+console.info(art.option);
提示
假如直接修改这个 option 对象，播放器不会马上做出响应
template ​
管理播放器所有的 DOM 元素
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info(art.template);
-console.info(art.template.$video);
提示
为了方便区别 DOM 元素和普通对象，播放器里的所有 DOM 元素都是以 $ 开头命名的
这是所有 DOM 元素的定义：artplayer/types/template.d.ts
events ​
管理播放器所有的 DOM 事件，实质上是代理了 addEventListener 和 removeEventListener, 当使用以下方法来处理事件，播放器销毁时也会自动销毁该事件
  • proxy 方法用于代理 DOM 事件
  • hover 方法用于代理自定义的 hover 事件
  • loadImg 方法用于监听图片的 load 加载事件
▶ Run Code
js
var container = document.querySelector('.artplayer-app');
+console.info(art.template);
+console.info(art.template.$video);
提示
为了方便区别 DOM 元素和普通对象，播放器里的所有 DOM 元素都是以 $ 开头命名的
这是所有 DOM 元素的定义：artplayer/types/template.d.ts
events ​
管理播放器所有的 DOM 事件，实质上是代理了 addEventListener 和 removeEventListener, 当使用以下方法来处理事件，播放器销毁时也会自动销毁该事件
  • proxy 方法用于代理 DOM 事件
  • hover 方法用于代理自定义的 hover 事件
  • loadImg 方法用于监听图片的 load 加载事件
▶ Run Code
js
var container = document.querySelector('.artplayer-app');
 
-var art = new Artplayer({
-    container: container,
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: container,
+    url: '/assets/sample/video.mp4',
+});
 
-art.events.proxy(container, 'click', event => {
-	console.info('click', event);
-});
+art.events.proxy(container, 'click', event => {
+	console.info('click', event);
+});
 
-art.events.hover(container, (event) => {
-    console.info('mouseenter', event);
-}, (event) => {
-    console.info('mouseleave', event);
-});
+art.events.hover(container, (event) => {
+    console.info('mouseenter', event);
+}, (event) => {
+    console.info('mouseleave', event);
+});
 
-art.events.loadImg('/assets/sample/poster.jpg').then(img => {
-    console.info('loadImg', img);
-});
提示
假如你需要一些 DOM 事件只存在于播放器的生命周期上时，强烈建议使用这些函数，以避免造成内存泄漏
storage ​
管理播放器的本地存储
  • name 属性用于设置缓存的 key
  • set 方法用于设置缓存
  • get 方法用于获取缓存
  • del 方法用于删除缓存
  • clear 方法用于清空缓存
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.events.loadImg('/assets/sample/poster.jpg').then(img => {
+    console.info('loadImg', img);
+});
提示
假如你需要一些 DOM 事件只存在于播放器的生命周期上时，强烈建议使用这些函数，以避免造成内存泄漏
storage ​
管理播放器的本地存储
  • name 属性用于设置缓存的 key
  • set 方法用于设置缓存
  • get 方法用于获取缓存
  • del 方法用于删除缓存
  • clear 方法用于清空缓存
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.storage.set('test', { foo: 'bar' });
-const test = art.storage.get('test');
-console.info(test);
-art.storage.del('test');
-art.storage.clear();
提示
默认所有播放器实例都是共享同一个 localStorage 的，而且默认的 key 是 artplayer_settings
如果你想不同的播放器使用不同的 localStorage，你可以修改 art.storage.name 即可
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.storage.set('test', { foo: 'bar' });
+const test = art.storage.get('test');
+console.info(test);
+art.storage.del('test');
+art.storage.clear();
提示
默认所有播放器实例都是共享同一个 localStorage 的，而且默认的 key 是 artplayer_settings
如果你想不同的播放器使用不同的 localStorage，你可以修改 art.storage.name 即可
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.storage.name = 'your-storage-key';
-art.storage.set('test', { foo: 'bar' });
icons ​
管理播放器所有的 svg 图标
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.storage.name = 'your-storage-key';
+art.storage.set('test', { foo: 'bar' });
icons ​
管理播放器所有的 svg 图标
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info(art.icons.loading);
这是所有图标的定义：
artplayer/types/icons.d.ts
i18n ​
管理播放器的 i18n
  • get 方法用于获取 i18n 的值
  • update 方法用于更新 i18n 对象
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+console.info(art.icons.loading);
这是所有图标的定义：
artplayer/types/icons.d.ts
i18n ​
管理播放器的 i18n
  • get 方法用于获取 i18n 的值
  • update 方法用于更新 i18n 对象
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info(art.i18n.get('Play'));
+console.info(art.i18n.get('Play'));
 
-art.i18n.update({
-    'zh-cn': {
-        Play: 'Your Play'
-    }
-});
WARNING
使用 art.i18n.update 只能更新实例化之后的 i18n，假如想在实例化之前更新 i18n，请使用基础选项的 i18n 来更新
notice ​
管理播放器的提示语，只有一个 show 属性用于显示提示语
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.i18n.update({
+    'zh-cn': {
+        Play: 'Your Play'
+    }
+});
WARNING
使用 art.i18n.update 只能更新实例化之后的 i18n，假如想在实例化之前更新 i18n，请使用基础选项的 i18n 来更新
notice ​
管理播放器的提示语，只有一个 show 属性用于显示提示语
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.notice.show = 'Video Ready To Play';
-})
WARNING
如果想马上隐藏 notice 的显示：art.notice.show = '';
layers ​
管理播放器的层
  • add 方法用于动态添加层
  • remove 方法用于动态删除层
  • update 方法用于动态更新层
  • show 属性用于设置是否显示全部层
  • toggle 方法用于切换是否显示全部层
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.notice.show = 'Video Ready To Play';
+})
WARNING
如果想马上隐藏 notice 的显示：art.notice.show = '';
layers ​
管理播放器的层
  • add 方法用于动态添加层
  • remove 方法用于动态删除层
  • update 方法用于动态更新层
  • show 属性用于设置是否显示全部层
  • toggle 方法用于切换是否显示全部层
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.layers.add({
-        html: 'Some Text',
-    });
+art.on('ready', () => {
+    art.layers.add({
+        html: 'Some Text',
+    });
 
-	setTimeout(() => {
-		art.layers.show = false;
-	}, 1000);
-});
组件配置 请参考以下地址：
/component/layers.html
controls ​
管理播放器的控制器
  • add 方法用于动态添加控制器
  • remove 方法用于动态删除控制器
  • update 方法用于动态更新控制器
  • show 属性用于设置是否显示全部控制器
  • toggle 方法用于切换是否显示全部控制器
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+	setTimeout(() => {
+		art.layers.show = false;
+	}, 1000);
+});
组件配置 请参考以下地址：
/component/layers.html
controls ​
管理播放器的控制器
  • add 方法用于动态添加控制器
  • remove 方法用于动态删除控制器
  • update 方法用于动态更新控制器
  • show 属性用于设置是否显示全部控制器
  • toggle 方法用于切换是否显示全部控制器
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.controls.add({
-        html: 'Some Text',
-        position: 'left',
-    });
+art.on('ready', () => {
+    art.controls.add({
+        html: 'Some Text',
+        position: 'left',
+    });
 
-	setTimeout(() => {
-		art.controls.show = false;
-	}, 1000);
-});
组件配置 请参考以下地址：
/component/controls.html
contextmenu ​
管理播放器的右键菜单
  • add 方法用于动态添加菜单
  • remove 方法用于动态删除菜单
  • update 方法用于动态更新菜单
  • show 属性用于设置是否显示全部菜单
  • toggle 方法用于切换是否显示全部菜单
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+	setTimeout(() => {
+		art.controls.show = false;
+	}, 1000);
+});
组件配置 请参考以下地址：
/component/controls.html
contextmenu ​
管理播放器的右键菜单
  • add 方法用于动态添加菜单
  • remove 方法用于动态删除菜单
  • update 方法用于动态更新菜单
  • show 属性用于设置是否显示全部菜单
  • toggle 方法用于切换是否显示全部菜单
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.contextmenu.add({
-        html: 'Some Text',
-    });
+art.on('ready', () => {
+    art.contextmenu.add({
+        html: 'Some Text',
+    });
 
-    art.contextmenu.show = true;
-	setTimeout(() => {
-		art.contextmenu.show = false;
-	}, 1000);
-});
组件配置 请参考以下地址：
/component/contextmenu.html
subtitle ​
管理播放器的字幕功能
  • url 属性设置和返回当前字幕地址
  • style 方法设置当前字幕的样式
  • switch 方法设置当前字幕地址和选项
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    art.contextmenu.show = true;
+	setTimeout(() => {
+		art.contextmenu.show = false;
+	}, 1000);
+});
组件配置 请参考以下地址：
/component/contextmenu.html
subtitle ​
管理播放器的字幕功能
  • url 属性设置和返回当前字幕地址
  • style 方法设置当前字幕的样式
  • switch 方法设置当前字幕地址和选项
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.subtitle.url = '/assets/sample/subtitle.srt'
-    art.subtitle.style({
-        color: 'red',
-    });
-});
loading ​
管理播放器的加载层
  • show 属性用于设置是否显示加载层
  • toggle 属性用于切换是否显示加载层
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.subtitle.url = '/assets/sample/subtitle.srt'
+    art.subtitle.style({
+        color: 'red',
+    });
+});
loading ​
管理播放器的加载层
  • show 属性用于设置是否显示加载层
  • toggle 属性用于切换是否显示加载层
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.loading.show = true;
-	setTimeout(() => {
-		art.loading.show = false;
-	}, 1000);
-});
hotkey ​
管理播放器的快捷键功能
  • add 方法用于添加快捷键
  • remove 方法用于删除快捷键
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.loading.show = true;
+	setTimeout(() => {
+		art.loading.show = false;
+	}, 1000);
+});
hotkey ​
管理播放器的快捷键功能
  • add 方法用于添加快捷键
  • remove 方法用于删除快捷键
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-function hotkeyEvent(event) {
-    console.info('click', event);
-}
+function hotkeyEvent(event) {
+    console.info('click', event);
+}
 
-art.on('ready', () => {
-    art.hotkey.add(32, hotkeyEvent);
-    setTimeout(() => {
-		art.hotkey.remove(32, hotkeyEvent);
-	}, 5000);
-});
提示
只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效
mask ​
管理播放器的遮罩层
  • show 属性用于设置是否显示遮罩层
  • toggle 属性用于切换是否显示遮罩层
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.hotkey.add(32, hotkeyEvent);
+    setTimeout(() => {
+		art.hotkey.remove(32, hotkeyEvent);
+	}, 5000);
+});
提示
只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效
mask ​
管理播放器的遮罩层
  • show 属性用于设置是否显示遮罩层
  • toggle 属性用于切换是否显示遮罩层
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.mask.show = false;
-	setTimeout(() => {
-		art.mask.show = true;
-	}, 1000);
-});
setting ​
管理播放器的设置面板
  • add 方法用于动态添加设置项
  • remove 方法用于动态删除设置项
  • update 方法用于动态更新设置项
  • show 属性用于设置是否显示全部设置项
  • toggle 方法用于切换是否显示全部设置项
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-    subtitleOffset: true,
-});
+art.on('ready', () => {
+    art.mask.show = false;
+	setTimeout(() => {
+		art.mask.show = true;
+	}, 1000);
+});
setting ​
管理播放器的设置面板
  • add 方法用于动态添加设置项
  • remove 方法用于动态删除设置项
  • update 方法用于动态更新设置项
  • show 属性用于设置是否显示全部设置项
  • toggle 方法用于切换是否显示全部设置项
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    subtitleOffset: true,
+});
 
-art.on('ready', () => {
-    art.setting.show = true;
-	setTimeout(() => {
-		art.setting.show = false;
-	}, 1000);
-});
设置面板 请参考以下地址
/component/setting.html
plugins ​
管理播放器的插件功能，只有一个方法 add 用于动态添加插件
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.setting.show = true;
+	setTimeout(() => {
+		art.setting.show = false;
+	}, 1000);
+});
设置面板 请参考以下地址
/component/setting.html
plugins ​
管理播放器的插件功能，只有一个方法 add 用于动态添加插件
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
+function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
 
-art.on('ready', () => {
-    art.plugins.add(myPlugin);
-});

-    
+art.on('ready', () => {
+    art.plugins.add(myPlugin);
+});
+ \ No newline at end of file diff --git a/docs/document/advanced/class.html b/docs/document/advanced/class.html index a8bcb0dfa..ceab74032 100644 --- a/docs/document/advanced/class.html +++ b/docs/document/advanced/class.html @@ -5,30 +5,28 @@ 静态属性 | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

静态属性 ​

这里的 静态属性 是指挂载在 构造函数 的 一级属性，非常少使用

instances ​

返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性

▶ Run Code
js
console.info([...Artplayer.instances]);
+    
Artplayer.js
Appearance
On this page
静态属性 ​
这里的 静态属性 是指挂载在 构造函数 的 一级属性，非常少使用
instances ​
返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性
▶ Run Code
js
console.info([...Artplayer.instances]);
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info([...Artplayer.instances]);
version ​
返回播放器的版本信息
▶ Run Code
js
console.info(Artplayer.version);
env ​
返回播放器的环境变量
▶ Run Code
js
console.info(Artplayer.env);
build ​
返回播放器的打包时间
▶ Run Code
js
console.info(Artplayer.build);
config ​
返回视频的默认配置
▶ Run Code
js
console.info(Artplayer.config);
utils ​
返回播放器的工具函数集合
▶ Run Code
js
console.info(Artplayer.utils);
全部工具函数请参考以下地址：
artplayer/types/utils.d.ts
scheme ​
返回播放器选项的校验方案
▶ Run Code
js
console.info(Artplayer.scheme);
Emitter ​
返回事件分发器的构造函数
▶ Run Code
js
console.info(Artplayer.Emitter);
validator ​
返回选项的校验函数
▶ Run Code
js
console.info(Artplayer.validator);
kindOf ​
返回类型检测的函数工具
▶ Run Code
js
console.info(Artplayer.kindOf);
html ​
返回播放器所需的 html 字符串
▶ Run Code
js
console.info(Artplayer.html);
option ​
返回播放器的默认选项
▶ Run Code
js
console.info(Artplayer.option);

-    
+console.info([...Artplayer.instances]);

version ​

返回播放器的版本信息

▶ Run Code
js
console.info(Artplayer.version);

env ​

返回播放器的环境变量

▶ Run Code
js
console.info(Artplayer.env);

build ​

返回播放器的打包时间

▶ Run Code
js
console.info(Artplayer.build);

config ​

返回视频的默认配置

▶ Run Code
js
console.info(Artplayer.config);

utils ​

返回播放器的工具函数集合

▶ Run Code
js
console.info(Artplayer.utils);

全部工具函数请参考以下地址：

artplayer/types/utils.d.ts

scheme ​

返回播放器选项的校验方案

▶ Run Code
js
console.info(Artplayer.scheme);

Emitter ​

返回事件分发器的构造函数

▶ Run Code
js
console.info(Artplayer.Emitter);

validator ​

返回选项的校验函数

▶ Run Code
js
console.info(Artplayer.validator);

kindOf ​

返回类型检测的函数工具

▶ Run Code
js
console.info(Artplayer.kindOf);

html ​

返回播放器所需的 html 字符串

▶ Run Code
js
console.info(Artplayer.html);

option ​

返回播放器的默认选项

▶ Run Code
js
console.info(Artplayer.option);
+ \ No newline at end of file diff --git a/docs/document/advanced/event.html b/docs/document/advanced/event.html index 3d091b528..8101590f4 100644 --- a/docs/document/advanced/event.html +++ b/docs/document/advanced/event.html @@ -5,370 +5,368 @@ 实例事件 | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

实例事件 ​

播放器的事件分为两种，一种视频的 原生事件 (前缀 video:)，另外一种是 自定义事件

监听事件：

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    
Artplayer.js
Appearance
On this page
实例事件 ​
播放器的事件分为两种，一种视频的 原生事件 (前缀 video:)，另外一种是 自定义事件
监听事件：
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('video:canplay', () => {
-    console.info('video:canplay');
-});
只监听一次事件：
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('video:canplay', () => {
+    console.info('video:canplay');
+});
只监听一次事件：
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.once('video:canplay', () => {
-    console.info('video:canplay');
-});
手动触发事件：
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.once('video:canplay', () => {
+    console.info('video:canplay');
+});
手动触发事件：
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.emit('focus');
移除事件：
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.emit('focus');
移除事件：
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-const onReady = () => {
-    console.info('ready');
-    art.off('ready', onReady);
-}
+const onReady = () => {
+    console.info('ready');
+    art.off('ready', onReady);
+}
 
-art.on('ready', onReady);
全部事件请参考以下地址：
artplayer/types/events.d.ts
ready ​
当播放器首次可以播放器时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', onReady);
全部事件请参考以下地址：
artplayer/types/events.d.ts
ready ​
当播放器首次可以播放器时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info('ready');
-});
restart ​
当播放器切换地址后并可以播放时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info('ready');
+});
restart ​
当播放器切换地址后并可以播放时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.url = '/assets/sample/video.mp4'
-});
+art.on('ready', () => {
+    art.url = '/assets/sample/video.mp4'
+});
 
-art.on('restart', (url) => {
-    console.info('restart', url);
-});
pause ​
当播放器暂停时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('restart', (url) => {
+    console.info('restart', url);
+});
pause ​
当播放器暂停时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('pause', () => {
-    console.info('pause');
-});
play ​
当播放器播放时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('pause', () => {
+    console.info('pause');
+});
play ​
当播放器播放时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('play', () => {
-    console.info('play');
-});
hotkey ​
当播放器热键被按下时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('play', () => {
+    console.info('play');
+});
hotkey ​
当播放器热键被按下时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('hotkey', (event) => {
-    console.info('hotkey', event);
-});
destroy ​
当播放器销毁时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('hotkey', (event) => {
+    console.info('hotkey', event);
+});
destroy ​
当播放器销毁时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.destroy();
-});
+art.on('ready', () => {
+    art.destroy();
+});
 
-art.on('destroy', () => {
-    console.info('destroy');
-});
focus ​
当播放器获得焦点时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('destroy', () => {
+    console.info('destroy');
+});
focus ​
当播放器获得焦点时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('focus', (event) => {
-    console.info('focus', event);
-});
blur ​
当播放器失去焦点时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('focus', (event) => {
+    console.info('focus', event);
+});
blur ​
当播放器失去焦点时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('blur', (event) => {
-    console.info('blur', event);
-});
dblclick ​
当播放器被双击时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('blur', (event) => {
+    console.info('blur', event);
+});
dblclick ​
当播放器被双击时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('dblclick', (event) => {
-    console.info('dblclick', event);
-});
click ​
当播放器被单击时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('dblclick', (event) => {
+    console.info('dblclick', event);
+});
click ​
当播放器被单击时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('click', (event) => {
-    console.info('click', event);
-});
error ​
当播放器加载视频发生错误时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});
+art.on('click', (event) => {
+    console.info('click', event);
+});
error ​
当播放器加载视频发生错误时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});
 
-art.on('error', (error, reconnectTime) => {
-    console.info(error, reconnectTime);
-});
hover ​
当播放器被鼠标移出或者移入时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('error', (error, reconnectTime) => {
+    console.info(error, reconnectTime);
+});
hover ​
当播放器被鼠标移出或者移入时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('hover', (state, event) => {
-    console.info('hover', state, event);
-});
mousemove ​
当播放器被鼠标经过时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('hover', (state, event) => {
+    console.info('hover', state, event);
+});
mousemove ​
当播放器被鼠标经过时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('mousemove', (event) => {
-    console.info('mousemove', event);
-});
resize ​
当播放器尺寸变化时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('mousemove', (event) => {
+    console.info('mousemove', event);
+});
resize ​
当播放器尺寸变化时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('resize', () => {
-    console.info('resize');
-});
view ​
当播放器出现在视口时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('resize', () => {
+    console.info('resize');
+});
view ​
当播放器出现在视口时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('view', (state) => {
-    console.info('view', state);
-});
lock ​
在移动端，当锁定的状态发生变化时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lock: true,
-});
+art.on('view', (state) => {
+    console.info('view', state);
+});
lock ​
在移动端，当锁定的状态发生变化时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lock: true,
+});
 
-art.on('lock', (state) => {
-    console.info('lock', state);
-});
aspectRatio ​
当播放器长宽比变化时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    aspectRatio: true,
-    setting: true,
-});
+art.on('lock', (state) => {
+    console.info('lock', state);
+});
aspectRatio ​
当播放器长宽比变化时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    aspectRatio: true,
+    setting: true,
+});
 
-art.on('aspectRatio', (aspectRatio) => {
-    console.info('aspectRatio', aspectRatio);
-});
autoHeight ​
当播放器自动设置高度时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('aspectRatio', (aspectRatio) => {
+    console.info('aspectRatio', aspectRatio);
+});
autoHeight ​
当播放器自动设置高度时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.autoHeight();
-});
+art.on('ready', () => {
+    art.autoHeight();
+});
 
-art.on('autoHeight', (height) => {
-    console.info('autoHeight', height);
-});
autoSize ​
当播放器自动设置尺寸时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-});
+art.on('autoHeight', (height) => {
+    console.info('autoHeight', height);
+});
autoSize ​
当播放器自动设置尺寸时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+});
 
-art.on('autoSize', () => {
-    console.info('autoSize');
-});
flip ​
当播放器发生翻转时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    flip: true,
-    setting: true,
-});
+art.on('autoSize', () => {
+    console.info('autoSize');
+});
flip ​
当播放器发生翻转时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    flip: true,
+    setting: true,
+});
 
-art.on('flip', (flip) => {
-    console.info('flip', flip);
-});
fullscreen ​
当播放器发生窗口全屏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-});
+art.on('flip', (flip) => {
+    console.info('flip', flip);
+});
fullscreen ​
当播放器发生窗口全屏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+});
 
-art.on('fullscreen', (state) => {
-    console.info('fullscreen', state);
-});
fullscreenWeb ​
当播放器发生网页全屏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
+art.on('fullscreen', (state) => {
+    console.info('fullscreen', state);
+});
fullscreenWeb ​
当播放器发生网页全屏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
 
-art.on('fullscreenWeb', (state) => {
-    console.info('fullscreenWeb', state);
-});
mini ​
当播放器进入迷你模式时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('fullscreenWeb', (state) => {
+    console.info('fullscreenWeb', state);
+});
mini ​
当播放器进入迷你模式时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.mini = true;
-});
+art.on('ready', () => {
+    art.mini = true;
+});
 
-art.on('mini', (state) => {
-    console.info('mini', state);
-});
pip ​
当播放器进入画中画时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    pip: true,
-});
+art.on('mini', (state) => {
+    console.info('mini', state);
+});
pip ​
当播放器进入画中画时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    pip: true,
+});
 
-art.on('pip', (state) => {
-    console.info('pip', state);
-});
screenshot ​
当播放器被截图时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    screenshot: true,
-});
+art.on('pip', (state) => {
+    console.info('pip', state);
+});
screenshot ​
当播放器被截图时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    screenshot: true,
+});
 
-art.on('screenshot', (dataUri) => {
-    console.info('screenshot', dataUri);
-});
seek ​
当播放器发生时间跳转时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('screenshot', (dataUri) => {
+    console.info('screenshot', dataUri);
+});
seek ​
当播放器发生时间跳转时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('seek', (currentTime) => {
-    console.info('seek', currentTime);
-});
subtitleOffset ​
当播放器发生字幕偏移时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitleOffset: true,
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-    setting: true,
-});
+art.on('seek', (currentTime) => {
+    console.info('seek', currentTime);
+});
subtitleOffset ​
当播放器发生字幕偏移时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitleOffset: true,
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+    setting: true,
+});
 
-art.on('subtitleOffset', (offset) => {
-    console.info('subtitleOffset', offset);
-});
subtitleUpdate ​
当字幕更新时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
+art.on('subtitleOffset', (offset) => {
+    console.info('subtitleOffset', offset);
+});
subtitleUpdate ​
当字幕更新时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
 
-art.on('subtitleUpdate', (text) => {
-    console.info('subtitleUpdate', text);
-});
subtitleLoad ​
当字幕加载时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
+art.on('subtitleUpdate', (text) => {
+    console.info('subtitleUpdate', text);
+});
subtitleLoad ​
当字幕加载时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
 
-art.on('subtitleLoad', (url) => {
-    console.info('subtitleLoad', url);
-});
subtitleSwitch ​
当字幕切换时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
+art.on('subtitleLoad', (url) => {
+    console.info('subtitleLoad', url);
+});
subtitleSwitch ​
当字幕切换时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
 
-art.on('ready', () => {
-    art.subtitle.url = '/assets/sample/subtitle.ass';
-});
+art.on('ready', () => {
+    art.subtitle.url = '/assets/sample/subtitle.ass';
+});
 
-art.on('subtitleSwitch', (url) => {
-    console.info('subtitleSwitch', url);
-});
info ​
当信息面板显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('subtitleSwitch', (url) => {
+    console.info('subtitleSwitch', url);
+});
info ​
当信息面板显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('info', (state) => {
-    console.log(state);
-});
layer ​
当自定义层显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('info', (state) => {
+    console.log(state);
+});
layer ​
当自定义层显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('layer', (state) => {
-    console.log(state);
-});
loading ​
当加载器显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('layer', (state) => {
+    console.log(state);
+});
loading ​
当加载器显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('loading', (state) => {
-    console.log(state);
-});
mask ​
当遮罩层显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('loading', (state) => {
+    console.log(state);
+});
mask ​
当遮罩层显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('mask', (state) => {
-    console.log(state);
-});
subtitle ​
当字幕层显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('mask', (state) => {
+    console.log(state);
+});
subtitle ​
当字幕层显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('subtitle', (state) => {
-    console.log(state);
-});
contextmenu ​
当右键菜单显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('subtitle', (state) => {
+    console.log(state);
+});
contextmenu ​
当右键菜单显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('contextmenu', (state) => {
-    console.log(state);
-});
control ​
当控制器显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('contextmenu', (state) => {
+    console.log(state);
+});
control ​
当控制器显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('control', (state) => {
-    console.log(state);
-});
setting ​
当设置面板显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
+art.on('control', (state) => {
+    console.log(state);
+});
setting ​
当设置面板显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
 
-art.on('setting', (state) => {
-    console.log(state);
-});
muted ​
当静音的状态变化时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('setting', (state) => {
+    console.log(state);
+});
muted ​
当静音的状态变化时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('muted', (state) => {
-    console.log(state);
-});
video:canplay ​
浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容
video:canplaythrough ​
浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束
video:complete ​
OfflineAudioContext 渲染完成
video:durationchange ​
duration 属性的值改变时触发
video:emptied ​
媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它
video:ended ​
视频停止播放，因为 media 已经到达结束点
video:error ​
获取媒体数据时出错，或者资源类型不是受支持的媒体格式
video:loadeddata ​
media 中的首帧已经完成加载
video:loadedmetadata ​
已加载元数据
video:pause ​
播放已暂停
video:play ​
播放已开始
video:playing ​
由于缺乏数据而暂停或延迟后，播放准备开始
video:progress ​
在浏览器加载资源时周期性触发
video:ratechange ​
播放速率发生变化
video:seeked ​
跳帧（seek）操作完成
video:seeking ​
跳帧（seek）操作开始
video:stalled ​
用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现
video:suspend ​
媒体数据加载已暂停
video:timeupdate ​
currentTime 属性指定的时间发生变化
video:volumechange ​
音量发生变化
video:waiting ​
由于暂时缺少数据，播放已停止

-    
+art.on('muted', (state) => {
+    console.log(state);
+});

video:canplay ​

浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容

video:canplaythrough ​

浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束

video:complete ​

OfflineAudioContext 渲染完成

video:durationchange ​

duration 属性的值改变时触发

video:emptied ​

媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它

video:ended ​

视频停止播放，因为 media 已经到达结束点

video:error ​

获取媒体数据时出错，或者资源类型不是受支持的媒体格式

video:loadeddata ​

media 中的首帧已经完成加载

video:loadedmetadata ​

已加载元数据

video:pause ​

播放已暂停

video:play ​

播放已开始

video:playing ​

由于缺乏数据而暂停或延迟后，播放准备开始

video:progress ​

在浏览器加载资源时周期性触发

video:ratechange ​

播放速率发生变化

video:seeked ​

跳帧（seek）操作完成

video:seeking ​

跳帧（seek）操作开始

video:stalled ​

用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现

video:suspend ​

媒体数据加载已暂停

video:timeupdate ​

currentTime 属性指定的时间发生变化

video:volumechange ​

音量发生变化

video:waiting ​

由于暂时缺少数据，播放已停止

+ \ No newline at end of file diff --git a/docs/document/advanced/global.html b/docs/document/advanced/global.html index dd1d43170..14660608f 100644 --- a/docs/document/advanced/global.html +++ b/docs/document/advanced/global.html @@ -5,239 +5,237 @@ 全局属性 | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

全局属性 ​

这里的 全局属性 也是指挂载在 构造函数 的 一级属性，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到

DEBUG ​

是否开始 debug 模式，可以打印出视频全部的内置事件，默认关闭

▶ Run Code
js
Artplayer.DEBUG = true;
+    
Artplayer.js
Appearance
On this page
全局属性 ​
这里的 全局属性 也是指挂载在 构造函数 的 一级属性，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到
DEBUG ​
是否开始 debug 模式，可以打印出视频全部的内置事件，默认关闭
▶ Run Code
js
Artplayer.DEBUG = true;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
CONTEXTMENU ​
是否开启右键菜单，默认开启
▶ Run Code
js
Artplayer.CONTEXTMENU = false;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
CONTEXTMENU ​
是否开启右键菜单，默认开启
▶ Run Code
js
Artplayer.CONTEXTMENU = false;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
NOTICE_TIME ​
提示信息的显示时长，单位为毫秒，默认为 2000
▶ Run Code
js
Artplayer.NOTICE_TIME = 5000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
NOTICE_TIME ​
提示信息的显示时长，单位为毫秒，默认为 2000
▶ Run Code
js
Artplayer.NOTICE_TIME = 5000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
SETTING_WIDTH ​
设置面板的默认宽度，单位为像素，默认为 250
▶ Run Code
js
Artplayer.SETTING_WIDTH = 300;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
SETTING_WIDTH ​
设置面板的默认宽度，单位为像素，默认为 250
▶ Run Code
js
Artplayer.SETTING_WIDTH = 300;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});
SETTING_ITEM_WIDTH ​
设置面板的设置项的默认宽度，单位为像素，默认为 200
▶ Run Code
js
Artplayer.SETTING_ITEM_WIDTH = 300;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});
SETTING_ITEM_WIDTH ​
设置面板的设置项的默认宽度，单位为像素，默认为 200
▶ Run Code
js
Artplayer.SETTING_ITEM_WIDTH = 300;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});
SETTING_ITEM_HEIGHT ​
设置面板的设置项的默认高度，单位为像素，默认为 35
▶ Run Code
js
Artplayer.SETTING_ITEM_HEIGHT = 40;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});
SETTING_ITEM_HEIGHT ​
设置面板的设置项的默认高度，单位为像素，默认为 35
▶ Run Code
js
Artplayer.SETTING_ITEM_HEIGHT = 40;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});
RESIZE_TIME ​
resize 事件的节流时间，单位为毫秒，默认为 200
▶ Run Code
js
Artplayer.RESIZE_TIME = 500;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});
RESIZE_TIME ​
resize 事件的节流时间，单位为毫秒，默认为 200
▶ Run Code
js
Artplayer.RESIZE_TIME = 500;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('resize', () => {
-    console.log('resize');
-});
SCROLL_TIME ​
scroll 事件的节流时间，单位为毫秒，默认为 200
▶ Run Code
js
Artplayer.SCROLL_TIME = 500;
+art.on('resize', () => {
+    console.log('resize');
+});
SCROLL_TIME ​
scroll 事件的节流时间，单位为毫秒，默认为 200
▶ Run Code
js
Artplayer.SCROLL_TIME = 500;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('scroll', () => {
-    console.log('scroll');
-});
SCROLL_GAP ​
view 事件的边界容差距离，单位为像素，默认为 50
▶ Run Code
js
Artplayer.SCROLL_GAP = 100;
+art.on('scroll', () => {
+    console.log('scroll');
+});
SCROLL_GAP ​
view 事件的边界容差距离，单位为像素，默认为 50
▶ Run Code
js
Artplayer.SCROLL_GAP = 100;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('scroll', () => {
-    console.log('scroll');
-});
AUTO_PLAYBACK_MAX ​
自动回放功能的最大记录数，默认为 10
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_MAX = 20;
+art.on('scroll', () => {
+    console.log('scroll');
+});
AUTO_PLAYBACK_MAX ​
自动回放功能的最大记录数，默认为 10
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_MAX = 20;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});
AUTO_PLAYBACK_MIN ​
自动回放功能的最小记录时长，单位为秒，默认为 5
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_MIN = 10;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});
AUTO_PLAYBACK_MIN ​
自动回放功能的最小记录时长，单位为秒，默认为 5
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_MIN = 10;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});
AUTO_PLAYBACK_TIMEOUT ​
自动回放功能的隐藏延迟时长，单位为毫秒，默认为 3000
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});
AUTO_PLAYBACK_TIMEOUT ​
自动回放功能的隐藏延迟时长，单位为毫秒，默认为 3000
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});
RECONNECT_TIME_MAX ​
发生连接错误时，自动连接的最大次数，默认为 5
▶ Run Code
js
Artplayer.RECONNECT_TIME_MAX = 10;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});
RECONNECT_TIME_MAX ​
发生连接错误时，自动连接的最大次数，默认为 5
▶ Run Code
js
Artplayer.RECONNECT_TIME_MAX = 10;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});
RECONNECT_SLEEP_TIME ​
发生连接错误时，自动连接的延迟时间，单位为毫秒，默认为 1000
▶ Run Code
js
Artplayer.RECONNECT_SLEEP_TIME = 3000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});
RECONNECT_SLEEP_TIME ​
发生连接错误时，自动连接的延迟时间，单位为毫秒，默认为 1000
▶ Run Code
js
Artplayer.RECONNECT_SLEEP_TIME = 3000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});
CONTROL_HIDE_TIME ​
底部控制栏的自动隐藏的延迟时间，单位为毫秒，默认为 3000
▶ Run Code
js
Artplayer.CONTROL_HIDE_TIME = 5000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});
CONTROL_HIDE_TIME ​
底部控制栏的自动隐藏的延迟时间，单位为毫秒，默认为 3000
▶ Run Code
js
Artplayer.CONTROL_HIDE_TIME = 5000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
DBCLICK_TIME ​
双击事件的延迟事件，单位为毫秒，默认为 300
▶ Run Code
js
Artplayer.DBCLICK_TIME = 500;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
DBCLICK_TIME ​
双击事件的延迟事件，单位为毫秒，默认为 300
▶ Run Code
js
Artplayer.DBCLICK_TIME = 500;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('dblclick', () => {
-    console.log('dblclick');
-});
DBCLICK_FULLSCREEN ​
在桌面端，是否双击切换全屏，默认为 true
▶ Run Code
js
Artplayer.DBCLICK_FULLSCREEN = false;
+art.on('dblclick', () => {
+    console.log('dblclick');
+});
DBCLICK_FULLSCREEN ​
在桌面端，是否双击切换全屏，默认为 true
▶ Run Code
js
Artplayer.DBCLICK_FULLSCREEN = false;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
MOBILE_DBCLICK_PLAY ​
在移动端，是否双击切换播放暂停，默认为 true
▶ Run Code
js
Artplayer.MOBILE_DBCLICK_PLAY = false;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
MOBILE_DBCLICK_PLAY ​
在移动端，是否双击切换播放暂停，默认为 true
▶ Run Code
js
Artplayer.MOBILE_DBCLICK_PLAY = false;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
MOBILE_CLICK_PLAY ​
在移动端，是否单击切换播放暂停，默认为 false
▶ Run Code
js
Artplayer.MOBILE_CLICK_PLAY = true;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
MOBILE_CLICK_PLAY ​
在移动端，是否单击切换播放暂停，默认为 false
▶ Run Code
js
Artplayer.MOBILE_CLICK_PLAY = true;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
AUTO_ORIENTATION_TIME ​
在移动端，自动旋屏的延迟时间，单位为毫秒，默认为 200
▶ Run Code
js
Artplayer.AUTO_ORIENTATION_TIME = 500;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
AUTO_ORIENTATION_TIME ​
在移动端，自动旋屏的延迟时间，单位为毫秒，默认为 200
▶ Run Code
js
Artplayer.AUTO_ORIENTATION_TIME = 500;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoOrientation: true,
-});
INFO_LOOP_TIME ​
信息面板的刷新时间，单位为毫秒，默认为 1000
▶ Run Code
js
Artplayer.INFO_LOOP_TIME = 2000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoOrientation: true,
+});
INFO_LOOP_TIME ​
信息面板的刷新时间，单位为毫秒，默认为 1000
▶ Run Code
js
Artplayer.INFO_LOOP_TIME = 2000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.info.show = true;
FAST_FORWARD_VALUE ​
在移动端，长按加速的速率倍数，默认为 3
▶ Run Code
js
Artplayer.FAST_FORWARD_VALUE = 5;
+art.info.show = true;
FAST_FORWARD_VALUE ​
在移动端，长按加速的速率倍数，默认为 3
▶ Run Code
js
Artplayer.FAST_FORWARD_VALUE = 5;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});
FAST_FORWARD_TIME ​
在移动端，长按加速的延迟时间，单位为毫秒，默认为 1000
▶ Run Code
js
Artplayer.FAST_FORWARD_TIME = 2000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});
FAST_FORWARD_TIME ​
在移动端，长按加速的延迟时间，单位为毫秒，默认为 1000
▶ Run Code
js
Artplayer.FAST_FORWARD_TIME = 2000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});
TOUCH_MOVE_RATIO ​
在移动端，左右滑动进度的速率倍数，默认为 0.5
▶ Run Code
js
Artplayer.TOUCH_MOVE_RATIO = 1;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});
TOUCH_MOVE_RATIO ​
在移动端，左右滑动进度的速率倍数，默认为 0.5
▶ Run Code
js
Artplayer.TOUCH_MOVE_RATIO = 1;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
VOLUME_STEP ​
快捷键调节音量的幅度比例，默认为 0.1
▶ Run Code
js
Artplayer.VOLUME_STEP = 0.2;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
VOLUME_STEP ​
快捷键调节音量的幅度比例，默认为 0.1
▶ Run Code
js
Artplayer.VOLUME_STEP = 0.2;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
SEEK_STEP ​
快捷键调节播放进度的幅度，单位为秒，默认为 5
▶ Run Code
js
Artplayer.SEEK_STEP = 10;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
SEEK_STEP ​
快捷键调节播放进度的幅度，单位为秒，默认为 5
▶ Run Code
js
Artplayer.SEEK_STEP = 10;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
PLAYBACK_RATE ​
内置播放速率的列表，默认为 [0.5, 0.75, 1, 1.25, 1.5, 2]
▶ Run Code
js
Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5];
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
PLAYBACK_RATE ​
内置播放速率的列表，默认为 [0.5, 0.75, 1, 1.25, 1.5, 2]
▶ Run Code
js
Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5];
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    playbackRate: true,
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    playbackRate: true,
+});
 
-art.contextmenu.show = true;
-art.setting.show = true;
ASPECT_RATIO ​
内置视频长宽比的列表，默认为 ['default', '4:3', '16:9']
▶ Run Code
js
Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5'];
+art.contextmenu.show = true;
+art.setting.show = true;
ASPECT_RATIO ​
内置视频长宽比的列表，默认为 ['default', '4:3', '16:9']
▶ Run Code
js
Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5'];
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    aspectRatio: true,
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    aspectRatio: true,
+});
 
-art.contextmenu.show = true;
-art.setting.show = true;
FLIP ​
内置视频翻转的列表，默认为 ['normal', 'horizontal', 'vertical']
▶ Run Code
js
Artplayer.FLIP = ['normal', 'horizontal'];
+art.contextmenu.show = true;
+art.setting.show = true;
FLIP ​
内置视频翻转的列表，默认为 ['normal', 'horizontal', 'vertical']
▶ Run Code
js
Artplayer.FLIP = ['normal', 'horizontal'];
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+});
 
-art.contextmenu.show = true;
-art.setting.show = true;
FULLSCREEN_WEB_IN_BODY ​
网页全屏时，是否把播放器挂在在 body 元素下，默认为 false
▶ Run Code
js
Artplayer.FULLSCREEN_WEB_IN_BODY = true;
+art.contextmenu.show = true;
+art.setting.show = true;
FULLSCREEN_WEB_IN_BODY ​
网页全屏时，是否把播放器挂在在 body 元素下，默认为 false
▶ Run Code
js
Artplayer.FULLSCREEN_WEB_IN_BODY = true;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
LOG_VERSION ​
设置是否打印播放器版本，默认为 true
▶ Run Code
js
Artplayer.LOG_VERSION = false;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
LOG_VERSION ​
设置是否打印播放器版本，默认为 true
▶ Run Code
js
Artplayer.LOG_VERSION = false;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
USE_RAF ​
设置是否使用 requestAnimationFrame ，默认为 false，目前主要用于进度条的平滑效果
▶ Run Code
js
Artplayer.USE_RAF = true;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
USE_RAF ​
设置是否使用 requestAnimationFrame ，默认为 false，目前主要用于进度条的平滑效果
▶ Run Code
js
Artplayer.USE_RAF = true;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    miniProgressBar: true,
-});

-    
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    miniProgressBar: true,
+});
+ \ No newline at end of file diff --git a/docs/document/advanced/plugin.html b/docs/document/advanced/plugin.html index 410de1401..159748a71 100644 --- a/docs/document/advanced/plugin.html +++ b/docs/document/advanced/plugin.html @@ -5,121 +5,119 @@ 编写插件 | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

编写插件 ​

但你已经知道播放器的属性, 方法和事件后，再编写插件是非常简单的事

可以在实例化的时候加载插件的函数

▶ Run Code
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
+    
Artplayer.js
Appearance
On this page
编写插件 ​
但你已经知道播放器的属性, 方法和事件后，再编写插件是非常简单的事
可以在实例化的时候加载插件的函数
▶ Run Code
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [myPlugin],
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [myPlugin],
+});
 
-art.on('ready', () => {
-    console.info(art.plugins.myPlugin);
-});
可以在实例化之后再加载插件的函数
▶ Run Code
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
+art.on('ready', () => {
+    console.info(art.plugins.myPlugin);
+});
可以在实例化之后再加载插件的函数
▶ Run Code
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.plugins.add(myPlugin);
+art.plugins.add(myPlugin);
 
-art.on('ready', () => {
-    console.info(art.plugins.myPlugin);
-});
例如我想写一个在视频暂停后，显示一个图片广告的插件
▶ Run Code
js
function adsPlugin(option) {
-    return (art) => {
-        art.layers.add({
-            name: 'ads',
-            html: `<img style="width: 100px" src="${option.url}">`,
-            style: {
-                display: 'none',
-                position: 'absolute',
-                top: '20px',
-                right: '20px',
-            },
-        });
+art.on('ready', () => {
+    console.info(art.plugins.myPlugin);
+});
例如我想写一个在视频暂停后，显示一个图片广告的插件
▶ Run Code
js
function adsPlugin(option) {
+    return (art) => {
+        art.layers.add({
+            name: 'ads',
+            html: `<img style="width: 100px" src="${option.url}">`,
+            style: {
+                display: 'none',
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+            },
+        });
 
-        function show() {
-            art.layers.ads.style.display = 'block';
-        }
+        function show() {
+            art.layers.ads.style.display = 'block';
+        }
 
-        function hide() {
-            art.layers.ads.style.display = 'none';
-        }
+        function hide() {
+            art.layers.ads.style.display = 'none';
+        }
 
-        art.controls.add({
-            name: 'hide-ads',
-            position: 'right',
-            html: 'Hide Ads',
-            tooltip: 'Hide Ads',
-            click: hide,
-            style: {
-                marginRight: '20px'
-            }
-        });
+        art.controls.add({
+            name: 'hide-ads',
+            position: 'right',
+            html: 'Hide Ads',
+            tooltip: 'Hide Ads',
+            click: hide,
+            style: {
+                marginRight: '20px'
+            }
+        });
 
-        art.controls.add({
-            name: 'show-ads',
-            position: 'right',
-            html: 'Show Ads',
-            tooltip: 'Show Ads',
-            click: show,
-        });
+        art.controls.add({
+            name: 'show-ads',
+            position: 'right',
+            html: 'Show Ads',
+            tooltip: 'Show Ads',
+            click: show,
+        });
 
-        art.on('play', hide);
-        art.on('pause', show);
+        art.on('play', hide);
+        art.on('pause', show);
 
-        return {
-            name: 'adsPlugin',
-            show,
-            hide
-        };
-    }
-}
+        return {
+            name: 'adsPlugin',
+            show,
+            hide
+        };
+    }
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        adsPlugin({
-            url: '/assets/sample/layer.png'
-        })
-    ],
-});

-    
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        adsPlugin({
+            url: '/assets/sample/layer.png'
+        })
+    ],
+});
+ \ No newline at end of file diff --git a/docs/document/advanced/property.html b/docs/document/advanced/property.html index 560e43e80..9cff09548 100644 --- a/docs/document/advanced/property.html +++ b/docs/document/advanced/property.html @@ -5,405 +5,403 @@ 实例属性 | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

实例属性 ​

这里的 实例属性 是指挂载在 实例 的 一级属性，比较常用

play ​

  • Type: Function

播放视频

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+    
Artplayer.js
Appearance
On this page
实例属性 ​
这里的 实例属性 是指挂载在 实例 的 一级属性，比较常用
play ​
  • Type: Function
播放视频
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    art.play();
-});
pause ​
  • Type: Function
暂停视频
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+art.on('ready', () => {
+    art.play();
+});
pause ​
  • Type: Function
暂停视频
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    art.play();
+art.on('ready', () => {
+    art.play();
 
-    setTimeout(() => {
-        art.pause();
-    }, 3000);
-});
toggle ​
  • Type: Function
切换视频的播放和暂停
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+    setTimeout(() => {
+        art.pause();
+    }, 3000);
+});
toggle ​
  • Type: Function
切换视频的播放和暂停
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    art.toggle();
+art.on('ready', () => {
+    art.toggle();
 
-    setTimeout(() => {
-        art.toggle();
-    }, 3000);
-});
destroy ​
  • Type: Function
  • Parameter: Boolean
销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 html，默认为 true
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    setTimeout(() => {
+        art.toggle();
+    }, 3000);
+});
destroy ​
  • Type: Function
  • Parameter: Boolean
销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 html，默认为 true
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.destroy();
-});
seek ​
  • Type: Setter
  • Parameter: Number
视频时间跳转，单位秒
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.destroy();
+});
seek ​
  • Type: Setter
  • Parameter: Number
视频时间跳转，单位秒
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 5;
-});
forward ​
  • Type: Setter
  • Parameter: Number
视频时间快进，单位秒
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.seek = 5;
+});
forward ​
  • Type: Setter
  • Parameter: Number
视频时间快进，单位秒
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.forward = 5;
-});
backward ​
  • Type: Setter
  • Parameter: Number
视频时间快退，单位秒
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.forward = 5;
+});
backward ​
  • Type: Setter
  • Parameter: Number
视频时间快退，单位秒
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 5;
+art.on('ready', () => {
+    art.seek = 5;
 
-    setTimeout(() => {
-        art.backward = 2;
-    }, 3000);
-});
volume ​
  • Type: Setter/Getter
  • Parameter: Number
设置和获取视频音量，范围在：[0, 1]
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    setTimeout(() => {
+        art.backward = 2;
+    }, 3000);
+});
volume ​
  • Type: Setter/Getter
  • Parameter: Number
设置和获取视频音量，范围在：[0, 1]
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.volume);
-    art.volume = 0.5;
-    console.info(art.volume);
-});
url ​
  • Type: Setter/Getter
  • Parameter: String
设置和获取视频地址
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.volume);
+    art.volume = 0.5;
+    console.info(art.volume);
+});
url ​
  • Type: Setter/Getter
  • Parameter: String
设置和获取视频地址
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.url = '/assets/sample/video.mp4?t=0';
-});
switch ​
  • Type: Setter
  • Parameter: String
设置视频地址，设置时和 art.url 类似，但会执行一些优化操作
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.url = '/assets/sample/video.mp4?t=0';
+});
switch ​
  • Type: Setter
  • Parameter: String
设置视频地址，设置时和 art.url 类似，但会执行一些优化操作
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switch = '/assets/sample/video.mp4?t=0';
-    }, 3000);
-});
switchUrl ​
  • Type: Function
  • Parameter: String
设置视频地址，设置时和 art.url 类似，但会执行一些优化操作
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switch = '/assets/sample/video.mp4?t=0';
+    }, 3000);
+});
switchUrl ​
  • Type: Function
  • Parameter: String
设置视频地址，设置时和 art.url 类似，但会执行一些优化操作
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switchUrl('/assets/sample/video.mp4?t=0');
-    }, 3000);
-});
提示
art.switch 和 art.switchUrl 的功能是一样的，只是 art.switchUrl 方法会返回 Promise，当 resolve 时表示新地址是可以播放，reject 时表示新地址加载错误
switchQuality ​
  • Type: Function
  • Parameter: String
设置视频画质地址，和 art.switchUrl 类似，但会带上之前的播放进度
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchUrl('/assets/sample/video.mp4?t=0');
+    }, 3000);
+});
提示
art.switch 和 art.switchUrl 的功能是一样的，只是 art.switchUrl 方法会返回 Promise，当 resolve 时表示新地址是可以播放，reject 时表示新地址加载错误
switchQuality ​
  • Type: Function
  • Parameter: String
设置视频画质地址，和 art.switchUrl 类似，但会带上之前的播放进度
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switchQuality('/assets/sample/video.mp4?t=0');
-    }, 3000);
-});
muted ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取视频是否静音
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchQuality('/assets/sample/video.mp4?t=0');
+    }, 3000);
+});
muted ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取视频是否静音
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.muted);
-    art.muted = true;
-    console.info(art.muted);
-});
currentTime ​
  • Type: Setter/Getter
  • Parameter: Number
设置和获取视频当前时间，设置时间时和 seek 类似，但它不会触发额外的事件
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.muted);
+    art.muted = true;
+    console.info(art.muted);
+});
currentTime ​
  • Type: Setter/Getter
  • Parameter: Number
设置和获取视频当前时间，设置时间时和 seek 类似，但它不会触发额外的事件
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.currentTime);
-    art.currentTime = 5;
-    console.info(art.currentTime);
-});
duration ​
  • Type: Getter
获取视频时长
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.currentTime);
+    art.currentTime = 5;
+    console.info(art.currentTime);
+});
duration ​
  • Type: Getter
获取视频时长
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.duration);
-});
提示
有的视频是没有时长的，例如直播中的视频或者没被解码完成的视频，这个时候获取的时长会是 0
screenshot ​
  • Type: Function
下载当前视频帧的截图
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.duration);
+});
提示
有的视频是没有时长的，例如直播中的视频或者没被解码完成的视频，这个时候获取的时长会是 0
screenshot ​
  • Type: Function
下载当前视频帧的截图
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.screenshot();
-});
getDataURL ​
  • Type: Function
获取当前视频帧的截图的base64地址，返回的是一个 Promise
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.screenshot();
+});
getDataURL ​
  • Type: Function
获取当前视频帧的截图的base64地址，返回的是一个 Promise
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', async () => {
-    const url = await art.getDataURL();
-	console.info(url)
-});
getBlobUrl ​
  • Type: Function
获取当前视频帧的截图的blob地址，返回的是一个 Promise
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', async () => {
+    const url = await art.getDataURL();
+	console.info(url)
+});
getBlobUrl ​
  • Type: Function
获取当前视频帧的截图的blob地址，返回的是一个 Promise
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', async () => {
-    const url = await art.getBlobUrl();
-    console.info(url);
-});
fullscreen ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取播放器窗口全屏
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'Fullscreen Switch',
-            click: function () {
-                art.fullscreen = !art.fullscreen;
-            },
-        },
-    ],
-});
提示
由于浏览器安全机制，触发窗口全屏前，页面必须先存在交互（例如用户点击过页面）
fullscreenWeb ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取播放器网页全屏
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
+art.on('ready', async () => {
+    const url = await art.getBlobUrl();
+    console.info(url);
+});
fullscreen ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取播放器窗口全屏
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'Fullscreen Switch',
+            click: function () {
+                art.fullscreen = !art.fullscreen;
+            },
+        },
+    ],
+});
提示
由于浏览器安全机制，触发窗口全屏前，页面必须先存在交互（例如用户点击过页面）
fullscreenWeb ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取播放器网页全屏
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
 
-art.on('ready', () => {
-    art.fullscreenWeb = true;
+art.on('ready', () => {
+    art.fullscreenWeb = true;
 
-    setTimeout(() => {
-        art.fullscreenWeb = false;
-    }, 3000);
-});
pip ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取播放器画中画模式
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'PIP',
-            click: function () {
-                art.pip = !art.pip;
-            },
-        },
-    ],
-});
提示
由于浏览器安全机制，触发画中画前，页面必须先存在交互（例如用户点击过页面）
poster ​
  • Type: Setter/Getter
  • Parameter: String
设置和获取视频海报，只有在视频播放前才能看到海报效果
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    poster: '/assets/sample/poster.jpg',
-});
+    setTimeout(() => {
+        art.fullscreenWeb = false;
+    }, 3000);
+});
pip ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取播放器画中画模式
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'PIP',
+            click: function () {
+                art.pip = !art.pip;
+            },
+        },
+    ],
+});
提示
由于浏览器安全机制，触发画中画前，页面必须先存在交互（例如用户点击过页面）
poster ​
  • Type: Setter/Getter
  • Parameter: String
设置和获取视频海报，只有在视频播放前才能看到海报效果
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    poster: '/assets/sample/poster.jpg',
+});
 
-art.on('ready', () => {
-    console.info(art.poster);
-    art.poster = '/assets/sample/poster.jpg?t=0';
-    console.info(art.poster);
-});
mini ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取播放器迷你模式
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.poster);
+    art.poster = '/assets/sample/poster.jpg?t=0';
+    console.info(art.poster);
+});
mini ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取播放器迷你模式
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.mini = true;
-});
playing ​
  • Type: Getter
  • Parameter: Boolean
获取视频是否正在播放中
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+art.on('ready', () => {
+    art.mini = true;
+});
playing ​
  • Type: Getter
  • Parameter: Boolean
获取视频是否正在播放中
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    console.info(art.playing);
-});
autoSize ​
  • Type: Function
设置视频是否自适应尺寸
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.playing);
+});
autoSize ​
  • Type: Function
设置视频是否自适应尺寸
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.autoSize();
-});
rect ​
  • Type: Getter
获取播放器的尺寸和坐标信息
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.autoSize();
+});
rect ​
  • Type: Getter
获取播放器的尺寸和坐标信息
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(JSON.stringify(art.rect));
-});
提示
尺寸和坐标信息是通过 getBoundingClientRect 获取的
flip ​
  • Type: Setter/Getter
  • Parameter: String
设置和获取播放器翻转，支持normal, horizontal, vertical
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(JSON.stringify(art.rect));
+});
提示
尺寸和坐标信息是通过 getBoundingClientRect 获取的
flip ​
  • Type: Setter/Getter
  • Parameter: String
设置和获取播放器翻转，支持normal, horizontal, vertical
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.flip);
-    art.flip = 'horizontal';
-    console.info(art.flip);
-});
playbackRate ​
  • Type: Setter/Getter
  • Parameter: Number
设置和获取播放器播放速度
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.flip);
+    art.flip = 'horizontal';
+    console.info(art.flip);
+});
playbackRate ​
  • Type: Setter/Getter
  • Parameter: Number
设置和获取播放器播放速度
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.playbackRate);
-    art.playbackRate = 2;
-    console.info(art.playbackRate);
-});
aspectRatio ​
  • Type: Setter/Getter
  • Parameter: String
设置和获取播放器长宽比
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.playbackRate);
+    art.playbackRate = 2;
+    console.info(art.playbackRate);
+});
aspectRatio ​
  • Type: Setter/Getter
  • Parameter: String
设置和获取播放器长宽比
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.aspectRatio);
-    art.aspectRatio = '16:9';
-    console.info(art.aspectRatio);
-});
autoHeight ​
  • Type: Function
当容器只有宽度，该属性可以自动计算出并设置视频的高度
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.aspectRatio);
+    art.aspectRatio = '16:9';
+    console.info(art.aspectRatio);
+});
autoHeight ​
  • Type: Function
当容器只有宽度，该属性可以自动计算出并设置视频的高度
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.autoHeight();
-});
+art.on('ready', () => {
+    art.autoHeight();
+});
 
-art.on('resize', () => {
-    art.autoHeight();
-});
提示
当你的容器只有宽度，但不知道具体高度时，这个属性很有用，它能自动计算出视频的高度，但你需要确定设置这个属性的时机
attr ​
  • Type: Function
  • Parameter: String
动态获取和设置 video 元素的属性
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('resize', () => {
+    art.autoHeight();
+});
提示
当你的容器只有宽度，但不知道具体高度时，这个属性很有用，它能自动计算出视频的高度，但你需要确定设置这个属性的时机
attr ​
  • Type: Function
  • Parameter: String
动态获取和设置 video 元素的属性
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.attr('playsInline'));
-    art.attr('playsInline', true);
-    console.info(art.attr('playsInline'));
-});
type ​
  • Type: Setter/Getter
  • Parameter: String
动态获取和设置视频类型
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.attr('playsInline'));
+    art.attr('playsInline', true);
+    console.info(art.attr('playsInline'));
+});
type ​
  • Type: Setter/Getter
  • Parameter: String
动态获取和设置视频类型
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.type);
-    art.type = 'm3u8';
-    console.info(art.type);
-});
theme ​
  • Type: Setter/Getter
  • Parameter: String
动态获取和设置播放器主题颜色
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.type);
+    art.type = 'm3u8';
+    console.info(art.type);
+});
theme ​
  • Type: Setter/Getter
  • Parameter: String
动态获取和设置播放器主题颜色
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.theme);
-    art.theme = '#000';
-    console.info(art.theme);
-});
airplay ​
  • Type: Function
开启隔空播放
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'AirPlay',
-            click: function () {
-                art.airplay();
-            },
-        },
-    ],
-});
loaded ​
  • Type: Getter
视频缓存的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.theme);
+    art.theme = '#000';
+    console.info(art.theme);
+});
airplay ​
  • Type: Function
开启隔空播放
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'AirPlay',
+            click: function () {
+                art.airplay();
+            },
+        },
+    ],
+});
loaded ​
  • Type: Getter
视频缓存的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('video:timeupdate', () => {
-    console.info(art.loaded);
-});
played ​
  • Type: Getter
视频播放的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('video:timeupdate', () => {
+    console.info(art.loaded);
+});
played ​
  • Type: Getter
视频播放的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('video:timeupdate', () => {
-    console.info(art.played);
-});
proxy ​
  • Type: Function
DOM 事件的代理函数，实质上代理了 addEventListener 和 removeEventListener, 当使用 proxy 来处理事件，播放器销毁时也会自动销毁该事件
▶ Run Code
js
var container = document.querySelector('.artplayer-app');
+art.on('video:timeupdate', () => {
+    console.info(art.played);
+});
proxy ​
  • Type: Function
DOM 事件的代理函数，实质上代理了 addEventListener 和 removeEventListener, 当使用 proxy 来处理事件，播放器销毁时也会自动销毁该事件
▶ Run Code
js
var container = document.querySelector('.artplayer-app');
 
-var art = new Artplayer({
-	container: container,
-	url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+	container: container,
+	url: '/assets/sample/video.mp4',
+});
 
-art.proxy(container, 'click', event => {
-	console.info(event);
-});
提示
假如你需要一些 DOM 事件只存在于播放器的生命周期上时，强烈建议使用该函数，以避免造成内存泄漏
query ​
  • Type: Function
DOM 的查询函数，类似 document.querySelector，但被查询的对象局限于当前播放器内，可以避免同类名的错误
▶ Run Code
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
+art.proxy(container, 'click', event => {
+	console.info(event);
+});
提示
假如你需要一些 DOM 事件只存在于播放器的生命周期上时，强烈建议使用该函数，以避免造成内存泄漏
query ​
  • Type: Function
DOM 的查询函数，类似 document.querySelector，但被查询的对象局限于当前播放器内，可以避免同类名的错误
▶ Run Code
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
 
-console.info(art.query('.art-video'));
video ​
  • Type: Element
快捷返回播放器的 video 元素
▶ Run Code
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
+console.info(art.query('.art-video'));
video ​
  • Type: Element
快捷返回播放器的 video 元素
▶ Run Code
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
 
-console.info(art.video);
cssVar ​
  • Type: Function
动态获取或设置 css 变量
▶ Run Code
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
+console.info(art.video);
cssVar ​
  • Type: Function
动态获取或设置 css 变量
▶ Run Code
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.log(art.cssVar('--art-theme'));
-    art.cssVar('--art-theme', 'green');
-    console.log(art.cssVar('--art-theme'));
-});
quality ​
  • Type: Setter
  • Parameter: Array
动态设置画质列表
▶ Run Code
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-	quality: [
-		{
-			default: true,
-			html: 'SD 480P',
-			url: '/assets/sample/video.mp4',
-		},
-		{
-			html: 'HD 720P',
-			url: '/assets/sample/video.mp4',
-		},
-	],
-});
+art.on('ready', () => {
+    console.log(art.cssVar('--art-theme'));
+    art.cssVar('--art-theme', 'green');
+    console.log(art.cssVar('--art-theme'));
+});
quality ​
  • Type: Setter
  • Parameter: Array
动态设置画质列表
▶ Run Code
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+	quality: [
+		{
+			default: true,
+			html: 'SD 480P',
+			url: '/assets/sample/video.mp4',
+		},
+		{
+			html: 'HD 720P',
+			url: '/assets/sample/video.mp4',
+		},
+	],
+});
 
-art.on('ready', () => {
-	setTimeout(() => {
-		art.quality = [
-			{
-				default: true,
-				html: '1080P',
-				url: '/assets/sample/video.mp4',
-			},
-			{
-				html: '4K',
-				url: '/assets/sample/video.mp4',
-			},
-		];
-	}, 3000);
-})

-    
+art.on('ready', () => {
+	setTimeout(() => {
+		art.quality = [
+			{
+				default: true,
+				html: '1080P',
+				url: '/assets/sample/video.mp4',
+			},
+			{
+				html: '4K',
+				url: '/assets/sample/video.mp4',
+			},
+		];
+	}, 3000);
+})
+ \ No newline at end of file diff --git a/docs/document/assets/advanced_built-in.md.9e773b8f.js b/docs/document/assets/advanced_built-in.md.9e773b8f.js new file mode 100644 index 000000000..d2651940f --- /dev/null +++ b/docs/document/assets/advanced_built-in.md.9e773b8f.js @@ -0,0 +1,187 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const K=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/built-in.md","filePath":"advanced/built-in.md","lastUpdated":1683080086000}'),o={name:"advanced/built-in.md"},e=s('

高级属性 ​

这里的 高级属性 是指挂载在 实例 的 二级属性，比较少用

option ​

播放器的选项

',4),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.option);

提示

假如直接修改这个 option 对象，播放器不会马上做出响应

template ​

管理播放器所有的 DOM 元素

`,4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.template);
+console.info(art.template.$video);

提示

为了方便区别 DOM 元素和普通对象，播放器里的所有 DOM 元素都是以 $ 开头命名的

这是所有 DOM 元素的定义：artplayer/types/template.d.ts

events ​

管理播放器所有的 DOM 事件，实质上是代理了 addEventListener 和 removeEventListener, 当使用以下方法来处理事件，播放器销毁时也会自动销毁该事件

`,5),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var container = document.querySelector('.artplayer-app');
+
+var art = new Artplayer({
+    container: container,
+    url: '/assets/sample/video.mp4',
+});
+
+art.events.proxy(container, 'click', event => {
+	console.info('click', event);
+});
+
+art.events.hover(container, (event) => {
+    console.info('mouseenter', event);
+}, (event) => {
+    console.info('mouseleave', event);
+});
+
+art.events.loadImg('/assets/sample/poster.jpg').then(img => {
+    console.info('loadImg', img);
+});

提示

假如你需要一些 DOM 事件只存在于播放器的生命周期上时，强烈建议使用这些函数，以避免造成内存泄漏

storage ​

管理播放器的本地存储

`,5),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.storage.set('test', { foo: 'bar' });
+const test = art.storage.get('test');
+console.info(test);
+art.storage.del('test');
+art.storage.clear();

提示

默认所有播放器实例都是共享同一个 localStorage 的，而且默认的 key 是 artplayer_settings

如果你想不同的播放器使用不同的 localStorage，你可以修改 art.storage.name 即可

`,2),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.storage.name = 'your-storage-key';
+art.storage.set('test', { foo: 'bar' });

icons ​

管理播放器所有的 svg 图标

`,3),b=n("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.icons.loading);

这是所有图标的定义：

artplayer/types/icons.d.ts

i18n ​

管理播放器的 i18n

`,5),m=n("div",{className:"run-code"},"▶ Run Code",-1),_=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.i18n.get('Play'));
+
+art.i18n.update({
+    'zh-cn': {
+        Play: 'Your Play'
+    }
+});

WARNING

使用 art.i18n.update 只能更新实例化之后的 i18n，假如想在实例化之前更新 i18n，请使用基础选项的 i18n 来更新

notice ​

管理播放器的提示语，只有一个 show 属性用于显示提示语

`,4),h=n("div",{className:"run-code"},"▶ Run Code",-1),v=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.notice.show = 'Video Ready To Play';
+})

WARNING

如果想马上隐藏 notice 的显示：art.notice.show = '';

layers ​

管理播放器的层

`,5),g=n("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.layers.add({
+        html: 'Some Text',
+    });
+
+	setTimeout(() => {
+		art.layers.show = false;
+	}, 1000);
+});

组件配置 请参考以下地址：

/component/layers.html

controls ​

管理播放器的控制器

`,5),T=n("div",{className:"run-code"},"▶ Run Code",-1),k=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.controls.add({
+        html: 'Some Text',
+        position: 'left',
+    });
+
+	setTimeout(() => {
+		art.controls.show = false;
+	}, 1000);
+});

组件配置 请参考以下地址：

/component/controls.html

contextmenu ​

管理播放器的右键菜单

`,5),f=n("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.contextmenu.add({
+        html: 'Some Text',
+    });
+
+    art.contextmenu.show = true;
+	setTimeout(() => {
+		art.contextmenu.show = false;
+	}, 1000);
+});

组件配置 请参考以下地址：

/component/contextmenu.html

subtitle ​

管理播放器的字幕功能

`,5),P=n("div",{className:"run-code"},"▶ Run Code",-1),S=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.subtitle.url = '/assets/sample/subtitle.srt'
+    art.subtitle.style({
+        color: 'red',
+    });
+});

loading ​

管理播放器的加载层

`,4),I=n("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.loading.show = true;
+	setTimeout(() => {
+		art.loading.show = false;
+	}, 1000);
+});

hotkey ​

管理播放器的快捷键功能

`,4),R=n("div",{className:"run-code"},"▶ Run Code",-1),V=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+function hotkeyEvent(event) {
+    console.info('click', event);
+}
+
+art.on('ready', () => {
+    art.hotkey.add(32, hotkeyEvent);
+    setTimeout(() => {
+		art.hotkey.remove(32, hotkeyEvent);
+	}, 5000);
+});

提示

只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效

mask ​

管理播放器的遮罩层

`,5),j=n("div",{className:"run-code"},"▶ Run Code",-1),q=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.mask.show = false;
+	setTimeout(() => {
+		art.mask.show = true;
+	}, 1000);
+});

setting ​

管理播放器的设置面板

`,4),x=n("div",{className:"run-code"},"▶ Run Code",-1),O=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    subtitleOffset: true,
+});
+
+art.on('ready', () => {
+    art.setting.show = true;
+	setTimeout(() => {
+		art.setting.show = false;
+	}, 1000);
+});

设置面板 请参考以下地址

/component/setting.html

plugins ​

管理播放器的插件功能，只有一个方法 add 用于动态添加插件

`,4),M=n("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
+
+art.on('ready', () => {
+    art.plugins.add(myPlugin);
+});
`,1),z=[e,c,r,t,D,F,y,i,A,C,d,b,u,m,_,h,v,g,E,T,k,f,w,P,S,I,N,R,V,j,q,x,O,M,$];function B(G,L,W,J,U,Y){return p(),l("div",null,z)}const Q=a(o,[["render",B]]);export{K as __pageData,Q as default}; diff --git a/docs/document/assets/advanced_built-in.md.9e773b8f.lean.js b/docs/document/assets/advanced_built-in.md.9e773b8f.lean.js new file mode 100644 index 000000000..0ada537f3 --- /dev/null +++ b/docs/document/assets/advanced_built-in.md.9e773b8f.lean.js @@ -0,0 +1 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const K=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/built-in.md","filePath":"advanced/built-in.md","lastUpdated":1683080086000}'),o={name:"advanced/built-in.md"},e=s("",4),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",5),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",5),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",2),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s("",3),b=n("div",{className:"run-code"},"▶ Run Code",-1),u=s("",5),m=n("div",{className:"run-code"},"▶ Run Code",-1),_=s("",4),h=n("div",{className:"run-code"},"▶ Run Code",-1),v=s("",5),g=n("div",{className:"run-code"},"▶ Run Code",-1),E=s("",5),T=n("div",{className:"run-code"},"▶ Run Code",-1),k=s("",5),f=n("div",{className:"run-code"},"▶ Run Code",-1),w=s("",5),P=n("div",{className:"run-code"},"▶ Run Code",-1),S=s("",4),I=n("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),R=n("div",{className:"run-code"},"▶ Run Code",-1),V=s("",5),j=n("div",{className:"run-code"},"▶ Run Code",-1),q=s("",4),x=n("div",{className:"run-code"},"▶ Run Code",-1),O=s("",4),M=n("div",{className:"run-code"},"▶ Run Code",-1),$=s("",1),z=[e,c,r,t,D,F,y,i,A,C,d,b,u,m,_,h,v,g,E,T,k,f,w,P,S,I,N,R,V,j,q,x,O,M,$];function B(G,L,W,J,U,Y){return p(),l("div",null,z)}const Q=a(o,[["render",B]]);export{K as __pageData,Q as default}; diff --git a/docs/document/assets/advanced_built-in.md.t2yKAA1L.js b/docs/document/assets/advanced_built-in.md.t2yKAA1L.js deleted file mode 100644 index c51140569..000000000 --- a/docs/document/assets/advanced_built-in.md.t2yKAA1L.js +++ /dev/null @@ -1,187 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const K=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/built-in.md","filePath":"advanced/built-in.md","lastUpdated":1683080086000}'),p={name:"advanced/built-in.md"},e=s('

高级属性 ​

这里的 高级属性 是指挂载在 实例 的 二级属性，比较少用

option ​

播放器的选项

',4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info(art.option);

提示

假如直接修改这个 option 对象，播放器不会马上做出响应

template ​

管理播放器所有的 DOM 元素

`,4),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info(art.template);
-console.info(art.template.$video);

提示

为了方便区别 DOM 元素和普通对象，播放器里的所有 DOM 元素都是以 $ 开头命名的

这是所有 DOM 元素的定义：artplayer/types/template.d.ts

events ​

管理播放器所有的 DOM 事件，实质上是代理了 addEventListener 和 removeEventListener, 当使用以下方法来处理事件，播放器销毁时也会自动销毁该事件

`,5),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var container = document.querySelector('.artplayer-app');
-
-var art = new Artplayer({
-    container: container,
-    url: '/assets/sample/video.mp4',
-});
-
-art.events.proxy(container, 'click', event => {
-	console.info('click', event);
-});
-
-art.events.hover(container, (event) => {
-    console.info('mouseenter', event);
-}, (event) => {
-    console.info('mouseleave', event);
-});
-
-art.events.loadImg('/assets/sample/poster.jpg').then(img => {
-    console.info('loadImg', img);
-});

提示

假如你需要一些 DOM 事件只存在于播放器的生命周期上时，强烈建议使用这些函数，以避免造成内存泄漏

storage ​

管理播放器的本地存储

`,5),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.storage.set('test', { foo: 'bar' });
-const test = art.storage.get('test');
-console.info(test);
-art.storage.del('test');
-art.storage.clear();

提示

默认所有播放器实例都是共享同一个 localStorage 的，而且默认的 key 是 artplayer_settings

如果你想不同的播放器使用不同的 localStorage，你可以修改 art.storage.name 即可

`,2),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.storage.name = 'your-storage-key';
-art.storage.set('test', { foo: 'bar' });

icons ​

管理播放器所有的 svg 图标

`,3),b=i("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info(art.icons.loading);

这是所有图标的定义：

artplayer/types/icons.d.ts

i18n ​

管理播放器的 i18n

`,5),F=i("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info(art.i18n.get('Play'));
-
-art.i18n.update({
-    'zh-cn': {
-        Play: 'Your Play'
-    }
-});

WARNING

使用 art.i18n.update 只能更新实例化之后的 i18n，假如想在实例化之前更新 i18n，请使用基础选项的 i18n 来更新

notice ​

管理播放器的提示语，只有一个 show 属性用于显示提示语

`,4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.notice.show = 'Video Ready To Play';
-})

WARNING

如果想马上隐藏 notice 的显示：art.notice.show = '';

layers ​

管理播放器的层

`,5),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.layers.add({
-        html: 'Some Text',
-    });
-
-	setTimeout(() => {
-		art.layers.show = false;
-	}, 1000);
-});

组件配置 请参考以下地址：

/component/layers.html

controls ​

管理播放器的控制器

`,5),B=i("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.controls.add({
-        html: 'Some Text',
-        position: 'left',
-    });
-
-	setTimeout(() => {
-		art.controls.show = false;
-	}, 1000);
-});

组件配置 请参考以下地址：

/component/controls.html

contextmenu ​

管理播放器的右键菜单

`,5),T=i("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.contextmenu.add({
-        html: 'Some Text',
-    });
-
-    art.contextmenu.show = true;
-	setTimeout(() => {
-		art.contextmenu.show = false;
-	}, 1000);
-});

组件配置 请参考以下地址：

/component/contextmenu.html

subtitle ​

管理播放器的字幕功能

`,5),P=i("div",{className:"run-code"},"▶ Run Code",-1),S=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.subtitle.url = '/assets/sample/subtitle.srt'
-    art.subtitle.style({
-        color: 'red',
-    });
-});

loading ​

管理播放器的加载层

`,4),f=i("div",{className:"run-code"},"▶ Run Code",-1),I=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.loading.show = true;
-	setTimeout(() => {
-		art.loading.show = false;
-	}, 1000);
-});

hotkey ​

管理播放器的快捷键功能

`,4),N=i("div",{className:"run-code"},"▶ Run Code",-1),R=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-function hotkeyEvent(event) {
-    console.info('click', event);
-}
-
-art.on('ready', () => {
-    art.hotkey.add(32, hotkeyEvent);
-    setTimeout(() => {
-		art.hotkey.remove(32, hotkeyEvent);
-	}, 5000);
-});

提示

只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效

mask ​

管理播放器的遮罩层

`,5),V=i("div",{className:"run-code"},"▶ Run Code",-1),j=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.mask.show = false;
-	setTimeout(() => {
-		art.mask.show = true;
-	}, 1000);
-});

setting ​

管理播放器的设置面板

`,4),q=i("div",{className:"run-code"},"▶ Run Code",-1),x=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-    subtitleOffset: true,
-});
-
-art.on('ready', () => {
-    art.setting.show = true;
-	setTimeout(() => {
-		art.setting.show = false;
-	}, 1000);
-});

设置面板 请参考以下地址

/component/setting.html

plugins ​

管理播放器的插件功能，只有一个方法 add 用于动态添加插件

`,4),O=i("div",{className:"run-code"},"▶ Run Code",-1),M=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
-
-art.on('ready', () => {
-    art.plugins.add(myPlugin);
-});
`,1),$=[e,h,t,k,r,E,d,c,o,g,y,b,u,F,m,_,C,v,A,B,D,T,w,P,S,f,I,N,R,V,j,q,x,O,M];function z(G,L,W,J,U,Y){return l(),n("div",null,$)}const Q=a(p,[["render",z]]);export{K as __pageData,Q as default}; diff --git a/docs/document/assets/advanced_built-in.md.t2yKAA1L.lean.js b/docs/document/assets/advanced_built-in.md.t2yKAA1L.lean.js deleted file mode 100644 index 91184c208..000000000 --- a/docs/document/assets/advanced_built-in.md.t2yKAA1L.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const K=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/built-in.md","filePath":"advanced/built-in.md","lastUpdated":1683080086000}'),p={name:"advanced/built-in.md"},e=s("",4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",4),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s("",5),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",5),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s("",2),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s("",3),b=i("div",{className:"run-code"},"▶ Run Code",-1),u=s("",5),F=i("div",{className:"run-code"},"▶ Run Code",-1),m=s("",4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s("",5),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s("",5),B=i("div",{className:"run-code"},"▶ Run Code",-1),D=s("",5),T=i("div",{className:"run-code"},"▶ Run Code",-1),w=s("",5),P=i("div",{className:"run-code"},"▶ Run Code",-1),S=s("",4),f=i("div",{className:"run-code"},"▶ Run Code",-1),I=s("",4),N=i("div",{className:"run-code"},"▶ Run Code",-1),R=s("",5),V=i("div",{className:"run-code"},"▶ Run Code",-1),j=s("",4),q=i("div",{className:"run-code"},"▶ Run Code",-1),x=s("",4),O=i("div",{className:"run-code"},"▶ Run Code",-1),M=s("",1),$=[e,h,t,k,r,E,d,c,o,g,y,b,u,F,m,_,C,v,A,B,D,T,w,P,S,f,I,N,R,V,j,q,x,O,M];function z(G,L,W,J,U,Y){return l(),n("div",null,$)}const Q=a(p,[["render",z]]);export{K as __pageData,Q as default}; diff --git a/docs/document/assets/advanced_class.md.093c0eb3.js b/docs/document/assets/advanced_class.md.093c0eb3.js new file mode 100644 index 000000000..3f2b93c4d --- /dev/null +++ b/docs/document/assets/advanced_class.md.093c0eb3.js @@ -0,0 +1,8 @@ +import{_ as n,c as e,o as l,V as s,z as a}from"./chunks/framework.5c8808ab.js";const B=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/class.md","filePath":"advanced/class.md","lastUpdated":1682233868000}'),o={name:"advanced/class.md"},p=s('

静态属性 ​

这里的 静态属性 是指挂载在 构造函数 的 一级属性，非常少使用

instances ​

返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性

',4),t=a("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
console.info([...Artplayer.instances]);
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info([...Artplayer.instances]);

version ​

返回播放器的版本信息

`,3),c=a("div",{className:"run-code"},"▶ Run Code",-1),i=s('
js
console.info(Artplayer.version);

env ​

返回播放器的环境变量

',3),d=a("div",{className:"run-code"},"▶ Run Code",-1),_=s('
js
console.info(Artplayer.env);

build ​

返回播放器的打包时间

',3),A=a("div",{className:"run-code"},"▶ Run Code",-1),D=s('
js
console.info(Artplayer.build);

config ​

返回视频的默认配置

',3),y=a("div",{className:"run-code"},"▶ Run Code",-1),C=s('
js
console.info(Artplayer.config);

utils ​

返回播放器的工具函数集合

',3),u=a("div",{className:"run-code"},"▶ Run Code",-1),h=s('
js
console.info(Artplayer.utils);

全部工具函数请参考以下地址：

artplayer/types/utils.d.ts

scheme ​

返回播放器选项的校验方案

',4),F=a("div",{className:"run-code"},"▶ Run Code",-1),m=s('
js
console.info(Artplayer.scheme);

Emitter ​

返回事件分发器的构造函数

',3),b=a("div",{className:"run-code"},"▶ Run Code",-1),v=s('
js
console.info(Artplayer.Emitter);

validator ​

返回选项的校验函数

',3),T=a("div",{className:"run-code"},"▶ Run Code",-1),g=s('
js
console.info(Artplayer.validator);

kindOf ​

返回类型检测的函数工具

',3),f=a("div",{className:"run-code"},"▶ Run Code",-1),P=s('
js
console.info(Artplayer.kindOf);

html ​

返回播放器所需的 html 字符串

',3),S=a("div",{className:"run-code"},"▶ Run Code",-1),k=s('
js
console.info(Artplayer.html);

option ​

返回播放器的默认选项

',3),V=a("div",{className:"run-code"},"▶ Run Code",-1),N=s('
js
console.info(Artplayer.option);
',1),q=[p,t,r,c,i,d,_,A,D,y,C,u,h,F,m,b,v,T,g,f,P,S,k,V,N];function I(R,j,E,x,w,O){return l(),e("div",null,q)}const z=n(o,[["render",I]]);export{B as __pageData,z as default}; diff --git a/docs/document/assets/advanced_class.md.093c0eb3.lean.js b/docs/document/assets/advanced_class.md.093c0eb3.lean.js new file mode 100644 index 000000000..cc6888e5c --- /dev/null +++ b/docs/document/assets/advanced_class.md.093c0eb3.lean.js @@ -0,0 +1 @@ +import{_ as n,c as e,o as l,V as s,z as a}from"./chunks/framework.5c8808ab.js";const B=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/class.md","filePath":"advanced/class.md","lastUpdated":1682233868000}'),o={name:"advanced/class.md"},p=s("",4),t=a("div",{className:"run-code"},"▶ Run Code",-1),r=s("",3),c=a("div",{className:"run-code"},"▶ Run Code",-1),i=s("",3),d=a("div",{className:"run-code"},"▶ Run Code",-1),_=s("",3),A=a("div",{className:"run-code"},"▶ Run Code",-1),D=s("",3),y=a("div",{className:"run-code"},"▶ Run Code",-1),C=s("",3),u=a("div",{className:"run-code"},"▶ Run Code",-1),h=s("",4),F=a("div",{className:"run-code"},"▶ Run Code",-1),m=s("",3),b=a("div",{className:"run-code"},"▶ Run Code",-1),v=s("",3),T=a("div",{className:"run-code"},"▶ Run Code",-1),g=s("",3),f=a("div",{className:"run-code"},"▶ Run Code",-1),P=s("",3),S=a("div",{className:"run-code"},"▶ Run Code",-1),k=s("",3),V=a("div",{className:"run-code"},"▶ Run Code",-1),N=s("",1),q=[p,t,r,c,i,d,_,A,D,y,C,u,h,F,m,b,v,T,g,f,P,S,k,V,N];function I(R,j,E,x,w,O){return l(),e("div",null,q)}const z=n(o,[["render",I]]);export{B as __pageData,z as default}; diff --git a/docs/document/assets/advanced_class.md.AIz4erpV.js b/docs/document/assets/advanced_class.md.AIz4erpV.js deleted file mode 100644 index 55aa4e3a7..000000000 --- a/docs/document/assets/advanced_class.md.AIz4erpV.js +++ /dev/null @@ -1,8 +0,0 @@ -import{_ as i,c as e,o as n,R as s,k as a}from"./chunks/framework.0i_P4VHR.js";const $=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/class.md","filePath":"advanced/class.md","lastUpdated":1682233868000}'),t={name:"advanced/class.md"},l=s('

静态属性 ​

这里的 静态属性 是指挂载在 构造函数 的 一级属性，非常少使用

instances ​

返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性

',4),p=a("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
console.info([...Artplayer.instances]);
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info([...Artplayer.instances]);

version ​

返回播放器的版本信息

`,3),h=a("div",{className:"run-code"},"▶ Run Code",-1),r=s('
js
console.info(Artplayer.version);

env ​

返回播放器的环境变量

',3),o=a("div",{className:"run-code"},"▶ Run Code",-1),c=s('
js
console.info(Artplayer.env);

build ​

返回播放器的打包时间

',3),k=a("div",{className:"run-code"},"▶ Run Code",-1),_=s('
js
console.info(Artplayer.build);

config ​

返回视频的默认配置

',3),u=a("div",{className:"run-code"},"▶ Run Code",-1),E=s('
js
console.info(Artplayer.config);

utils ​

返回播放器的工具函数集合

',3),b=a("div",{className:"run-code"},"▶ Run Code",-1),g=s('
js
console.info(Artplayer.utils);

全部工具函数请参考以下地址：

artplayer/types/utils.d.ts

scheme ​

返回播放器选项的校验方案

',4),m=a("div",{className:"run-code"},"▶ Run Code",-1),v=s('
js
console.info(Artplayer.scheme);

Emitter ​

返回事件分发器的构造函数

',3),y=a("div",{className:"run-code"},"▶ Run Code",-1),C=s('
js
console.info(Artplayer.Emitter);

validator ​

返回选项的校验函数

',3),T=a("div",{className:"run-code"},"▶ Run Code",-1),A=s('
js
console.info(Artplayer.validator);

kindOf ​

返回类型检测的函数工具

',3),f=a("div",{className:"run-code"},"▶ Run Code",-1),P=s('
js
console.info(Artplayer.kindOf);

html ​

返回播放器所需的 html 字符串

',3),S=a("div",{className:"run-code"},"▶ Run Code",-1),F=s('
js
console.info(Artplayer.html);

option ​

返回播放器的默认选项

',3),N=a("div",{className:"run-code"},"▶ Run Code",-1),V=s('
js
console.info(Artplayer.option);
',1),q=[l,p,d,h,r,o,c,k,_,u,E,b,g,m,v,y,C,T,A,f,P,S,F,N,V];function I(R,j,B,D,x,w){return n(),e("div",null,q)}const z=i(t,[["render",I]]);export{$ as __pageData,z as default}; diff --git a/docs/document/assets/advanced_class.md.AIz4erpV.lean.js b/docs/document/assets/advanced_class.md.AIz4erpV.lean.js deleted file mode 100644 index ed1935125..000000000 --- a/docs/document/assets/advanced_class.md.AIz4erpV.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as i,c as e,o as n,R as s,k as a}from"./chunks/framework.0i_P4VHR.js";const $=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/class.md","filePath":"advanced/class.md","lastUpdated":1682233868000}'),t={name:"advanced/class.md"},l=s("",4),p=a("div",{className:"run-code"},"▶ Run Code",-1),d=s("",3),h=a("div",{className:"run-code"},"▶ Run Code",-1),r=s("",3),o=a("div",{className:"run-code"},"▶ Run Code",-1),c=s("",3),k=a("div",{className:"run-code"},"▶ Run Code",-1),_=s("",3),u=a("div",{className:"run-code"},"▶ Run Code",-1),E=s("",3),b=a("div",{className:"run-code"},"▶ Run Code",-1),g=s("",4),m=a("div",{className:"run-code"},"▶ Run Code",-1),v=s("",3),y=a("div",{className:"run-code"},"▶ Run Code",-1),C=s("",3),T=a("div",{className:"run-code"},"▶ Run Code",-1),A=s("",3),f=a("div",{className:"run-code"},"▶ Run Code",-1),P=s("",3),S=a("div",{className:"run-code"},"▶ Run Code",-1),F=s("",3),N=a("div",{className:"run-code"},"▶ Run Code",-1),V=s("",1),q=[l,p,d,h,r,o,c,k,_,u,E,b,g,m,v,y,C,T,A,f,P,S,F,N,V];function I(R,j,B,D,x,w){return n(),e("div",null,q)}const z=i(t,[["render",I]]);export{$ as __pageData,z as default}; diff --git a/docs/document/assets/advanced_event.md.703c3ca8.js b/docs/document/assets/advanced_event.md.703c3ca8.js new file mode 100644 index 000000000..b92cfcb46 --- /dev/null +++ b/docs/document/assets/advanced_event.md.703c3ca8.js @@ -0,0 +1,341 @@ +import{_ as l,c as p,o,z as s,a as n,V as a}from"./chunks/framework.5c8808ab.js";const Xs=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1700581325000}'),e={name:"advanced/event.md"},r=s("h1",{id:"实例事件",tabindex:"-1"},[n("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"​")],-1),c=s("p",null,[n("播放器的事件分为两种，一种视频的 "),s("code",null,"原生事件"),n(" (前缀 "),s("code",null,"video:"),n(")，另外一种是 "),s("code",null,"自定义事件")],-1),t=s("p",null,"监听事件：",-1),D=s("div",{className:"run-code"},"▶ Run Code",-1),y=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('video:canplay', () => {
+    console.info('video:canplay');
+});

只监听一次事件：

`,2),F=s("div",{className:"run-code"},"▶ Run Code",-1),i=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.once('video:canplay', () => {
+    console.info('video:canplay');
+});

手动触发事件：

`,2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.emit('focus');

移除事件：

`,2),d=s("div",{className:"run-code"},"▶ Run Code",-1),b=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+const onReady = () => {
+    console.info('ready');
+    art.off('ready', onReady);
+}
+
+art.on('ready', onReady);

全部事件请参考以下地址：

artplayer/types/events.d.ts

ready ​

当播放器首次可以播放器时触发

`,4),u=s("div",{className:"run-code"},"▶ Run Code",-1),h=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info('ready');
+});

restart ​

当播放器切换地址后并可以播放时触发

`,3),m=s("div",{className:"run-code"},"▶ Run Code",-1),_=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.url = '/assets/sample/video.mp4'
+});
+
+art.on('restart', (url) => {
+    console.info('restart', url);
+});

pause ​

当播放器暂停时触发

`,3),g=s("div",{className:"run-code"},"▶ Run Code",-1),v=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('pause', () => {
+    console.info('pause');
+});

play ​

当播放器播放时触发

`,3),E=s("div",{className:"run-code"},"▶ Run Code",-1),T=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('play', () => {
+    console.info('play');
+});

hotkey ​

当播放器热键被按下时触发

`,3),f=s("div",{className:"run-code"},"▶ Run Code",-1),k=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('hotkey', (event) => {
+    console.info('hotkey', event);
+});

destroy ​

当播放器销毁时触发

`,3),P=s("div",{className:"run-code"},"▶ Run Code",-1),S=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.destroy();
+});
+
+art.on('destroy', () => {
+    console.info('destroy');
+});

focus ​

当播放器获得焦点时触发

`,3),q=s("div",{className:"run-code"},"▶ Run Code",-1),w=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('focus', (event) => {
+    console.info('focus', event);
+});

blur ​

当播放器失去焦点时触发

`,3),R=s("div",{className:"run-code"},"▶ Run Code",-1),N=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('blur', (event) => {
+    console.info('blur', event);
+});

dblclick ​

当播放器被双击时触发

`,3),V=s("div",{className:"run-code"},"▶ Run Code",-1),j=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('dblclick', (event) => {
+    console.info('dblclick', event);
+});

click ​

当播放器被单击时触发

`,3),I=s("div",{className:"run-code"},"▶ Run Code",-1),x=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('click', (event) => {
+    console.info('click', event);
+});

error ​

当播放器加载视频发生错误时触发

`,3),z=s("div",{className:"run-code"},"▶ Run Code",-1),O=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});
+
+art.on('error', (error, reconnectTime) => {
+    console.info(error, reconnectTime);
+});

hover ​

当播放器被鼠标移出或者移入时触发

`,3),U=s("div",{className:"run-code"},"▶ Run Code",-1),H=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('hover', (state, event) => {
+    console.info('hover', state, event);
+});

mousemove ​

当播放器被鼠标经过时触发

`,3),W=s("div",{className:"run-code"},"▶ Run Code",-1),L=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('mousemove', (event) => {
+    console.info('mousemove', event);
+});

resize ​

当播放器尺寸变化时触发

`,3),$=s("div",{className:"run-code"},"▶ Run Code",-1),B=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('resize', () => {
+    console.info('resize');
+});

view ​

当播放器出现在视口时触发

`,3),J=s("div",{className:"run-code"},"▶ Run Code",-1),G=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('view', (state) => {
+    console.info('view', state);
+});

lock ​

在移动端，当锁定的状态发生变化时触发

`,3),K=s("div",{className:"run-code"},"▶ Run Code",-1),M=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lock: true,
+});
+
+art.on('lock', (state) => {
+    console.info('lock', state);
+});

aspectRatio ​

当播放器长宽比变化时触发

`,3),Q=s("div",{className:"run-code"},"▶ Run Code",-1),X=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    aspectRatio: true,
+    setting: true,
+});
+
+art.on('aspectRatio', (aspectRatio) => {
+    console.info('aspectRatio', aspectRatio);
+});

autoHeight ​

当播放器自动设置高度时触发

`,3),Y=s("div",{className:"run-code"},"▶ Run Code",-1),Z=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.autoHeight();
+});
+
+art.on('autoHeight', (height) => {
+    console.info('autoHeight', height);
+});

autoSize ​

当播放器自动设置尺寸时触发

`,3),ss=s("div",{className:"run-code"},"▶ Run Code",-1),as=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+});
+
+art.on('autoSize', () => {
+    console.info('autoSize');
+});

flip ​

当播放器发生翻转时触发

`,3),ns=s("div",{className:"run-code"},"▶ Run Code",-1),ls=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    flip: true,
+    setting: true,
+});
+
+art.on('flip', (flip) => {
+    console.info('flip', flip);
+});

fullscreen ​

当播放器发生窗口全屏时触发

`,3),ps=s("div",{className:"run-code"},"▶ Run Code",-1),os=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+});
+
+art.on('fullscreen', (state) => {
+    console.info('fullscreen', state);
+});

fullscreenWeb ​

当播放器发生网页全屏时触发

`,3),es=s("div",{className:"run-code"},"▶ Run Code",-1),rs=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
+
+art.on('fullscreenWeb', (state) => {
+    console.info('fullscreenWeb', state);
+});

mini ​

当播放器进入迷你模式时触发

`,3),cs=s("div",{className:"run-code"},"▶ Run Code",-1),ts=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.mini = true;
+});
+
+art.on('mini', (state) => {
+    console.info('mini', state);
+});

pip ​

当播放器进入画中画时触发

`,3),Ds=s("div",{className:"run-code"},"▶ Run Code",-1),ys=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    pip: true,
+});
+
+art.on('pip', (state) => {
+    console.info('pip', state);
+});

screenshot ​

当播放器被截图时触发

`,3),Fs=s("div",{className:"run-code"},"▶ Run Code",-1),is=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    screenshot: true,
+});
+
+art.on('screenshot', (dataUri) => {
+    console.info('screenshot', dataUri);
+});

seek ​

当播放器发生时间跳转时触发

`,3),As=s("div",{className:"run-code"},"▶ Run Code",-1),Cs=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('seek', (currentTime) => {
+    console.info('seek', currentTime);
+});

subtitleOffset ​

当播放器发生字幕偏移时触发

`,3),ds=s("div",{className:"run-code"},"▶ Run Code",-1),bs=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitleOffset: true,
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+    setting: true,
+});
+
+art.on('subtitleOffset', (offset) => {
+    console.info('subtitleOffset', offset);
+});

subtitleUpdate ​

当字幕更新时触发

`,3),us=s("div",{className:"run-code"},"▶ Run Code",-1),hs=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
+
+art.on('subtitleUpdate', (text) => {
+    console.info('subtitleUpdate', text);
+});

subtitleLoad ​

当字幕加载时触发

`,3),ms=s("div",{className:"run-code"},"▶ Run Code",-1),_s=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
+
+art.on('subtitleLoad', (url) => {
+    console.info('subtitleLoad', url);
+});

subtitleSwitch ​

当字幕切换时触发

`,3),gs=s("div",{className:"run-code"},"▶ Run Code",-1),vs=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
+
+art.on('ready', () => {
+    art.subtitle.url = '/assets/sample/subtitle.ass';
+});
+
+art.on('subtitleSwitch', (url) => {
+    console.info('subtitleSwitch', url);
+});

info ​

当信息面板显示或隐藏时触发

`,3),Es=s("div",{className:"run-code"},"▶ Run Code",-1),Ts=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('info', (state) => {
+    console.log(state);
+});

layer ​

当自定义层显示或隐藏时触发

`,3),fs=s("div",{className:"run-code"},"▶ Run Code",-1),ks=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('layer', (state) => {
+    console.log(state);
+});

loading ​

当加载器显示或隐藏时触发

`,3),Ps=s("div",{className:"run-code"},"▶ Run Code",-1),Ss=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('loading', (state) => {
+    console.log(state);
+});

mask ​

当遮罩层显示或隐藏时触发

`,3),qs=s("div",{className:"run-code"},"▶ Run Code",-1),ws=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('mask', (state) => {
+    console.log(state);
+});

subtitle ​

当字幕层显示或隐藏时触发

`,3),Rs=s("div",{className:"run-code"},"▶ Run Code",-1),Ns=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('subtitle', (state) => {
+    console.log(state);
+});

contextmenu ​

当右键菜单显示或隐藏时触发

`,3),Vs=s("div",{className:"run-code"},"▶ Run Code",-1),js=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('contextmenu', (state) => {
+    console.log(state);
+});

control ​

当控制器显示或隐藏时触发

`,3),Is=s("div",{className:"run-code"},"▶ Run Code",-1),xs=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('control', (state) => {
+    console.log(state);
+});

setting ​

当设置面板显示或隐藏时触发

`,3),zs=s("div",{className:"run-code"},"▶ Run Code",-1),Os=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
+
+art.on('setting', (state) => {
+    console.log(state);
+});

muted ​

当静音的状态变化时触发

`,3),Us=s("div",{className:"run-code"},"▶ Run Code",-1),Hs=a('
js
var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n});\n\nart.on('muted', (state) => {\n    console.log(state);\n});

video:canplay ​

浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容

video:canplaythrough ​

浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束

video:complete ​

OfflineAudioContext 渲染完成

video:durationchange ​

duration 属性的值改变时触发

video:emptied ​

媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它

video:ended ​

视频停止播放，因为 media 已经到达结束点

video:error ​

获取媒体数据时出错，或者资源类型不是受支持的媒体格式

video:loadeddata ​

media 中的首帧已经完成加载

video:loadedmetadata ​

已加载元数据

video:pause ​

播放已暂停

video:play ​

播放已开始

video:playing ​

由于缺乏数据而暂停或延迟后，播放准备开始

video:progress ​

在浏览器加载资源时周期性触发

video:ratechange ​

播放速率发生变化

video:seeked ​

跳帧（seek）操作完成

video:seeking ​

跳帧（seek）操作开始

video:stalled ​

用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现

video:suspend ​

媒体数据加载已暂停

video:timeupdate ​

currentTime 属性指定的时间发生变化

video:volumechange ​

音量发生变化

video:waiting ​

由于暂时缺少数据，播放已停止

',43),Ws=[r,c,t,D,y,F,i,A,C,d,b,u,h,m,_,g,v,E,T,f,k,P,S,q,w,R,N,V,j,I,x,z,O,U,H,W,L,$,B,J,G,K,M,Q,X,Y,Z,ss,as,ns,ls,ps,os,es,rs,cs,ts,Ds,ys,Fs,is,As,Cs,ds,bs,us,hs,ms,_s,gs,vs,Es,Ts,fs,ks,Ps,Ss,qs,ws,Rs,Ns,Vs,js,Is,xs,zs,Os,Us,Hs];function Ls($s,Bs,Js,Gs,Ks,Ms){return o(),p("div",null,Ws)}const Ys=l(e,[["render",Ls]]);export{Xs as __pageData,Ys as default}; diff --git a/docs/document/assets/advanced_event.md.703c3ca8.lean.js b/docs/document/assets/advanced_event.md.703c3ca8.lean.js new file mode 100644 index 000000000..f909735dc --- /dev/null +++ b/docs/document/assets/advanced_event.md.703c3ca8.lean.js @@ -0,0 +1 @@ +import{_ as l,c as p,o,z as s,a as n,V as a}from"./chunks/framework.5c8808ab.js";const Xs=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1700581325000}'),e={name:"advanced/event.md"},r=s("h1",{id:"实例事件",tabindex:"-1"},[n("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"​")],-1),c=s("p",null,[n("播放器的事件分为两种，一种视频的 "),s("code",null,"原生事件"),n(" (前缀 "),s("code",null,"video:"),n(")，另外一种是 "),s("code",null,"自定义事件")],-1),t=s("p",null,"监听事件：",-1),D=s("div",{className:"run-code"},"▶ Run Code",-1),y=a("",2),F=s("div",{className:"run-code"},"▶ Run Code",-1),i=a("",2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a("",2),d=s("div",{className:"run-code"},"▶ Run Code",-1),b=a("",4),u=s("div",{className:"run-code"},"▶ Run Code",-1),h=a("",3),m=s("div",{className:"run-code"},"▶ Run Code",-1),_=a("",3),g=s("div",{className:"run-code"},"▶ Run Code",-1),v=a("",3),E=s("div",{className:"run-code"},"▶ Run Code",-1),T=a("",3),f=s("div",{className:"run-code"},"▶ Run Code",-1),k=a("",3),P=s("div",{className:"run-code"},"▶ Run Code",-1),S=a("",3),q=s("div",{className:"run-code"},"▶ Run Code",-1),w=a("",3),R=s("div",{className:"run-code"},"▶ Run Code",-1),N=a("",3),V=s("div",{className:"run-code"},"▶ Run Code",-1),j=a("",3),I=s("div",{className:"run-code"},"▶ Run Code",-1),x=a("",3),z=s("div",{className:"run-code"},"▶ Run Code",-1),O=a("",3),U=s("div",{className:"run-code"},"▶ Run Code",-1),H=a("",3),W=s("div",{className:"run-code"},"▶ Run Code",-1),L=a("",3),$=s("div",{className:"run-code"},"▶ Run Code",-1),B=a("",3),J=s("div",{className:"run-code"},"▶ Run Code",-1),G=a("",3),K=s("div",{className:"run-code"},"▶ Run Code",-1),M=a("",3),Q=s("div",{className:"run-code"},"▶ Run Code",-1),X=a("",3),Y=s("div",{className:"run-code"},"▶ Run Code",-1),Z=a("",3),ss=s("div",{className:"run-code"},"▶ Run Code",-1),as=a("",3),ns=s("div",{className:"run-code"},"▶ Run Code",-1),ls=a("",3),ps=s("div",{className:"run-code"},"▶ Run Code",-1),os=a("",3),es=s("div",{className:"run-code"},"▶ Run Code",-1),rs=a("",3),cs=s("div",{className:"run-code"},"▶ Run Code",-1),ts=a("",3),Ds=s("div",{className:"run-code"},"▶ Run Code",-1),ys=a("",3),Fs=s("div",{className:"run-code"},"▶ Run Code",-1),is=a("",3),As=s("div",{className:"run-code"},"▶ Run Code",-1),Cs=a("",3),ds=s("div",{className:"run-code"},"▶ Run Code",-1),bs=a("",3),us=s("div",{className:"run-code"},"▶ Run Code",-1),hs=a("",3),ms=s("div",{className:"run-code"},"▶ Run Code",-1),_s=a("",3),gs=s("div",{className:"run-code"},"▶ Run Code",-1),vs=a("",3),Es=s("div",{className:"run-code"},"▶ Run Code",-1),Ts=a("",3),fs=s("div",{className:"run-code"},"▶ Run Code",-1),ks=a("",3),Ps=s("div",{className:"run-code"},"▶ Run Code",-1),Ss=a("",3),qs=s("div",{className:"run-code"},"▶ Run Code",-1),ws=a("",3),Rs=s("div",{className:"run-code"},"▶ Run Code",-1),Ns=a("",3),Vs=s("div",{className:"run-code"},"▶ Run Code",-1),js=a("",3),Is=s("div",{className:"run-code"},"▶ Run Code",-1),xs=a("",3),zs=s("div",{className:"run-code"},"▶ Run Code",-1),Os=a("",3),Us=s("div",{className:"run-code"},"▶ Run Code",-1),Hs=a("",43),Ws=[r,c,t,D,y,F,i,A,C,d,b,u,h,m,_,g,v,E,T,f,k,P,S,q,w,R,N,V,j,I,x,z,O,U,H,W,L,$,B,J,G,K,M,Q,X,Y,Z,ss,as,ns,ls,ps,os,es,rs,cs,ts,Ds,ys,Fs,is,As,Cs,ds,bs,us,hs,ms,_s,gs,vs,Es,Ts,fs,ks,Ps,Ss,qs,ws,Rs,Ns,Vs,js,Is,xs,zs,Os,Us,Hs];function Ls($s,Bs,Js,Gs,Ks,Ms){return o(),p("div",null,Ws)}const Ys=l(e,[["render",Ls]]);export{Xs as __pageData,Ys as default}; diff --git a/docs/document/assets/advanced_event.md.UnGzuDid.js b/docs/document/assets/advanced_event.md.UnGzuDid.js deleted file mode 100644 index 623724c7f..000000000 --- a/docs/document/assets/advanced_event.md.UnGzuDid.js +++ /dev/null @@ -1,341 +0,0 @@ -import{_ as n,c as l,o as p,k as s,a,R as i}from"./chunks/framework.0i_P4VHR.js";const Xs=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1700581325000}'),e={name:"advanced/event.md"},h=s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"​")],-1),t=s("p",null,[a("播放器的事件分为两种，一种视频的 "),s("code",null,"原生事件"),a(" (前缀 "),s("code",null,"video:"),a(")，另外一种是 "),s("code",null,"自定义事件")],-1),k=s("p",null,"监听事件：",-1),r=s("div",{className:"run-code"},"▶ Run Code",-1),E=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('video:canplay', () => {
-    console.info('video:canplay');
-});

只监听一次事件：

`,2),d=s("div",{className:"run-code"},"▶ Run Code",-1),c=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.once('video:canplay', () => {
-    console.info('video:canplay');
-});

手动触发事件：

`,2),g=s("div",{className:"run-code"},"▶ Run Code",-1),o=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.emit('focus');

移除事件：

`,2),y=s("div",{className:"run-code"},"▶ Run Code",-1),b=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-const onReady = () => {
-    console.info('ready');
-    art.off('ready', onReady);
-}
-
-art.on('ready', onReady);

全部事件请参考以下地址：

artplayer/types/events.d.ts

ready ​

当播放器首次可以播放器时触发

`,4),u=s("div",{className:"run-code"},"▶ Run Code",-1),F=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info('ready');
-});

restart ​

当播放器切换地址后并可以播放时触发

`,3),m=s("div",{className:"run-code"},"▶ Run Code",-1),_=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.url = '/assets/sample/video.mp4'
-});
-
-art.on('restart', (url) => {
-    console.info('restart', url);
-});

pause ​

当播放器暂停时触发

`,3),v=s("div",{className:"run-code"},"▶ Run Code",-1),C=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('pause', () => {
-    console.info('pause');
-});

play ​

当播放器播放时触发

`,3),A=s("div",{className:"run-code"},"▶ Run Code",-1),B=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('play', () => {
-    console.info('play');
-});

hotkey ​

当播放器热键被按下时触发

`,3),T=s("div",{className:"run-code"},"▶ Run Code",-1),D=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('hotkey', (event) => {
-    console.info('hotkey', event);
-});

destroy ​

当播放器销毁时触发

`,3),f=s("div",{className:"run-code"},"▶ Run Code",-1),P=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.destroy();
-});
-
-art.on('destroy', () => {
-    console.info('destroy');
-});

focus ​

当播放器获得焦点时触发

`,3),S=s("div",{className:"run-code"},"▶ Run Code",-1),q=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('focus', (event) => {
-    console.info('focus', event);
-});

blur ​

当播放器失去焦点时触发

`,3),w=s("div",{className:"run-code"},"▶ Run Code",-1),R=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('blur', (event) => {
-    console.info('blur', event);
-});

dblclick ​

当播放器被双击时触发

`,3),N=s("div",{className:"run-code"},"▶ Run Code",-1),V=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('dblclick', (event) => {
-    console.info('dblclick', event);
-});

click ​

当播放器被单击时触发

`,3),j=s("div",{className:"run-code"},"▶ Run Code",-1),I=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('click', (event) => {
-    console.info('click', event);
-});

error ​

当播放器加载视频发生错误时触发

`,3),x=s("div",{className:"run-code"},"▶ Run Code",-1),z=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});
-
-art.on('error', (error, reconnectTime) => {
-    console.info(error, reconnectTime);
-});

hover ​

当播放器被鼠标移出或者移入时触发

`,3),O=s("div",{className:"run-code"},"▶ Run Code",-1),U=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('hover', (state, event) => {
-    console.info('hover', state, event);
-});

mousemove ​

当播放器被鼠标经过时触发

`,3),H=s("div",{className:"run-code"},"▶ Run Code",-1),W=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('mousemove', (event) => {
-    console.info('mousemove', event);
-});

resize ​

当播放器尺寸变化时触发

`,3),L=s("div",{className:"run-code"},"▶ Run Code",-1),$=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('resize', () => {
-    console.info('resize');
-});

view ​

当播放器出现在视口时触发

`,3),J=s("div",{className:"run-code"},"▶ Run Code",-1),G=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('view', (state) => {
-    console.info('view', state);
-});

lock ​

在移动端，当锁定的状态发生变化时触发

`,3),K=s("div",{className:"run-code"},"▶ Run Code",-1),M=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lock: true,
-});
-
-art.on('lock', (state) => {
-    console.info('lock', state);
-});

aspectRatio ​

当播放器长宽比变化时触发

`,3),Q=s("div",{className:"run-code"},"▶ Run Code",-1),X=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    aspectRatio: true,
-    setting: true,
-});
-
-art.on('aspectRatio', (aspectRatio) => {
-    console.info('aspectRatio', aspectRatio);
-});

autoHeight ​

当播放器自动设置高度时触发

`,3),Y=s("div",{className:"run-code"},"▶ Run Code",-1),Z=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.autoHeight();
-});
-
-art.on('autoHeight', (height) => {
-    console.info('autoHeight', height);
-});

autoSize ​

当播放器自动设置尺寸时触发

`,3),ss=s("div",{className:"run-code"},"▶ Run Code",-1),is=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-});
-
-art.on('autoSize', () => {
-    console.info('autoSize');
-});

flip ​

当播放器发生翻转时触发

`,3),as=s("div",{className:"run-code"},"▶ Run Code",-1),ns=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    flip: true,
-    setting: true,
-});
-
-art.on('flip', (flip) => {
-    console.info('flip', flip);
-});

fullscreen ​

当播放器发生窗口全屏时触发

`,3),ls=s("div",{className:"run-code"},"▶ Run Code",-1),ps=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-});
-
-art.on('fullscreen', (state) => {
-    console.info('fullscreen', state);
-});

fullscreenWeb ​

当播放器发生网页全屏时触发

`,3),es=s("div",{className:"run-code"},"▶ Run Code",-1),hs=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
-
-art.on('fullscreenWeb', (state) => {
-    console.info('fullscreenWeb', state);
-});

mini ​

当播放器进入迷你模式时触发

`,3),ts=s("div",{className:"run-code"},"▶ Run Code",-1),ks=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.mini = true;
-});
-
-art.on('mini', (state) => {
-    console.info('mini', state);
-});

pip ​

当播放器进入画中画时触发

`,3),rs=s("div",{className:"run-code"},"▶ Run Code",-1),Es=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    pip: true,
-});
-
-art.on('pip', (state) => {
-    console.info('pip', state);
-});

screenshot ​

当播放器被截图时触发

`,3),ds=s("div",{className:"run-code"},"▶ Run Code",-1),cs=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    screenshot: true,
-});
-
-art.on('screenshot', (dataUri) => {
-    console.info('screenshot', dataUri);
-});

seek ​

当播放器发生时间跳转时触发

`,3),gs=s("div",{className:"run-code"},"▶ Run Code",-1),os=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('seek', (currentTime) => {
-    console.info('seek', currentTime);
-});

subtitleOffset ​

当播放器发生字幕偏移时触发

`,3),ys=s("div",{className:"run-code"},"▶ Run Code",-1),bs=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitleOffset: true,
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-    setting: true,
-});
-
-art.on('subtitleOffset', (offset) => {
-    console.info('subtitleOffset', offset);
-});

subtitleUpdate ​

当字幕更新时触发

`,3),us=s("div",{className:"run-code"},"▶ Run Code",-1),Fs=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
-
-art.on('subtitleUpdate', (text) => {
-    console.info('subtitleUpdate', text);
-});

subtitleLoad ​

当字幕加载时触发

`,3),ms=s("div",{className:"run-code"},"▶ Run Code",-1),_s=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
-
-art.on('subtitleLoad', (url) => {
-    console.info('subtitleLoad', url);
-});

subtitleSwitch ​

当字幕切换时触发

`,3),vs=s("div",{className:"run-code"},"▶ Run Code",-1),Cs=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
-
-art.on('ready', () => {
-    art.subtitle.url = '/assets/sample/subtitle.ass';
-});
-
-art.on('subtitleSwitch', (url) => {
-    console.info('subtitleSwitch', url);
-});

info ​

当信息面板显示或隐藏时触发

`,3),As=s("div",{className:"run-code"},"▶ Run Code",-1),Bs=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('info', (state) => {
-    console.log(state);
-});

layer ​

当自定义层显示或隐藏时触发

`,3),Ts=s("div",{className:"run-code"},"▶ Run Code",-1),Ds=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('layer', (state) => {
-    console.log(state);
-});

loading ​

当加载器显示或隐藏时触发

`,3),fs=s("div",{className:"run-code"},"▶ Run Code",-1),Ps=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('loading', (state) => {
-    console.log(state);
-});

mask ​

当遮罩层显示或隐藏时触发

`,3),Ss=s("div",{className:"run-code"},"▶ Run Code",-1),qs=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('mask', (state) => {
-    console.log(state);
-});

subtitle ​

当字幕层显示或隐藏时触发

`,3),ws=s("div",{className:"run-code"},"▶ Run Code",-1),Rs=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('subtitle', (state) => {
-    console.log(state);
-});

contextmenu ​

当右键菜单显示或隐藏时触发

`,3),Ns=s("div",{className:"run-code"},"▶ Run Code",-1),Vs=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('contextmenu', (state) => {
-    console.log(state);
-});

control ​

当控制器显示或隐藏时触发

`,3),js=s("div",{className:"run-code"},"▶ Run Code",-1),Is=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('control', (state) => {
-    console.log(state);
-});

setting ​

当设置面板显示或隐藏时触发

`,3),xs=s("div",{className:"run-code"},"▶ Run Code",-1),zs=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
-
-art.on('setting', (state) => {
-    console.log(state);
-});

muted ​

当静音的状态变化时触发

`,3),Os=s("div",{className:"run-code"},"▶ Run Code",-1),Us=i('
js
var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n});\n\nart.on('muted', (state) => {\n    console.log(state);\n});

video:canplay ​

浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容

video:canplaythrough ​

浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束

video:complete ​

OfflineAudioContext 渲染完成

video:durationchange ​

duration 属性的值改变时触发

video:emptied ​

媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它

video:ended ​

视频停止播放，因为 media 已经到达结束点

video:error ​

获取媒体数据时出错，或者资源类型不是受支持的媒体格式

video:loadeddata ​

media 中的首帧已经完成加载

video:loadedmetadata ​

已加载元数据

video:pause ​

播放已暂停

video:play ​

播放已开始

video:playing ​

由于缺乏数据而暂停或延迟后，播放准备开始

video:progress ​

在浏览器加载资源时周期性触发

video:ratechange ​

播放速率发生变化

video:seeked ​

跳帧（seek）操作完成

video:seeking ​

跳帧（seek）操作开始

video:stalled ​

用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现

video:suspend ​

媒体数据加载已暂停

video:timeupdate ​

currentTime 属性指定的时间发生变化

video:volumechange ​

音量发生变化

video:waiting ​

由于暂时缺少数据，播放已停止

',43),Hs=[h,t,k,r,E,d,c,g,o,y,b,u,F,m,_,v,C,A,B,T,D,f,P,S,q,w,R,N,V,j,I,x,z,O,U,H,W,L,$,J,G,K,M,Q,X,Y,Z,ss,is,as,ns,ls,ps,es,hs,ts,ks,rs,Es,ds,cs,gs,os,ys,bs,us,Fs,ms,_s,vs,Cs,As,Bs,Ts,Ds,fs,Ps,Ss,qs,ws,Rs,Ns,Vs,js,Is,xs,zs,Os,Us];function Ws(Ls,$s,Js,Gs,Ks,Ms){return p(),l("div",null,Hs)}const Ys=n(e,[["render",Ws]]);export{Xs as __pageData,Ys as default}; diff --git a/docs/document/assets/advanced_event.md.UnGzuDid.lean.js b/docs/document/assets/advanced_event.md.UnGzuDid.lean.js deleted file mode 100644 index 0dd071d91..000000000 --- a/docs/document/assets/advanced_event.md.UnGzuDid.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as n,c as l,o as p,k as s,a,R as i}from"./chunks/framework.0i_P4VHR.js";const Xs=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1700581325000}'),e={name:"advanced/event.md"},h=s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"​")],-1),t=s("p",null,[a("播放器的事件分为两种，一种视频的 "),s("code",null,"原生事件"),a(" (前缀 "),s("code",null,"video:"),a(")，另外一种是 "),s("code",null,"自定义事件")],-1),k=s("p",null,"监听事件：",-1),r=s("div",{className:"run-code"},"▶ Run Code",-1),E=i("",2),d=s("div",{className:"run-code"},"▶ Run Code",-1),c=i("",2),g=s("div",{className:"run-code"},"▶ Run Code",-1),o=i("",2),y=s("div",{className:"run-code"},"▶ Run Code",-1),b=i("",4),u=s("div",{className:"run-code"},"▶ Run Code",-1),F=i("",3),m=s("div",{className:"run-code"},"▶ Run Code",-1),_=i("",3),v=s("div",{className:"run-code"},"▶ Run Code",-1),C=i("",3),A=s("div",{className:"run-code"},"▶ Run Code",-1),B=i("",3),T=s("div",{className:"run-code"},"▶ Run Code",-1),D=i("",3),f=s("div",{className:"run-code"},"▶ Run Code",-1),P=i("",3),S=s("div",{className:"run-code"},"▶ Run Code",-1),q=i("",3),w=s("div",{className:"run-code"},"▶ Run Code",-1),R=i("",3),N=s("div",{className:"run-code"},"▶ Run Code",-1),V=i("",3),j=s("div",{className:"run-code"},"▶ Run Code",-1),I=i("",3),x=s("div",{className:"run-code"},"▶ Run Code",-1),z=i("",3),O=s("div",{className:"run-code"},"▶ Run Code",-1),U=i("",3),H=s("div",{className:"run-code"},"▶ Run Code",-1),W=i("",3),L=s("div",{className:"run-code"},"▶ Run Code",-1),$=i("",3),J=s("div",{className:"run-code"},"▶ Run Code",-1),G=i("",3),K=s("div",{className:"run-code"},"▶ Run Code",-1),M=i("",3),Q=s("div",{className:"run-code"},"▶ Run Code",-1),X=i("",3),Y=s("div",{className:"run-code"},"▶ Run Code",-1),Z=i("",3),ss=s("div",{className:"run-code"},"▶ Run Code",-1),is=i("",3),as=s("div",{className:"run-code"},"▶ Run Code",-1),ns=i("",3),ls=s("div",{className:"run-code"},"▶ Run Code",-1),ps=i("",3),es=s("div",{className:"run-code"},"▶ Run Code",-1),hs=i("",3),ts=s("div",{className:"run-code"},"▶ Run Code",-1),ks=i("",3),rs=s("div",{className:"run-code"},"▶ Run Code",-1),Es=i("",3),ds=s("div",{className:"run-code"},"▶ Run Code",-1),cs=i("",3),gs=s("div",{className:"run-code"},"▶ Run Code",-1),os=i("",3),ys=s("div",{className:"run-code"},"▶ Run Code",-1),bs=i("",3),us=s("div",{className:"run-code"},"▶ Run Code",-1),Fs=i("",3),ms=s("div",{className:"run-code"},"▶ Run Code",-1),_s=i("",3),vs=s("div",{className:"run-code"},"▶ Run Code",-1),Cs=i("",3),As=s("div",{className:"run-code"},"▶ Run Code",-1),Bs=i("",3),Ts=s("div",{className:"run-code"},"▶ Run Code",-1),Ds=i("",3),fs=s("div",{className:"run-code"},"▶ Run Code",-1),Ps=i("",3),Ss=s("div",{className:"run-code"},"▶ Run Code",-1),qs=i("",3),ws=s("div",{className:"run-code"},"▶ Run Code",-1),Rs=i("",3),Ns=s("div",{className:"run-code"},"▶ Run Code",-1),Vs=i("",3),js=s("div",{className:"run-code"},"▶ Run Code",-1),Is=i("",3),xs=s("div",{className:"run-code"},"▶ Run Code",-1),zs=i("",3),Os=s("div",{className:"run-code"},"▶ Run Code",-1),Us=i("",43),Hs=[h,t,k,r,E,d,c,g,o,y,b,u,F,m,_,v,C,A,B,T,D,f,P,S,q,w,R,N,V,j,I,x,z,O,U,H,W,L,$,J,G,K,M,Q,X,Y,Z,ss,is,as,ns,ls,ps,es,hs,ts,ks,rs,Es,ds,cs,gs,os,ys,bs,us,Fs,ms,_s,vs,Cs,As,Bs,Ts,Ds,fs,Ps,Ss,qs,ws,Rs,Ns,Vs,js,Is,xs,zs,Os,Us];function Ws(Ls,$s,Js,Gs,Ks,Ms){return p(),l("div",null,Hs)}const Ys=n(e,[["render",Ws]]);export{Xs as __pageData,Ys as default}; diff --git a/docs/document/assets/advanced_global.md.6c8f7ed7.js b/docs/document/assets/advanced_global.md.6c8f7ed7.js new file mode 100644 index 000000000..06dc6f666 --- /dev/null +++ b/docs/document/assets/advanced_global.md.6c8f7ed7.js @@ -0,0 +1,217 @@ +import{_ as n,c as l,o as p,V as s,z as a}from"./chunks/framework.5c8808ab.js";const gs=JSON.parse('{"title":"全局属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/global.md","filePath":"advanced/global.md","lastUpdated":1692979406000}'),o={name:"advanced/global.md"},e=s('

全局属性 ​

这里的 全局属性 也是指挂载在 构造函数 的 一级属性，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到

DEBUG ​

是否开始 debug 模式，可以打印出视频全部的内置事件，默认关闭

',4),r=a("div",{className:"run-code"},"▶ Run Code",-1),c=s(`
js
Artplayer.DEBUG = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

CONTEXTMENU ​

是否开启右键菜单，默认开启

`,3),t=a("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
Artplayer.CONTEXTMENU = false;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

NOTICE_TIME ​

提示信息的显示时长，单位为毫秒，默认为 2000

`,3),y=a("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
js
Artplayer.NOTICE_TIME = 5000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

SETTING_WIDTH ​

设置面板的默认宽度，单位为像素，默认为 250

`,3),C=a("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
Artplayer.SETTING_WIDTH = 300;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});

SETTING_ITEM_WIDTH ​

设置面板的设置项的默认宽度，单位为像素，默认为 200

`,3),i=a("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
Artplayer.SETTING_ITEM_WIDTH = 300;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});

SETTING_ITEM_HEIGHT ​

设置面板的设置项的默认高度，单位为像素，默认为 35

`,3),b=a("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
Artplayer.SETTING_ITEM_HEIGHT = 40;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});

RESIZE_TIME ​

resize 事件的节流时间，单位为毫秒，默认为 200

`,3),_=a("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
Artplayer.RESIZE_TIME = 500;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('resize', () => {
+    console.log('resize');
+});

SCROLL_TIME ​

scroll 事件的节流时间，单位为毫秒，默认为 200

`,3),h=a("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
Artplayer.SCROLL_TIME = 500;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('scroll', () => {
+    console.log('scroll');
+});

SCROLL_GAP ​

view 事件的边界容差距离，单位为像素，默认为 50

`,3),E=a("div",{className:"run-code"},"▶ Run Code",-1),v=s(`
js
Artplayer.SCROLL_GAP = 100;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('scroll', () => {
+    console.log('scroll');
+});

AUTO_PLAYBACK_MAX ​

自动回放功能的最大记录数，默认为 10

`,3),I=a("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
Artplayer.AUTO_PLAYBACK_MAX = 20;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});

AUTO_PLAYBACK_MIN ​

自动回放功能的最小记录时长，单位为秒，默认为 5

`,3),S=a("div",{className:"run-code"},"▶ Run Code",-1),P=s(`
js
Artplayer.AUTO_PLAYBACK_MIN = 10;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});

AUTO_PLAYBACK_TIMEOUT ​

自动回放功能的隐藏延迟时长，单位为毫秒，默认为 3000

`,3),R=a("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});

RECONNECT_TIME_MAX ​

发生连接错误时，自动连接的最大次数，默认为 5

`,3),k=a("div",{className:"run-code"},"▶ Run Code",-1),O=s(`
js
Artplayer.RECONNECT_TIME_MAX = 10;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});

RECONNECT_SLEEP_TIME ​

发生连接错误时，自动连接的延迟时间，单位为毫秒，默认为 1000

`,3),w=a("div",{className:"run-code"},"▶ Run Code",-1),L=s(`
js
Artplayer.RECONNECT_SLEEP_TIME = 3000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});

CONTROL_HIDE_TIME ​

底部控制栏的自动隐藏的延迟时间，单位为毫秒，默认为 3000

`,3),V=a("div",{className:"run-code"},"▶ Run Code",-1),f=s(`
js
Artplayer.CONTROL_HIDE_TIME = 5000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

DBCLICK_TIME ​

双击事件的延迟事件，单位为毫秒，默认为 300

`,3),q=a("div",{className:"run-code"},"▶ Run Code",-1),j=s(`
js
Artplayer.DBCLICK_TIME = 500;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('dblclick', () => {
+    console.log('dblclick');
+});

DBCLICK_FULLSCREEN ​

在桌面端，是否双击切换全屏，默认为 true

`,3),M=a("div",{className:"run-code"},"▶ Run Code",-1),x=s(`
js
Artplayer.DBCLICK_FULLSCREEN = false;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

MOBILE_DBCLICK_PLAY ​

在移动端，是否双击切换播放暂停，默认为 true

`,3),B=a("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
Artplayer.MOBILE_DBCLICK_PLAY = false;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

MOBILE_CLICK_PLAY ​

在移动端，是否单击切换播放暂停，默认为 false

`,3),K=a("div",{className:"run-code"},"▶ Run Code",-1),G=s(`
js
Artplayer.MOBILE_CLICK_PLAY = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

AUTO_ORIENTATION_TIME ​

在移动端，自动旋屏的延迟时间，单位为毫秒，默认为 200

`,3),Y=a("div",{className:"run-code"},"▶ Run Code",-1),H=s(`
js
Artplayer.AUTO_ORIENTATION_TIME = 500;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoOrientation: true,
+});

INFO_LOOP_TIME ​

信息面板的刷新时间，单位为毫秒，默认为 1000

`,3),W=a("div",{className:"run-code"},"▶ Run Code",-1),X=s(`
js
Artplayer.INFO_LOOP_TIME = 2000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.info.show = true;

FAST_FORWARD_VALUE ​

在移动端，长按加速的速率倍数，默认为 3

`,3),z=a("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
Artplayer.FAST_FORWARD_VALUE = 5;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});

FAST_FORWARD_TIME ​

在移动端，长按加速的延迟时间，单位为毫秒，默认为 1000

`,3),Z=a("div",{className:"run-code"},"▶ Run Code",-1),J=s(`
js
Artplayer.FAST_FORWARD_TIME = 2000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});

TOUCH_MOVE_RATIO ​

在移动端，左右滑动进度的速率倍数，默认为 0.5

`,3),Q=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
Artplayer.TOUCH_MOVE_RATIO = 1;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

VOLUME_STEP ​

快捷键调节音量的幅度比例，默认为 0.1

`,3),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s(`
js
Artplayer.VOLUME_STEP = 0.2;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

SEEK_STEP ​

快捷键调节播放进度的幅度，单位为秒，默认为 5

`,3),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
Artplayer.SEEK_STEP = 10;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

PLAYBACK_RATE ​

内置播放速率的列表，默认为 [0.5, 0.75, 1, 1.25, 1.5, 2]

`,3),os=a("div",{className:"run-code"},"▶ Run Code",-1),es=s(`
js
Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5];
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    playbackRate: true,
+});
+
+art.contextmenu.show = true;
+art.setting.show = true;

ASPECT_RATIO ​

内置视频长宽比的列表，默认为 ['default', '4:3', '16:9']

`,3),rs=a("div",{className:"run-code"},"▶ Run Code",-1),cs=s(`
js
Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5'];
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    aspectRatio: true,
+});
+
+art.contextmenu.show = true;
+art.setting.show = true;

FLIP ​

内置视频翻转的列表，默认为 ['normal', 'horizontal', 'vertical']

`,3),ts=a("div",{className:"run-code"},"▶ Run Code",-1),Ds=s(`
js
Artplayer.FLIP = ['normal', 'horizontal'];
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+});
+
+art.contextmenu.show = true;
+art.setting.show = true;

FULLSCREEN_WEB_IN_BODY ​

网页全屏时，是否把播放器挂在在 body 元素下，默认为 false

`,3),ys=a("div",{className:"run-code"},"▶ Run Code",-1),Fs=s(`
js
Artplayer.FULLSCREEN_WEB_IN_BODY = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});

LOG_VERSION ​

设置是否打印播放器版本，默认为 true

`,3),Cs=a("div",{className:"run-code"},"▶ Run Code",-1),As=s(`
js
Artplayer.LOG_VERSION = false;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

USE_RAF ​

设置是否使用 requestAnimationFrame ，默认为 false，目前主要用于进度条的平滑效果

`,3),is=a("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
Artplayer.USE_RAF = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    miniProgressBar: true,
+});
`,1),bs=[e,r,c,t,D,y,F,C,A,i,d,b,u,_,m,h,T,E,v,I,g,S,P,R,N,k,O,w,L,V,f,q,j,M,x,B,U,K,G,Y,H,W,X,z,$,Z,J,Q,ss,as,ns,ls,ps,os,es,rs,cs,ts,Ds,ys,Fs,Cs,As,is,ds];function us(_s,ms,hs,Ts,Es,vs){return p(),l("div",null,bs)}const Ss=n(o,[["render",us]]);export{gs as __pageData,Ss as default}; diff --git a/docs/document/assets/advanced_global.md.6c8f7ed7.lean.js b/docs/document/assets/advanced_global.md.6c8f7ed7.lean.js new file mode 100644 index 000000000..4586d4147 --- /dev/null +++ b/docs/document/assets/advanced_global.md.6c8f7ed7.lean.js @@ -0,0 +1 @@ +import{_ as n,c as l,o as p,V as s,z as a}from"./chunks/framework.5c8808ab.js";const gs=JSON.parse('{"title":"全局属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/global.md","filePath":"advanced/global.md","lastUpdated":1692979406000}'),o={name:"advanced/global.md"},e=s("",4),r=a("div",{className:"run-code"},"▶ Run Code",-1),c=s("",3),t=a("div",{className:"run-code"},"▶ Run Code",-1),D=s("",3),y=a("div",{className:"run-code"},"▶ Run Code",-1),F=s("",3),C=a("div",{className:"run-code"},"▶ Run Code",-1),A=s("",3),i=a("div",{className:"run-code"},"▶ Run Code",-1),d=s("",3),b=a("div",{className:"run-code"},"▶ Run Code",-1),u=s("",3),_=a("div",{className:"run-code"},"▶ Run Code",-1),m=s("",3),h=a("div",{className:"run-code"},"▶ Run Code",-1),T=s("",3),E=a("div",{className:"run-code"},"▶ Run Code",-1),v=s("",3),I=a("div",{className:"run-code"},"▶ Run Code",-1),g=s("",3),S=a("div",{className:"run-code"},"▶ Run Code",-1),P=s("",3),R=a("div",{className:"run-code"},"▶ Run Code",-1),N=s("",3),k=a("div",{className:"run-code"},"▶ Run Code",-1),O=s("",3),w=a("div",{className:"run-code"},"▶ Run Code",-1),L=s("",3),V=a("div",{className:"run-code"},"▶ Run Code",-1),f=s("",3),q=a("div",{className:"run-code"},"▶ Run Code",-1),j=s("",3),M=a("div",{className:"run-code"},"▶ Run Code",-1),x=s("",3),B=a("div",{className:"run-code"},"▶ Run Code",-1),U=s("",3),K=a("div",{className:"run-code"},"▶ Run Code",-1),G=s("",3),Y=a("div",{className:"run-code"},"▶ Run Code",-1),H=s("",3),W=a("div",{className:"run-code"},"▶ Run Code",-1),X=s("",3),z=a("div",{className:"run-code"},"▶ Run Code",-1),$=s("",3),Z=a("div",{className:"run-code"},"▶ Run Code",-1),J=s("",3),Q=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",3),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s("",3),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",3),os=a("div",{className:"run-code"},"▶ Run Code",-1),es=s("",3),rs=a("div",{className:"run-code"},"▶ Run Code",-1),cs=s("",3),ts=a("div",{className:"run-code"},"▶ Run Code",-1),Ds=s("",3),ys=a("div",{className:"run-code"},"▶ Run Code",-1),Fs=s("",3),Cs=a("div",{className:"run-code"},"▶ Run Code",-1),As=s("",3),is=a("div",{className:"run-code"},"▶ Run Code",-1),ds=s("",1),bs=[e,r,c,t,D,y,F,C,A,i,d,b,u,_,m,h,T,E,v,I,g,S,P,R,N,k,O,w,L,V,f,q,j,M,x,B,U,K,G,Y,H,W,X,z,$,Z,J,Q,ss,as,ns,ls,ps,os,es,rs,cs,ts,Ds,ys,Fs,Cs,As,is,ds];function us(_s,ms,hs,Ts,Es,vs){return p(),l("div",null,bs)}const Ss=n(o,[["render",us]]);export{gs as __pageData,Ss as default}; diff --git a/docs/document/assets/advanced_global.md.lpEckIz8.js b/docs/document/assets/advanced_global.md.lpEckIz8.js deleted file mode 100644 index f9eebb315..000000000 --- a/docs/document/assets/advanced_global.md.lpEckIz8.js +++ /dev/null @@ -1,217 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const Bs=JSON.parse('{"title":"全局属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/global.md","filePath":"advanced/global.md","lastUpdated":1692979406000}'),p={name:"advanced/global.md"},e=s('

全局属性 ​

这里的 全局属性 也是指挂载在 构造函数 的 一级属性，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到

DEBUG ​

是否开始 debug 模式，可以打印出视频全部的内置事件，默认关闭

',4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
Artplayer.DEBUG = true;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

CONTEXTMENU ​

是否开启右键菜单，默认开启

`,3),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
Artplayer.CONTEXTMENU = false;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

NOTICE_TIME ​

提示信息的显示时长，单位为毫秒，默认为 2000

`,3),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
Artplayer.NOTICE_TIME = 5000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

SETTING_WIDTH ​

设置面板的默认宽度，单位为像素，默认为 250

`,3),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
Artplayer.SETTING_WIDTH = 300;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});

SETTING_ITEM_WIDTH ​

设置面板的设置项的默认宽度，单位为像素，默认为 200

`,3),y=i("div",{className:"run-code"},"▶ Run Code",-1),o=s(`
js
Artplayer.SETTING_ITEM_WIDTH = 300;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});

SETTING_ITEM_HEIGHT ​

设置面板的设置项的默认高度，单位为像素，默认为 35

`,3),b=i("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
Artplayer.SETTING_ITEM_HEIGHT = 40;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});

RESIZE_TIME ​

resize 事件的节流时间，单位为毫秒，默认为 200

`,3),F=i("div",{className:"run-code"},"▶ Run Code",-1),_=s(`
js
Artplayer.RESIZE_TIME = 500;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('resize', () => {
-    console.log('resize');
-});

SCROLL_TIME ​

scroll 事件的节流时间，单位为毫秒，默认为 200

`,3),m=i("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
Artplayer.SCROLL_TIME = 500;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('scroll', () => {
-    console.log('scroll');
-});

SCROLL_GAP ​

view 事件的边界容差距离，单位为像素，默认为 50

`,3),A=i("div",{className:"run-code"},"▶ Run Code",-1),v=s(`
js
Artplayer.SCROLL_GAP = 100;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('scroll', () => {
-    console.log('scroll');
-});

AUTO_PLAYBACK_MAX ​

自动回放功能的最大记录数，默认为 10

`,3),T=i("div",{className:"run-code"},"▶ Run Code",-1),B=s(`
js
Artplayer.AUTO_PLAYBACK_MAX = 20;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});

AUTO_PLAYBACK_MIN ​

自动回放功能的最小记录时长，单位为秒，默认为 5

`,3),D=i("div",{className:"run-code"},"▶ Run Code",-1),I=s(`
js
Artplayer.AUTO_PLAYBACK_MIN = 10;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});

AUTO_PLAYBACK_TIMEOUT ​

自动回放功能的隐藏延迟时长，单位为毫秒，默认为 3000

`,3),S=i("div",{className:"run-code"},"▶ Run Code",-1),P=s(`
js
Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});

RECONNECT_TIME_MAX ​

发生连接错误时，自动连接的最大次数，默认为 5

`,3),R=i("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
Artplayer.RECONNECT_TIME_MAX = 10;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});

RECONNECT_SLEEP_TIME ​

发生连接错误时，自动连接的延迟时间，单位为毫秒，默认为 1000

`,3),O=i("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
Artplayer.RECONNECT_SLEEP_TIME = 3000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});

CONTROL_HIDE_TIME ​

底部控制栏的自动隐藏的延迟时间，单位为毫秒，默认为 3000

`,3),L=i("div",{className:"run-code"},"▶ Run Code",-1),V=s(`
js
Artplayer.CONTROL_HIDE_TIME = 5000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

DBCLICK_TIME ​

双击事件的延迟事件，单位为毫秒，默认为 300

`,3),f=i("div",{className:"run-code"},"▶ Run Code",-1),q=s(`
js
Artplayer.DBCLICK_TIME = 500;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('dblclick', () => {
-    console.log('dblclick');
-});

DBCLICK_FULLSCREEN ​

在桌面端，是否双击切换全屏，默认为 true

`,3),j=i("div",{className:"run-code"},"▶ Run Code",-1),M=s(`
js
Artplayer.DBCLICK_FULLSCREEN = false;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

MOBILE_DBCLICK_PLAY ​

在移动端，是否双击切换播放暂停，默认为 true

`,3),x=i("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
Artplayer.MOBILE_DBCLICK_PLAY = false;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

MOBILE_CLICK_PLAY ​

在移动端，是否单击切换播放暂停，默认为 false

`,3),K=i("div",{className:"run-code"},"▶ Run Code",-1),G=s(`
js
Artplayer.MOBILE_CLICK_PLAY = true;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

AUTO_ORIENTATION_TIME ​

在移动端，自动旋屏的延迟时间，单位为毫秒，默认为 200

`,3),Y=i("div",{className:"run-code"},"▶ Run Code",-1),H=s(`
js
Artplayer.AUTO_ORIENTATION_TIME = 500;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoOrientation: true,
-});

INFO_LOOP_TIME ​

信息面板的刷新时间，单位为毫秒，默认为 1000

`,3),W=i("div",{className:"run-code"},"▶ Run Code",-1),X=s(`
js
Artplayer.INFO_LOOP_TIME = 2000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.info.show = true;

FAST_FORWARD_VALUE ​

在移动端，长按加速的速率倍数，默认为 3

`,3),z=i("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
Artplayer.FAST_FORWARD_VALUE = 5;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});

FAST_FORWARD_TIME ​

在移动端，长按加速的延迟时间，单位为毫秒，默认为 1000

`,3),Z=i("div",{className:"run-code"},"▶ Run Code",-1),J=s(`
js
Artplayer.FAST_FORWARD_TIME = 2000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});

TOUCH_MOVE_RATIO ​

在移动端，左右滑动进度的速率倍数，默认为 0.5

`,3),Q=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
Artplayer.TOUCH_MOVE_RATIO = 1;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

VOLUME_STEP ​

快捷键调节音量的幅度比例，默认为 0.1

`,3),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s(`
js
Artplayer.VOLUME_STEP = 0.2;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

SEEK_STEP ​

快捷键调节播放进度的幅度，单位为秒，默认为 5

`,3),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s(`
js
Artplayer.SEEK_STEP = 10;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

PLAYBACK_RATE ​

内置播放速率的列表，默认为 [0.5, 0.75, 1, 1.25, 1.5, 2]

`,3),ps=i("div",{className:"run-code"},"▶ Run Code",-1),es=s(`
js
Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5];
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    playbackRate: true,
-});
-
-art.contextmenu.show = true;
-art.setting.show = true;

ASPECT_RATIO ​

内置视频长宽比的列表，默认为 ['default', '4:3', '16:9']

`,3),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s(`
js
Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5'];
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    aspectRatio: true,
-});
-
-art.contextmenu.show = true;
-art.setting.show = true;

FLIP ​

内置视频翻转的列表，默认为 ['normal', 'horizontal', 'vertical']

`,3),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s(`
js
Artplayer.FLIP = ['normal', 'horizontal'];
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-});
-
-art.contextmenu.show = true;
-art.setting.show = true;

FULLSCREEN_WEB_IN_BODY ​

网页全屏时，是否把播放器挂在在 body 元素下，默认为 false

`,3),Es=i("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
Artplayer.FULLSCREEN_WEB_IN_BODY = true;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});

LOG_VERSION ​

设置是否打印播放器版本，默认为 true

`,3),cs=i("div",{className:"run-code"},"▶ Run Code",-1),gs=s(`
js
Artplayer.LOG_VERSION = false;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

USE_RAF ​

设置是否使用 requestAnimationFrame ，默认为 false，目前主要用于进度条的平滑效果

`,3),ys=i("div",{className:"run-code"},"▶ Run Code",-1),os=s(`
js
Artplayer.USE_RAF = true;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    miniProgressBar: true,
-});
`,1),bs=[e,h,t,k,r,E,d,c,g,y,o,b,u,F,_,m,C,A,v,T,B,D,I,S,P,R,N,O,w,L,V,f,q,j,M,x,U,K,G,Y,H,W,X,z,$,Z,J,Q,ss,is,as,ns,ls,ps,es,hs,ts,ks,rs,Es,ds,cs,gs,ys,os];function us(Fs,_s,ms,Cs,As,vs){return l(),n("div",null,bs)}const Ds=a(p,[["render",us]]);export{Bs as __pageData,Ds as default}; diff --git a/docs/document/assets/advanced_global.md.lpEckIz8.lean.js b/docs/document/assets/advanced_global.md.lpEckIz8.lean.js deleted file mode 100644 index b7fc462b6..000000000 --- a/docs/document/assets/advanced_global.md.lpEckIz8.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const Bs=JSON.parse('{"title":"全局属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/global.md","filePath":"advanced/global.md","lastUpdated":1692979406000}'),p={name:"advanced/global.md"},e=s("",4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",3),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s("",3),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",3),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s("",3),y=i("div",{className:"run-code"},"▶ Run Code",-1),o=s("",3),b=i("div",{className:"run-code"},"▶ Run Code",-1),u=s("",3),F=i("div",{className:"run-code"},"▶ Run Code",-1),_=s("",3),m=i("div",{className:"run-code"},"▶ Run Code",-1),C=s("",3),A=i("div",{className:"run-code"},"▶ Run Code",-1),v=s("",3),T=i("div",{className:"run-code"},"▶ Run Code",-1),B=s("",3),D=i("div",{className:"run-code"},"▶ Run Code",-1),I=s("",3),S=i("div",{className:"run-code"},"▶ Run Code",-1),P=s("",3),R=i("div",{className:"run-code"},"▶ Run Code",-1),N=s("",3),O=i("div",{className:"run-code"},"▶ Run Code",-1),w=s("",3),L=i("div",{className:"run-code"},"▶ Run Code",-1),V=s("",3),f=i("div",{className:"run-code"},"▶ Run Code",-1),q=s("",3),j=i("div",{className:"run-code"},"▶ Run Code",-1),M=s("",3),x=i("div",{className:"run-code"},"▶ Run Code",-1),U=s("",3),K=i("div",{className:"run-code"},"▶ Run Code",-1),G=s("",3),Y=i("div",{className:"run-code"},"▶ Run Code",-1),H=s("",3),W=i("div",{className:"run-code"},"▶ Run Code",-1),X=s("",3),z=i("div",{className:"run-code"},"▶ Run Code",-1),$=s("",3),Z=i("div",{className:"run-code"},"▶ Run Code",-1),J=s("",3),Q=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",3),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s("",3),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s("",3),ps=i("div",{className:"run-code"},"▶ Run Code",-1),es=s("",3),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s("",3),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s("",3),Es=i("div",{className:"run-code"},"▶ Run Code",-1),ds=s("",3),cs=i("div",{className:"run-code"},"▶ Run Code",-1),gs=s("",3),ys=i("div",{className:"run-code"},"▶ Run Code",-1),os=s("",1),bs=[e,h,t,k,r,E,d,c,g,y,o,b,u,F,_,m,C,A,v,T,B,D,I,S,P,R,N,O,w,L,V,f,q,j,M,x,U,K,G,Y,H,W,X,z,$,Z,J,Q,ss,is,as,ns,ls,ps,es,hs,ts,ks,rs,Es,ds,cs,gs,ys,os];function us(Fs,_s,ms,Cs,As,vs){return l(),n("div",null,bs)}const Ds=a(p,[["render",us]]);export{Bs as __pageData,Ds as default}; diff --git a/docs/document/assets/advanced_plugin.md.6beaac37.js b/docs/document/assets/advanced_plugin.md.6beaac37.js new file mode 100644 index 000000000..872f41529 --- /dev/null +++ b/docs/document/assets/advanced_plugin.md.6beaac37.js @@ -0,0 +1,99 @@ +import{_ as l,c as p,o,z as s,a as n,V as a}from"./chunks/framework.5c8808ab.js";const v=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/plugin.md","filePath":"advanced/plugin.md","lastUpdated":1673441101000}'),e={name:"advanced/plugin.md"},r=s("h1",{id:"编写插件",tabindex:"-1"},[n("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-label":'Permalink to "编写插件"'},"​")],-1),c=s("p",null,[n("但你已经知道播放器的"),s("code",null,"属性"),n(", "),s("code",null,"方法"),n("和"),s("code",null,"事件"),n("后，再编写插件是非常简单的事")],-1),t=s("p",null,"可以在实例化的时候加载插件的函数",-1),F=s("div",{className:"run-code"},"▶ Run Code",-1),D=a(`
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [myPlugin],
+});
+
+art.on('ready', () => {
+    console.info(art.plugins.myPlugin);
+});

可以在实例化之后再加载插件的函数

`,2),y=s("div",{className:"run-code"},"▶ Run Code",-1),i=a(`
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.plugins.add(myPlugin);
+
+art.on('ready', () => {
+    console.info(art.plugins.myPlugin);
+});

例如我想写一个在视频暂停后，显示一个图片广告的插件

`,2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a(`
js
function adsPlugin(option) {
+    return (art) => {
+        art.layers.add({
+            name: 'ads',
+            html: \`<img style="width: 100px" src="\${option.url}">\`,
+            style: {
+                display: 'none',
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+            },
+        });
+
+        function show() {
+            art.layers.ads.style.display = 'block';
+        }
+
+        function hide() {
+            art.layers.ads.style.display = 'none';
+        }
+
+        art.controls.add({
+            name: 'hide-ads',
+            position: 'right',
+            html: 'Hide Ads',
+            tooltip: 'Hide Ads',
+            click: hide,
+            style: {
+                marginRight: '20px'
+            }
+        });
+
+        art.controls.add({
+            name: 'show-ads',
+            position: 'right',
+            html: 'Show Ads',
+            tooltip: 'Show Ads',
+            click: show,
+        });
+
+        art.on('play', hide);
+        art.on('pause', show);
+
+        return {
+            name: 'adsPlugin',
+            show,
+            hide
+        };
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        adsPlugin({
+            url: '/assets/sample/layer.png'
+        })
+    ],
+});
`,1),b=[r,c,t,F,D,y,i,A,C];function u(m,d,h,_,g,E){return o(),p("div",null,b)}const P=l(e,[["render",u]]);export{v as __pageData,P as default}; diff --git a/docs/document/assets/advanced_plugin.md.6beaac37.lean.js b/docs/document/assets/advanced_plugin.md.6beaac37.lean.js new file mode 100644 index 000000000..2ee1914b1 --- /dev/null +++ b/docs/document/assets/advanced_plugin.md.6beaac37.lean.js @@ -0,0 +1 @@ +import{_ as l,c as p,o,z as s,a as n,V as a}from"./chunks/framework.5c8808ab.js";const v=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/plugin.md","filePath":"advanced/plugin.md","lastUpdated":1673441101000}'),e={name:"advanced/plugin.md"},r=s("h1",{id:"编写插件",tabindex:"-1"},[n("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-label":'Permalink to "编写插件"'},"​")],-1),c=s("p",null,[n("但你已经知道播放器的"),s("code",null,"属性"),n(", "),s("code",null,"方法"),n("和"),s("code",null,"事件"),n("后，再编写插件是非常简单的事")],-1),t=s("p",null,"可以在实例化的时候加载插件的函数",-1),F=s("div",{className:"run-code"},"▶ Run Code",-1),D=a("",2),y=s("div",{className:"run-code"},"▶ Run Code",-1),i=a("",2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a("",1),b=[r,c,t,F,D,y,i,A,C];function u(m,d,h,_,g,E){return o(),p("div",null,b)}const P=l(e,[["render",u]]);export{v as __pageData,P as default}; diff --git a/docs/document/assets/advanced_plugin.md.B2M4UGjM.js b/docs/document/assets/advanced_plugin.md.B2M4UGjM.js deleted file mode 100644 index 17abf90d1..000000000 --- a/docs/document/assets/advanced_plugin.md.B2M4UGjM.js +++ /dev/null @@ -1,99 +0,0 @@ -import{_ as n,c as l,o as p,k as s,a as i,R as a}from"./chunks/framework.0i_P4VHR.js";const v=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/plugin.md","filePath":"advanced/plugin.md","lastUpdated":1673441101000}'),h={name:"advanced/plugin.md"},e=s("h1",{id:"编写插件",tabindex:"-1"},[i("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-label":'Permalink to "编写插件"'},"​")],-1),k=s("p",null,[i("但你已经知道播放器的"),s("code",null,"属性"),i(", "),s("code",null,"方法"),i("和"),s("code",null,"事件"),i("后，再编写插件是非常简单的事")],-1),t=s("p",null,"可以在实例化的时候加载插件的函数",-1),E=s("div",{className:"run-code"},"▶ Run Code",-1),r=a(`
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [myPlugin],
-});
-
-art.on('ready', () => {
-    console.info(art.plugins.myPlugin);
-});

可以在实例化之后再加载插件的函数

`,2),d=s("div",{className:"run-code"},"▶ Run Code",-1),g=a(`
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.plugins.add(myPlugin);
-
-art.on('ready', () => {
-    console.info(art.plugins.myPlugin);
-});

例如我想写一个在视频暂停后，显示一个图片广告的插件

`,2),c=s("div",{className:"run-code"},"▶ Run Code",-1),y=a(`
js
function adsPlugin(option) {
-    return (art) => {
-        art.layers.add({
-            name: 'ads',
-            html: \`<img style="width: 100px" src="\${option.url}">\`,
-            style: {
-                display: 'none',
-                position: 'absolute',
-                top: '20px',
-                right: '20px',
-            },
-        });
-
-        function show() {
-            art.layers.ads.style.display = 'block';
-        }
-
-        function hide() {
-            art.layers.ads.style.display = 'none';
-        }
-
-        art.controls.add({
-            name: 'hide-ads',
-            position: 'right',
-            html: 'Hide Ads',
-            tooltip: 'Hide Ads',
-            click: hide,
-            style: {
-                marginRight: '20px'
-            }
-        });
-
-        art.controls.add({
-            name: 'show-ads',
-            position: 'right',
-            html: 'Show Ads',
-            tooltip: 'Show Ads',
-            click: show,
-        });
-
-        art.on('play', hide);
-        art.on('pause', show);
-
-        return {
-            name: 'adsPlugin',
-            show,
-            hide
-        };
-    }
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        adsPlugin({
-            url: '/assets/sample/layer.png'
-        })
-    ],
-});
`,1),b=[e,k,t,E,r,d,g,c,y];function F(u,m,o,C,B,_){return p(),l("div",null,b)}const D=n(h,[["render",F]]);export{v as __pageData,D as default}; diff --git a/docs/document/assets/advanced_plugin.md.B2M4UGjM.lean.js b/docs/document/assets/advanced_plugin.md.B2M4UGjM.lean.js deleted file mode 100644 index 4164d8a1f..000000000 --- a/docs/document/assets/advanced_plugin.md.B2M4UGjM.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as n,c as l,o as p,k as s,a as i,R as a}from"./chunks/framework.0i_P4VHR.js";const v=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/plugin.md","filePath":"advanced/plugin.md","lastUpdated":1673441101000}'),h={name:"advanced/plugin.md"},e=s("h1",{id:"编写插件",tabindex:"-1"},[i("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-label":'Permalink to "编写插件"'},"​")],-1),k=s("p",null,[i("但你已经知道播放器的"),s("code",null,"属性"),i(", "),s("code",null,"方法"),i("和"),s("code",null,"事件"),i("后，再编写插件是非常简单的事")],-1),t=s("p",null,"可以在实例化的时候加载插件的函数",-1),E=s("div",{className:"run-code"},"▶ Run Code",-1),r=a("",2),d=s("div",{className:"run-code"},"▶ Run Code",-1),g=a("",2),c=s("div",{className:"run-code"},"▶ Run Code",-1),y=a("",1),b=[e,k,t,E,r,d,g,c,y];function F(u,m,o,C,B,_){return p(),l("div",null,b)}const D=n(h,[["render",F]]);export{v as __pageData,D as default}; diff --git a/docs/document/assets/advanced_property.md.2c9c0303.js b/docs/document/assets/advanced_property.md.2c9c0303.js new file mode 100644 index 000000000..ce84d687d --- /dev/null +++ b/docs/document/assets/advanced_property.md.2c9c0303.js @@ -0,0 +1,383 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const Os=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/property.md","filePath":"advanced/property.md","lastUpdated":1700581325000}'),o={name:"advanced/property.md"},e=s('

实例属性 ​

这里的 实例属性 是指挂载在 实例 的 一级属性，比较常用

play ​

播放视频

',5),r=n("div",{className:"run-code"},"▶ Run Code",-1),c=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    art.play();
+});

pause ​

暂停视频

`,4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    art.play();
+
+    setTimeout(() => {
+        art.pause();
+    }, 3000);
+});

toggle ​

切换视频的播放和暂停

`,4),y=n("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    art.toggle();
+
+    setTimeout(() => {
+        art.toggle();
+    }, 3000);
+});

destroy ​

销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 html，默认为 true

`,4),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.destroy();
+});

seek ​

视频时间跳转，单位秒

`,4),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 5;
+});

forward ​

视频时间快进，单位秒

`,4),b=n("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.forward = 5;
+});

backward ​

视频时间快退，单位秒

`,4),m=n("div",{className:"run-code"},"▶ Run Code",-1),h=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 5;
+
+    setTimeout(() => {
+        art.backward = 2;
+    }, 3000);
+});

volume ​

设置和获取视频音量，范围在：[0, 1]

`,4),_=n("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.volume);
+    art.volume = 0.5;
+    console.info(art.volume);
+});

url ​

设置和获取视频地址

`,4),v=n("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.url = '/assets/sample/video.mp4?t=0';
+});

switch ​

设置视频地址，设置时和 art.url 类似，但会执行一些优化操作

`,4),E=n("div",{className:"run-code"},"▶ Run Code",-1),S=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switch = '/assets/sample/video.mp4?t=0';
+    }, 3000);
+});

switchUrl ​

设置视频地址，设置时和 art.url 类似，但会执行一些优化操作

`,4),P=n("div",{className:"run-code"},"▶ Run Code",-1),k=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchUrl('/assets/sample/video.mp4?t=0');
+    }, 3000);
+});

提示

art.switch 和 art.switchUrl 的功能是一样的，只是 art.switchUrl 方法会返回 Promise，当 resolve 时表示新地址是可以播放，reject 时表示新地址加载错误

switchQuality ​

设置视频画质地址，和 art.switchUrl 类似，但会带上之前的播放进度

`,5),w=n("div",{className:"run-code"},"▶ Run Code",-1),f=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchQuality('/assets/sample/video.mp4?t=0');
+    }, 3000);
+});

muted ​

设置和获取视频是否静音

`,4),q=n("div",{className:"run-code"},"▶ Run Code",-1),R=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.muted);
+    art.muted = true;
+    console.info(art.muted);
+});

currentTime ​

设置和获取视频当前时间，设置时间时和 seek 类似，但它不会触发额外的事件

`,4),N=n("div",{className:"run-code"},"▶ Run Code",-1),V=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.currentTime);
+    art.currentTime = 5;
+    console.info(art.currentTime);
+});

duration ​

获取视频时长

`,4),I=n("div",{className:"run-code"},"▶ Run Code",-1),j=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.duration);
+});

提示

有的视频是没有时长的，例如直播中的视频或者没被解码完成的视频，这个时候获取的时长会是 0

screenshot ​

下载当前视频帧的截图

`,5),x=n("div",{className:"run-code"},"▶ Run Code",-1),G=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.screenshot();
+});

getDataURL ​

获取当前视频帧的截图的base64地址，返回的是一个 Promise

`,4),B=n("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', async () => {
+    const url = await art.getDataURL();
+	console.info(url)
+});

getBlobUrl ​

获取当前视频帧的截图的blob地址，返回的是一个 Promise

`,4),z=n("div",{className:"run-code"},"▶ Run Code",-1),H=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', async () => {
+    const url = await art.getBlobUrl();
+    console.info(url);
+});

fullscreen ​

设置和获取播放器窗口全屏

`,4),L=n("div",{className:"run-code"},"▶ Run Code",-1),O=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'Fullscreen Switch',
+            click: function () {
+                art.fullscreen = !art.fullscreen;
+            },
+        },
+    ],
+});

提示

由于浏览器安全机制，触发窗口全屏前，页面必须先存在交互（例如用户点击过页面）

fullscreenWeb ​

设置和获取播放器网页全屏

`,5),W=n("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
+
+art.on('ready', () => {
+    art.fullscreenWeb = true;
+
+    setTimeout(() => {
+        art.fullscreenWeb = false;
+    }, 3000);
+});

pip ​

设置和获取播放器画中画模式

`,4),M=n("div",{className:"run-code"},"▶ Run Code",-1),Q=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'PIP',
+            click: function () {
+                art.pip = !art.pip;
+            },
+        },
+    ],
+});

提示

由于浏览器安全机制，触发画中画前，页面必须先存在交互（例如用户点击过页面）

poster ​

设置和获取视频海报，只有在视频播放前才能看到海报效果

`,5),J=n("div",{className:"run-code"},"▶ Run Code",-1),K=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    poster: '/assets/sample/poster.jpg',
+});
+
+art.on('ready', () => {
+    console.info(art.poster);
+    art.poster = '/assets/sample/poster.jpg?t=0';
+    console.info(art.poster);
+});

mini ​

设置和获取播放器迷你模式

`,4),X=n("div",{className:"run-code"},"▶ Run Code",-1),Y=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.mini = true;
+});

playing ​

获取视频是否正在播放中

`,4),Z=n("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    console.info(art.playing);
+});

autoSize ​

设置视频是否自适应尺寸

`,4),ns=n("div",{className:"run-code"},"▶ Run Code",-1),as=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.autoSize();
+});

rect ​

获取播放器的尺寸和坐标信息

`,4),ls=n("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(JSON.stringify(art.rect));
+});

提示

尺寸和坐标信息是通过 getBoundingClientRect 获取的

flip ​

设置和获取播放器翻转，支持normal, horizontal, vertical

`,5),os=n("div",{className:"run-code"},"▶ Run Code",-1),es=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.flip);
+    art.flip = 'horizontal';
+    console.info(art.flip);
+});

playbackRate ​

设置和获取播放器播放速度

`,4),rs=n("div",{className:"run-code"},"▶ Run Code",-1),cs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.playbackRate);
+    art.playbackRate = 2;
+    console.info(art.playbackRate);
+});

aspectRatio ​

设置和获取播放器长宽比

`,4),ts=n("div",{className:"run-code"},"▶ Run Code",-1),Ds=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.aspectRatio);
+    art.aspectRatio = '16:9';
+    console.info(art.aspectRatio);
+});

autoHeight ​

当容器只有宽度，该属性可以自动计算出并设置视频的高度

`,4),ys=n("div",{className:"run-code"},"▶ Run Code",-1),Fs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.autoHeight();
+});
+
+art.on('resize', () => {
+    art.autoHeight();
+});

提示

当你的容器只有宽度，但不知道具体高度时，这个属性很有用，它能自动计算出视频的高度，但你需要确定设置这个属性的时机

attr ​

动态获取和设置 video 元素的属性

`,5),is=n("div",{className:"run-code"},"▶ Run Code",-1),As=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.attr('playsInline'));
+    art.attr('playsInline', true);
+    console.info(art.attr('playsInline'));
+});

type ​

动态获取和设置视频类型

`,4),Cs=n("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.type);
+    art.type = 'm3u8';
+    console.info(art.type);
+});

theme ​

动态获取和设置播放器主题颜色

`,4),bs=n("div",{className:"run-code"},"▶ Run Code",-1),us=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.theme);
+    art.theme = '#000';
+    console.info(art.theme);
+});

airplay ​

开启隔空播放

`,4),ms=n("div",{className:"run-code"},"▶ Run Code",-1),hs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'AirPlay',
+            click: function () {
+                art.airplay();
+            },
+        },
+    ],
+});

loaded ​

视频缓存的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用

`,4),_s=n("div",{className:"run-code"},"▶ Run Code",-1),gs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('video:timeupdate', () => {
+    console.info(art.loaded);
+});

played ​

视频播放的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用

`,4),vs=n("div",{className:"run-code"},"▶ Run Code",-1),Ts=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('video:timeupdate', () => {
+    console.info(art.played);
+});

proxy ​

DOM 事件的代理函数，实质上代理了 addEventListener 和 removeEventListener, 当使用 proxy 来处理事件，播放器销毁时也会自动销毁该事件

`,4),Es=n("div",{className:"run-code"},"▶ Run Code",-1),Ss=s(`
js
var container = document.querySelector('.artplayer-app');
+
+var art = new Artplayer({
+	container: container,
+	url: '/assets/sample/video.mp4',
+});
+
+art.proxy(container, 'click', event => {
+	console.info(event);
+});

提示

假如你需要一些 DOM 事件只存在于播放器的生命周期上时，强烈建议使用该函数，以避免造成内存泄漏

query ​

DOM 的查询函数，类似 document.querySelector，但被查询的对象局限于当前播放器内，可以避免同类名的错误

`,5),Ps=n("div",{className:"run-code"},"▶ Run Code",-1),ks=s(`
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
+
+console.info(art.query('.art-video'));

video ​

快捷返回播放器的 video 元素

`,4),ws=n("div",{className:"run-code"},"▶ Run Code",-1),fs=s(`
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
+
+console.info(art.video);

cssVar ​

动态获取或设置 css 变量

`,4),qs=n("div",{className:"run-code"},"▶ Run Code",-1),Rs=s(`
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.log(art.cssVar('--art-theme'));
+    art.cssVar('--art-theme', 'green');
+    console.log(art.cssVar('--art-theme'));
+});

quality ​

动态设置画质列表

`,4),Ns=n("div",{className:"run-code"},"▶ Run Code",-1),Vs=s(`
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+	quality: [
+		{
+			default: true,
+			html: 'SD 480P',
+			url: '/assets/sample/video.mp4',
+		},
+		{
+			html: 'HD 720P',
+			url: '/assets/sample/video.mp4',
+		},
+	],
+});
+
+art.on('ready', () => {
+	setTimeout(() => {
+		art.quality = [
+			{
+				default: true,
+				html: '1080P',
+				url: '/assets/sample/video.mp4',
+			},
+			{
+				html: '4K',
+				url: '/assets/sample/video.mp4',
+			},
+		];
+	}, 3000);
+})
`,1),Is=[e,r,c,t,D,y,F,i,A,C,d,b,u,m,h,_,g,v,T,E,S,P,k,w,f,q,R,N,V,I,j,x,G,B,U,z,H,L,O,W,$,M,Q,J,K,X,Y,Z,ss,ns,as,ls,ps,os,es,rs,cs,ts,Ds,ys,Fs,is,As,Cs,ds,bs,us,ms,hs,_s,gs,vs,Ts,Es,Ss,Ps,ks,ws,fs,qs,Rs,Ns,Vs];function js(xs,Gs,Bs,Us,zs,Hs){return p(),l("div",null,Is)}const Ws=a(o,[["render",js]]);export{Os as __pageData,Ws as default}; diff --git a/docs/document/assets/advanced_property.md.2c9c0303.lean.js b/docs/document/assets/advanced_property.md.2c9c0303.lean.js new file mode 100644 index 000000000..8c4b08b1a --- /dev/null +++ b/docs/document/assets/advanced_property.md.2c9c0303.lean.js @@ -0,0 +1 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const Os=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/property.md","filePath":"advanced/property.md","lastUpdated":1700581325000}'),o={name:"advanced/property.md"},e=s("",5),r=n("div",{className:"run-code"},"▶ Run Code",-1),c=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",4),y=n("div",{className:"run-code"},"▶ Run Code",-1),F=s("",4),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s("",4),b=n("div",{className:"run-code"},"▶ Run Code",-1),u=s("",4),m=n("div",{className:"run-code"},"▶ Run Code",-1),h=s("",4),_=n("div",{className:"run-code"},"▶ Run Code",-1),g=s("",4),v=n("div",{className:"run-code"},"▶ Run Code",-1),T=s("",4),E=n("div",{className:"run-code"},"▶ Run Code",-1),S=s("",4),P=n("div",{className:"run-code"},"▶ Run Code",-1),k=s("",5),w=n("div",{className:"run-code"},"▶ Run Code",-1),f=s("",4),q=n("div",{className:"run-code"},"▶ Run Code",-1),R=s("",4),N=n("div",{className:"run-code"},"▶ Run Code",-1),V=s("",4),I=n("div",{className:"run-code"},"▶ Run Code",-1),j=s("",5),x=n("div",{className:"run-code"},"▶ Run Code",-1),G=s("",4),B=n("div",{className:"run-code"},"▶ Run Code",-1),U=s("",4),z=n("div",{className:"run-code"},"▶ Run Code",-1),H=s("",4),L=n("div",{className:"run-code"},"▶ Run Code",-1),O=s("",5),W=n("div",{className:"run-code"},"▶ Run Code",-1),$=s("",4),M=n("div",{className:"run-code"},"▶ Run Code",-1),Q=s("",5),J=n("div",{className:"run-code"},"▶ Run Code",-1),K=s("",4),X=n("div",{className:"run-code"},"▶ Run Code",-1),Y=s("",4),Z=n("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),ns=n("div",{className:"run-code"},"▶ Run Code",-1),as=s("",4),ls=n("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",5),os=n("div",{className:"run-code"},"▶ Run Code",-1),es=s("",4),rs=n("div",{className:"run-code"},"▶ Run Code",-1),cs=s("",4),ts=n("div",{className:"run-code"},"▶ Run Code",-1),Ds=s("",4),ys=n("div",{className:"run-code"},"▶ Run Code",-1),Fs=s("",5),is=n("div",{className:"run-code"},"▶ Run Code",-1),As=s("",4),Cs=n("div",{className:"run-code"},"▶ Run Code",-1),ds=s("",4),bs=n("div",{className:"run-code"},"▶ Run Code",-1),us=s("",4),ms=n("div",{className:"run-code"},"▶ Run Code",-1),hs=s("",4),_s=n("div",{className:"run-code"},"▶ Run Code",-1),gs=s("",4),vs=n("div",{className:"run-code"},"▶ Run Code",-1),Ts=s("",4),Es=n("div",{className:"run-code"},"▶ Run Code",-1),Ss=s("",5),Ps=n("div",{className:"run-code"},"▶ Run Code",-1),ks=s("",4),ws=n("div",{className:"run-code"},"▶ Run Code",-1),fs=s("",4),qs=n("div",{className:"run-code"},"▶ Run Code",-1),Rs=s("",4),Ns=n("div",{className:"run-code"},"▶ Run Code",-1),Vs=s("",1),Is=[e,r,c,t,D,y,F,i,A,C,d,b,u,m,h,_,g,v,T,E,S,P,k,w,f,q,R,N,V,I,j,x,G,B,U,z,H,L,O,W,$,M,Q,J,K,X,Y,Z,ss,ns,as,ls,ps,os,es,rs,cs,ts,Ds,ys,Fs,is,As,Cs,ds,bs,us,ms,hs,_s,gs,vs,Ts,Es,Ss,Ps,ks,ws,fs,qs,Rs,Ns,Vs];function js(xs,Gs,Bs,Us,zs,Hs){return p(),l("div",null,Is)}const Ws=a(o,[["render",js]]);export{Os as __pageData,Ws as default}; diff --git a/docs/document/assets/advanced_property.md.D8Xu-RJa.js b/docs/document/assets/advanced_property.md.D8Xu-RJa.js deleted file mode 100644 index 38bdbde3f..000000000 --- a/docs/document/assets/advanced_property.md.D8Xu-RJa.js +++ /dev/null @@ -1,383 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const Os=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/property.md","filePath":"advanced/property.md","lastUpdated":1700581325000}'),p={name:"advanced/property.md"},e=s('

实例属性 ​

这里的 实例属性 是指挂载在 实例 的 一级属性，比较常用

play ​

播放视频

',5),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    art.play();
-});

pause ​

暂停视频

`,4),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    art.play();
-
-    setTimeout(() => {
-        art.pause();
-    }, 3000);
-});

toggle ​

切换视频的播放和暂停

`,4),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    art.toggle();
-
-    setTimeout(() => {
-        art.toggle();
-    }, 3000);
-});

destroy ​

销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 html，默认为 true

`,4),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.destroy();
-});

seek ​

视频时间跳转，单位秒

`,4),y=i("div",{className:"run-code"},"▶ Run Code",-1),o=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 5;
-});

forward ​

视频时间快进，单位秒

`,4),b=i("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.forward = 5;
-});

backward ​

视频时间快退，单位秒

`,4),F=i("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 5;
-
-    setTimeout(() => {
-        art.backward = 2;
-    }, 3000);
-});

volume ​

设置和获取视频音量，范围在：[0, 1]

`,4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.volume);
-    art.volume = 0.5;
-    console.info(art.volume);
-});

url ​

设置和获取视频地址

`,4),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.url = '/assets/sample/video.mp4?t=0';
-});

switch ​

设置视频地址，设置时和 art.url 类似，但会执行一些优化操作

`,4),B=i("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switch = '/assets/sample/video.mp4?t=0';
-    }, 3000);
-});

switchUrl ​

设置视频地址，设置时和 art.url 类似，但会执行一些优化操作

`,4),D=i("div",{className:"run-code"},"▶ Run Code",-1),S=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switchUrl('/assets/sample/video.mp4?t=0');
-    }, 3000);
-});

提示

art.switch 和 art.switchUrl 的功能是一样的，只是 art.switchUrl 方法会返回 Promise，当 resolve 时表示新地址是可以播放，reject 时表示新地址加载错误

switchQuality ​

设置视频画质地址，和 art.switchUrl 类似，但会带上之前的播放进度

`,5),P=i("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switchQuality('/assets/sample/video.mp4?t=0');
-    }, 3000);
-});

muted ​

设置和获取视频是否静音

`,4),f=i("div",{className:"run-code"},"▶ Run Code",-1),q=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.muted);
-    art.muted = true;
-    console.info(art.muted);
-});

currentTime ​

设置和获取视频当前时间，设置时间时和 seek 类似，但它不会触发额外的事件

`,4),R=i("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.currentTime);
-    art.currentTime = 5;
-    console.info(art.currentTime);
-});

duration ​

获取视频时长

`,4),V=i("div",{className:"run-code"},"▶ Run Code",-1),I=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.duration);
-});

提示

有的视频是没有时长的，例如直播中的视频或者没被解码完成的视频，这个时候获取的时长会是 0

screenshot ​

下载当前视频帧的截图

`,5),j=i("div",{className:"run-code"},"▶ Run Code",-1),x=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.screenshot();
-});

getDataURL ​

获取当前视频帧的截图的base64地址，返回的是一个 Promise

`,4),G=i("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', async () => {
-    const url = await art.getDataURL();
-	console.info(url)
-});

getBlobUrl ​

获取当前视频帧的截图的blob地址，返回的是一个 Promise

`,4),z=i("div",{className:"run-code"},"▶ Run Code",-1),H=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', async () => {
-    const url = await art.getBlobUrl();
-    console.info(url);
-});

fullscreen ​

设置和获取播放器窗口全屏

`,4),L=i("div",{className:"run-code"},"▶ Run Code",-1),O=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'Fullscreen Switch',
-            click: function () {
-                art.fullscreen = !art.fullscreen;
-            },
-        },
-    ],
-});

提示

由于浏览器安全机制，触发窗口全屏前，页面必须先存在交互（例如用户点击过页面）

fullscreenWeb ​

设置和获取播放器网页全屏

`,5),W=i("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
-
-art.on('ready', () => {
-    art.fullscreenWeb = true;
-
-    setTimeout(() => {
-        art.fullscreenWeb = false;
-    }, 3000);
-});

pip ​

设置和获取播放器画中画模式

`,4),M=i("div",{className:"run-code"},"▶ Run Code",-1),Q=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'PIP',
-            click: function () {
-                art.pip = !art.pip;
-            },
-        },
-    ],
-});

提示

由于浏览器安全机制，触发画中画前，页面必须先存在交互（例如用户点击过页面）

poster ​

设置和获取视频海报，只有在视频播放前才能看到海报效果

`,5),J=i("div",{className:"run-code"},"▶ Run Code",-1),K=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    poster: '/assets/sample/poster.jpg',
-});
-
-art.on('ready', () => {
-    console.info(art.poster);
-    art.poster = '/assets/sample/poster.jpg?t=0';
-    console.info(art.poster);
-});

mini ​

设置和获取播放器迷你模式

`,4),X=i("div",{className:"run-code"},"▶ Run Code",-1),Y=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.mini = true;
-});

playing ​

获取视频是否正在播放中

`,4),Z=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    console.info(art.playing);
-});

autoSize ​

设置视频是否自适应尺寸

`,4),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.autoSize();
-});

rect ​

获取播放器的尺寸和坐标信息

`,4),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(JSON.stringify(art.rect));
-});

提示

尺寸和坐标信息是通过 getBoundingClientRect 获取的

flip ​

设置和获取播放器翻转，支持normal, horizontal, vertical

`,5),ps=i("div",{className:"run-code"},"▶ Run Code",-1),es=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.flip);
-    art.flip = 'horizontal';
-    console.info(art.flip);
-});

playbackRate ​

设置和获取播放器播放速度

`,4),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.playbackRate);
-    art.playbackRate = 2;
-    console.info(art.playbackRate);
-});

aspectRatio ​

设置和获取播放器长宽比

`,4),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.aspectRatio);
-    art.aspectRatio = '16:9';
-    console.info(art.aspectRatio);
-});

autoHeight ​

当容器只有宽度，该属性可以自动计算出并设置视频的高度

`,4),Es=i("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.autoHeight();
-});
-
-art.on('resize', () => {
-    art.autoHeight();
-});

提示

当你的容器只有宽度，但不知道具体高度时，这个属性很有用，它能自动计算出视频的高度，但你需要确定设置这个属性的时机

attr ​

动态获取和设置 video 元素的属性

`,5),cs=i("div",{className:"run-code"},"▶ Run Code",-1),gs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.attr('playsInline'));
-    art.attr('playsInline', true);
-    console.info(art.attr('playsInline'));
-});

type ​

动态获取和设置视频类型

`,4),ys=i("div",{className:"run-code"},"▶ Run Code",-1),os=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.type);
-    art.type = 'm3u8';
-    console.info(art.type);
-});

theme ​

动态获取和设置播放器主题颜色

`,4),bs=i("div",{className:"run-code"},"▶ Run Code",-1),us=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.theme);
-    art.theme = '#000';
-    console.info(art.theme);
-});

airplay ​

开启隔空播放

`,4),Fs=i("div",{className:"run-code"},"▶ Run Code",-1),ms=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'AirPlay',
-            click: function () {
-                art.airplay();
-            },
-        },
-    ],
-});

loaded ​

视频缓存的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用

`,4),_s=i("div",{className:"run-code"},"▶ Run Code",-1),Cs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('video:timeupdate', () => {
-    console.info(art.loaded);
-});

played ​

视频播放的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用

`,4),vs=i("div",{className:"run-code"},"▶ Run Code",-1),As=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('video:timeupdate', () => {
-    console.info(art.played);
-});

proxy ​

DOM 事件的代理函数，实质上代理了 addEventListener 和 removeEventListener, 当使用 proxy 来处理事件，播放器销毁时也会自动销毁该事件

`,4),Bs=i("div",{className:"run-code"},"▶ Run Code",-1),Ts=s(`
js
var container = document.querySelector('.artplayer-app');
-
-var art = new Artplayer({
-	container: container,
-	url: '/assets/sample/video.mp4',
-});
-
-art.proxy(container, 'click', event => {
-	console.info(event);
-});

提示

假如你需要一些 DOM 事件只存在于播放器的生命周期上时，强烈建议使用该函数，以避免造成内存泄漏

query ​

DOM 的查询函数，类似 document.querySelector，但被查询的对象局限于当前播放器内，可以避免同类名的错误

`,5),Ds=i("div",{className:"run-code"},"▶ Run Code",-1),Ss=s(`
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
-
-console.info(art.query('.art-video'));

video ​

快捷返回播放器的 video 元素

`,4),Ps=i("div",{className:"run-code"},"▶ Run Code",-1),ws=s(`
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
-
-console.info(art.video);

cssVar ​

动态获取或设置 css 变量

`,4),fs=i("div",{className:"run-code"},"▶ Run Code",-1),qs=s(`
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.log(art.cssVar('--art-theme'));
-    art.cssVar('--art-theme', 'green');
-    console.log(art.cssVar('--art-theme'));
-});

quality ​

动态设置画质列表

`,4),Rs=i("div",{className:"run-code"},"▶ Run Code",-1),Ns=s(`
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-	quality: [
-		{
-			default: true,
-			html: 'SD 480P',
-			url: '/assets/sample/video.mp4',
-		},
-		{
-			html: 'HD 720P',
-			url: '/assets/sample/video.mp4',
-		},
-	],
-});
-
-art.on('ready', () => {
-	setTimeout(() => {
-		art.quality = [
-			{
-				default: true,
-				html: '1080P',
-				url: '/assets/sample/video.mp4',
-			},
-			{
-				html: '4K',
-				url: '/assets/sample/video.mp4',
-			},
-		];
-	}, 3000);
-})
`,1),Vs=[e,h,t,k,r,E,d,c,g,y,o,b,u,F,m,_,C,v,A,B,T,D,S,P,w,f,q,R,N,V,I,j,x,G,U,z,H,L,O,W,$,M,Q,J,K,X,Y,Z,ss,is,as,ns,ls,ps,es,hs,ts,ks,rs,Es,ds,cs,gs,ys,os,bs,us,Fs,ms,_s,Cs,vs,As,Bs,Ts,Ds,Ss,Ps,ws,fs,qs,Rs,Ns];function Is(js,xs,Gs,Us,zs,Hs){return l(),n("div",null,Vs)}const Ws=a(p,[["render",Is]]);export{Os as __pageData,Ws as default}; diff --git a/docs/document/assets/advanced_property.md.D8Xu-RJa.lean.js b/docs/document/assets/advanced_property.md.D8Xu-RJa.lean.js deleted file mode 100644 index 79008b235..000000000 --- a/docs/document/assets/advanced_property.md.D8Xu-RJa.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const Os=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/property.md","filePath":"advanced/property.md","lastUpdated":1700581325000}'),p={name:"advanced/property.md"},e=s("",5),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",4),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s("",4),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",4),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s("",4),y=i("div",{className:"run-code"},"▶ Run Code",-1),o=s("",4),b=i("div",{className:"run-code"},"▶ Run Code",-1),u=s("",4),F=i("div",{className:"run-code"},"▶ Run Code",-1),m=s("",4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s("",4),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),B=i("div",{className:"run-code"},"▶ Run Code",-1),T=s("",4),D=i("div",{className:"run-code"},"▶ Run Code",-1),S=s("",5),P=i("div",{className:"run-code"},"▶ Run Code",-1),w=s("",4),f=i("div",{className:"run-code"},"▶ Run Code",-1),q=s("",4),R=i("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),V=i("div",{className:"run-code"},"▶ Run Code",-1),I=s("",5),j=i("div",{className:"run-code"},"▶ Run Code",-1),x=s("",4),G=i("div",{className:"run-code"},"▶ Run Code",-1),U=s("",4),z=i("div",{className:"run-code"},"▶ Run Code",-1),H=s("",4),L=i("div",{className:"run-code"},"▶ Run Code",-1),O=s("",5),W=i("div",{className:"run-code"},"▶ Run Code",-1),$=s("",4),M=i("div",{className:"run-code"},"▶ Run Code",-1),Q=s("",5),J=i("div",{className:"run-code"},"▶ Run Code",-1),K=s("",4),X=i("div",{className:"run-code"},"▶ Run Code",-1),Y=s("",4),Z=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s("",4),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s("",5),ps=i("div",{className:"run-code"},"▶ Run Code",-1),es=s("",4),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s("",4),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s("",4),Es=i("div",{className:"run-code"},"▶ Run Code",-1),ds=s("",5),cs=i("div",{className:"run-code"},"▶ Run Code",-1),gs=s("",4),ys=i("div",{className:"run-code"},"▶ Run Code",-1),os=s("",4),bs=i("div",{className:"run-code"},"▶ Run Code",-1),us=s("",4),Fs=i("div",{className:"run-code"},"▶ Run Code",-1),ms=s("",4),_s=i("div",{className:"run-code"},"▶ Run Code",-1),Cs=s("",4),vs=i("div",{className:"run-code"},"▶ Run Code",-1),As=s("",4),Bs=i("div",{className:"run-code"},"▶ Run Code",-1),Ts=s("",5),Ds=i("div",{className:"run-code"},"▶ Run Code",-1),Ss=s("",4),Ps=i("div",{className:"run-code"},"▶ Run Code",-1),ws=s("",4),fs=i("div",{className:"run-code"},"▶ Run Code",-1),qs=s("",4),Rs=i("div",{className:"run-code"},"▶ Run Code",-1),Ns=s("",1),Vs=[e,h,t,k,r,E,d,c,g,y,o,b,u,F,m,_,C,v,A,B,T,D,S,P,w,f,q,R,N,V,I,j,x,G,U,z,H,L,O,W,$,M,Q,J,K,X,Y,Z,ss,is,as,ns,ls,ps,es,hs,ts,ks,rs,Es,ds,cs,gs,ys,os,bs,us,Fs,ms,_s,Cs,vs,As,Bs,Ts,Ds,Ss,Ps,ws,fs,qs,Rs,Ns];function Is(js,xs,Gs,Us,zs,Hs){return l(),n("div",null,Vs)}const Ws=a(p,[["render",Is]]);export{Os as __pageData,Ws as default}; diff --git a/docs/document/assets/app.277c92f5.js b/docs/document/assets/app.277c92f5.js new file mode 100644 index 000000000..ae8d22fb8 --- /dev/null +++ b/docs/document/assets/app.277c92f5.js @@ -0,0 +1 @@ +import{d as p,R as s,a7 as i,u,p as c,k as l,a8 as d,a9 as f,aa as m,ab as h,ac as A,ad as g,ae as P,af as v,ag as y,ah as C,ai as w,aj as R,ak as _,H as b}from"./chunks/framework.5c8808ab.js";import{t as E}from"./chunks/theme.cbe2b3c0.js";function r(e){if(e.extends){const a=r(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const n=r(E),D=p({name:"VitePressApp",setup(){const{site:e}=u();return c(()=>{l(()=>{document.documentElement.lang=e.value.lang,document.documentElement.dir=e.value.dir})}),d(),f(),m(),n.setup&&n.setup(),()=>h(n.Layout)}});async function j(){const e=S(),a=O();a.provide(A,e);const t=g(e.route);return a.provide(P,t),a.component("Content",v),a.component("ClientOnly",y),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),n.enhanceApp&&await n.enhanceApp({app:a,router:e,siteData:C}),{app:a,router:e,data:t}}function O(){return w(D)}function S(){let e=s,a;return R(t=>{let o=_(t);return e&&(a=o),(e||a===o)&&(o=o.replace(/\.js$/,".lean.js")),s&&(e=!1),b(()=>import(o),[])},n.NotFound)}s&&j().then(({app:e,router:a,data:t})=>{a.go().then(()=>{i(a.route,t.site),e.mount("#app")})});export{j as createApp}; diff --git a/docs/document/assets/app.EfI_d4Dp.js b/docs/document/assets/app.EfI_d4Dp.js deleted file mode 100644 index a56eda1b0..000000000 --- a/docs/document/assets/app.EfI_d4Dp.js +++ /dev/null @@ -1,7 +0,0 @@ -import{v as s,a5 as p,a6 as u,a7 as c,a8 as l,a9 as f,aa as d,ab as m,ac as h,ad as A,ae as g,V as v,d as P,u as y,j as C,z as w,af as _,ag as b,ah as E,ai as R}from"./chunks/framework.0i_P4VHR.js";import{t as D}from"./chunks/theme.t8lW09mq.js";function i(e){if(e.extends){const a=i(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const o=i(D),j=P({name:"VitePressApp",setup(){const{site:e}=y();return C(()=>{w(()=>{document.documentElement.lang=e.value.lang,document.documentElement.dir=e.value.dir})}),e.value.router.prefetchLinks&&_(),b(),E(),o.setup&&o.setup(),()=>R(o.Layout)}});async function L(){const e=S(),a=O();a.provide(u,e);const t=c(e.route);return a.provide(l,t),a.component("Content",f),a.component("ClientOnly",d),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),o.enhanceApp&&await o.enhanceApp({app:a,router:e,siteData:m}),{app:a,router:e,data:t}}function O(){return h(j)}function S(){let e=s,a;return A(t=>{let n=g(t),r=null;return n&&(e&&(a=n),(e||a===n)&&(n=n.replace(/\.js$/,".lean.js")),r=v(()=>import(n),__vite__mapDeps([]))),s&&(e=!1),r},o.NotFound)}s&&L().then(({app:e,router:a,data:t})=>{a.go().then(()=>{p(a.route,t.site),e.mount("#app")})});export{L as createApp}; -function __vite__mapDeps(indexes) { - if (!__vite__mapDeps.viteFileDeps) { - __vite__mapDeps.viteFileDeps = [] - } - return indexes.map((i) => __vite__mapDeps.viteFileDeps[i]) -} diff --git a/docs/document/assets/chunks/framework.0i_P4VHR.js b/docs/document/assets/chunks/framework.0i_P4VHR.js deleted file mode 100644 index 3aee96005..000000000 --- a/docs/document/assets/chunks/framework.0i_P4VHR.js +++ /dev/null @@ -1,2 +0,0 @@ -function gi(t,e){const n=new Set(t.split(","));return e?i=>n.has(i.toLowerCase()):i=>n.has(i)}const tt={},he=[],Et=()=>{},gr=()=>!1,Ve=t=>t.charCodeAt(0)===111&&t.charCodeAt(1)===110&&(t.charCodeAt(2)>122||t.charCodeAt(2)<97),xi=t=>t.startsWith("onUpdate:"),rt=Object.assign,yi=(t,e)=>{const n=t.indexOf(e);n>-1&&t.splice(n,1)},xr=Object.prototype.hasOwnProperty,J=(t,e)=>xr.call(t,e),D=Array.isArray,ge=t=>bn(t)==="[object Map]",Us=t=>bn(t)==="[object Set]",q=t=>typeof t=="function",nt=t=>typeof t=="string",Ce=t=>typeof t=="symbol",Z=t=>t!==null&&typeof t=="object",Bs=t=>(Z(t)||q(t))&&q(t.then)&&q(t.catch),Ks=Object.prototype.toString,bn=t=>Ks.call(t),yr=t=>bn(t).slice(8,-1),qs=t=>bn(t)==="[object Object]",vi=t=>nt(t)&&t!=="NaN"&&t[0]!=="-"&&""+parseInt(t,10)===t,Re=gi(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),wn=t=>{const e=Object.create(null);return n=>e[n]||(e[n]=t(n))},vr=/-(\w)/g,Pt=wn(t=>t.replace(vr,(e,n)=>n?n.toUpperCase():"")),_r=/\B([A-Z])/g,ce=wn(t=>t.replace(_r,"-$1").toLowerCase()),Cn=wn(t=>t.charAt(0).toUpperCase()+t.slice(1)),on=wn(t=>t?`on${Cn(t)}`:""),Yt=(t,e)=>!Object.is(t,e),rn=(t,e)=>{for(let n=0;n{Object.defineProperty(t,e,{configurable:!0,enumerable:!1,value:n})},ti=t=>{const e=parseFloat(t);return isNaN(e)?t:e},br=t=>{const e=nt(t)?Number(t):NaN;return isNaN(e)?t:e};let Ki;const Ws=()=>Ki||(Ki=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});function _i(t){if(D(t)){const e={};for(let n=0;n{if(n){const i=n.split(Cr);i.length>1&&(e[i[0].trim()]=i[1].trim())}}),e}function bi(t){let e="";if(nt(t))e=t;else if(D(t))for(let n=0;nnt(t)?t:t==null?"":D(t)||Z(t)&&(t.toString===Ks||!q(t.toString))?JSON.stringify(t,Gs,2):String(t),Gs=(t,e)=>e&&e.__v_isRef?Gs(t,e.value):ge(e)?{[`Map(${e.size})`]:[...e.entries()].reduce((n,[i,s],o)=>(n[Un(i,o)+" =>"]=s,n),{})}:Us(e)?{[`Set(${e.size})`]:[...e.values()].map(n=>Un(n))}:Ce(e)?Un(e):Z(e)&&!D(e)&&!qs(e)?String(e):e,Un=(t,e="")=>{var n;return Ce(t)?`Symbol(${(n=t.description)!=null?n:e})`:t};let vt;class jr{constructor(e=!1){this.detached=e,this._active=!0,this.effects=[],this.cleanups=[],this.parent=vt,!e&&vt&&(this.index=(vt.scopes||(vt.scopes=[])).push(this)-1)}get active(){return this._active}run(e){if(this._active){const n=vt;try{return vt=this,e()}finally{vt=n}}}on(){vt=this}off(){vt=this.parent}stop(e){if(this._active){let n,i;for(n=0,i=this.effects.length;n=2))break;ue(),this._queryings--}return this._dirtyLevel>=2}set dirty(e){this._dirtyLevel=e?3:0}run(){if(this._dirtyLevel=0,!this.active)return this.fn();let e=Wt,n=se;try{return Wt=!0,se=this,this._runnings++,qi(this),this.fn()}finally{Wi(this),this._runnings--,se=n,Wt=e}}stop(){var e;this.active&&(qi(this),Wi(this),(e=this.onStop)==null||e.call(this),this.active=!1)}}function Or(t){return t.value}function qi(t){t._trackId++,t._depsLength=0}function Wi(t){if(t.deps&&t.deps.length>t._depsLength){for(let e=t._depsLength;e{const n=new Map;return n.cleanup=t,n.computed=e,n},fn=new WeakMap,oe=Symbol(""),ii=Symbol("");function xt(t,e,n){if(Wt&&se){let i=fn.get(t);i||fn.set(t,i=new Map);let s=i.get(n);s||i.set(n,s=to(()=>i.delete(n))),Qs(se,s)}}function Nt(t,e,n,i,s,o){const r=fn.get(t);if(!r)return;let l=[];if(e==="clear")l=[...r.values()];else if(n==="length"&&D(t)){const a=Number(i);r.forEach((f,u)=>{(u==="length"||!Ce(u)&&u>=a)&&l.push(f)})}else switch(n!==void 0&&l.push(r.get(n)),e){case"add":D(t)?vi(n)&&l.push(r.get("length")):(l.push(r.get(oe)),ge(t)&&l.push(r.get(ii)));break;case"delete":D(t)||(l.push(r.get(oe)),ge(t)&&l.push(r.get(ii)));break;case"set":ge(t)&&l.push(r.get(oe));break}Ci();for(const a of l)a&&Zs(a,3);Ei()}function Lr(t,e){var n;return(n=fn.get(t))==null?void 0:n.get(e)}const Pr=gi("__proto__,__v_isRef,__isVue"),eo=new Set(Object.getOwnPropertyNames(Symbol).filter(t=>t!=="arguments"&&t!=="caller").map(t=>Symbol[t]).filter(Ce)),zi=Ir();function Ir(){const t={};return["includes","indexOf","lastIndexOf"].forEach(e=>{t[e]=function(...n){const i=X(this);for(let o=0,r=this.length;o{t[e]=function(...n){fe(),Ci();const i=X(this)[e].apply(this,n);return Ei(),ue(),i}}),t}function Fr(t){const e=X(this);return xt(e,"has",t),e.hasOwnProperty(t)}class no{constructor(e=!1,n=!1){this._isReadonly=e,this._shallow=n}get(e,n,i){const s=this._isReadonly,o=this._shallow;if(n==="__v_isReactive")return!s;if(n==="__v_isReadonly")return s;if(n==="__v_isShallow")return o;if(n==="__v_raw")return i===(s?o?Gr:ro:o?oo:so).get(e)||Object.getPrototypeOf(e)===Object.getPrototypeOf(i)?e:void 0;const r=D(e);if(!s){if(r&&J(zi,n))return Reflect.get(zi,n,i);if(n==="hasOwnProperty")return Fr}const l=Reflect.get(e,n,i);return(Ce(n)?eo.has(n):Pr(n))||(s||xt(e,"get",n),o)?l:pt(l)?r&&vi(n)?l:l.value:Z(l)?s?Sn(l):Tn(l):l}}class io extends no{constructor(e=!1){super(!1,e)}set(e,n,i,s){let o=e[n];if(!this._shallow){const a=be(o);if(!un(i)&&!be(i)&&(o=X(o),i=X(i)),!D(e)&&pt(o)&&!pt(i))return a?!1:(o.value=i,!0)}const r=D(e)&&vi(n)?Number(n)t,En=t=>Reflect.getPrototypeOf(t);function Ke(t,e,n=!1,i=!1){t=t.__v_raw;const s=X(t),o=X(e);n||(Yt(e,o)&&xt(s,"get",e),xt(s,"get",o));const{has:r}=En(s),l=i?Ti:n?ji:Fe;if(r.call(s,e))return l(t.get(e));if(r.call(s,o))return l(t.get(o));t!==s&&t.get(e)}function qe(t,e=!1){const n=this.__v_raw,i=X(n),s=X(t);return e||(Yt(t,s)&&xt(i,"has",t),xt(i,"has",s)),t===s?n.has(t):n.has(t)||n.has(s)}function We(t,e=!1){return t=t.__v_raw,!e&&xt(X(t),"iterate",oe),Reflect.get(t,"size",t)}function Gi(t){t=X(t);const e=X(this);return En(e).has.call(e,t)||(e.add(t),Nt(e,"add",t,t)),this}function Yi(t,e){e=X(e);const n=X(this),{has:i,get:s}=En(n);let o=i.call(n,t);o||(t=X(t),o=i.call(n,t));const r=s.call(n,t);return n.set(t,e),o?Yt(e,r)&&Nt(n,"set",t,e):Nt(n,"add",t,e),this}function Ji(t){const e=X(this),{has:n,get:i}=En(e);let s=n.call(e,t);s||(t=X(t),s=n.call(e,t)),i&&i.call(e,t);const o=e.delete(t);return s&&Nt(e,"delete",t,void 0),o}function Xi(){const t=X(this),e=t.size!==0,n=t.clear();return e&&Nt(t,"clear",void 0,void 0),n}function ze(t,e){return function(i,s){const o=this,r=o.__v_raw,l=X(r),a=e?Ti:t?ji:Fe;return!t&&xt(l,"iterate",oe),r.forEach((f,u)=>i.call(s,a(f),a(u),o))}}function Ge(t,e,n){return function(...i){const s=this.__v_raw,o=X(s),r=ge(o),l=t==="entries"||t===Symbol.iterator&&r,a=t==="keys"&&r,f=s[t](...i),u=n?Ti:e?ji:Fe;return!e&&xt(o,"iterate",a?ii:oe),{next(){const{value:d,done:g}=f.next();return g?{value:d,done:g}:{value:l?[u(d[0]),u(d[1])]:u(d),done:g}},[Symbol.iterator](){return this}}}}function $t(t){return function(...e){return t==="delete"?!1:t==="clear"?void 0:this}}function Vr(){const t={get(o){return Ke(this,o)},get size(){return We(this)},has:qe,add:Gi,set:Yi,delete:Ji,clear:Xi,forEach:ze(!1,!1)},e={get(o){return Ke(this,o,!1,!0)},get size(){return We(this)},has:qe,add:Gi,set:Yi,delete:Ji,clear:Xi,forEach:ze(!1,!0)},n={get(o){return Ke(this,o,!0)},get size(){return We(this,!0)},has(o){return qe.call(this,o,!0)},add:$t("add"),set:$t("set"),delete:$t("delete"),clear:$t("clear"),forEach:ze(!0,!1)},i={get(o){return Ke(this,o,!0,!0)},get size(){return We(this,!0)},has(o){return qe.call(this,o,!0)},add:$t("add"),set:$t("set"),delete:$t("delete"),clear:$t("clear"),forEach:ze(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach(o=>{t[o]=Ge(o,!1,!1),n[o]=Ge(o,!0,!1),e[o]=Ge(o,!1,!0),i[o]=Ge(o,!0,!0)}),[t,n,e,i]}const[Dr,Ur,Br,Kr]=Vr();function Si(t,e){const n=e?t?Kr:Br:t?Ur:Dr;return(i,s,o)=>s==="__v_isReactive"?!t:s==="__v_isReadonly"?t:s==="__v_raw"?i:Reflect.get(J(n,s)&&s in i?n:i,s,o)}const qr={get:Si(!1,!1)},Wr={get:Si(!1,!0)},zr={get:Si(!0,!1)},so=new WeakMap,oo=new WeakMap,ro=new WeakMap,Gr=new WeakMap;function Yr(t){switch(t){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function Jr(t){return t.__v_skip||!Object.isExtensible(t)?0:Yr(yr(t))}function Tn(t){return be(t)?t:Ai(t,!1,kr,qr,so)}function Xr(t){return Ai(t,!1,Hr,Wr,oo)}function Sn(t){return Ai(t,!0,$r,zr,ro)}function Ai(t,e,n,i,s){if(!Z(t)||t.__v_raw&&!(e&&t.__v_isReactive))return t;const o=s.get(t);if(o)return o;const r=Jr(t);if(r===0)return t;const l=new Proxy(t,r===2?i:n);return s.set(t,l),l}function xe(t){return be(t)?xe(t.__v_raw):!!(t&&t.__v_isReactive)}function be(t){return!!(t&&t.__v_isReadonly)}function un(t){return!!(t&&t.__v_isShallow)}function lo(t){return xe(t)||be(t)}function X(t){const e=t&&t.__v_raw;return e?X(e):t}function Me(t){return cn(t,"__v_skip",!0),t}const Fe=t=>Z(t)?Tn(t):t,ji=t=>Z(t)?Sn(t):t;class ao{constructor(e,n,i,s){this._setter=n,this.dep=void 0,this.__v_isRef=!0,this.__v_isReadonly=!1,this.effect=new wi(()=>e(this._value),()=>pn(this,1)),this.effect.computed=this,this.effect.active=this._cacheable=!s,this.__v_isReadonly=i}get value(){const e=X(this);return Ri(e),(!e._cacheable||e.effect.dirty)&&Yt(e._value,e._value=e.effect.run())&&pn(e,2),e._value}set value(e){this._setter(e)}get _dirty(){return this.effect.dirty}set _dirty(e){this.effect.dirty=e}}function Qr(t,e,n=!1){let i,s;const o=q(t);return o?(i=t,s=Et):(i=t.get,s=t.set),new ao(i,s,o||!s,n)}function Ri(t){Wt&&se&&(t=X(t),Qs(se,t.dep||(t.dep=to(()=>t.dep=void 0,t instanceof ao?t:void 0))))}function pn(t,e=3,n){t=X(t);const i=t.dep;i&&Zs(i,e)}function pt(t){return!!(t&&t.__v_isRef===!0)}function gt(t){return fo(t,!1)}function co(t){return fo(t,!0)}function fo(t,e){return pt(t)?t:new Zr(t,e)}class Zr{constructor(e,n){this.__v_isShallow=n,this.dep=void 0,this.__v_isRef=!0,this._rawValue=n?e:X(e),this._value=n?e:Fe(e)}get value(){return Ri(this),this._value}set value(e){const n=this.__v_isShallow||un(e)||be(e);e=n?e:X(e),Yt(e,this._rawValue)&&(this._rawValue=e,this._value=n?e:Fe(e),pn(this,3))}}function uo(t){return pt(t)?t.value:t}const tl={get:(t,e,n)=>uo(Reflect.get(t,e,n)),set:(t,e,n,i)=>{const s=t[e];return pt(s)&&!pt(n)?(s.value=n,!0):Reflect.set(t,e,n,i)}};function po(t){return xe(t)?t:new Proxy(t,tl)}class el{constructor(e){this.dep=void 0,this.__v_isRef=!0;const{get:n,set:i}=e(()=>Ri(this),()=>pn(this));this._get=n,this._set=i}get value(){return this._get()}set value(e){this._set(e)}}function nl(t){return new el(t)}class il{constructor(e,n,i){this._object=e,this._key=n,this._defaultValue=i,this.__v_isRef=!0}get value(){const e=this._object[this._key];return e===void 0?this._defaultValue:e}set value(e){this._object[this._key]=e}get dep(){return Lr(X(this._object),this._key)}}class sl{constructor(e){this._getter=e,this.__v_isRef=!0,this.__v_isReadonly=!0}get value(){return this._getter()}}function ol(t,e,n){return pt(t)?t:q(t)?new sl(t):Z(t)&&arguments.length>1?rl(t,e,n):gt(t)}function rl(t,e,n){const i=t[e];return pt(i)?i:new il(t,e,n)}function zt(t,e,n,i){let s;try{s=i?t(...i):t()}catch(o){An(o,e,n)}return s}function Tt(t,e,n,i){if(q(t)){const o=zt(t,e,n,i);return o&&Bs(o)&&o.catch(r=>{An(r,e,n)}),o}const s=[];for(let o=0;o>>1,s=ut[i],o=ke(s);oLt&&ut.splice(e,1)}function fl(t){D(t)?ye.push(...t):(!Ut||!Ut.includes(t,t.allowRecurse?ee+1:ee))&&ye.push(t),ho()}function Qi(t,e,n=Ne?Lt+1:0){for(;nke(n)-ke(i));if(ye.length=0,Ut){Ut.push(...e);return}for(Ut=e,ee=0;eet.id==null?1/0:t.id,ul=(t,e)=>{const n=ke(t)-ke(e);if(n===0){if(t.pre&&!e.pre)return-1;if(e.pre&&!t.pre)return 1}return n};function go(t){si=!1,Ne=!0,ut.sort(ul);try{for(Lt=0;Ltnt(w)?w.trim():w)),d&&(s=n.map(ti))}let l,a=i[l=on(e)]||i[l=on(Pt(e))];!a&&o&&(a=i[l=on(ce(e))]),a&&Tt(a,t,6,s);const f=i[l+"Once"];if(f){if(!t.emitted)t.emitted={};else if(t.emitted[l])return;t.emitted[l]=!0,Tt(f,t,6,s)}}function xo(t,e,n=!1){const i=e.emitsCache,s=i.get(t);if(s!==void 0)return s;const o=t.emits;let r={},l=!1;if(!q(t)){const a=f=>{const u=xo(f,e,!0);u&&(l=!0,rt(r,u))};!n&&e.mixins.length&&e.mixins.forEach(a),t.extends&&a(t.extends),t.mixins&&t.mixins.forEach(a)}return!o&&!l?(Z(t)&&i.set(t,null),null):(D(o)?o.forEach(a=>r[a]=null):rt(r,o),Z(t)&&i.set(t,r),r)}function Rn(t,e){return!t||!Ve(e)?!1:(e=e.slice(2).replace(/Once$/,""),J(t,e[0].toLowerCase()+e.slice(1))||J(t,ce(e))||J(t,e))}let ot=null,Mn=null;function mn(t){const e=ot;return ot=t,Mn=t&&t.type.__scopeId||null,e}function Uc(t){Mn=t}function Bc(){Mn=null}function dl(t,e=ot,n){if(!e||t._n)return t;const i=(...s)=>{i._d&&ps(-1);const o=mn(e);let r;try{r=t(...s)}finally{mn(o),i._d&&ps(1)}return r};return i._n=!0,i._c=!0,i._d=!0,i}function Bn(t){const{type:e,vnode:n,proxy:i,withProxy:s,props:o,propsOptions:[r],slots:l,attrs:a,emit:f,render:u,renderCache:d,data:g,setupState:w,ctx:I,inheritAttrs:M}=t;let H,U;const Y=mn(t);try{if(n.shapeFlag&4){const x=s||i,L=x;H=At(u.call(L,x,d,o,w,g,I)),U=a}else{const x=e;H=At(x.length>1?x(o,{attrs:a,slots:l,emit:f}):x(o,null)),U=e.props?a:ml(a)}}catch(x){Ie.length=0,An(x,t,1),H=ft(_t)}let m=H;if(U&&M!==!1){const x=Object.keys(U),{shapeFlag:L}=m;x.length&&L&7&&(r&&x.some(xi)&&(U=hl(U,r)),m=Jt(m,U))}return n.dirs&&(m=Jt(m),m.dirs=m.dirs?m.dirs.concat(n.dirs):n.dirs),n.transition&&(m.transition=n.transition),H=m,mn(Y),H}const ml=t=>{let e;for(const n in t)(n==="class"||n==="style"||Ve(n))&&((e||(e={}))[n]=t[n]);return e},hl=(t,e)=>{const n={};for(const i in t)(!xi(i)||!(i.slice(9)in e))&&(n[i]=t[i]);return n};function gl(t,e,n){const{props:i,children:s,component:o}=t,{props:r,children:l,patchFlag:a}=e,f=o.emitsOptions;if(e.dirs||e.transition)return!0;if(n&&a>=0){if(a&1024)return!0;if(a&16)return i?Zi(i,r,f):!!r;if(a&8){const u=e.dynamicProps;for(let d=0;dt.__isSuspense;function _o(t,e){e&&e.pendingBranch?D(t)?e.effects.push(...t):e.effects.push(t):fl(t)}const vl=Symbol.for("v-scx"),_l=()=>_e(vl);function bo(t,e){return On(t,null,e)}function Wc(t,e){return On(t,null,{flush:"post"})}const Ye={};function Gt(t,e,n){return On(t,e,n)}function On(t,e,{immediate:n,deep:i,flush:s,once:o,onTrack:r,onTrigger:l}=tt){if(e&&o){const j=e;e=(...F)=>{j(...F),L()}}const a=ct,f=j=>i===!0?j:ie(j,i===!1?1:void 0);let u,d=!1,g=!1;if(pt(t)?(u=()=>t.value,d=un(t)):xe(t)?(u=()=>f(t),d=!0):D(t)?(g=!0,d=t.some(j=>xe(j)||un(j)),u=()=>t.map(j=>{if(pt(j))return j.value;if(xe(j))return f(j);if(q(j))return zt(j,a,2)})):q(t)?e?u=()=>zt(t,a,2):u=()=>(w&&w(),Tt(t,a,3,[I])):u=Et,e&&i){const j=u;u=()=>ie(j())}let w,I=j=>{w=m.onStop=()=>{zt(j,a,4),w=m.onStop=void 0}},M;if(kn)if(I=Et,e?n&&Tt(e,a,3,[u(),g?[]:void 0,I]):u(),s==="sync"){const j=_l();M=j.__watcherHandles||(j.__watcherHandles=[])}else return Et;let H=g?new Array(t.length).fill(Ye):Ye;const U=()=>{if(!(!m.active||!m.dirty))if(e){const j=m.run();(i||d||(g?j.some((F,S)=>Yt(F,H[S])):Yt(j,H)))&&(w&&w(),Tt(e,a,3,[j,H===Ye?void 0:g&&H[0]===Ye?[]:H,I]),H=j)}else m.run()};U.allowRecurse=!!e;let Y;s==="sync"?Y=U:s==="post"?Y=()=>mt(U,a&&a.suspense):(U.pre=!0,a&&(U.id=a.uid),Y=()=>Oi(U));const m=new wi(u,Et,Y),x=Ys(),L=()=>{m.stop(),x&&yi(x.effects,m)};return e?n?U():H=m.run():s==="post"?mt(m.run.bind(m),a&&a.suspense):m.run(),M&&M.push(L),L}function bl(t,e,n){const i=this.proxy,s=nt(t)?t.includes(".")?wo(i,t):()=>i[t]:t.bind(i,i);let o;q(e)?o=e:(o=e.handler,n=e);const r=De(this),l=On(s,o.bind(i),n);return r(),l}function wo(t,e){const n=e.split(".");return()=>{let i=t;for(let s=0;s0){if(n>=e)return t;n++}if(i=i||new Set,i.has(t))return t;if(i.add(t),pt(t))ie(t.value,e,n,i);else if(D(t))for(let s=0;s{ie(s,e,n,i)});else if(qs(t))for(const s in t)ie(t[s],e,n,i);return t}function zc(t,e){if(ot===null)return t;const n=$n(ot)||ot.proxy,i=t.dirs||(t.dirs=[]);for(let s=0;s{t.isMounted=!0}),jo(()=>{t.isUnmounting=!0}),t}const bt=[Function,Array],Co={mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:bt,onEnter:bt,onAfterEnter:bt,onEnterCancelled:bt,onBeforeLeave:bt,onLeave:bt,onAfterLeave:bt,onLeaveCancelled:bt,onBeforeAppear:bt,onAppear:bt,onAfterAppear:bt,onAppearCancelled:bt},Cl={name:"BaseTransition",props:Co,setup(t,{slots:e}){const n=Nn(),i=wl();let s;return()=>{const o=e.default&&To(e.default(),!0);if(!o||!o.length)return;let r=o[0];if(o.length>1){for(const M of o)if(M.type!==_t){r=M;break}}const l=X(t),{mode:a}=l;if(i.isLeaving)return Kn(r);const f=es(r);if(!f)return Kn(r);const u=oi(f,l,i,n);ri(f,u);const d=n.subTree,g=d&&es(d);let w=!1;const{getTransitionKey:I}=f.type;if(I){const M=I();s===void 0?s=M:M!==s&&(s=M,w=!0)}if(g&&g.type!==_t&&(!ne(f,g)||w)){const M=oi(g,l,i,n);if(ri(g,M),a==="out-in")return i.isLeaving=!0,M.afterLeave=()=>{i.isLeaving=!1,n.update.active!==!1&&(n.effect.dirty=!0,n.update())},Kn(r);a==="in-out"&&f.type!==_t&&(M.delayLeave=(H,U,Y)=>{const m=Eo(i,g);m[String(g.key)]=g,H[Bt]=()=>{U(),H[Bt]=void 0,delete u.delayedLeave},u.delayedLeave=Y})}return r}}},El=Cl;function Eo(t,e){const{leavingVNodes:n}=t;let i=n.get(e.type);return i||(i=Object.create(null),n.set(e.type,i)),i}function oi(t,e,n,i){const{appear:s,mode:o,persisted:r=!1,onBeforeEnter:l,onEnter:a,onAfterEnter:f,onEnterCancelled:u,onBeforeLeave:d,onLeave:g,onAfterLeave:w,onLeaveCancelled:I,onBeforeAppear:M,onAppear:H,onAfterAppear:U,onAppearCancelled:Y}=e,m=String(t.key),x=Eo(n,t),L=(S,E)=>{S&&Tt(S,i,9,E)},j=(S,E)=>{const T=E[1];L(S,E),D(S)?S.every(B=>B.length<=1)&&T():S.length<=1&&T()},F={mode:o,persisted:r,beforeEnter(S){let E=l;if(!n.isMounted)if(s)E=M||l;else return;S[Bt]&&S[Bt](!0);const T=x[m];T&&ne(t,T)&&T.el[Bt]&&T.el[Bt](),L(E,[S])},enter(S){let E=a,T=f,B=u;if(!n.isMounted)if(s)E=H||a,T=U||f,B=Y||u;else return;let O=!1;const W=S[Je]=st=>{O||(O=!0,st?L(B,[S]):L(T,[S]),F.delayedLeave&&F.delayedLeave(),S[Je]=void 0)};E?j(E,[S,W]):W()},leave(S,E){const T=String(t.key);if(S[Je]&&S[Je](!0),n.isUnmounting)return E();L(d,[S]);let B=!1;const O=S[Bt]=W=>{B||(B=!0,E(),W?L(I,[S]):L(w,[S]),S[Bt]=void 0,x[T]===t&&delete x[T])};x[T]=t,g?j(g,[S,O]):O()},clone(S){return oi(S,e,n,i)}};return F}function Kn(t){if(Ln(t))return t=Jt(t),t.children=null,t}function es(t){return Ln(t)?t.children?t.children[0]:void 0:t}function ri(t,e){t.shapeFlag&6&&t.component?ri(t.component.subTree,e):t.shapeFlag&128?(t.ssContent.transition=e.clone(t.ssContent),t.ssFallback.transition=e.clone(t.ssFallback)):t.transition=e}function To(t,e=!1,n){let i=[],s=0;for(let o=0;o1)for(let o=0;o!!t.type.__asyncLoader,Ln=t=>t.type.__isKeepAlive;function Tl(t,e){Ao(t,"a",e)}function Sl(t,e){Ao(t,"da",e)}function Ao(t,e,n=ct){const i=t.__wdc||(t.__wdc=()=>{let s=n;for(;s;){if(s.isDeactivated)return;s=s.parent}return t()});if(Pn(e,i,n),n){let s=n.parent;for(;s&&s.parent;)Ln(s.parent.vnode)&&Al(i,e,n,s),s=s.parent}}function Al(t,e,n,i){const s=Pn(e,t,i,!0);In(()=>{yi(i[e],s)},n)}function Pn(t,e,n=ct,i=!1){if(n){const s=n[t]||(n[t]=[]),o=e.__weh||(e.__weh=(...r)=>{if(n.isUnmounted)return;fe();const l=De(n),a=Tt(e,n,t,r);return l(),ue(),a});return i?s.unshift(o):s.push(o),o}}const kt=t=>(e,n=ct)=>(!kn||t==="sp")&&Pn(t,(...i)=>e(...i),n),jl=kt("bm"),Ee=kt("m"),Rl=kt("bu"),Ml=kt("u"),jo=kt("bum"),In=kt("um"),Ol=kt("sp"),Ll=kt("rtg"),Pl=kt("rtc");function Il(t,e=ct){Pn("ec",t,e)}function Gc(t,e,n,i){let s;const o=n&&n[i];if(D(t)||nt(t)){s=new Array(t.length);for(let r=0,l=t.length;re(r,l,void 0,o&&o[l]));else{const r=Object.keys(t);s=new Array(r.length);for(let l=0,a=r.length;lyn(e)?!(e.type===_t||e.type===ht&&!Ro(e.children)):!0)?t:null}function Jc(t,e){const n={};for(const i in t)n[e&&/[A-Z]/.test(i)?`on:${i}`:on(i)]=t[i];return n}const li=t=>t?Wo(t)?$n(t)||t.proxy:li(t.parent):null,Oe=rt(Object.create(null),{$:t=>t,$el:t=>t.vnode.el,$data:t=>t.data,$props:t=>t.props,$attrs:t=>t.attrs,$slots:t=>t.slots,$refs:t=>t.refs,$parent:t=>li(t.parent),$root:t=>li(t.root),$emit:t=>t.emit,$options:t=>Pi(t),$forceUpdate:t=>t.f||(t.f=()=>{t.effect.dirty=!0,Oi(t.update)}),$nextTick:t=>t.n||(t.n=jn.bind(t.proxy)),$watch:t=>bl.bind(t)}),qn=(t,e)=>t!==tt&&!t.__isScriptSetup&&J(t,e),Fl={get({_:t},e){const{ctx:n,setupState:i,data:s,props:o,accessCache:r,type:l,appContext:a}=t;let f;if(e[0]!=="$"){const w=r[e];if(w!==void 0)switch(w){case 1:return i[e];case 2:return s[e];case 4:return n[e];case 3:return o[e]}else{if(qn(i,e))return r[e]=1,i[e];if(s!==tt&&J(s,e))return r[e]=2,s[e];if((f=t.propsOptions[0])&&J(f,e))return r[e]=3,o[e];if(n!==tt&&J(n,e))return r[e]=4,n[e];ai&&(r[e]=0)}}const u=Oe[e];let d,g;if(u)return e==="$attrs"&&xt(t,"get",e),u(t);if((d=l.__cssModules)&&(d=d[e]))return d;if(n!==tt&&J(n,e))return r[e]=4,n[e];if(g=a.config.globalProperties,J(g,e))return g[e]},set({_:t},e,n){const{data:i,setupState:s,ctx:o}=t;return qn(s,e)?(s[e]=n,!0):i!==tt&&J(i,e)?(i[e]=n,!0):J(t.props,e)||e[0]==="$"&&e.slice(1)in t?!1:(o[e]=n,!0)},has({_:{data:t,setupState:e,accessCache:n,ctx:i,appContext:s,propsOptions:o}},r){let l;return!!n[r]||t!==tt&&J(t,r)||qn(e,r)||(l=o[0])&&J(l,r)||J(i,r)||J(Oe,r)||J(s.config.globalProperties,r)},defineProperty(t,e,n){return n.get!=null?t._.accessCache[e]=0:J(n,"value")&&this.set(t,e,n.value,null),Reflect.defineProperty(t,e,n)}};function Xc(){return Nl().slots}function Nl(){const t=Nn();return t.setupContext||(t.setupContext=Go(t))}function ns(t){return D(t)?t.reduce((e,n)=>(e[n]=null,e),{}):t}let ai=!0;function kl(t){const e=Pi(t),n=t.proxy,i=t.ctx;ai=!1,e.beforeCreate&&is(e.beforeCreate,t,"bc");const{data:s,computed:o,methods:r,watch:l,provide:a,inject:f,created:u,beforeMount:d,mounted:g,beforeUpdate:w,updated:I,activated:M,deactivated:H,beforeDestroy:U,beforeUnmount:Y,destroyed:m,unmounted:x,render:L,renderTracked:j,renderTriggered:F,errorCaptured:S,serverPrefetch:E,expose:T,inheritAttrs:B,components:O,directives:W,filters:st}=e;if(f&&$l(f,i,null),r)for(const G in r){const k=r[G];q(k)&&(i[G]=k.bind(n))}if(s){const G=s.call(n,n);Z(G)&&(t.data=Tn(G))}if(ai=!0,o)for(const G in o){const k=o[G],It=q(k)?k.bind(n,n):q(k.get)?k.get.bind(n,n):Et,Ue=!q(k)&&q(k.set)?k.set.bind(n):Et,Xt=it({get:It,set:Ue});Object.defineProperty(i,G,{enumerable:!0,configurable:!0,get:()=>Xt.value,set:Rt=>Xt.value=Rt})}if(l)for(const G in l)Mo(l[G],i,n,G);if(a){const G=q(a)?a.call(n):a;Reflect.ownKeys(G).forEach(k=>{Kl(k,G[k])})}u&&is(u,t,"c");function $(G,k){D(k)?k.forEach(It=>G(It.bind(n))):k&&G(k.bind(n))}if($(jl,d),$(Ee,g),$(Rl,w),$(Ml,I),$(Tl,M),$(Sl,H),$(Il,S),$(Pl,j),$(Ll,F),$(jo,Y),$(In,x),$(Ol,E),D(T))if(T.length){const G=t.exposed||(t.exposed={});T.forEach(k=>{Object.defineProperty(G,k,{get:()=>n[k],set:It=>n[k]=It})})}else t.exposed||(t.exposed={});L&&t.render===Et&&(t.render=L),B!=null&&(t.inheritAttrs=B),O&&(t.components=O),W&&(t.directives=W)}function $l(t,e,n=Et){D(t)&&(t=ci(t));for(const i in t){const s=t[i];let o;Z(s)?"default"in s?o=_e(s.from||i,s.default,!0):o=_e(s.from||i):o=_e(s),pt(o)?Object.defineProperty(e,i,{enumerable:!0,configurable:!0,get:()=>o.value,set:r=>o.value=r}):e[i]=o}}function is(t,e,n){Tt(D(t)?t.map(i=>i.bind(e.proxy)):t.bind(e.proxy),e,n)}function Mo(t,e,n,i){const s=i.includes(".")?wo(n,i):()=>n[i];if(nt(t)){const o=e[t];q(o)&&Gt(s,o)}else if(q(t))Gt(s,t.bind(n));else if(Z(t))if(D(t))t.forEach(o=>Mo(o,e,n,i));else{const o=q(t.handler)?t.handler.bind(n):e[t.handler];q(o)&&Gt(s,o,t)}}function Pi(t){const e=t.type,{mixins:n,extends:i}=e,{mixins:s,optionsCache:o,config:{optionMergeStrategies:r}}=t.appContext,l=o.get(e);let a;return l?a=l:!s.length&&!n&&!i?a=e:(a={},s.length&&s.forEach(f=>hn(a,f,r,!0)),hn(a,e,r)),Z(e)&&o.set(e,a),a}function hn(t,e,n,i=!1){const{mixins:s,extends:o}=e;o&&hn(t,o,n,!0),s&&s.forEach(r=>hn(t,r,n,!0));for(const r in e)if(!(i&&r==="expose")){const l=Hl[r]||n&&n[r];t[r]=l?l(t[r],e[r]):e[r]}return t}const Hl={data:ss,props:os,emits:os,methods:je,computed:je,beforeCreate:dt,created:dt,beforeMount:dt,mounted:dt,beforeUpdate:dt,updated:dt,beforeDestroy:dt,beforeUnmount:dt,destroyed:dt,unmounted:dt,activated:dt,deactivated:dt,errorCaptured:dt,serverPrefetch:dt,components:je,directives:je,watch:Dl,provide:ss,inject:Vl};function ss(t,e){return e?t?function(){return rt(q(t)?t.call(this,this):t,q(e)?e.call(this,this):e)}:e:t}function Vl(t,e){return je(ci(t),ci(e))}function ci(t){if(D(t)){const e={};for(let n=0;n1)return n&&q(e)?e.call(i&&i.proxy):e}}function ql(t,e,n,i=!1){const s={},o={};cn(o,Fn,1),t.propsDefaults=Object.create(null),Lo(t,e,s,o);for(const r in t.propsOptions[0])r in s||(s[r]=void 0);n?t.props=i?s:Xr(s):t.type.props?t.props=s:t.props=o,t.attrs=o}function Wl(t,e,n,i){const{props:s,attrs:o,vnode:{patchFlag:r}}=t,l=X(s),[a]=t.propsOptions;let f=!1;if((i||r>0)&&!(r&16)){if(r&8){const u=t.vnode.dynamicProps;for(let d=0;d{a=!0;const[g,w]=Po(d,e,!0);rt(r,g),w&&l.push(...w)};!n&&e.mixins.length&&e.mixins.forEach(u),t.extends&&u(t.extends),t.mixins&&t.mixins.forEach(u)}if(!o&&!a)return Z(t)&&i.set(t,he),he;if(D(o))for(let u=0;u-1,w[1]=M<0||I-1||J(w,"default"))&&l.push(d)}}}const f=[r,l];return Z(t)&&i.set(t,f),f}function rs(t){return t[0]!=="$"}function ls(t){const e=t&&t.toString().match(/^\s*(function|class) (\w+)/);return e?e[2]:t===null?"null":""}function as(t,e){return ls(t)===ls(e)}function cs(t,e){return D(e)?e.findIndex(n=>as(n,t)):q(e)&&as(e,t)?0:-1}const Io=t=>t[0]==="_"||t==="$stable",Ii=t=>D(t)?t.map(At):[At(t)],zl=(t,e,n)=>{if(e._n)return e;const i=dl((...s)=>Ii(e(...s)),n);return i._c=!1,i},Fo=(t,e,n)=>{const i=t._ctx;for(const s in t){if(Io(s))continue;const o=t[s];if(q(o))e[s]=zl(s,o,i);else if(o!=null){const r=Ii(o);e[s]=()=>r}}},No=(t,e)=>{const n=Ii(e);t.slots.default=()=>n},Gl=(t,e)=>{if(t.vnode.shapeFlag&32){const n=e._;n?(t.slots=X(e),cn(e,"_",n)):Fo(e,t.slots={})}else t.slots={},e&&No(t,e);cn(t.slots,Fn,1)},Yl=(t,e,n)=>{const{vnode:i,slots:s}=t;let o=!0,r=tt;if(i.shapeFlag&32){const l=e._;l?n&&l===1?o=!1:(rt(s,e),!n&&l===1&&delete s._):(o=!e.$stable,Fo(e,s)),r=e}else e&&(No(t,e),r={default:1});if(o)for(const l in s)!Io(l)&&r[l]==null&&delete s[l]};function xn(t,e,n,i,s=!1){if(D(t)){t.forEach((g,w)=>xn(g,e&&(D(e)?e[w]:e),n,i,s));return}if(ve(i)&&!s)return;const o=i.shapeFlag&4?$n(i.component)||i.component.proxy:i.el,r=s?null:o,{i:l,r:a}=t,f=e&&e.r,u=l.refs===tt?l.refs={}:l.refs,d=l.setupState;if(f!=null&&f!==a&&(nt(f)?(u[f]=null,J(d,f)&&(d[f]=null)):pt(f)&&(f.value=null)),q(a))zt(a,l,12,[r,u]);else{const g=nt(a),w=pt(a);if(g||w){const I=()=>{if(t.f){const M=g?J(d,a)?d[a]:u[a]:a.value;s?D(M)&&yi(M,o):D(M)?M.includes(o)||M.push(o):g?(u[a]=[o],J(d,a)&&(d[a]=u[a])):(a.value=[o],t.k&&(u[t.k]=a.value))}else g?(u[a]=r,J(d,a)&&(d[a]=r)):w&&(a.value=r,t.k&&(u[t.k]=r))};r?(I.id=-1,mt(I,n)):I()}}}let Ht=!1;const Jl=t=>t.namespaceURI.includes("svg")&&t.tagName!=="foreignObject",Xl=t=>t.namespaceURI.includes("MathML"),Xe=t=>{if(Jl(t))return"svg";if(Xl(t))return"mathml"},Qe=t=>t.nodeType===8;function Ql(t){const{mt:e,p:n,o:{patchProp:i,createText:s,nextSibling:o,parentNode:r,remove:l,insert:a,createComment:f}}=t,u=(m,x)=>{if(!x.hasChildNodes()){n(null,m,x),dn(),x._vnode=m;return}Ht=!1,d(x.firstChild,m,null,null,null),dn(),x._vnode=m,Ht&&console.error("Hydration completed but contains mismatches.")},d=(m,x,L,j,F,S=!1)=>{const E=Qe(m)&&m.data==="[",T=()=>M(m,x,L,j,F,E),{type:B,ref:O,shapeFlag:W,patchFlag:st}=x;let at=m.nodeType;x.el=m,st===-2&&(S=!1,x.dynamicChildren=null);let $=null;switch(B){case we:at!==3?x.children===""?(a(x.el=s(""),r(m),m),$=m):$=T():(m.data!==x.children&&(Ht=!0,m.data=x.children),$=o(m));break;case _t:Y(m)?($=o(m),U(x.el=m.content.firstChild,m,L)):at!==8||E?$=T():$=o(m);break;case Pe:if(E&&(m=o(m),at=m.nodeType),at===1||at===3){$=m;const G=!x.children.length;for(let k=0;k{S=S||!!x.dynamicChildren;const{type:E,props:T,patchFlag:B,shapeFlag:O,dirs:W,transition:st}=x,at=E==="input"||E==="option";if(at||B!==-1){W&&Ot(x,null,L,"created");let $=!1;if(Y(m)){$=ko(j,st)&&L&&L.vnode.props&&L.vnode.props.appear;const k=m.content.firstChild;$&&st.beforeEnter(k),U(k,m,L),x.el=m=k}if(O&16&&!(T&&(T.innerHTML||T.textContent))){let k=w(m.firstChild,x,m,L,j,F,S);for(;k;){Ht=!0;const It=k;k=k.nextSibling,l(It)}}else O&8&&m.textContent!==x.children&&(Ht=!0,m.textContent=x.children);if(T)if(at||!S||B&48)for(const k in T)(at&&(k.endsWith("value")||k==="indeterminate")||Ve(k)&&!Re(k)||k[0]===".")&&i(m,k,null,T[k],void 0,void 0,L);else T.onClick&&i(m,"onClick",null,T.onClick,void 0,void 0,L);let G;(G=T&&T.onVnodeBeforeMount)&&wt(G,L,x),W&&Ot(x,null,L,"beforeMount"),((G=T&&T.onVnodeMounted)||W||$)&&_o(()=>{G&&wt(G,L,x),$&&st.enter(m),W&&Ot(x,null,L,"mounted")},j)}return m.nextSibling},w=(m,x,L,j,F,S,E)=>{E=E||!!x.dynamicChildren;const T=x.children,B=T.length;for(let O=0;O{const{slotScopeIds:E}=x;E&&(F=F?F.concat(E):E);const T=r(m),B=w(o(m),x,T,L,j,F,S);return B&&Qe(B)&&B.data==="]"?o(x.anchor=B):(Ht=!0,a(x.anchor=f("]"),T,B),B)},M=(m,x,L,j,F,S)=>{if(Ht=!0,x.el=null,S){const B=H(m);for(;;){const O=o(m);if(O&&O!==B)l(O);else break}}const E=o(m),T=r(m);return l(m),n(null,x,T,E,L,j,Xe(T),F),E},H=(m,x="[",L="]")=>{let j=0;for(;m;)if(m=o(m),m&&Qe(m)&&(m.data===x&&j++,m.data===L)){if(j===0)return o(m);j--}return m},U=(m,x,L)=>{const j=x.parentNode;j&&j.replaceChild(m,x);let F=L;for(;F;)F.vnode.el===x&&(F.vnode.el=F.subTree.el=m),F=F.parent},Y=m=>m.nodeType===1&&m.tagName.toLowerCase()==="template";return[u,d]}const mt=_o;function Zl(t){return ta(t,Ql)}function ta(t,e){const n=Ws();n.__VUE__=!0;const{insert:i,remove:s,patchProp:o,createElement:r,createText:l,createComment:a,setText:f,setElementText:u,parentNode:d,nextSibling:g,setScopeId:w=Et,insertStaticContent:I}=t,M=(c,p,h,y=null,v=null,C=null,R=void 0,b=null,A=!!p.dynamicChildren)=>{if(c===p)return;c&&!ne(c,p)&&(y=Be(c),Rt(c,v,C,!0),c=null),p.patchFlag===-2&&(A=!1,p.dynamicChildren=null);const{type:_,ref:P,shapeFlag:V}=p;switch(_){case we:H(c,p,h,y);break;case _t:U(c,p,h,y);break;case Pe:c==null&&Y(p,h,y,R);break;case ht:O(c,p,h,y,v,C,R,b,A);break;default:V&1?L(c,p,h,y,v,C,R,b,A):V&6?W(c,p,h,y,v,C,R,b,A):(V&64||V&128)&&_.process(c,p,h,y,v,C,R,b,A,pe)}P!=null&&v&&xn(P,c&&c.ref,C,p||c,!p)},H=(c,p,h,y)=>{if(c==null)i(p.el=l(p.children),h,y);else{const v=p.el=c.el;p.children!==c.children&&f(v,p.children)}},U=(c,p,h,y)=>{c==null?i(p.el=a(p.children||""),h,y):p.el=c.el},Y=(c,p,h,y)=>{[c.el,c.anchor]=I(c.children,p,h,y,c.el,c.anchor)},m=({el:c,anchor:p},h,y)=>{let v;for(;c&&c!==p;)v=g(c),i(c,h,y),c=v;i(p,h,y)},x=({el:c,anchor:p})=>{let h;for(;c&&c!==p;)h=g(c),s(c),c=h;s(p)},L=(c,p,h,y,v,C,R,b,A)=>{p.type==="svg"?R="svg":p.type==="math"&&(R="mathml"),c==null?j(p,h,y,v,C,R,b,A):E(c,p,v,C,R,b,A)},j=(c,p,h,y,v,C,R,b)=>{let A,_;const{props:P,shapeFlag:V,transition:N,dirs:K}=c;if(A=c.el=r(c.type,C,P&&P.is,P),V&8?u(A,c.children):V&16&&S(c.children,A,null,y,v,Wn(c,C),R,b),K&&Ot(c,null,y,"created"),F(A,c,c.scopeId,R,y),P){for(const Q in P)Q!=="value"&&!Re(Q)&&o(A,Q,null,P[Q],C,c.children,y,v,Ft);"value"in P&&o(A,"value",null,P.value,C),(_=P.onVnodeBeforeMount)&&wt(_,y,c)}K&&Ot(c,null,y,"beforeMount");const z=ko(v,N);z&&N.beforeEnter(A),i(A,p,h),((_=P&&P.onVnodeMounted)||z||K)&&mt(()=>{_&&wt(_,y,c),z&&N.enter(A),K&&Ot(c,null,y,"mounted")},v)},F=(c,p,h,y,v)=>{if(h&&w(c,h),y)for(let C=0;C{for(let _=A;_{const b=p.el=c.el;let{patchFlag:A,dynamicChildren:_,dirs:P}=p;A|=c.patchFlag&16;const V=c.props||tt,N=p.props||tt;let K;if(h&&Qt(h,!1),(K=N.onVnodeBeforeUpdate)&&wt(K,h,p,c),P&&Ot(p,c,h,"beforeUpdate"),h&&Qt(h,!0),_?T(c.dynamicChildren,_,b,h,y,Wn(p,v),C):R||k(c,p,b,null,h,y,Wn(p,v),C,!1),A>0){if(A&16)B(b,p,V,N,h,y,v);else if(A&2&&V.class!==N.class&&o(b,"class",null,N.class,v),A&4&&o(b,"style",V.style,N.style,v),A&8){const z=p.dynamicProps;for(let Q=0;Q{K&&wt(K,h,p,c),P&&Ot(p,c,h,"updated")},y)},T=(c,p,h,y,v,C,R)=>{for(let b=0;b{if(h!==y){if(h!==tt)for(const b in h)!Re(b)&&!(b in y)&&o(c,b,h[b],null,R,p.children,v,C,Ft);for(const b in y){if(Re(b))continue;const A=y[b],_=h[b];A!==_&&b!=="value"&&o(c,b,_,A,R,p.children,v,C,Ft)}"value"in y&&o(c,"value",h.value,y.value,R)}},O=(c,p,h,y,v,C,R,b,A)=>{const _=p.el=c?c.el:l(""),P=p.anchor=c?c.anchor:l("");let{patchFlag:V,dynamicChildren:N,slotScopeIds:K}=p;K&&(b=b?b.concat(K):K),c==null?(i(_,h,y),i(P,h,y),S(p.children||[],h,P,v,C,R,b,A)):V>0&&V&64&&N&&c.dynamicChildren?(T(c.dynamicChildren,N,h,v,C,R,b),(p.key!=null||v&&p===v.subTree)&&Fi(c,p,!0)):k(c,p,h,P,v,C,R,b,A)},W=(c,p,h,y,v,C,R,b,A)=>{p.slotScopeIds=b,c==null?p.shapeFlag&512?v.ctx.activate(p,h,y,R,A):st(p,h,y,v,C,R,A):at(c,p,A)},st=(c,p,h,y,v,C,R)=>{const b=c.component=ua(c,y,v);if(Ln(c)&&(b.ctx.renderer=pe),pa(b),b.asyncDep){if(v&&v.registerDep(b,$),!c.el){const A=b.subTree=ft(_t);U(null,A,p,h)}}else $(b,c,p,h,v,C,R)},at=(c,p,h)=>{const y=p.component=c.component;if(gl(c,p,h))if(y.asyncDep&&!y.asyncResolved){G(y,p,h);return}else y.next=p,cl(y.update),y.effect.dirty=!0,y.update();else p.el=c.el,y.vnode=p},$=(c,p,h,y,v,C,R)=>{const b=()=>{if(c.isMounted){let{next:P,bu:V,u:N,parent:K,vnode:z}=c;{const de=$o(c);if(de){P&&(P.el=z.el,G(c,P,R)),de.asyncDep.then(()=>{c.isUnmounted||b()});return}}let Q=P,et;Qt(c,!1),P?(P.el=z.el,G(c,P,R)):P=z,V&&rn(V),(et=P.props&&P.props.onVnodeBeforeUpdate)&&wt(et,K,P,z),Qt(c,!0);const lt=Bn(c),St=c.subTree;c.subTree=lt,M(St,lt,d(St.el),Be(St),c,v,C),P.el=lt.el,Q===null&&xl(c,lt.el),N&&mt(N,v),(et=P.props&&P.props.onVnodeUpdated)&&mt(()=>wt(et,K,P,z),v)}else{let P;const{el:V,props:N}=p,{bm:K,m:z,parent:Q}=c,et=ve(p);if(Qt(c,!1),K&&rn(K),!et&&(P=N&&N.onVnodeBeforeMount)&&wt(P,Q,p),Qt(c,!0),V&&Dn){const lt=()=>{c.subTree=Bn(c),Dn(V,c.subTree,c,v,null)};et?p.type.__asyncLoader().then(()=>!c.isUnmounted&<()):lt()}else{const lt=c.subTree=Bn(c);M(null,lt,h,y,c,v,C),p.el=lt.el}if(z&&mt(z,v),!et&&(P=N&&N.onVnodeMounted)){const lt=p;mt(()=>wt(P,Q,lt),v)}(p.shapeFlag&256||Q&&ve(Q.vnode)&&Q.vnode.shapeFlag&256)&&c.a&&mt(c.a,v),c.isMounted=!0,p=h=y=null}},A=c.effect=new wi(b,Et,()=>Oi(_),c.scope),_=c.update=()=>{A.dirty&&A.run()};_.id=c.uid,Qt(c,!0),_()},G=(c,p,h)=>{p.component=c;const y=c.vnode.props;c.vnode=p,c.next=null,Wl(c,p.props,y,h),Yl(c,p.children,h),fe(),Qi(c),ue()},k=(c,p,h,y,v,C,R,b,A=!1)=>{const _=c&&c.children,P=c?c.shapeFlag:0,V=p.children,{patchFlag:N,shapeFlag:K}=p;if(N>0){if(N&128){Ue(_,V,h,y,v,C,R,b,A);return}else if(N&256){It(_,V,h,y,v,C,R,b,A);return}}K&8?(P&16&&Ft(_,v,C),V!==_&&u(h,V)):P&16?K&16?Ue(_,V,h,y,v,C,R,b,A):Ft(_,v,C,!0):(P&8&&u(h,""),K&16&&S(V,h,y,v,C,R,b,A))},It=(c,p,h,y,v,C,R,b,A)=>{c=c||he,p=p||he;const _=c.length,P=p.length,V=Math.min(_,P);let N;for(N=0;NP?Ft(c,v,C,!0,!1,V):S(p,h,y,v,C,R,b,A,V)},Ue=(c,p,h,y,v,C,R,b,A)=>{let _=0;const P=p.length;let V=c.length-1,N=P-1;for(;_<=V&&_<=N;){const K=c[_],z=p[_]=A?Kt(p[_]):At(p[_]);if(ne(K,z))M(K,z,h,null,v,C,R,b,A);else break;_++}for(;_<=V&&_<=N;){const K=c[V],z=p[N]=A?Kt(p[N]):At(p[N]);if(ne(K,z))M(K,z,h,null,v,C,R,b,A);else break;V--,N--}if(_>V){if(_<=N){const K=N+1,z=KN)for(;_<=V;)Rt(c[_],v,C,!0),_++;else{const K=_,z=_,Q=new Map;for(_=z;_<=N;_++){const yt=p[_]=A?Kt(p[_]):At(p[_]);yt.key!=null&&Q.set(yt.key,_)}let et,lt=0;const St=N-z+1;let de=!1,Di=0;const Te=new Array(St);for(_=0;_=St){Rt(yt,v,C,!0);continue}let Mt;if(yt.key!=null)Mt=Q.get(yt.key);else for(et=z;et<=N;et++)if(Te[et-z]===0&&ne(yt,p[et])){Mt=et;break}Mt===void 0?Rt(yt,v,C,!0):(Te[Mt-z]=_+1,Mt>=Di?Di=Mt:de=!0,M(yt,p[Mt],h,null,v,C,R,b,A),lt++)}const Ui=de?ea(Te):he;for(et=Ui.length-1,_=St-1;_>=0;_--){const yt=z+_,Mt=p[yt],Bi=yt+1{const{el:C,type:R,transition:b,children:A,shapeFlag:_}=c;if(_&6){Xt(c.component.subTree,p,h,y);return}if(_&128){c.suspense.move(p,h,y);return}if(_&64){R.move(c,p,h,pe);return}if(R===ht){i(C,p,h);for(let V=0;Vb.enter(C),v);else{const{leave:V,delayLeave:N,afterLeave:K}=b,z=()=>i(C,p,h),Q=()=>{V(C,()=>{z(),K&&K()})};N?N(C,z,Q):Q()}else i(C,p,h)},Rt=(c,p,h,y=!1,v=!1)=>{const{type:C,props:R,ref:b,children:A,dynamicChildren:_,shapeFlag:P,patchFlag:V,dirs:N}=c;if(b!=null&&xn(b,null,h,c,!0),P&256){p.ctx.deactivate(c);return}const K=P&1&&N,z=!ve(c);let Q;if(z&&(Q=R&&R.onVnodeBeforeUnmount)&&wt(Q,p,c),P&6)hr(c.component,h,y);else{if(P&128){c.suspense.unmount(h,y);return}K&&Ot(c,null,p,"beforeUnmount"),P&64?c.type.remove(c,p,h,v,pe,y):_&&(C!==ht||V>0&&V&64)?Ft(_,p,h,!1,!0):(C===ht&&V&384||!v&&P&16)&&Ft(A,p,h),y&&Hi(c)}(z&&(Q=R&&R.onVnodeUnmounted)||K)&&mt(()=>{Q&&wt(Q,p,c),K&&Ot(c,null,p,"unmounted")},h)},Hi=c=>{const{type:p,el:h,anchor:y,transition:v}=c;if(p===ht){mr(h,y);return}if(p===Pe){x(c);return}const C=()=>{s(h),v&&!v.persisted&&v.afterLeave&&v.afterLeave()};if(c.shapeFlag&1&&v&&!v.persisted){const{leave:R,delayLeave:b}=v,A=()=>R(h,C);b?b(c.el,C,A):A()}else C()},mr=(c,p)=>{let h;for(;c!==p;)h=g(c),s(c),c=h;s(p)},hr=(c,p,h)=>{const{bum:y,scope:v,update:C,subTree:R,um:b}=c;y&&rn(y),v.stop(),C&&(C.active=!1,Rt(R,c,p,h)),b&&mt(b,p),mt(()=>{c.isUnmounted=!0},p),p&&p.pendingBranch&&!p.isUnmounted&&c.asyncDep&&!c.asyncResolved&&c.suspenseId===p.pendingId&&(p.deps--,p.deps===0&&p.resolve())},Ft=(c,p,h,y=!1,v=!1,C=0)=>{for(let R=C;Rc.shapeFlag&6?Be(c.component.subTree):c.shapeFlag&128?c.suspense.next():g(c.anchor||c.el);let Hn=!1;const Vi=(c,p,h)=>{c==null?p._vnode&&Rt(p._vnode,null,null,!0):M(p._vnode||null,c,p,null,null,null,h),Hn||(Hn=!0,Qi(),dn(),Hn=!1),p._vnode=c},pe={p:M,um:Rt,m:Xt,r:Hi,mt:st,mc:S,pc:k,pbc:T,n:Be,o:t};let Vn,Dn;return e&&([Vn,Dn]=e(pe)),{render:Vi,hydrate:Vn,createApp:Bl(Vi,Vn)}}function Wn({type:t,props:e},n){return n==="svg"&&t==="foreignObject"||n==="mathml"&&t==="annotation-xml"&&e&&e.encoding&&e.encoding.includes("html")?void 0:n}function Qt({effect:t,update:e},n){t.allowRecurse=e.allowRecurse=n}function ko(t,e){return(!t||t&&!t.pendingBranch)&&e&&!e.persisted}function Fi(t,e,n=!1){const i=t.children,s=e.children;if(D(i)&&D(s))for(let o=0;o>1,t[n[l]]0&&(e[i]=n[o-1]),n[o]=i)}}for(o=n.length,r=n[o-1];o-- >0;)n[o]=r,r=e[r];return n}function $o(t){const e=t.subTree.component;if(e)return e.asyncDep&&!e.asyncResolved?e:$o(e)}const na=t=>t.__isTeleport,Le=t=>t&&(t.disabled||t.disabled===""),fs=t=>typeof SVGElement<"u"&&t instanceof SVGElement,us=t=>typeof MathMLElement=="function"&&t instanceof MathMLElement,ui=(t,e)=>{const n=t&&t.to;return nt(n)?e?e(n):null:n},ia={name:"Teleport",__isTeleport:!0,process(t,e,n,i,s,o,r,l,a,f){const{mc:u,pc:d,pbc:g,o:{insert:w,querySelector:I,createText:M,createComment:H}}=f,U=Le(e.props);let{shapeFlag:Y,children:m,dynamicChildren:x}=e;if(t==null){const L=e.el=M(""),j=e.anchor=M("");w(L,n,i),w(j,n,i);const F=e.target=ui(e.props,I),S=e.targetAnchor=M("");F&&(w(S,F),r==="svg"||fs(F)?r="svg":(r==="mathml"||us(F))&&(r="mathml"));const E=(T,B)=>{Y&16&&u(m,T,B,s,o,r,l,a)};U?E(n,j):F&&E(F,S)}else{e.el=t.el;const L=e.anchor=t.anchor,j=e.target=t.target,F=e.targetAnchor=t.targetAnchor,S=Le(t.props),E=S?n:j,T=S?L:F;if(r==="svg"||fs(j)?r="svg":(r==="mathml"||us(j))&&(r="mathml"),x?(g(t.dynamicChildren,x,E,s,o,r,l),Fi(t,e,!0)):a||d(t,e,E,T,s,o,r,l,!1),U)S?e.props&&t.props&&e.props.to!==t.props.to&&(e.props.to=t.props.to):Ze(e,n,L,f,1);else if((e.props&&e.props.to)!==(t.props&&t.props.to)){const B=e.target=ui(e.props,I);B&&Ze(e,B,null,f,0)}else S&&Ze(e,j,F,f,1)}Ho(e)},remove(t,e,n,i,{um:s,o:{remove:o}},r){const{shapeFlag:l,children:a,anchor:f,targetAnchor:u,target:d,props:g}=t;if(d&&o(u),r&&o(f),l&16){const w=r||!Le(g);for(let I=0;I0?jt||he:null,oa(),$e>0&&jt&&jt.push(t),t}function Zc(t,e,n,i,s,o){return Do(Ko(t,e,n,i,s,o,!0))}function Uo(t,e,n,i,s){return Do(ft(t,e,n,i,s,!0))}function yn(t){return t?t.__v_isVNode===!0:!1}function ne(t,e){return t.type===e.type&&t.key===e.key}const Fn="__vInternal",Bo=({key:t})=>t??null,ln=({ref:t,ref_key:e,ref_for:n})=>(typeof t=="number"&&(t=""+t),t!=null?nt(t)||pt(t)||q(t)?{i:ot,r:t,k:e,f:!!n}:t:null);function Ko(t,e=null,n=null,i=0,s=null,o=t===ht?0:1,r=!1,l=!1){const a={__v_isVNode:!0,__v_skip:!0,type:t,props:e,key:e&&Bo(e),ref:e&&ln(e),scopeId:Mn,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:o,patchFlag:i,dynamicProps:s,dynamicChildren:null,appContext:null,ctx:ot};return l?(Ni(a,n),o&128&&t.normalize(a)):n&&(a.shapeFlag|=nt(n)?8:16),$e>0&&!r&&jt&&(a.patchFlag>0||o&6)&&a.patchFlag!==32&&jt.push(a),a}const ft=ra;function ra(t,e=null,n=null,i=0,s=null,o=!1){if((!t||t===yo)&&(t=_t),yn(t)){const l=Jt(t,e,!0);return n&&Ni(l,n),$e>0&&!o&&jt&&(l.shapeFlag&6?jt[jt.indexOf(t)]=l:jt.push(l)),l.patchFlag|=-2,l}if(ga(t)&&(t=t.__vccOpts),e){e=la(e);let{class:l,style:a}=e;l&&!nt(l)&&(e.class=bi(l)),Z(a)&&(lo(a)&&!D(a)&&(a=rt({},a)),e.style=_i(a))}const r=nt(t)?1:yl(t)?128:na(t)?64:Z(t)?4:q(t)?2:0;return Ko(t,e,n,i,s,r,o,!0)}function la(t){return t?lo(t)||Fn in t?rt({},t):t:null}function Jt(t,e,n=!1){const{props:i,ref:s,patchFlag:o,children:r}=t,l=e?aa(i||{},e):i;return{__v_isVNode:!0,__v_skip:!0,type:t.type,props:l,key:l&&Bo(l),ref:e&&e.ref?n&&s?D(s)?s.concat(ln(e)):[s,ln(e)]:ln(e):s,scopeId:t.scopeId,slotScopeIds:t.slotScopeIds,children:r,target:t.target,targetAnchor:t.targetAnchor,staticCount:t.staticCount,shapeFlag:t.shapeFlag,patchFlag:e&&t.type!==ht?o===-1?16:o|16:o,dynamicProps:t.dynamicProps,dynamicChildren:t.dynamicChildren,appContext:t.appContext,dirs:t.dirs,transition:t.transition,component:t.component,suspense:t.suspense,ssContent:t.ssContent&&Jt(t.ssContent),ssFallback:t.ssFallback&&Jt(t.ssFallback),el:t.el,anchor:t.anchor,ctx:t.ctx,ce:t.ce}}function qo(t=" ",e=0){return ft(we,null,t,e)}function tf(t,e){const n=ft(Pe,null,t);return n.staticCount=e,n}function ef(t="",e=!1){return e?(Vo(),Uo(_t,null,t)):ft(_t,null,t)}function At(t){return t==null||typeof t=="boolean"?ft(_t):D(t)?ft(ht,null,t.slice()):typeof t=="object"?Kt(t):ft(we,null,String(t))}function Kt(t){return t.el===null&&t.patchFlag!==-1||t.memo?t:Jt(t)}function Ni(t,e){let n=0;const{shapeFlag:i}=t;if(e==null)e=null;else if(D(e))n=16;else if(typeof e=="object")if(i&65){const s=e.default;s&&(s._c&&(s._d=!1),Ni(t,s()),s._c&&(s._d=!0));return}else{n=32;const s=e._;!s&&!(Fn in e)?e._ctx=ot:s===3&&ot&&(ot.slots._===1?e._=1:(e._=2,t.patchFlag|=1024))}else q(e)?(e={default:e,_ctx:ot},n=32):(e=String(e),i&64?(n=16,e=[qo(e)]):n=8);t.children=e,t.shapeFlag|=n}function aa(...t){const e={};for(let n=0;nct||ot;let vn,pi;{const t=Ws(),e=(n,i)=>{let s;return(s=t[n])||(s=t[n]=[]),s.push(i),o=>{s.length>1?s.forEach(r=>r(o)):s[0](o)}};vn=e("__VUE_INSTANCE_SETTERS__",n=>ct=n),pi=e("__VUE_SSR_SETTERS__",n=>kn=n)}const De=t=>{const e=ct;return vn(t),t.scope.on(),()=>{t.scope.off(),vn(e)}},ds=()=>{ct&&ct.scope.off(),vn(null)};function Wo(t){return t.vnode.shapeFlag&4}let kn=!1;function pa(t,e=!1){e&&pi(e);const{props:n,children:i}=t.vnode,s=Wo(t);ql(t,n,s,e),Gl(t,i);const o=s?da(t,e):void 0;return e&&pi(!1),o}function da(t,e){const n=t.type;t.accessCache=Object.create(null),t.proxy=Me(new Proxy(t.ctx,Fl));const{setup:i}=n;if(i){const s=t.setupContext=i.length>1?Go(t):null,o=De(t);fe();const r=zt(i,t,0,[t.props,s]);if(ue(),o(),Bs(r)){if(r.then(ds,ds),e)return r.then(l=>{ms(t,l,e)}).catch(l=>{An(l,t,0)});t.asyncDep=r}else ms(t,r,e)}else zo(t,e)}function ms(t,e,n){q(e)?t.type.__ssrInlineRender?t.ssrRender=e:t.render=e:Z(e)&&(t.setupState=po(e)),zo(t,n)}let hs;function zo(t,e,n){const i=t.type;if(!t.render){if(!e&&hs&&!i.render){const s=i.template||Pi(t).template;if(s){const{isCustomElement:o,compilerOptions:r}=t.appContext.config,{delimiters:l,compilerOptions:a}=i,f=rt(rt({isCustomElement:o,delimiters:l},r),a);i.render=hs(s,f)}}t.render=i.render||Et}{const s=De(t);fe();try{kl(t)}finally{ue(),s()}}}function ma(t){return t.attrsProxy||(t.attrsProxy=new Proxy(t.attrs,{get(e,n){return xt(t,"get","$attrs"),e[n]}}))}function Go(t){const e=n=>{t.exposed=n||{}};return{get attrs(){return ma(t)},slots:t.slots,emit:t.emit,expose:e}}function $n(t){if(t.exposed)return t.exposeProxy||(t.exposeProxy=new Proxy(po(Me(t.exposed)),{get(e,n){if(n in e)return e[n];if(n in Oe)return Oe[n](t)},has(e,n){return n in e||n in Oe}}))}function ha(t,e=!0){return q(t)?t.displayName||t.name:t.name||e&&t.__name}function ga(t){return q(t)&&"__vccOpts"in t}const it=(t,e)=>Qr(t,e,kn);function di(t,e,n){const i=arguments.length;return i===2?Z(e)&&!D(e)?yn(e)?ft(t,null,[e]):ft(t,e):ft(t,null,e):(i>3?n=Array.prototype.slice.call(arguments,2):i===3&&yn(n)&&(n=[n]),ft(t,e,n))}const xa="3.4.7",ya="http://www.w3.org/2000/svg",va="http://www.w3.org/1998/Math/MathML",qt=typeof document<"u"?document:null,gs=qt&&qt.createElement("template"),_a={insert:(t,e,n)=>{e.insertBefore(t,n||null)},remove:t=>{const e=t.parentNode;e&&e.removeChild(t)},createElement:(t,e,n,i)=>{const s=e==="svg"?qt.createElementNS(ya,t):e==="mathml"?qt.createElementNS(va,t):qt.createElement(t,n?{is:n}:void 0);return t==="select"&&i&&i.multiple!=null&&s.setAttribute("multiple",i.multiple),s},createText:t=>qt.createTextNode(t),createComment:t=>qt.createComment(t),setText:(t,e)=>{t.nodeValue=e},setElementText:(t,e)=>{t.textContent=e},parentNode:t=>t.parentNode,nextSibling:t=>t.nextSibling,querySelector:t=>qt.querySelector(t),setScopeId(t,e){t.setAttribute(e,"")},insertStaticContent(t,e,n,i,s,o){const r=n?n.previousSibling:e.lastChild;if(s&&(s===o||s.nextSibling))for(;e.insertBefore(s.cloneNode(!0),n),!(s===o||!(s=s.nextSibling)););else{gs.innerHTML=i==="svg"?`${t}`:i==="mathml"?`${t}`:t;const l=gs.content;if(i==="svg"||i==="mathml"){const a=l.firstChild;for(;a.firstChild;)l.appendChild(a.firstChild);l.removeChild(a)}e.insertBefore(l,n)}return[r?r.nextSibling:e.firstChild,n?n.previousSibling:e.lastChild]}},Vt="transition",Se="animation",He=Symbol("_vtc"),Yo=(t,{slots:e})=>di(El,ba(t),e);Yo.displayName="Transition";const Jo={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String};Yo.props=rt({},Co,Jo);const Zt=(t,e=[])=>{D(t)?t.forEach(n=>n(...e)):t&&t(...e)},xs=t=>t?D(t)?t.some(e=>e.length>1):t.length>1:!1;function ba(t){const e={};for(const O in t)O in Jo||(e[O]=t[O]);if(t.css===!1)return e;const{name:n="v",type:i,duration:s,enterFromClass:o=`${n}-enter-from`,enterActiveClass:r=`${n}-enter-active`,enterToClass:l=`${n}-enter-to`,appearFromClass:a=o,appearActiveClass:f=r,appearToClass:u=l,leaveFromClass:d=`${n}-leave-from`,leaveActiveClass:g=`${n}-leave-active`,leaveToClass:w=`${n}-leave-to`}=t,I=wa(s),M=I&&I[0],H=I&&I[1],{onBeforeEnter:U,onEnter:Y,onEnterCancelled:m,onLeave:x,onLeaveCancelled:L,onBeforeAppear:j=U,onAppear:F=Y,onAppearCancelled:S=m}=e,E=(O,W,st)=>{te(O,W?u:l),te(O,W?f:r),st&&st()},T=(O,W)=>{O._isLeaving=!1,te(O,d),te(O,w),te(O,g),W&&W()},B=O=>(W,st)=>{const at=O?F:Y,$=()=>E(W,O,st);Zt(at,[W,$]),ys(()=>{te(W,O?a:o),Dt(W,O?u:l),xs(at)||vs(W,i,M,$)})};return rt(e,{onBeforeEnter(O){Zt(U,[O]),Dt(O,o),Dt(O,r)},onBeforeAppear(O){Zt(j,[O]),Dt(O,a),Dt(O,f)},onEnter:B(!1),onAppear:B(!0),onLeave(O,W){O._isLeaving=!0;const st=()=>T(O,W);Dt(O,d),Ta(),Dt(O,g),ys(()=>{O._isLeaving&&(te(O,d),Dt(O,w),xs(x)||vs(O,i,H,st))}),Zt(x,[O,st])},onEnterCancelled(O){E(O,!1),Zt(m,[O])},onAppearCancelled(O){E(O,!0),Zt(S,[O])},onLeaveCancelled(O){T(O),Zt(L,[O])}})}function wa(t){if(t==null)return null;if(Z(t))return[zn(t.enter),zn(t.leave)];{const e=zn(t);return[e,e]}}function zn(t){return br(t)}function Dt(t,e){e.split(/\s+/).forEach(n=>n&&t.classList.add(n)),(t[He]||(t[He]=new Set)).add(e)}function te(t,e){e.split(/\s+/).forEach(i=>i&&t.classList.remove(i));const n=t[He];n&&(n.delete(e),n.size||(t[He]=void 0))}function ys(t){requestAnimationFrame(()=>{requestAnimationFrame(t)})}let Ca=0;function vs(t,e,n,i){const s=t._endId=++Ca,o=()=>{s===t._endId&&i()};if(n)return setTimeout(o,n);const{type:r,timeout:l,propCount:a}=Ea(t,e);if(!r)return i();const f=r+"end";let u=0;const d=()=>{t.removeEventListener(f,g),o()},g=w=>{w.target===t&&++u>=a&&d()};setTimeout(()=>{u(n[I]||"").split(", "),s=i(`${Vt}Delay`),o=i(`${Vt}Duration`),r=_s(s,o),l=i(`${Se}Delay`),a=i(`${Se}Duration`),f=_s(l,a);let u=null,d=0,g=0;e===Vt?r>0&&(u=Vt,d=r,g=o.length):e===Se?f>0&&(u=Se,d=f,g=a.length):(d=Math.max(r,f),u=d>0?r>f?Vt:Se:null,g=u?u===Vt?o.length:a.length:0);const w=u===Vt&&/\b(transform|all)(,|$)/.test(i(`${Vt}Property`).toString());return{type:u,timeout:d,propCount:g,hasTransform:w}}function _s(t,e){for(;t.lengthbs(n)+bs(t[i])))}function bs(t){return t==="auto"?0:Number(t.slice(0,-1).replace(",","."))*1e3}function Ta(){return document.body.offsetHeight}function Sa(t,e,n){const i=t[He];i&&(e=(e?[e,...i]:[...i]).join(" ")),e==null?t.removeAttribute("class"):n?t.setAttribute("class",e):t.className=e}const ki=Symbol("_vod"),nf={beforeMount(t,{value:e},{transition:n}){t[ki]=t.style.display==="none"?"":t.style.display,n&&e?n.beforeEnter(t):Ae(t,e)},mounted(t,{value:e},{transition:n}){n&&e&&n.enter(t)},updated(t,{value:e,oldValue:n},{transition:i}){!e!=!n&&(i?e?(i.beforeEnter(t),Ae(t,!0),i.enter(t)):i.leave(t,()=>{Ae(t,!1)}):Ae(t,e))},beforeUnmount(t,{value:e}){Ae(t,e)}};function Ae(t,e){t.style.display=e?t[ki]:"none"}const Aa=Symbol("");function ja(t,e,n){const i=t.style,s=nt(n);if(n&&!s){if(e&&!nt(e))for(const o in e)n[o]==null&&mi(i,o,"");for(const o in n)mi(i,o,n[o])}else{const o=i.display;if(s){if(e!==n){const r=i[Aa];r&&(n+=";"+r),i.cssText=n}}else e&&t.removeAttribute("style");ki in t&&(i.display=o)}}const ws=/\s*!important$/;function mi(t,e,n){if(D(n))n.forEach(i=>mi(t,e,i));else if(n==null&&(n=""),e.startsWith("--"))t.setProperty(e,n);else{const i=Ra(t,e);ws.test(n)?t.setProperty(ce(i),n.replace(ws,""),"important"):t[i]=n}}const Cs=["Webkit","Moz","ms"],Gn={};function Ra(t,e){const n=Gn[e];if(n)return n;let i=Pt(e);if(i!=="filter"&&i in t)return Gn[e]=i;i=Cn(i);for(let s=0;sYn||(Fa.then(()=>Yn=0),Yn=Date.now());function ka(t,e){const n=i=>{if(!i._vts)i._vts=Date.now();else if(i._vts<=n.attached)return;Tt($a(i,n.value),e,5,[i])};return n.value=t,n.attached=Na(),n}function $a(t,e){if(D(e)){const n=t.stopImmediatePropagation;return t.stopImmediatePropagation=()=>{n.call(t),t._stopped=!0},e.map(i=>s=>!s._stopped&&i&&i(s))}else return e}const As=t=>t.charCodeAt(0)===111&&t.charCodeAt(1)===110&&t.charCodeAt(2)>96&&t.charCodeAt(2)<123,Ha=(t,e,n,i,s,o,r,l,a)=>{const f=s==="svg";e==="class"?Sa(t,i,f):e==="style"?ja(t,n,i):Ve(e)?xi(e)||Pa(t,e,n,i,r):(e[0]==="."?(e=e.slice(1),!0):e[0]==="^"?(e=e.slice(1),!1):Va(t,e,i,f))?Oa(t,e,i,o,r,l,a):(e==="true-value"?t._trueValue=i:e==="false-value"&&(t._falseValue=i),Ma(t,e,i,f))};function Va(t,e,n,i){if(i)return!!(e==="innerHTML"||e==="textContent"||e in t&&As(e)&&q(n));if(e==="spellcheck"||e==="draggable"||e==="translate"||e==="form"||e==="list"&&t.tagName==="INPUT"||e==="type"&&t.tagName==="TEXTAREA")return!1;if(e==="width"||e==="height"){const s=t.tagName;if(s==="IMG"||s==="VIDEO"||s==="CANVAS"||s==="SOURCE")return!1}return As(e)&&nt(n)?!1:e in t}const js=t=>{const e=t.props["onUpdate:modelValue"]||!1;return D(e)?n=>rn(e,n):e};function Da(t){t.target.composing=!0}function Rs(t){const e=t.target;e.composing&&(e.composing=!1,e.dispatchEvent(new Event("input")))}const Jn=Symbol("_assign"),sf={created(t,{modifiers:{lazy:e,trim:n,number:i}},s){t[Jn]=js(s);const o=i||s.props&&s.props.type==="number";me(t,e?"change":"input",r=>{if(r.target.composing)return;let l=t.value;n&&(l=l.trim()),o&&(l=ti(l)),t[Jn](l)}),n&&me(t,"change",()=>{t.value=t.value.trim()}),e||(me(t,"compositionstart",Da),me(t,"compositionend",Rs),me(t,"change",Rs))},mounted(t,{value:e}){t.value=e??""},beforeUpdate(t,{value:e,modifiers:{lazy:n,trim:i,number:s}},o){if(t[Jn]=js(o),t.composing)return;const r=s||t.type==="number"?ti(t.value):t.value,l=e??"";r!==l&&(document.activeElement===t&&t.type!=="range"&&(n||i&&t.value.trim()===l)||(t.value=l))}},Ua=["ctrl","shift","alt","meta"],Ba={stop:t=>t.stopPropagation(),prevent:t=>t.preventDefault(),self:t=>t.target!==t.currentTarget,ctrl:t=>!t.ctrlKey,shift:t=>!t.shiftKey,alt:t=>!t.altKey,meta:t=>!t.metaKey,left:t=>"button"in t&&t.button!==0,middle:t=>"button"in t&&t.button!==1,right:t=>"button"in t&&t.button!==2,exact:(t,e)=>Ua.some(n=>t[`${n}Key`]&&!e.includes(n))},of=(t,e)=>{const n=t._withMods||(t._withMods={}),i=e.join(".");return n[i]||(n[i]=(s,...o)=>{for(let r=0;r{const n=t._withKeys||(t._withKeys={}),i=e.join(".");return n[i]||(n[i]=s=>{if(!("key"in s))return;const o=ce(s.key);if(e.some(r=>r===o||Ka[r]===o))return t(s)})},qa=rt({patchProp:Ha},_a);let Xn,Ms=!1;function Wa(){return Xn=Ms?Xn:Zl(qa),Ms=!0,Xn}const lf=(...t)=>{const e=Wa().createApp(...t),{mount:n}=e;return e.mount=i=>{const s=Ga(i);if(s)return n(s,!0,za(s))},e};function za(t){if(t instanceof SVGElement)return"svg";if(typeof MathMLElement=="function"&&t instanceof MathMLElement)return"mathml"}function Ga(t){return nt(t)?document.querySelector(t):t}const af=(t,e)=>{const n=t.__vccOpts||t;for(const[i,s]of e)n[i]=s;return n},Ya="modulepreload",Ja=function(t){return"/document/"+t},Os={},cf=function(e,n,i){let s=Promise.resolve();if(n&&n.length>0){const o=document.getElementsByTagName("link");s=Promise.all(n.map(r=>{if(r=Ja(r),r in Os)return;Os[r]=!0;const l=r.endsWith(".css"),a=l?'[rel="stylesheet"]':"";if(!!i)for(let d=o.length-1;d>=0;d--){const g=o[d];if(g.href===r&&(!l||g.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${r}"]${a}`))return;const u=document.createElement("link");if(u.rel=l?"stylesheet":Ya,l||(u.as="script",u.crossOrigin=""),u.href=r,document.head.appendChild(u),l)return new Promise((d,g)=>{u.addEventListener("load",d),u.addEventListener("error",()=>g(new Error(`Unable to preload CSS for ${r}`)))})}))}return s.then(()=>e()).catch(o=>{const r=new Event("vite:preloadError",{cancelable:!0});if(r.payload=o,window.dispatchEvent(r),!r.defaultPrevented)throw o})},Xa=window.__VP_SITE_DATA__;function $i(t){return Ys()?(Mr(t),!0):!1}function re(t){return typeof t=="function"?t():uo(t)}const Xo=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const Qa=Object.prototype.toString,Za=t=>Qa.call(t)==="[object Object]",Qo=()=>{},Ls=tc();function tc(){var t,e;return Xo&&((t=window==null?void 0:window.navigator)==null?void 0:t.userAgent)&&(/iP(ad|hone|od)/.test(window.navigator.userAgent)||((e=window==null?void 0:window.navigator)==null?void 0:e.maxTouchPoints)>2&&/iPad|Macintosh/.test(window==null?void 0:window.navigator.userAgent))}function ec(t,e){function n(...i){return new Promise((s,o)=>{Promise.resolve(t(()=>e.apply(this,i),{fn:e,thisArg:this,args:i})).then(s).catch(o)})}return n}const Zo=t=>t();function nc(t=Zo){const e=gt(!0);function n(){e.value=!1}function i(){e.value=!0}const s=(...o)=>{e.value&&t(...o)};return{isActive:Sn(e),pause:n,resume:i,eventFilter:s}}function ic(t){return t||Nn()}function tr(...t){if(t.length!==1)return ol(...t);const e=t[0];return typeof e=="function"?Sn(nl(()=>({get:e,set:Qo}))):gt(e)}function sc(t,e,n={}){const{eventFilter:i=Zo,...s}=n;return Gt(t,ec(i,e),s)}function oc(t,e,n={}){const{eventFilter:i,...s}=n,{eventFilter:o,pause:r,resume:l,isActive:a}=nc(i);return{stop:sc(t,e,{...s,eventFilter:o}),pause:r,resume:l,isActive:a}}function er(t,e=!0,n){ic()?Ee(t,n):e?t():jn(t)}function nr(t){var e;const n=re(t);return(e=n==null?void 0:n.$el)!=null?e:n}const ae=Xo?window:void 0;function _n(...t){let e,n,i,s;if(typeof t[0]=="string"||Array.isArray(t[0])?([n,i,s]=t,e=ae):[e,n,i,s]=t,!e)return Qo;Array.isArray(n)||(n=[n]),Array.isArray(i)||(i=[i]);const o=[],r=()=>{o.forEach(u=>u()),o.length=0},l=(u,d,g,w)=>(u.addEventListener(d,g,w),()=>u.removeEventListener(d,g,w)),a=Gt(()=>[nr(e),re(s)],([u,d])=>{if(r(),!u)return;const g=Za(d)?{...d}:d;o.push(...n.flatMap(w=>i.map(I=>l(u,w,I,g))))},{immediate:!0,flush:"post"}),f=()=>{a(),r()};return $i(f),f}function rc(){const t=gt(!1);return Nn()&&Ee(()=>{t.value=!0}),t}function lc(t){const e=rc();return it(()=>(e.value,!!t()))}function ac(t,e={}){const{window:n=ae}=e,i=lc(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let s;const o=gt(!1),r=f=>{o.value=f.matches},l=()=>{s&&("removeEventListener"in s?s.removeEventListener("change",r):s.removeListener(r))},a=bo(()=>{i.value&&(l(),s=n.matchMedia(re(t)),"addEventListener"in s?s.addEventListener("change",r):s.addListener(r),o.value=s.matches)});return $i(()=>{a(),l(),s=void 0}),o}const tn=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},en="__vueuse_ssr_handlers__",cc=fc();function fc(){return en in tn||(tn[en]=tn[en]||{}),tn[en]}function ir(t,e){return cc[t]||e}function uc(t){return t==null?"any":t instanceof Set?"set":t instanceof Map?"map":t instanceof Date?"date":typeof t=="boolean"?"boolean":typeof t=="string"?"string":typeof t=="object"?"object":Number.isNaN(t)?"any":"number"}const pc={boolean:{read:t=>t==="true",write:t=>String(t)},object:{read:t=>JSON.parse(t),write:t=>JSON.stringify(t)},number:{read:t=>Number.parseFloat(t),write:t=>String(t)},any:{read:t=>t,write:t=>String(t)},string:{read:t=>t,write:t=>String(t)},map:{read:t=>new Map(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t.entries()))},set:{read:t=>new Set(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t))},date:{read:t=>new Date(t),write:t=>t.toISOString()}},Ps="vueuse-storage";function dc(t,e,n,i={}){var s;const{flush:o="pre",deep:r=!0,listenToStorageChanges:l=!0,writeDefaults:a=!0,mergeDefaults:f=!1,shallow:u,window:d=ae,eventFilter:g,onError:w=E=>{console.error(E)},initOnMounted:I}=i,M=(u?co:gt)(typeof e=="function"?e():e);if(!n)try{n=ir("getDefaultStorage",()=>{var E;return(E=ae)==null?void 0:E.localStorage})()}catch(E){w(E)}if(!n)return M;const H=re(e),U=uc(H),Y=(s=i.serializer)!=null?s:pc[U],{pause:m,resume:x}=oc(M,()=>L(M.value),{flush:o,deep:r,eventFilter:g});return d&&l&&er(()=>{_n(d,"storage",S),_n(d,Ps,F),I&&S()}),I||S(),M;function L(E){try{if(E==null)n.removeItem(t);else{const T=Y.write(E),B=n.getItem(t);B!==T&&(n.setItem(t,T),d&&d.dispatchEvent(new CustomEvent(Ps,{detail:{key:t,oldValue:B,newValue:T,storageArea:n}})))}}catch(T){w(T)}}function j(E){const T=E?E.newValue:n.getItem(t);if(T==null)return a&&H!=null&&n.setItem(t,Y.write(H)),H;if(!E&&f){const B=Y.read(T);return typeof f=="function"?f(B,H):U==="object"&&!Array.isArray(B)?{...H,...B}:B}else return typeof T!="string"?T:Y.read(T)}function F(E){S(E.detail)}function S(E){if(!(E&&E.storageArea!==n)){if(E&&E.key==null){M.value=H;return}if(!(E&&E.key!==t)){m();try{(E==null?void 0:E.newValue)!==Y.write(M.value)&&(M.value=j(E))}catch(T){w(T)}finally{E?jn(x):x()}}}}}function sr(t){return ac("(prefers-color-scheme: dark)",t)}function mc(t={}){const{selector:e="html",attribute:n="class",initialValue:i="auto",window:s=ae,storage:o,storageKey:r="vueuse-color-scheme",listenToStorageChanges:l=!0,storageRef:a,emitAuto:f,disableTransition:u=!0}=t,d={auto:"",light:"light",dark:"dark",...t.modes||{}},g=sr({window:s}),w=it(()=>g.value?"dark":"light"),I=a||(r==null?tr(i):dc(r,i,o,{window:s,listenToStorageChanges:l})),M=it(()=>I.value==="auto"?w.value:I.value),H=ir("updateHTMLAttrs",(x,L,j)=>{const F=typeof x=="string"?s==null?void 0:s.document.querySelector(x):nr(x);if(!F)return;let S;if(u&&(S=s.document.createElement("style"),S.appendChild(document.createTextNode("*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),s.document.head.appendChild(S)),L==="class"){const E=j.split(/\s/g);Object.values(d).flatMap(T=>(T||"").split(/\s/g)).filter(Boolean).forEach(T=>{E.includes(T)?F.classList.add(T):F.classList.remove(T)})}else F.setAttribute(L,j);u&&(s.getComputedStyle(S).opacity,document.head.removeChild(S))});function U(x){var L;H(e,n,(L=d[x])!=null?L:x)}function Y(x){t.onChanged?t.onChanged(x,U):U(x)}Gt(M,Y,{flush:"post",immediate:!0}),er(()=>Y(M.value));const m=it({get(){return f?I.value:M.value},set(x){I.value=x}});try{return Object.assign(m,{store:I,system:w,state:M})}catch{return m}}function hc(t={}){const{valueDark:e="dark",valueLight:n="",window:i=ae}=t,s=mc({...t,onChanged:(l,a)=>{var f;t.onChanged?(f=t.onChanged)==null||f.call(t,l==="dark",a,l):a(l)},modes:{dark:e,light:n}}),o=it(()=>s.system?s.system.value:sr({window:i}).value?"dark":"light");return it({get(){return s.value==="dark"},set(l){const a=l?"dark":"light";o.value===a?s.value="auto":s.value=a}})}function Qn(t){return typeof Window<"u"&&t instanceof Window?t.document.documentElement:typeof Document<"u"&&t instanceof Document?t.documentElement:t}function or(t){const e=window.getComputedStyle(t);if(e.overflowX==="scroll"||e.overflowY==="scroll"||e.overflowX==="auto"&&t.clientWidth1?!0:(e.preventDefault&&e.preventDefault(),!1)}const nn=new WeakMap;function ff(t,e=!1){const n=gt(e);let i=null,s;Gt(tr(t),l=>{const a=Qn(re(l));if(a){const f=a;nn.get(f)||nn.set(f,s),n.value&&(f.style.overflow="hidden")}},{immediate:!0});const o=()=>{const l=Qn(re(t));!l||n.value||(Ls&&(i=_n(l,"touchmove",a=>{gc(a)},{passive:!1})),l.style.overflow="hidden",n.value=!0)},r=()=>{var l;const a=Qn(re(t));!a||!n.value||(Ls&&(i==null||i()),a.style.overflow=(l=nn.get(a))!=null?l:"",nn.delete(a),n.value=!1)};return $i(r),it({get(){return n.value},set(l){l?o():r()}})}function uf(t={}){const{window:e=ae,behavior:n="auto"}=t;if(!e)return{x:gt(0),y:gt(0)};const i=gt(e.scrollX),s=gt(e.scrollY),o=it({get(){return i.value},set(l){scrollTo({left:l,behavior:n})}}),r=it({get(){return s.value},set(l){scrollTo({top:l,behavior:n})}});return _n(e,"scroll",()=>{i.value=e.scrollX,s.value=e.scrollY},{capture:!1,passive:!0}),{x:o,y:r}}const rr=/^(?:[a-z]+:|\/\/)/i,xc="vitepress-theme-appearance",lr=/#.*$/,yc=/(index)?\.(md|html)$/,Ct=typeof document<"u",ar={relativePath:"",filePath:"",title:"404",description:"Not Found",headers:[],frontmatter:{sidebar:!1,layout:"page"},lastUpdated:0,isNotFound:!0};function vc(t,e,n=!1){if(e===void 0)return!1;if(t=Is(`/${t}`),n)return new RegExp(e).test(t);if(Is(e)!==t)return!1;const i=e.match(lr);return i?(Ct?location.hash:"")===i[0]:!0}function Is(t){return decodeURI(t).replace(lr,"").replace(yc,"")}function _c(t){return rr.test(t)}function bc(t,e){var i,s,o,r,l,a,f;const n=Object.keys(t.locales).find(u=>u!=="root"&&!_c(u)&&vc(e,`/${u}/`,!0))||"root";return Object.assign({},t,{localeIndex:n,lang:((i=t.locales[n])==null?void 0:i.lang)??t.lang,dir:((s=t.locales[n])==null?void 0:s.dir)??t.dir,title:((o=t.locales[n])==null?void 0:o.title)??t.title,titleTemplate:((r=t.locales[n])==null?void 0:r.titleTemplate)??t.titleTemplate,description:((l=t.locales[n])==null?void 0:l.description)??t.description,head:fr(t.head,((a=t.locales[n])==null?void 0:a.head)??[]),themeConfig:{...t.themeConfig,...(f=t.locales[n])==null?void 0:f.themeConfig}})}function cr(t,e){const n=e.title||t.title,i=e.titleTemplate??t.titleTemplate;if(typeof i=="string"&&i.includes(":title"))return i.replace(/:title/g,n);const s=wc(t.title,i);return`${n}${s}`}function wc(t,e){return e===!1?"":e===!0||e===void 0?` | ${t}`:t===e?"":` | ${e}`}function Cc(t,e){const[n,i]=e;if(n!=="meta")return!1;const s=Object.entries(i)[0];return s==null?!1:t.some(([o,r])=>o===n&&r[s[0]]===s[1])}function fr(t,e){return[...t.filter(n=>!Cc(e,n)),...e]}const Ec=/[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g,Tc=/^[a-z]:/i;function Fs(t){const e=Tc.exec(t),n=e?e[0]:"";return n+t.slice(n.length).replace(Ec,"_").replace(/(^|\/)_+(?=[^/]*$)/,"$1")}const Sc=Symbol(),le=co(Xa);function pf(t){const e=it(()=>bc(le.value,t.data.relativePath)),n=e.value.appearance,i=n==="force-dark"?gt(!0):n?hc({storageKey:xc,initialValue:()=>typeof n=="string"?n:"auto",...typeof n=="object"?n:{}}):gt(!1);return{site:e,theme:it(()=>e.value.themeConfig),page:it(()=>t.data),frontmatter:it(()=>t.data.frontmatter),params:it(()=>t.data.params),lang:it(()=>e.value.lang),dir:it(()=>e.value.dir),localeIndex:it(()=>e.value.localeIndex||"root"),title:it(()=>cr(e.value,t.data)),description:it(()=>t.data.description||e.value.description),isDark:i}}function Ac(){const t=_e(Sc);if(!t)throw new Error("vitepress data not properly injected in app");return t}const jc={ez:"application/andrew-inset",aw:"application/applixware",atom:"application/atom+xml",atomcat:"application/atomcat+xml",atomdeleted:"application/atomdeleted+xml",atomsvc:"application/atomsvc+xml",dwd:"application/atsc-dwd+xml",held:"application/atsc-held+xml",rsat:"application/atsc-rsat+xml",bdoc:"application/bdoc",xcs:"application/calendar+xml",ccxml:"application/ccxml+xml",cdfx:"application/cdfx+xml",cdmia:"application/cdmi-capability",cdmic:"application/cdmi-container",cdmid:"application/cdmi-domain",cdmio:"application/cdmi-object",cdmiq:"application/cdmi-queue",cu:"application/cu-seeme",mpd:"application/dash+xml",davmount:"application/davmount+xml",dbk:"application/docbook+xml",dssc:"application/dssc+der",xdssc:"application/dssc+xml",es:"application/ecmascript",ecma:"application/ecmascript",emma:"application/emma+xml",emotionml:"application/emotionml+xml",epub:"application/epub+zip",exi:"application/exi",fdt:"application/fdt+xml",pfr:"application/font-tdpfr",geojson:"application/geo+json",gml:"application/gml+xml",gpx:"application/gpx+xml",gxf:"application/gxf",gz:"application/gzip",hjson:"application/hjson",stk:"application/hyperstudio",ink:"application/inkml+xml",inkml:"application/inkml+xml",ipfix:"application/ipfix",its:"application/its+xml",jar:"application/java-archive",war:"application/java-archive",ear:"application/java-archive",ser:"application/java-serialized-object",class:"application/java-vm",js:"application/javascript",mjs:"application/javascript",json:"application/json",map:"application/json",json5:"application/json5",jsonml:"application/jsonml+json",jsonld:"application/ld+json",lgr:"application/lgr+xml",lostxml:"application/lost+xml",hqx:"application/mac-binhex40",cpt:"application/mac-compactpro",mads:"application/mads+xml",webmanifest:"application/manifest+json",mrc:"application/marc",mrcx:"application/marcxml+xml",ma:"application/mathematica",nb:"application/mathematica",mb:"application/mathematica",mathml:"application/mathml+xml",mbox:"application/mbox",mscml:"application/mediaservercontrol+xml",metalink:"application/metalink+xml",meta4:"application/metalink4+xml",mets:"application/mets+xml",maei:"application/mmt-aei+xml",musd:"application/mmt-usd+xml",mods:"application/mods+xml",m21:"application/mp21",mp21:"application/mp21",mp4s:"application/mp4",m4p:"application/mp4",doc:"application/msword",dot:"application/msword",mxf:"application/mxf",nq:"application/n-quads",nt:"application/n-triples",cjs:"application/node",bin:"application/octet-stream",dms:"application/octet-stream",lrf:"application/octet-stream",mar:"application/octet-stream",so:"application/octet-stream",dist:"application/octet-stream",distz:"application/octet-stream",pkg:"application/octet-stream",bpk:"application/octet-stream",dump:"application/octet-stream",elc:"application/octet-stream",deploy:"application/octet-stream",exe:"application/octet-stream",dll:"application/octet-stream",deb:"application/octet-stream",dmg:"application/octet-stream",iso:"application/octet-stream",img:"application/octet-stream",msi:"application/octet-stream",msp:"application/octet-stream",msm:"application/octet-stream",buffer:"application/octet-stream",oda:"application/oda",opf:"application/oebps-package+xml",ogx:"application/ogg",omdoc:"application/omdoc+xml",onetoc:"application/onenote",onetoc2:"application/onenote",onetmp:"application/onenote",onepkg:"application/onenote",oxps:"application/oxps",relo:"application/p2p-overlay+xml",xer:"application/patch-ops-error+xml",pdf:"application/pdf",pgp:"application/pgp-encrypted",asc:"application/pgp-signature",sig:"application/pgp-signature",prf:"application/pics-rules",p10:"application/pkcs10",p7m:"application/pkcs7-mime",p7c:"application/pkcs7-mime",p7s:"application/pkcs7-signature",p8:"application/pkcs8",ac:"application/pkix-attr-cert",cer:"application/pkix-cert",crl:"application/pkix-crl",pkipath:"application/pkix-pkipath",pki:"application/pkixcmp",pls:"application/pls+xml",ai:"application/postscript",eps:"application/postscript",ps:"application/postscript",provx:"application/provenance+xml",cww:"application/prs.cww",pskcxml:"application/pskc+xml",raml:"application/raml+yaml",rdf:"application/rdf+xml",owl:"application/rdf+xml",rif:"application/reginfo+xml",rnc:"application/relax-ng-compact-syntax",rl:"application/resource-lists+xml",rld:"application/resource-lists-diff+xml",rs:"application/rls-services+xml",rapd:"application/route-apd+xml",sls:"application/route-s-tsid+xml",rusd:"application/route-usd+xml",gbr:"application/rpki-ghostbusters",mft:"application/rpki-manifest",roa:"application/rpki-roa",rsd:"application/rsd+xml",rss:"application/rss+xml",rtf:"application/rtf",sbml:"application/sbml+xml",scq:"application/scvp-cv-request",scs:"application/scvp-cv-response",spq:"application/scvp-vp-request",spp:"application/scvp-vp-response",sdp:"application/sdp",senmlx:"application/senml+xml",sensmlx:"application/sensml+xml",setpay:"application/set-payment-initiation",setreg:"application/set-registration-initiation",shf:"application/shf+xml",siv:"application/sieve",sieve:"application/sieve",smi:"application/smil+xml",smil:"application/smil+xml",rq:"application/sparql-query",srx:"application/sparql-results+xml",gram:"application/srgs",grxml:"application/srgs+xml",sru:"application/sru+xml",ssdl:"application/ssdl+xml",ssml:"application/ssml+xml",swidtag:"application/swid+xml",tei:"application/tei+xml",teicorpus:"application/tei+xml",tfi:"application/thraud+xml",tsd:"application/timestamped-data",toml:"application/toml",trig:"application/trig",ttml:"application/ttml+xml",ubj:"application/ubjson",rsheet:"application/urc-ressheet+xml",td:"application/urc-targetdesc+xml",vxml:"application/voicexml+xml",wasm:"application/wasm",wgt:"application/widget",hlp:"application/winhlp",wsdl:"application/wsdl+xml",wspolicy:"application/wspolicy+xml",xaml:"application/xaml+xml",xav:"application/xcap-att+xml",xca:"application/xcap-caps+xml",xdf:"application/xcap-diff+xml",xel:"application/xcap-el+xml",xns:"application/xcap-ns+xml",xenc:"application/xenc+xml",xhtml:"application/xhtml+xml",xht:"application/xhtml+xml",xlf:"application/xliff+xml",xml:"application/xml",xsl:"application/xml",xsd:"application/xml",rng:"application/xml",dtd:"application/xml-dtd",xop:"application/xop+xml",xpl:"application/xproc+xml",xslt:"application/xml",xspf:"application/xspf+xml",mxml:"application/xv+xml",xhvml:"application/xv+xml",xvml:"application/xv+xml",xvm:"application/xv+xml",yang:"application/yang",yin:"application/yin+xml",zip:"application/zip","3gpp":"video/3gpp",adp:"audio/adpcm",amr:"audio/amr",au:"audio/basic",snd:"audio/basic",mid:"audio/midi",midi:"audio/midi",kar:"audio/midi",rmi:"audio/midi",mxmf:"audio/mobile-xmf",mp3:"audio/mpeg",m4a:"audio/mp4",mp4a:"audio/mp4",mpga:"audio/mpeg",mp2:"audio/mpeg",mp2a:"audio/mpeg",m2a:"audio/mpeg",m3a:"audio/mpeg",oga:"audio/ogg",ogg:"audio/ogg",spx:"audio/ogg",opus:"audio/ogg",s3m:"audio/s3m",sil:"audio/silk",wav:"audio/wav",weba:"audio/webm",xm:"audio/xm",ttc:"font/collection",otf:"font/otf",ttf:"font/ttf",woff:"font/woff",woff2:"font/woff2",exr:"image/aces",apng:"image/apng",avif:"image/avif",bmp:"image/bmp",cgm:"image/cgm",drle:"image/dicom-rle",emf:"image/emf",fits:"image/fits",g3:"image/g3fax",gif:"image/gif",heic:"image/heic",heics:"image/heic-sequence",heif:"image/heif",heifs:"image/heif-sequence",hej2:"image/hej2k",hsj2:"image/hsj2",ief:"image/ief",jls:"image/jls",jp2:"image/jp2",jpg2:"image/jp2",jpeg:"image/jpeg",jpg:"image/jpeg",jpe:"image/jpeg",jph:"image/jph",jhc:"image/jphc",jpm:"image/jpm",jpx:"image/jpx",jpf:"image/jpx",jxr:"image/jxr",jxra:"image/jxra",jxrs:"image/jxrs",jxs:"image/jxs",jxsc:"image/jxsc",jxsi:"image/jxsi",jxss:"image/jxss",ktx:"image/ktx",ktx2:"image/ktx2",png:"image/png",btif:"image/prs.btif",pti:"image/prs.pti",sgi:"image/sgi",svg:"image/svg+xml",svgz:"image/svg+xml",t38:"image/t38",tif:"image/tiff",tiff:"image/tiff",tfx:"image/tiff-fx",webp:"image/webp",wmf:"image/wmf","disposition-notification":"message/disposition-notification",u8msg:"message/global",u8dsn:"message/global-delivery-status",u8mdn:"message/global-disposition-notification",u8hdr:"message/global-headers",eml:"message/rfc822",mime:"message/rfc822","3mf":"model/3mf",gltf:"model/gltf+json",glb:"model/gltf-binary",igs:"model/iges",iges:"model/iges",msh:"model/mesh",mesh:"model/mesh",silo:"model/mesh",mtl:"model/mtl",obj:"model/obj",stpz:"model/step+zip",stpxz:"model/step-xml+zip",stl:"model/stl",wrl:"model/vrml",vrml:"model/vrml",x3db:"model/x3d+fastinfoset",x3dbz:"model/x3d+binary",x3dv:"model/x3d-vrml",x3dvz:"model/x3d+vrml",x3d:"model/x3d+xml",x3dz:"model/x3d+xml",appcache:"text/cache-manifest",manifest:"text/cache-manifest",ics:"text/calendar",ifb:"text/calendar",coffee:"text/coffeescript",litcoffee:"text/coffeescript",css:"text/css",csv:"text/csv",html:"text/html",htm:"text/html",shtml:"text/html",jade:"text/jade",jsx:"text/jsx",less:"text/less",markdown:"text/markdown",md:"text/markdown",mml:"text/mathml",mdx:"text/mdx",n3:"text/n3",txt:"text/plain",text:"text/plain",conf:"text/plain",def:"text/plain",list:"text/plain",log:"text/plain",in:"text/plain",ini:"text/plain",dsc:"text/prs.lines.tag",rtx:"text/richtext",sgml:"text/sgml",sgm:"text/sgml",shex:"text/shex",slim:"text/slim",slm:"text/slim",spdx:"text/spdx",stylus:"text/stylus",styl:"text/stylus",tsv:"text/tab-separated-values",t:"text/troff",tr:"text/troff",roff:"text/troff",man:"text/troff",me:"text/troff",ms:"text/troff",ttl:"text/turtle",uri:"text/uri-list",uris:"text/uri-list",urls:"text/uri-list",vcard:"text/vcard",vtt:"text/vtt",yaml:"text/yaml",yml:"text/yaml","3gp":"video/3gpp","3g2":"video/3gpp2",h261:"video/h261",h263:"video/h263",h264:"video/h264",m4s:"video/iso.segment",jpgv:"video/jpeg",jpgm:"image/jpm",mj2:"video/mj2",mjp2:"video/mj2",ts:"video/mp2t",mp4:"video/mp4",mp4v:"video/mp4",mpg4:"video/mp4",mpeg:"video/mpeg",mpg:"video/mpeg",mpe:"video/mpeg",m1v:"video/mpeg",m2v:"video/mpeg",ogv:"video/ogg",qt:"video/quicktime",mov:"video/quicktime",webm:"video/webm"};function Rc(t){let e=(""+t).trim().toLowerCase(),n=e.lastIndexOf(".");return jc[~n?e.substring(++n):e]}function Mc(t,e){return`${t}${e}`.replace(/\/+/g,"/")}function Ns(t){return rr.test(t)||!t.startsWith("/")?t:Mc(le.value.base,t)}function Oc(t){let e=t.replace(/\.html$/,"");if(e=decodeURIComponent(e),e=e.replace(/\/$/,"/index"),Ct){const n="/document/";e=Fs(e.slice(n.length).replace(/\//g,"_")||"index")+".md";let i=__VP_HASH_MAP__[e.toLowerCase()];if(i||(e=e.endsWith("_index.md")?e.slice(0,-9)+".md":e.slice(0,-3)+"_index.md",i=__VP_HASH_MAP__[e.toLowerCase()]),!i)return null;e=`${n}assets/${e}.${i}.js`}else e=`./${Fs(e.slice(1).replace(/\//g,"_"))}.md.js`;return e}let an=[];function df(t){an.push(t),In(()=>{an=an.filter(e=>e!==t)})}const Lc=Symbol(),ur="http://a.com",Pc=()=>({path:"/",component:null,data:ar});function mf(t,e){const n=Tn(Pc()),i={route:n,go:s};async function s(l=Ct?location.href:"/"){var a,f;l=hi(l),await((a=i.onBeforeRouteChange)==null?void 0:a.call(i,l))!==!1&&(Hs(l),await r(l),await((f=i.onAfterRouteChanged)==null?void 0:f.call(i,l)))}let o=null;async function r(l,a=0,f=!1){var g;if(await((g=i.onBeforePageLoad)==null?void 0:g.call(i,l))===!1)return;const u=new URL(l,ur),d=o=u.pathname;try{let w=await t(d);if(!w)throw new Error(`Page not found: ${d}`);if(o===d){o=null;const{default:I,__pageData:M}=w;if(!I)throw new Error(`Invalid route component: ${I}`);n.path=Ct?d:Ns(d),n.component=Me(I),n.data=Me(M),Ct&&jn(()=>{let H=le.value.base+M.relativePath.replace(/(?:(^|\/)index)?\.md$/,"$1");if(!le.value.cleanUrls&&!H.endsWith("/")&&(H+=".html"),H!==u.pathname&&(u.pathname=H,l=H+u.search+u.hash,history.replaceState(null,"",l)),u.hash&&!a){let U=null;try{U=document.getElementById(decodeURIComponent(u.hash).slice(1))}catch(Y){console.warn(Y)}if(U){ks(U,u.hash);return}}window.scrollTo(0,a)})}}catch(w){if(!/fetch|Page not found/.test(w.message)&&!/^\/404(\.html|\/)?$/.test(l)&&console.error(w),!f)try{const I=await fetch(le.value.base+"hashmap.json");window.__VP_HASH_MAP__=await I.json(),await r(l,a,!0);return}catch{}o===d&&(o=null,n.path=Ct?d:Ns(d),n.component=e?Me(e):null,n.data=ar)}}return Ct&&(window.addEventListener("click",l=>{if(l.target.closest("button"))return;const f=l.target.closest("a");if(f&&!f.closest(".vp-raw")&&(f instanceof SVGElement||!f.download)){const{target:u}=f,{href:d,origin:g,pathname:w,hash:I,search:M}=new URL(f.href instanceof SVGAnimatedString?f.href.animVal:f.href,f.baseURI),H=window.location,U=Rc(w);!l.ctrlKey&&!l.shiftKey&&!l.altKey&&!l.metaKey&&!u&&g===H.origin&&(!U||U==="text/html")&&(l.preventDefault(),w===H.pathname&&M===H.search?(I!==H.hash&&(history.pushState(null,"",I),window.dispatchEvent(new Event("hashchange"))),I?ks(f,I,f.classList.contains("header-anchor")):(Hs(d),window.scrollTo(0,0))):s(d))}},{capture:!0}),window.addEventListener("popstate",async l=>{var a;await r(hi(location.href),l.state&&l.state.scrollPosition||0),(a=i.onAfterRouteChanged)==null||a.call(i,location.href)}),window.addEventListener("hashchange",l=>{l.preventDefault()})),i}function Ic(){const t=_e(Lc);if(!t)throw new Error("useRouter() is called without provider.");return t}function pr(){return Ic().route}function ks(t,e,n=!1){let i=null;try{i=t.classList.contains("header-anchor")?t:document.getElementById(decodeURIComponent(e).slice(1))}catch(s){console.warn(s)}if(i){let s=function(){!n||Math.abs(f-window.scrollY)>window.innerHeight?window.scrollTo(0,f):window.scrollTo({left:0,top:f,behavior:"smooth"})},o=le.value.scrollOffset,r=0,l=24;if(typeof o=="object"&&"padding"in o&&(l=o.padding,o=o.selector),typeof o=="number")r=o;else if(typeof o=="string")r=$s(o,l);else if(Array.isArray(o))for(const u of o){const d=$s(u,l);if(d){r=d;break}}const a=parseInt(window.getComputedStyle(i).paddingTop,10),f=window.scrollY+i.getBoundingClientRect().top-r+a;requestAnimationFrame(s)}}function $s(t,e){const n=document.querySelector(t);if(!n)return 0;const i=n.getBoundingClientRect().bottom;return i<0?0:i+e}function Hs(t){Ct&&t!==hi(location.href)&&(history.replaceState({scrollPosition:window.scrollY},document.title),history.pushState(null,"",t))}function hi(t){const e=new URL(t,ur);return e.pathname=e.pathname.replace(/(^|\/)index(\.html)?$/,"$1"),le.value.cleanUrls?e.pathname=e.pathname.replace(/\.html$/,""):!e.pathname.endsWith("/")&&!e.pathname.endsWith(".html")&&(e.pathname+=".html"),e.pathname+e.search+e.hash}const Vs=()=>an.forEach(t=>t()),hf=So({name:"VitePressContent",props:{as:{type:[Object,String],default:"div"}},setup(t){const e=pr(),{site:n}=Ac();return()=>di(t.as,n.value.contentProps??{style:{position:"relative"}},[e.component?di(e.component,{onVnodeMounted:Vs,onVnodeUpdated:Vs}):"404 Page Not Found"])}}),gf=So({setup(t,{slots:e}){const n=gt(!1);return Ee(()=>{n.value=!0}),()=>n.value&&e.default?e.default():null}});function xf(){Ct&&window.addEventListener("click",t=>{var n;const e=t.target;if(e.matches(".vp-code-group input")){const i=(n=e.parentElement)==null?void 0:n.parentElement;if(!i)return;const s=Array.from(i.querySelectorAll("input")).indexOf(e);if(s<0)return;const o=i.querySelector(".blocks");if(!o)return;const r=Array.from(o.children).find(f=>f.classList.contains("active"));if(!r)return;const l=o.children[s];if(!l||r===l)return;r.classList.remove("active"),l.classList.add("active");const a=i==null?void 0:i.querySelector(`label[for="${e.id}"]`);a==null||a.scrollIntoView({block:"nearest"})}})}function yf(){if(Ct){const t=new WeakMap;window.addEventListener("click",e=>{var i;const n=e.target;if(n.matches('div[class*="language-"] > button.copy')){const s=n.parentElement,o=(i=n.nextElementSibling)==null?void 0:i.nextElementSibling;if(!s||!o)return;const r=/language-(shellscript|shell|bash|sh|zsh)/.test(s.className);let l="";o.querySelectorAll("span.line:not(.diff.remove)").forEach(a=>l+=(a.textContent||"")+` -`),l=l.slice(0,-1),r&&(l=l.replace(/^ *(\$|>) /gm,"").trim()),Fc(l).then(()=>{n.classList.add("copied"),clearTimeout(t.get(n));const a=setTimeout(()=>{n.classList.remove("copied"),n.blur(),t.delete(n)},2e3);t.set(n,a)})}})}}async function Fc(t){try{return navigator.clipboard.writeText(t)}catch{const e=document.createElement("textarea"),n=document.activeElement;e.value=t,e.setAttribute("readonly",""),e.style.contain="strict",e.style.position="absolute",e.style.left="-9999px",e.style.fontSize="12pt";const i=document.getSelection(),s=i?i.rangeCount>0&&i.getRangeAt(0):null;document.body.appendChild(e),e.select(),e.selectionStart=0,e.selectionEnd=t.length,document.execCommand("copy"),document.body.removeChild(e),s&&(i.removeAllRanges(),i.addRange(s)),n&&n.focus()}}function vf(t,e){let n=[],i=!0;const s=o=>{if(i){i=!1;return}const r=o.map(Ds);n.forEach((l,a)=>{const f=r.findIndex(u=>u==null?void 0:u.isEqualNode(l??null));f!==-1?delete r[f]:(l==null||l.remove(),delete n[a])}),r.forEach(l=>l&&document.head.appendChild(l)),n=[...n,...r].filter(Boolean)};bo(()=>{const o=t.data,r=e.value,l=o&&o.description,a=o&&o.frontmatter.head||[],f=cr(r,o);f!==document.title&&(document.title=f);const u=l||r.description;let d=document.querySelector("meta[name=description]");d?d.getAttribute("content")!==u&&d.setAttribute("content",u):Ds(["meta",{name:"description",content:u}]),s(fr(r.head,kc(a)))})}function Ds([t,e,n]){const i=document.createElement(t);for(const s in e)i.setAttribute(s,e[s]);return n&&(i.innerHTML=n),t==="script"&&!e.async&&(i.async=!1),i}function Nc(t){return t[0]==="meta"&&t[1]&&t[1].name==="description"}function kc(t){return t.filter(e=>!Nc(e))}const Zn=new Set,dr=()=>document.createElement("link"),$c=t=>{const e=dr();e.rel="prefetch",e.href=t,document.head.appendChild(e)},Hc=t=>{const e=new XMLHttpRequest;e.open("GET",t,e.withCredentials=!0),e.send()};let sn;const Vc=Ct&&(sn=dr())&&sn.relList&&sn.relList.supports&&sn.relList.supports("prefetch")?$c:Hc;function _f(){if(!Ct||!window.IntersectionObserver)return;let t;if((t=navigator.connection)&&(t.saveData||/2g/.test(t.effectiveType)))return;const e=window.requestIdleCallback||setTimeout;let n=null;const i=()=>{n&&n.disconnect(),n=new IntersectionObserver(o=>{o.forEach(r=>{if(r.isIntersecting){const l=r.target;n.unobserve(l);const{pathname:a}=l;if(!Zn.has(a)){Zn.add(a);const f=Oc(a);f&&Vc(f)}}})}),e(()=>{document.querySelectorAll("#app a").forEach(o=>{const{hostname:r,pathname:l}=new URL(o.href instanceof SVGAnimatedString?o.href.animVal:o.href,o.baseURI),a=l.match(/\.\w+$/);a&&a[0]!==".html"||o.target!=="_blank"&&r===location.hostname&&(l!==location.pathname?n.observe(o):Zn.add(l))})})};Ee(i);const s=pr();Gt(()=>s.path,i),In(()=>{n&&n.disconnect()})}export{Qc as $,In as A,Wc as B,Ml as C,Kc as D,Gc as E,ht as F,co as G,df as H,ft as I,qc as J,rr as K,pr as L,aa as M,_e as N,_i as O,jn as P,uf as Q,tf as R,Sn as S,Yo as T,Ic as U,cf as V,zc as W,nf as X,of as Y,sf as Z,af as _,qo as a,ff as a0,Kl as a1,rf as a2,Jc as a3,Xc as a4,vf as a5,Lc as a6,pf as a7,Sc as a8,hf as a9,gf as aa,le as ab,lf as ac,mf as ad,Oc as ae,_f as af,yf as ag,xf as ah,di as ai,Uo as b,Zc as c,So as d,ef as e,Ns as f,it as g,gt as h,_c as i,Ee as j,Ko as k,Rc as l,uo as m,bi as n,Vo as o,Uc as p,Bc as q,Yc as r,vc as s,Dc as t,Ac as u,Ct as v,dl as w,ac as x,Gt as y,bo as z}; diff --git a/docs/document/assets/chunks/framework.5c8808ab.js b/docs/document/assets/chunks/framework.5c8808ab.js new file mode 100644 index 000000000..b8480996d --- /dev/null +++ b/docs/document/assets/chunks/framework.5c8808ab.js @@ -0,0 +1,2 @@ +function Jn(e,t){const n=Object.create(null),s=e.split(",");for(let r=0;r!!n[r.toLowerCase()]:r=>!!n[r]}function Xn(e){if(H(e)){const t={};for(let n=0;n{if(n){const s=n.split(Ri);s.length>1&&(t[s[0].trim()]=s[1].trim())}}),t}function Zn(e){let t="";if(se(e))t=e;else if(H(e))for(let n=0;nse(e)?e:e==null?"":H(e)||te(e)&&(e.toString===_r||!K(e.toString))?JSON.stringify(e,pr,2):String(e),pr=(e,t)=>t&&t.__v_isRef?pr(e,t.value):ut(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[s,r])=>(n[`${s} =>`]=r,n),{})}:gr(t)?{[`Set(${t.size})`]:[...t.values()]}:te(t)&&!H(t)&&!br(t)?String(t):t,ee={},at=[],Oe=()=>{},Pi=()=>!1,Li=/^on[^a-z]/,$t=e=>Li.test(e),Qn=e=>e.startsWith("onUpdate:"),fe=Object.assign,Gn=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},Si=Object.prototype.hasOwnProperty,Y=(e,t)=>Si.call(e,t),H=Array.isArray,ut=e=>an(e)==="[object Map]",gr=e=>an(e)==="[object Set]",K=e=>typeof e=="function",se=e=>typeof e=="string",es=e=>typeof e=="symbol",te=e=>e!==null&&typeof e=="object",mr=e=>te(e)&&K(e.then)&&K(e.catch),_r=Object.prototype.toString,an=e=>_r.call(e),Ni=e=>an(e).slice(8,-1),br=e=>an(e)==="[object Object]",ts=e=>se(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,vt=Jn(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),un=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},Hi=/-(\w)/g,Le=un(e=>e.replace(Hi,(t,n)=>n?n.toUpperCase():"")),$i=/\B([A-Z])/g,ot=un(e=>e.replace($i,"-$1").toLowerCase()),dn=un(e=>e.charAt(0).toUpperCase()+e.slice(1)),Xt=un(e=>e?`on${dn(e)}`:""),Mt=(e,t)=>!Object.is(e,t),Zt=(e,t)=>{for(let n=0;n{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},Nn=e=>{const t=parseFloat(e);return isNaN(t)?e:t},Ui=e=>{const t=se(e)?Number(e):NaN;return isNaN(t)?e:t};let Es;const ji=()=>Es||(Es=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});let _e;class Bi{constructor(t=!1){this.detached=t,this._active=!0,this.effects=[],this.cleanups=[],this.parent=_e,!t&&_e&&(this.index=(_e.scopes||(_e.scopes=[])).push(this)-1)}get active(){return this._active}run(t){if(this._active){const n=_e;try{return _e=this,t()}finally{_e=n}}}on(){_e=this}off(){_e=this.parent}stop(t){if(this._active){let n,s;for(n=0,s=this.effects.length;n{const t=new Set(e);return t.w=0,t.n=0,t},yr=e=>(e.w&Ve)>0,wr=e=>(e.n&Ve)>0,ki=({deps:e})=>{if(e.length)for(let t=0;t{const{deps:t}=e;if(t.length){let n=0;for(let s=0;s{(d==="length"||d>=c)&&l.push(a)})}else switch(n!==void 0&&l.push(o.get(n)),t){case"add":H(e)?ts(n)&&l.push(o.get("length")):(l.push(o.get(rt)),ut(e)&&l.push(o.get($n)));break;case"delete":H(e)||(l.push(o.get(rt)),ut(e)&&l.push(o.get($n)));break;case"set":ut(e)&&l.push(o.get(rt));break}if(l.length===1)l[0]&&Un(l[0]);else{const c=[];for(const a of l)a&&c.push(...a);Un(ns(c))}}function Un(e,t){const n=H(e)?e:[...e];for(const s of n)s.computed&&vs(s);for(const s of n)s.computed||vs(s)}function vs(e,t){(e!==Ae||e.allowRecurse)&&(e.scheduler?e.scheduler():e.run())}function Vi(e,t){var n;return(n=nn.get(e))===null||n===void 0?void 0:n.get(t)}const qi=Jn("__proto__,__v_isRef,__isVue"),Er=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(es)),zi=rs(),Yi=rs(!1,!0),Ji=rs(!0),As=Xi();function Xi(){const e={};return["includes","indexOf","lastIndexOf"].forEach(t=>{e[t]=function(...n){const s=J(this);for(let i=0,o=this.length;i{e[t]=function(...n){yt();const s=J(this)[t].apply(this,n);return wt(),s}}),e}function Zi(e){const t=J(this);return pe(t,"has",e),t.hasOwnProperty(e)}function rs(e=!1,t=!1){return function(s,r,i){if(r==="__v_isReactive")return!e;if(r==="__v_isReadonly")return e;if(r==="__v_isShallow")return t;if(r==="__v_raw"&&i===(e?t?po:Or:t?Rr:Ar).get(s))return s;const o=H(s);if(!e){if(o&&Y(As,r))return Reflect.get(As,r,i);if(r==="hasOwnProperty")return Zi}const l=Reflect.get(s,r,i);return(es(r)?Er.has(r):qi(r))||(e||pe(s,"get",r),t)?l:oe(l)?o&&ts(r)?l:l.value:te(l)?e?Fr(l):pn(l):l}}const Qi=Tr(),Gi=Tr(!0);function Tr(e=!1){return function(n,s,r,i){let o=n[s];if(mt(o)&&oe(o)&&!oe(r))return!1;if(!e&&(!sn(r)&&!mt(r)&&(o=J(o),r=J(r)),!H(n)&&oe(o)&&!oe(r)))return o.value=r,!0;const l=H(n)&&ts(s)?Number(s)e,hn=e=>Reflect.getPrototypeOf(e);function Bt(e,t,n=!1,s=!1){e=e.__v_raw;const r=J(e),i=J(t);n||(t!==i&&pe(r,"get",t),pe(r,"get",i));const{has:o}=hn(r),l=s?is:n?cs:Pt;if(o.call(r,t))return l(e.get(t));if(o.call(r,i))return l(e.get(i));e!==r&&e.get(t)}function Dt(e,t=!1){const n=this.__v_raw,s=J(n),r=J(e);return t||(e!==r&&pe(s,"has",e),pe(s,"has",r)),e===r?n.has(e):n.has(e)||n.has(r)}function Kt(e,t=!1){return e=e.__v_raw,!t&&pe(J(e),"iterate",rt),Reflect.get(e,"size",e)}function Rs(e){e=J(e);const t=J(this);return hn(t).has.call(t,e)||(t.add(e),He(t,"add",e,e)),this}function Os(e,t){t=J(t);const n=J(this),{has:s,get:r}=hn(n);let i=s.call(n,e);i||(e=J(e),i=s.call(n,e));const o=r.call(n,e);return n.set(e,t),i?Mt(t,o)&&He(n,"set",e,t):He(n,"add",e,t),this}function Fs(e){const t=J(this),{has:n,get:s}=hn(t);let r=n.call(t,e);r||(e=J(e),r=n.call(t,e)),s&&s.call(t,e);const i=t.delete(e);return r&&He(t,"delete",e,void 0),i}function Is(){const e=J(this),t=e.size!==0,n=e.clear();return t&&He(e,"clear",void 0,void 0),n}function kt(e,t){return function(s,r){const i=this,o=i.__v_raw,l=J(o),c=t?is:e?cs:Pt;return!e&&pe(l,"iterate",rt),o.forEach((a,d)=>s.call(r,c(a),c(d),i))}}function Wt(e,t,n){return function(...s){const r=this.__v_raw,i=J(r),o=ut(i),l=e==="entries"||e===Symbol.iterator&&o,c=e==="keys"&&o,a=r[e](...s),d=n?is:t?cs:Pt;return!t&&pe(i,"iterate",c?$n:rt),{next(){const{value:p,done:g}=a.next();return g?{value:p,done:g}:{value:l?[d(p[0]),d(p[1])]:d(p),done:g}},[Symbol.iterator](){return this}}}}function Ue(e){return function(...t){return e==="delete"?!1:this}}function io(){const e={get(i){return Bt(this,i)},get size(){return Kt(this)},has:Dt,add:Rs,set:Os,delete:Fs,clear:Is,forEach:kt(!1,!1)},t={get(i){return Bt(this,i,!1,!0)},get size(){return Kt(this)},has:Dt,add:Rs,set:Os,delete:Fs,clear:Is,forEach:kt(!1,!0)},n={get(i){return Bt(this,i,!0)},get size(){return Kt(this,!0)},has(i){return Dt.call(this,i,!0)},add:Ue("add"),set:Ue("set"),delete:Ue("delete"),clear:Ue("clear"),forEach:kt(!0,!1)},s={get(i){return Bt(this,i,!0,!0)},get size(){return Kt(this,!0)},has(i){return Dt.call(this,i,!0)},add:Ue("add"),set:Ue("set"),delete:Ue("delete"),clear:Ue("clear"),forEach:kt(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach(i=>{e[i]=Wt(i,!1,!1),n[i]=Wt(i,!0,!1),t[i]=Wt(i,!1,!0),s[i]=Wt(i,!0,!0)}),[e,n,t,s]}const[oo,lo,co,fo]=io();function os(e,t){const n=t?e?fo:co:e?lo:oo;return(s,r,i)=>r==="__v_isReactive"?!e:r==="__v_isReadonly"?e:r==="__v_raw"?s:Reflect.get(Y(n,r)&&r in s?n:s,r,i)}const ao={get:os(!1,!1)},uo={get:os(!1,!0)},ho={get:os(!0,!1)},Ar=new WeakMap,Rr=new WeakMap,Or=new WeakMap,po=new WeakMap;function go(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function mo(e){return e.__v_skip||!Object.isExtensible(e)?0:go(Ni(e))}function pn(e){return mt(e)?e:ls(e,!1,vr,ao,Ar)}function _o(e){return ls(e,!1,ro,uo,Rr)}function Fr(e){return ls(e,!0,so,ho,Or)}function ls(e,t,n,s,r){if(!te(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;const i=r.get(e);if(i)return i;const o=mo(e);if(o===0)return e;const l=new Proxy(e,o===2?s:n);return r.set(e,l),l}function dt(e){return mt(e)?dt(e.__v_raw):!!(e&&e.__v_isReactive)}function mt(e){return!!(e&&e.__v_isReadonly)}function sn(e){return!!(e&&e.__v_isShallow)}function Ir(e){return dt(e)||mt(e)}function J(e){const t=e&&e.__v_raw;return t?J(t):e}function At(e){return tn(e,"__v_skip",!0),e}const Pt=e=>te(e)?pn(e):e,cs=e=>te(e)?Fr(e):e;function fs(e){ke&&Ae&&(e=J(e),xr(e.dep||(e.dep=ns())))}function as(e,t){e=J(e);const n=e.dep;n&&Un(n)}function oe(e){return!!(e&&e.__v_isRef===!0)}function Mr(e){return Pr(e,!1)}function bo(e){return Pr(e,!0)}function Pr(e,t){return oe(e)?e:new yo(e,t)}class yo{constructor(t,n){this.__v_isShallow=n,this.dep=void 0,this.__v_isRef=!0,this._rawValue=n?t:J(t),this._value=n?t:Pt(t)}get value(){return fs(this),this._value}set value(t){const n=this.__v_isShallow||sn(t)||mt(t);t=n?t:J(t),Mt(t,this._rawValue)&&(this._rawValue=t,this._value=n?t:Pt(t),as(this))}}function wo(e){return oe(e)?e.value:e}const Co={get:(e,t,n)=>wo(Reflect.get(e,t,n)),set:(e,t,n,s)=>{const r=e[t];return oe(r)&&!oe(n)?(r.value=n,!0):Reflect.set(e,t,n,s)}};function Lr(e){return dt(e)?e:new Proxy(e,Co)}class xo{constructor(t){this.dep=void 0,this.__v_isRef=!0;const{get:n,set:s}=t(()=>fs(this),()=>as(this));this._get=n,this._set=s}get value(){return this._get()}set value(t){this._set(t)}}function Nc(e){return new xo(e)}class Eo{constructor(t,n,s){this._object=t,this._key=n,this._defaultValue=s,this.__v_isRef=!0}get value(){const t=this._object[this._key];return t===void 0?this._defaultValue:t}set value(t){this._object[this._key]=t}get dep(){return Vi(J(this._object),this._key)}}function Hc(e,t,n){const s=e[t];return oe(s)?s:new Eo(e,t,n)}var Sr;class To{constructor(t,n,s,r){this._setter=n,this.dep=void 0,this.__v_isRef=!0,this[Sr]=!1,this._dirty=!0,this.effect=new ss(t,()=>{this._dirty||(this._dirty=!0,as(this))}),this.effect.computed=this,this.effect.active=this._cacheable=!r,this.__v_isReadonly=s}get value(){const t=J(this);return fs(t),(t._dirty||!t._cacheable)&&(t._dirty=!1,t._value=t.effect.run()),t._value}set value(t){this._setter(t)}}Sr="__v_isReadonly";function vo(e,t,n=!1){let s,r;const i=K(e);return i?(s=e,r=Oe):(s=e.get,r=e.set),new To(s,r,i||!r,n)}function We(e,t,n,s){let r;try{r=s?e(...s):e()}catch(i){gn(i,t,n)}return r}function xe(e,t,n,s){if(K(e)){const i=We(e,t,n,s);return i&&mr(i)&&i.catch(o=>{gn(o,t,n)}),i}const r=[];for(let i=0;i>>1;St(ae[s])Pe&&ae.splice(t,1)}function Fo(e){H(e)?ht.push(...e):(!Ne||!Ne.includes(e,e.allowRecurse?Ge+1:Ge))&&ht.push(e),$r()}function Ms(e,t=Lt?Pe+1:0){for(;tSt(n)-St(s)),Ge=0;Gee.id==null?1/0:e.id,Io=(e,t)=>{const n=St(e)-St(t);if(n===0){if(e.pre&&!t.pre)return-1;if(t.pre&&!e.pre)return 1}return n};function Ur(e){jn=!1,Lt=!0,ae.sort(Io);const t=Oe;try{for(Pe=0;Pese(v)?v.trim():v)),p&&(r=n.map(Nn))}let l,c=s[l=Xt(t)]||s[l=Xt(Le(t))];!c&&i&&(c=s[l=Xt(ot(t))]),c&&xe(c,e,6,r);const a=s[l+"Once"];if(a){if(!e.emitted)e.emitted={};else if(e.emitted[l])return;e.emitted[l]=!0,xe(a,e,6,r)}}function jr(e,t,n=!1){const s=t.emitsCache,r=s.get(e);if(r!==void 0)return r;const i=e.emits;let o={},l=!1;if(!K(e)){const c=a=>{const d=jr(a,t,!0);d&&(l=!0,fe(o,d))};!n&&t.mixins.length&&t.mixins.forEach(c),e.extends&&c(e.extends),e.mixins&&e.mixins.forEach(c)}return!i&&!l?(te(e)&&s.set(e,null),null):(H(i)?i.forEach(c=>o[c]=null):fe(o,i),te(e)&&s.set(e,o),o)}function mn(e,t){return!e||!$t(t)?!1:(t=t.slice(2).replace(/Once$/,""),Y(e,t[0].toLowerCase()+t.slice(1))||Y(e,ot(t))||Y(e,t))}let le=null,_n=null;function on(e){const t=le;return le=e,_n=e&&e.type.__scopeId||null,t}function $c(e){_n=e}function Uc(){_n=null}function Po(e,t=le,n){if(!t||e._n)return e;const s=(...r)=>{s._d&&Ks(-1);const i=on(t);let o;try{o=e(...r)}finally{on(i),s._d&&Ks(1)}return o};return s._n=!0,s._c=!0,s._d=!0,s}function Rn(e){const{type:t,vnode:n,proxy:s,withProxy:r,props:i,propsOptions:[o],slots:l,attrs:c,emit:a,render:d,renderCache:p,data:g,setupState:v,ctx:S,inheritAttrs:O}=e;let q,m;const T=on(e);try{if(n.shapeFlag&4){const N=r||s;q=ve(d.call(N,N,p,i,v,g,S)),m=c}else{const N=t;q=ve(N.length>1?N(i,{attrs:c,slots:l,emit:a}):N(i,null)),m=t.props?c:Lo(c)}}catch(N){It.length=0,gn(N,e,1),q=ce(be)}let R=q;if(m&&O!==!1){const N=Object.keys(m),{shapeFlag:B}=R;N.length&&B&7&&(o&&N.some(Qn)&&(m=So(m,o)),R=qe(R,m))}return n.dirs&&(R=qe(R),R.dirs=R.dirs?R.dirs.concat(n.dirs):n.dirs),n.transition&&(R.transition=n.transition),q=R,on(T),q}const Lo=e=>{let t;for(const n in e)(n==="class"||n==="style"||$t(n))&&((t||(t={}))[n]=e[n]);return t},So=(e,t)=>{const n={};for(const s in e)(!Qn(s)||!(s.slice(9)in t))&&(n[s]=e[s]);return n};function No(e,t,n){const{props:s,children:r,component:i}=e,{props:o,children:l,patchFlag:c}=t,a=i.emitsOptions;if(t.dirs||t.transition)return!0;if(n&&c>=0){if(c&1024)return!0;if(c&16)return s?Ps(s,o,a):!!o;if(c&8){const d=t.dynamicProps;for(let p=0;pe.__isSuspense;function Br(e,t){t&&t.pendingBranch?H(e)?t.effects.push(...e):t.effects.push(e):Fo(e)}function Uo(e,t){if(re){let n=re.provides;const s=re.parent&&re.parent.provides;s===n&&(n=re.provides=Object.create(s)),n[e]=t}}function pt(e,t,n=!1){const s=re||le;if(s){const r=s.parent==null?s.vnode.appContext&&s.vnode.appContext.provides:s.parent.provides;if(r&&e in r)return r[e];if(arguments.length>1)return n&&K(t)?t.call(s.proxy):t}}function jo(e,t){return bn(e,null,t)}function jc(e,t){return bn(e,null,{flush:"post"})}const Vt={};function Qt(e,t,n){return bn(e,t,n)}function bn(e,t,{immediate:n,deep:s,flush:r,onTrack:i,onTrigger:o}=ee){const l=Ki()===(re==null?void 0:re.scope)?re:null;let c,a=!1,d=!1;if(oe(e)?(c=()=>e.value,a=sn(e)):dt(e)?(c=()=>e,s=!0):H(e)?(d=!0,a=e.some(R=>dt(R)||sn(R)),c=()=>e.map(R=>{if(oe(R))return R.value;if(dt(R))return nt(R);if(K(R))return We(R,l,2)})):K(e)?t?c=()=>We(e,l,2):c=()=>{if(!(l&&l.isUnmounted))return p&&p(),xe(e,l,3,[g])}:c=Oe,t&&s){const R=c;c=()=>nt(R())}let p,g=R=>{p=m.onStop=()=>{We(R,l,4)}},v;if(Ht)if(g=Oe,t?n&&xe(t,l,3,[c(),d?[]:void 0,g]):c(),r==="sync"){const R=Ll();v=R.__watcherHandles||(R.__watcherHandles=[])}else return Oe;let S=d?new Array(e.length).fill(Vt):Vt;const O=()=>{if(m.active)if(t){const R=m.run();(s||a||(d?R.some((N,B)=>Mt(N,S[B])):Mt(R,S)))&&(p&&p(),xe(t,l,3,[R,S===Vt?void 0:d&&S[0]===Vt?[]:S,g]),S=R)}else m.run()};O.allowRecurse=!!t;let q;r==="sync"?q=O:r==="post"?q=()=>de(O,l&&l.suspense):(O.pre=!0,l&&(O.id=l.uid),q=()=>ds(O));const m=new ss(c,q);t?n?O():S=m.run():r==="post"?de(m.run.bind(m),l&&l.suspense):m.run();const T=()=>{m.stop(),l&&l.scope&&Gn(l.scope.effects,m)};return v&&v.push(T),T}function Bo(e,t,n){const s=this.proxy,r=se(e)?e.includes(".")?Dr(s,e):()=>s[e]:e.bind(s,s);let i;K(t)?i=t:(i=t.handler,n=t);const o=re;bt(this);const l=bn(r,i.bind(s),n);return o?bt(o):it(),l}function Dr(e,t){const n=t.split(".");return()=>{let s=e;for(let r=0;r{nt(n,t)});else if(br(e))for(const n in e)nt(e[n],t);return e}function Do(){const e={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return Cn(()=>{e.isMounted=!0}),zr(()=>{e.isUnmounting=!0}),e}const ye=[Function,Array],Ko={name:"BaseTransition",props:{mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:ye,onEnter:ye,onAfterEnter:ye,onEnterCancelled:ye,onBeforeLeave:ye,onLeave:ye,onAfterLeave:ye,onLeaveCancelled:ye,onBeforeAppear:ye,onAppear:ye,onAfterAppear:ye,onAppearCancelled:ye},setup(e,{slots:t}){const n=ui(),s=Do();let r;return()=>{const i=t.default&&Wr(t.default(),!0);if(!i||!i.length)return;let o=i[0];if(i.length>1){for(const O of i)if(O.type!==be){o=O;break}}const l=J(e),{mode:c}=l;if(s.isLeaving)return On(o);const a=Ls(o);if(!a)return On(o);const d=Bn(a,l,s,n);Dn(a,d);const p=n.subTree,g=p&&Ls(p);let v=!1;const{getTransitionKey:S}=a.type;if(S){const O=S();r===void 0?r=O:O!==r&&(r=O,v=!0)}if(g&&g.type!==be&&(!et(a,g)||v)){const O=Bn(g,l,s,n);if(Dn(g,O),c==="out-in")return s.isLeaving=!0,O.afterLeave=()=>{s.isLeaving=!1,n.update.active!==!1&&n.update()},On(o);c==="in-out"&&a.type!==be&&(O.delayLeave=(q,m,T)=>{const R=kr(s,g);R[String(g.key)]=g,q._leaveCb=()=>{m(),q._leaveCb=void 0,delete d.delayedLeave},d.delayedLeave=T})}return o}}},Kr=Ko;function kr(e,t){const{leavingVNodes:n}=e;let s=n.get(t.type);return s||(s=Object.create(null),n.set(t.type,s)),s}function Bn(e,t,n,s){const{appear:r,mode:i,persisted:o=!1,onBeforeEnter:l,onEnter:c,onAfterEnter:a,onEnterCancelled:d,onBeforeLeave:p,onLeave:g,onAfterLeave:v,onLeaveCancelled:S,onBeforeAppear:O,onAppear:q,onAfterAppear:m,onAppearCancelled:T}=t,R=String(e.key),N=kr(n,e),B=(x,U)=>{x&&xe(x,s,9,U)},z=(x,U)=>{const $=U[1];B(x,U),H(x)?x.every(k=>k.length<=1)&&$():x.length<=1&&$()},D={mode:i,persisted:o,beforeEnter(x){let U=l;if(!n.isMounted)if(r)U=O||l;else return;x._leaveCb&&x._leaveCb(!0);const $=N[R];$&&et(e,$)&&$.el._leaveCb&&$.el._leaveCb(),B(U,[x])},enter(x){let U=c,$=a,k=d;if(!n.isMounted)if(r)U=q||c,$=m||a,k=T||d;else return;let F=!1;const W=x._enterCb=M=>{F||(F=!0,M?B(k,[x]):B($,[x]),D.delayedLeave&&D.delayedLeave(),x._enterCb=void 0)};U?z(U,[x,W]):W()},leave(x,U){const $=String(e.key);if(x._enterCb&&x._enterCb(!0),n.isUnmounting)return U();B(p,[x]);let k=!1;const F=x._leaveCb=W=>{k||(k=!0,U(),W?B(S,[x]):B(v,[x]),x._leaveCb=void 0,N[$]===e&&delete N[$])};N[$]=e,g?z(g,[x,F]):F()},clone(x){return Bn(x,t,n,s)}};return D}function On(e){if(yn(e))return e=qe(e),e.children=null,e}function Ls(e){return yn(e)?e.children?e.children[0]:void 0:e}function Dn(e,t){e.shapeFlag&6&&e.component?Dn(e.component.subTree,t):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function Wr(e,t=!1,n){let s=[],r=0;for(let i=0;i1)for(let i=0;i!!e.type.__asyncLoader,yn=e=>e.type.__isKeepAlive;function ko(e,t){qr(e,"a",t)}function Wo(e,t){qr(e,"da",t)}function qr(e,t,n=re){const s=e.__wdc||(e.__wdc=()=>{let r=n;for(;r;){if(r.isDeactivated)return;r=r.parent}return e()});if(wn(t,s,n),n){let r=n.parent;for(;r&&r.parent;)yn(r.parent.vnode)&&Vo(s,t,n,r),r=r.parent}}function Vo(e,t,n,s){const r=wn(t,e,s,!0);xn(()=>{Gn(s[t],r)},n)}function wn(e,t,n=re,s=!1){if(n){const r=n[e]||(n[e]=[]),i=t.__weh||(t.__weh=(...o)=>{if(n.isUnmounted)return;yt(),bt(n);const l=xe(t,n,e,o);return it(),wt(),l});return s?r.unshift(i):r.push(i),i}}const $e=e=>(t,n=re)=>(!Ht||e==="sp")&&wn(e,(...s)=>t(...s),n),qo=$e("bm"),Cn=$e("m"),zo=$e("bu"),Yo=$e("u"),zr=$e("bum"),xn=$e("um"),Jo=$e("sp"),Xo=$e("rtg"),Zo=$e("rtc");function Qo(e,t=re){wn("ec",e,t)}function Bc(e,t){const n=le;if(n===null)return e;const s=Tn(n)||n.proxy,r=e.dirs||(e.dirs=[]);for(let i=0;it(o,l,void 0,i&&i[l]));else{const o=Object.keys(e);r=new Array(o.length);for(let l=0,c=o.length;lfn(t)?!(t.type===be||t.type===he&&!Xr(t.children)):!0)?e:null}function Vc(e,t){const n={};for(const s in e)n[t&&/[A-Z]/.test(s)?`on:${s}`:Xt(s)]=e[s];return n}const Kn=e=>e?di(e)?Tn(e)||e.proxy:Kn(e.parent):null,Rt=fe(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>Kn(e.parent),$root:e=>Kn(e.root),$emit:e=>e.emit,$options:e=>ps(e),$forceUpdate:e=>e.f||(e.f=()=>ds(e.update)),$nextTick:e=>e.n||(e.n=Hr.bind(e.proxy)),$watch:e=>Bo.bind(e)}),Fn=(e,t)=>e!==ee&&!e.__isScriptSetup&&Y(e,t),Go={get({_:e},t){const{ctx:n,setupState:s,data:r,props:i,accessCache:o,type:l,appContext:c}=e;let a;if(t[0]!=="$"){const v=o[t];if(v!==void 0)switch(v){case 1:return s[t];case 2:return r[t];case 4:return n[t];case 3:return i[t]}else{if(Fn(s,t))return o[t]=1,s[t];if(r!==ee&&Y(r,t))return o[t]=2,r[t];if((a=e.propsOptions[0])&&Y(a,t))return o[t]=3,i[t];if(n!==ee&&Y(n,t))return o[t]=4,n[t];kn&&(o[t]=0)}}const d=Rt[t];let p,g;if(d)return t==="$attrs"&&pe(e,"get",t),d(e);if((p=l.__cssModules)&&(p=p[t]))return p;if(n!==ee&&Y(n,t))return o[t]=4,n[t];if(g=c.config.globalProperties,Y(g,t))return g[t]},set({_:e},t,n){const{data:s,setupState:r,ctx:i}=e;return Fn(r,t)?(r[t]=n,!0):s!==ee&&Y(s,t)?(s[t]=n,!0):Y(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(i[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:s,appContext:r,propsOptions:i}},o){let l;return!!n[o]||e!==ee&&Y(e,o)||Fn(t,o)||(l=i[0])&&Y(l,o)||Y(s,o)||Y(Rt,o)||Y(r.config.globalProperties,o)},defineProperty(e,t,n){return n.get!=null?e._.accessCache[t]=0:Y(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}};let kn=!0;function el(e){const t=ps(e),n=e.proxy,s=e.ctx;kn=!1,t.beforeCreate&&Ns(t.beforeCreate,e,"bc");const{data:r,computed:i,methods:o,watch:l,provide:c,inject:a,created:d,beforeMount:p,mounted:g,beforeUpdate:v,updated:S,activated:O,deactivated:q,beforeDestroy:m,beforeUnmount:T,destroyed:R,unmounted:N,render:B,renderTracked:z,renderTriggered:D,errorCaptured:x,serverPrefetch:U,expose:$,inheritAttrs:k,components:F,directives:W,filters:M}=t;if(a&&tl(a,s,null,e.appContext.config.unwrapInjectedRef),o)for(const ne in o){const Q=o[ne];K(Q)&&(s[ne]=Q.bind(n))}if(r){const ne=r.call(n,n);te(ne)&&(e.data=pn(ne))}if(kn=!0,i)for(const ne in i){const Q=i[ne],ze=K(Q)?Q.bind(n,n):K(Q.get)?Q.get.bind(n,n):Oe,Ut=!K(Q)&&K(Q.set)?Q.set.bind(n):Oe,Ye=Te({get:ze,set:Ut});Object.defineProperty(s,ne,{enumerable:!0,configurable:!0,get:()=>Ye.value,set:Fe=>Ye.value=Fe})}if(l)for(const ne in l)Zr(l[ne],s,n,ne);if(c){const ne=K(c)?c.call(n):c;Reflect.ownKeys(ne).forEach(Q=>{Uo(Q,ne[Q])})}d&&Ns(d,e,"c");function X(ne,Q){H(Q)?Q.forEach(ze=>ne(ze.bind(n))):Q&&ne(Q.bind(n))}if(X(qo,p),X(Cn,g),X(zo,v),X(Yo,S),X(ko,O),X(Wo,q),X(Qo,x),X(Zo,z),X(Xo,D),X(zr,T),X(xn,N),X(Jo,U),H($))if($.length){const ne=e.exposed||(e.exposed={});$.forEach(Q=>{Object.defineProperty(ne,Q,{get:()=>n[Q],set:ze=>n[Q]=ze})})}else e.exposed||(e.exposed={});B&&e.render===Oe&&(e.render=B),k!=null&&(e.inheritAttrs=k),F&&(e.components=F),W&&(e.directives=W)}function tl(e,t,n=Oe,s=!1){H(e)&&(e=Wn(e));for(const r in e){const i=e[r];let o;te(i)?"default"in i?o=pt(i.from||r,i.default,!0):o=pt(i.from||r):o=pt(i),oe(o)&&s?Object.defineProperty(t,r,{enumerable:!0,configurable:!0,get:()=>o.value,set:l=>o.value=l}):t[r]=o}}function Ns(e,t,n){xe(H(e)?e.map(s=>s.bind(t.proxy)):e.bind(t.proxy),t,n)}function Zr(e,t,n,s){const r=s.includes(".")?Dr(n,s):()=>n[s];if(se(e)){const i=t[e];K(i)&&Qt(r,i)}else if(K(e))Qt(r,e.bind(n));else if(te(e))if(H(e))e.forEach(i=>Zr(i,t,n,s));else{const i=K(e.handler)?e.handler.bind(n):t[e.handler];K(i)&&Qt(r,i,e)}}function ps(e){const t=e.type,{mixins:n,extends:s}=t,{mixins:r,optionsCache:i,config:{optionMergeStrategies:o}}=e.appContext,l=i.get(t);let c;return l?c=l:!r.length&&!n&&!s?c=t:(c={},r.length&&r.forEach(a=>ln(c,a,o,!0)),ln(c,t,o)),te(t)&&i.set(t,c),c}function ln(e,t,n,s=!1){const{mixins:r,extends:i}=t;i&&ln(e,i,n,!0),r&&r.forEach(o=>ln(e,o,n,!0));for(const o in t)if(!(s&&o==="expose")){const l=nl[o]||n&&n[o];e[o]=l?l(e[o],t[o]):t[o]}return e}const nl={data:Hs,props:Qe,emits:Qe,methods:Qe,computed:Qe,beforeCreate:ue,created:ue,beforeMount:ue,mounted:ue,beforeUpdate:ue,updated:ue,beforeDestroy:ue,beforeUnmount:ue,destroyed:ue,unmounted:ue,activated:ue,deactivated:ue,errorCaptured:ue,serverPrefetch:ue,components:Qe,directives:Qe,watch:rl,provide:Hs,inject:sl};function Hs(e,t){return t?e?function(){return fe(K(e)?e.call(this,this):e,K(t)?t.call(this,this):t)}:t:e}function sl(e,t){return Qe(Wn(e),Wn(t))}function Wn(e){if(H(e)){const t={};for(let n=0;n0)&&!(o&16)){if(o&8){const d=e.vnode.dynamicProps;for(let p=0;p{c=!0;const[g,v]=Gr(p,t,!0);fe(o,g),v&&l.push(...v)};!n&&t.mixins.length&&t.mixins.forEach(d),e.extends&&d(e.extends),e.mixins&&e.mixins.forEach(d)}if(!i&&!c)return te(e)&&s.set(e,at),at;if(H(i))for(let d=0;d-1,v[1]=O<0||S-1||Y(v,"default"))&&l.push(p)}}}const a=[o,l];return te(e)&&s.set(e,a),a}function $s(e){return e[0]!=="$"}function Us(e){const t=e&&e.toString().match(/^\s*(function|class) (\w+)/);return t?t[2]:e===null?"null":""}function js(e,t){return Us(e)===Us(t)}function Bs(e,t){return H(t)?t.findIndex(n=>js(n,e)):K(t)&&js(t,e)?0:-1}const ei=e=>e[0]==="_"||e==="$stable",gs=e=>H(e)?e.map(ve):[ve(e)],ll=(e,t,n)=>{if(t._n)return t;const s=Po((...r)=>gs(t(...r)),n);return s._c=!1,s},ti=(e,t,n)=>{const s=e._ctx;for(const r in e){if(ei(r))continue;const i=e[r];if(K(i))t[r]=ll(r,i,s);else if(i!=null){const o=gs(i);t[r]=()=>o}}},ni=(e,t)=>{const n=gs(t);e.slots.default=()=>n},cl=(e,t)=>{if(e.vnode.shapeFlag&32){const n=t._;n?(e.slots=J(t),tn(t,"_",n)):ti(t,e.slots={})}else e.slots={},t&&ni(e,t);tn(e.slots,En,1)},fl=(e,t,n)=>{const{vnode:s,slots:r}=e;let i=!0,o=ee;if(s.shapeFlag&32){const l=t._;l?n&&l===1?i=!1:(fe(r,t),!n&&l===1&&delete r._):(i=!t.$stable,ti(t,r)),o=t}else t&&(ni(e,t),o={default:1});if(i)for(const l in r)!ei(l)&&!(l in o)&&delete r[l]};function si(){return{app:null,config:{isNativeTag:Pi,performance:!1,globalProperties:{},optionMergeStrategies:{},errorHandler:void 0,warnHandler:void 0,compilerOptions:{}},mixins:[],components:{},directives:{},provides:Object.create(null),optionsCache:new WeakMap,propsCache:new WeakMap,emitsCache:new WeakMap}}let al=0;function ul(e,t){return function(s,r=null){K(s)||(s=Object.assign({},s)),r!=null&&!te(r)&&(r=null);const i=si(),o=new Set;let l=!1;const c=i.app={_uid:al++,_component:s,_props:r,_container:null,_context:i,_instance:null,version:Sl,get config(){return i.config},set config(a){},use(a,...d){return o.has(a)||(a&&K(a.install)?(o.add(a),a.install(c,...d)):K(a)&&(o.add(a),a(c,...d))),c},mixin(a){return i.mixins.includes(a)||i.mixins.push(a),c},component(a,d){return d?(i.components[a]=d,c):i.components[a]},directive(a,d){return d?(i.directives[a]=d,c):i.directives[a]},mount(a,d,p){if(!l){const g=ce(s,r);return g.appContext=i,d&&t?t(g,a):e(g,a,p),l=!0,c._container=a,a.__vue_app__=c,Tn(g.component)||g.component.proxy}},unmount(){l&&(e(null,c._container),delete c._container.__vue_app__)},provide(a,d){return i.provides[a]=d,c}};return c}}function cn(e,t,n,s,r=!1){if(H(e)){e.forEach((g,v)=>cn(g,t&&(H(t)?t[v]:t),n,s,r));return}if(gt(s)&&!r)return;const i=s.shapeFlag&4?Tn(s.component)||s.component.proxy:s.el,o=r?null:i,{i:l,r:c}=e,a=t&&t.r,d=l.refs===ee?l.refs={}:l.refs,p=l.setupState;if(a!=null&&a!==c&&(se(a)?(d[a]=null,Y(p,a)&&(p[a]=null)):oe(a)&&(a.value=null)),K(c))We(c,l,12,[o,d]);else{const g=se(c),v=oe(c);if(g||v){const S=()=>{if(e.f){const O=g?Y(p,c)?p[c]:d[c]:c.value;r?H(O)&&Gn(O,i):H(O)?O.includes(i)||O.push(i):g?(d[c]=[i],Y(p,c)&&(p[c]=d[c])):(c.value=[i],e.k&&(d[e.k]=c.value))}else g?(d[c]=o,Y(p,c)&&(p[c]=o)):v&&(c.value=o,e.k&&(d[e.k]=o))};o?(S.id=-1,de(S,n)):S()}}}let je=!1;const qt=e=>/svg/.test(e.namespaceURI)&&e.tagName!=="foreignObject",zt=e=>e.nodeType===8;function dl(e){const{mt:t,p:n,o:{patchProp:s,createText:r,nextSibling:i,parentNode:o,remove:l,insert:c,createComment:a}}=e,d=(m,T)=>{if(!T.hasChildNodes()){n(null,m,T),rn(),T._vnode=m;return}je=!1,p(T.firstChild,m,null,null,null),rn(),T._vnode=m,je&&console.error("Hydration completed but contains mismatches.")},p=(m,T,R,N,B,z=!1)=>{const D=zt(m)&&m.data==="[",x=()=>O(m,T,R,N,B,D),{type:U,ref:$,shapeFlag:k,patchFlag:F}=T;let W=m.nodeType;T.el=m,F===-2&&(z=!1,T.dynamicChildren=null);let M=null;switch(U){case _t:W!==3?T.children===""?(c(T.el=r(""),o(m),m),M=m):M=x():(m.data!==T.children&&(je=!0,m.data=T.children),M=i(m));break;case be:W!==8||D?M=x():M=i(m);break;case Ft:if(D&&(m=i(m),W=m.nodeType),W===1||W===3){M=m;const ge=!T.children.length;for(let X=0;X{z=z||!!T.dynamicChildren;const{type:D,props:x,patchFlag:U,shapeFlag:$,dirs:k}=T,F=D==="input"&&k||D==="option";if(F||U!==-1){if(k&&Me(T,null,R,"created"),x)if(F||!z||U&48)for(const M in x)(F&&M.endsWith("value")||$t(M)&&!vt(M))&&s(m,M,null,x[M],!1,void 0,R);else x.onClick&&s(m,"onClick",null,x.onClick,!1,void 0,R);let W;if((W=x&&x.onVnodeBeforeMount)&&we(W,R,T),k&&Me(T,null,R,"beforeMount"),((W=x&&x.onVnodeMounted)||k)&&Br(()=>{W&&we(W,R,T),k&&Me(T,null,R,"mounted")},N),$&16&&!(x&&(x.innerHTML||x.textContent))){let M=v(m.firstChild,T,m,R,N,B,z);for(;M;){je=!0;const ge=M;M=M.nextSibling,l(ge)}}else $&8&&m.textContent!==T.children&&(je=!0,m.textContent=T.children)}return m.nextSibling},v=(m,T,R,N,B,z,D)=>{D=D||!!T.dynamicChildren;const x=T.children,U=x.length;for(let $=0;${const{slotScopeIds:D}=T;D&&(B=B?B.concat(D):D);const x=o(m),U=v(i(m),T,x,R,N,B,z);return U&&zt(U)&&U.data==="]"?i(T.anchor=U):(je=!0,c(T.anchor=a("]"),x,U),U)},O=(m,T,R,N,B,z)=>{if(je=!0,T.el=null,z){const U=q(m);for(;;){const $=i(m);if($&&$!==U)l($);else break}}const D=i(m),x=o(m);return l(m),n(null,T,x,D,R,N,qt(x),B),D},q=m=>{let T=0;for(;m;)if(m=i(m),m&&zt(m)&&(m.data==="["&&T++,m.data==="]")){if(T===0)return i(m);T--}return m};return[d,p]}const de=Br;function hl(e){return pl(e,dl)}function pl(e,t){const n=ji();n.__VUE__=!0;const{insert:s,remove:r,patchProp:i,createElement:o,createText:l,createComment:c,setText:a,setElementText:d,parentNode:p,nextSibling:g,setScopeId:v=Oe,insertStaticContent:S}=e,O=(f,u,h,b=null,_=null,C=null,A=!1,w=null,E=!!u.dynamicChildren)=>{if(f===u)return;f&&!et(f,u)&&(b=jt(f),Fe(f,_,C,!0),f=null),u.patchFlag===-2&&(E=!1,u.dynamicChildren=null);const{type:y,ref:P,shapeFlag:I}=u;switch(y){case _t:q(f,u,h,b);break;case be:m(f,u,h,b);break;case Ft:f==null&&T(u,h,b,A);break;case he:F(f,u,h,b,_,C,A,w,E);break;default:I&1?B(f,u,h,b,_,C,A,w,E):I&6?W(f,u,h,b,_,C,A,w,E):(I&64||I&128)&&y.process(f,u,h,b,_,C,A,w,E,lt)}P!=null&&_&&cn(P,f&&f.ref,C,u||f,!u)},q=(f,u,h,b)=>{if(f==null)s(u.el=l(u.children),h,b);else{const _=u.el=f.el;u.children!==f.children&&a(_,u.children)}},m=(f,u,h,b)=>{f==null?s(u.el=c(u.children||""),h,b):u.el=f.el},T=(f,u,h,b)=>{[f.el,f.anchor]=S(f.children,u,h,b,f.el,f.anchor)},R=({el:f,anchor:u},h,b)=>{let _;for(;f&&f!==u;)_=g(f),s(f,h,b),f=_;s(u,h,b)},N=({el:f,anchor:u})=>{let h;for(;f&&f!==u;)h=g(f),r(f),f=h;r(u)},B=(f,u,h,b,_,C,A,w,E)=>{A=A||u.type==="svg",f==null?z(u,h,b,_,C,A,w,E):U(f,u,_,C,A,w,E)},z=(f,u,h,b,_,C,A,w)=>{let E,y;const{type:P,props:I,shapeFlag:L,transition:j,dirs:V}=f;if(E=f.el=o(f.type,C,I&&I.is,I),L&8?d(E,f.children):L&16&&x(f.children,E,null,b,_,C&&P!=="foreignObject",A,w),V&&Me(f,null,b,"created"),D(E,f,f.scopeId,A,b),I){for(const Z in I)Z!=="value"&&!vt(Z)&&i(E,Z,null,I[Z],C,f.children,b,_,Se);"value"in I&&i(E,"value",null,I.value),(y=I.onVnodeBeforeMount)&&we(y,b,f)}V&&Me(f,null,b,"beforeMount");const G=(!_||_&&!_.pendingBranch)&&j&&!j.persisted;G&&j.beforeEnter(E),s(E,u,h),((y=I&&I.onVnodeMounted)||G||V)&&de(()=>{y&&we(y,b,f),G&&j.enter(E),V&&Me(f,null,b,"mounted")},_)},D=(f,u,h,b,_)=>{if(h&&v(f,h),b)for(let C=0;C{for(let y=E;y{const w=u.el=f.el;let{patchFlag:E,dynamicChildren:y,dirs:P}=u;E|=f.patchFlag&16;const I=f.props||ee,L=u.props||ee;let j;h&&Je(h,!1),(j=L.onVnodeBeforeUpdate)&&we(j,h,u,f),P&&Me(u,f,h,"beforeUpdate"),h&&Je(h,!0);const V=_&&u.type!=="foreignObject";if(y?$(f.dynamicChildren,y,w,h,b,V,C):A||Q(f,u,w,null,h,b,V,C,!1),E>0){if(E&16)k(w,u,I,L,h,b,_);else if(E&2&&I.class!==L.class&&i(w,"class",null,L.class,_),E&4&&i(w,"style",I.style,L.style,_),E&8){const G=u.dynamicProps;for(let Z=0;Z{j&&we(j,h,u,f),P&&Me(u,f,h,"updated")},b)},$=(f,u,h,b,_,C,A)=>{for(let w=0;w{if(h!==b){if(h!==ee)for(const w in h)!vt(w)&&!(w in b)&&i(f,w,h[w],null,A,u.children,_,C,Se);for(const w in b){if(vt(w))continue;const E=b[w],y=h[w];E!==y&&w!=="value"&&i(f,w,y,E,A,u.children,_,C,Se)}"value"in b&&i(f,"value",h.value,b.value)}},F=(f,u,h,b,_,C,A,w,E)=>{const y=u.el=f?f.el:l(""),P=u.anchor=f?f.anchor:l("");let{patchFlag:I,dynamicChildren:L,slotScopeIds:j}=u;j&&(w=w?w.concat(j):j),f==null?(s(y,h,b),s(P,h,b),x(u.children,h,P,_,C,A,w,E)):I>0&&I&64&&L&&f.dynamicChildren?($(f.dynamicChildren,L,h,_,C,A,w),(u.key!=null||_&&u===_.subTree)&&ms(f,u,!0)):Q(f,u,h,P,_,C,A,w,E)},W=(f,u,h,b,_,C,A,w,E)=>{u.slotScopeIds=w,f==null?u.shapeFlag&512?_.ctx.activate(u,h,b,A,E):M(u,h,b,_,C,A,E):ge(f,u,E)},M=(f,u,h,b,_,C,A)=>{const w=f.component=vl(f,b,_);if(yn(f)&&(w.ctx.renderer=lt),Al(w),w.asyncDep){if(_&&_.registerDep(w,X),!f.el){const E=w.subTree=ce(be);m(null,E,u,h)}return}X(w,f,u,h,_,C,A)},ge=(f,u,h)=>{const b=u.component=f.component;if(No(f,u,h))if(b.asyncDep&&!b.asyncResolved){ne(b,u,h);return}else b.next=u,Oo(b.update),b.update();else u.el=f.el,b.vnode=u},X=(f,u,h,b,_,C,A)=>{const w=()=>{if(f.isMounted){let{next:P,bu:I,u:L,parent:j,vnode:V}=f,G=P,Z;Je(f,!1),P?(P.el=V.el,ne(f,P,A)):P=V,I&&Zt(I),(Z=P.props&&P.props.onVnodeBeforeUpdate)&&we(Z,j,P,V),Je(f,!0);const ie=Rn(f),Ee=f.subTree;f.subTree=ie,O(Ee,ie,p(Ee.el),jt(Ee),f,_,C),P.el=ie.el,G===null&&Ho(f,ie.el),L&&de(L,_),(Z=P.props&&P.props.onVnodeUpdated)&&de(()=>we(Z,j,P,V),_)}else{let P;const{el:I,props:L}=u,{bm:j,m:V,parent:G}=f,Z=gt(u);if(Je(f,!1),j&&Zt(j),!Z&&(P=L&&L.onVnodeBeforeMount)&&we(P,G,u),Je(f,!0),I&&An){const ie=()=>{f.subTree=Rn(f),An(I,f.subTree,f,_,null)};Z?u.type.__asyncLoader().then(()=>!f.isUnmounted&&ie()):ie()}else{const ie=f.subTree=Rn(f);O(null,ie,h,b,f,_,C),u.el=ie.el}if(V&&de(V,_),!Z&&(P=L&&L.onVnodeMounted)){const ie=u;de(()=>we(P,G,ie),_)}(u.shapeFlag&256||G&>(G.vnode)&&G.vnode.shapeFlag&256)&&f.a&&de(f.a,_),f.isMounted=!0,u=h=b=null}},E=f.effect=new ss(w,()=>ds(y),f.scope),y=f.update=()=>E.run();y.id=f.uid,Je(f,!0),y()},ne=(f,u,h)=>{u.component=f;const b=f.vnode.props;f.vnode=u,f.next=null,ol(f,u.props,b,h),fl(f,u.children,h),yt(),Ms(),wt()},Q=(f,u,h,b,_,C,A,w,E=!1)=>{const y=f&&f.children,P=f?f.shapeFlag:0,I=u.children,{patchFlag:L,shapeFlag:j}=u;if(L>0){if(L&128){Ut(y,I,h,b,_,C,A,w,E);return}else if(L&256){ze(y,I,h,b,_,C,A,w,E);return}}j&8?(P&16&&Se(y,_,C),I!==y&&d(h,I)):P&16?j&16?Ut(y,I,h,b,_,C,A,w,E):Se(y,_,C,!0):(P&8&&d(h,""),j&16&&x(I,h,b,_,C,A,w,E))},ze=(f,u,h,b,_,C,A,w,E)=>{f=f||at,u=u||at;const y=f.length,P=u.length,I=Math.min(y,P);let L;for(L=0;LP?Se(f,_,C,!0,!1,I):x(u,h,b,_,C,A,w,E,I)},Ut=(f,u,h,b,_,C,A,w,E)=>{let y=0;const P=u.length;let I=f.length-1,L=P-1;for(;y<=I&&y<=L;){const j=f[y],V=u[y]=E?Ke(u[y]):ve(u[y]);if(et(j,V))O(j,V,h,null,_,C,A,w,E);else break;y++}for(;y<=I&&y<=L;){const j=f[I],V=u[L]=E?Ke(u[L]):ve(u[L]);if(et(j,V))O(j,V,h,null,_,C,A,w,E);else break;I--,L--}if(y>I){if(y<=L){const j=L+1,V=jL)for(;y<=I;)Fe(f[y],_,C,!0),y++;else{const j=y,V=y,G=new Map;for(y=V;y<=L;y++){const me=u[y]=E?Ke(u[y]):ve(u[y]);me.key!=null&&G.set(me.key,y)}let Z,ie=0;const Ee=L-V+1;let ct=!1,ws=0;const Ct=new Array(Ee);for(y=0;y=Ee){Fe(me,_,C,!0);continue}let Ie;if(me.key!=null)Ie=G.get(me.key);else for(Z=V;Z<=L;Z++)if(Ct[Z-V]===0&&et(me,u[Z])){Ie=Z;break}Ie===void 0?Fe(me,_,C,!0):(Ct[Ie-V]=y+1,Ie>=ws?ws=Ie:ct=!0,O(me,u[Ie],h,null,_,C,A,w,E),ie++)}const Cs=ct?gl(Ct):at;for(Z=Cs.length-1,y=Ee-1;y>=0;y--){const me=V+y,Ie=u[me],xs=me+1{const{el:C,type:A,transition:w,children:E,shapeFlag:y}=f;if(y&6){Ye(f.component.subTree,u,h,b);return}if(y&128){f.suspense.move(u,h,b);return}if(y&64){A.move(f,u,h,lt);return}if(A===he){s(C,u,h);for(let I=0;Iw.enter(C),_);else{const{leave:I,delayLeave:L,afterLeave:j}=w,V=()=>s(C,u,h),G=()=>{I(C,()=>{V(),j&&j()})};L?L(C,V,G):G()}else s(C,u,h)},Fe=(f,u,h,b=!1,_=!1)=>{const{type:C,props:A,ref:w,children:E,dynamicChildren:y,shapeFlag:P,patchFlag:I,dirs:L}=f;if(w!=null&&cn(w,null,h,f,!0),P&256){u.ctx.deactivate(f);return}const j=P&1&&L,V=!gt(f);let G;if(V&&(G=A&&A.onVnodeBeforeUnmount)&&we(G,u,f),P&6)vi(f.component,h,b);else{if(P&128){f.suspense.unmount(h,b);return}j&&Me(f,null,u,"beforeUnmount"),P&64?f.type.remove(f,u,h,_,lt,b):y&&(C!==he||I>0&&I&64)?Se(y,u,h,!1,!0):(C===he&&I&384||!_&&P&16)&&Se(E,u,h),b&&bs(f)}(V&&(G=A&&A.onVnodeUnmounted)||j)&&de(()=>{G&&we(G,u,f),j&&Me(f,null,u,"unmounted")},h)},bs=f=>{const{type:u,el:h,anchor:b,transition:_}=f;if(u===he){Ti(h,b);return}if(u===Ft){N(f);return}const C=()=>{r(h),_&&!_.persisted&&_.afterLeave&&_.afterLeave()};if(f.shapeFlag&1&&_&&!_.persisted){const{leave:A,delayLeave:w}=_,E=()=>A(h,C);w?w(f.el,C,E):E()}else C()},Ti=(f,u)=>{let h;for(;f!==u;)h=g(f),r(f),f=h;r(u)},vi=(f,u,h)=>{const{bum:b,scope:_,update:C,subTree:A,um:w}=f;b&&Zt(b),_.stop(),C&&(C.active=!1,Fe(A,f,u,h)),w&&de(w,u),de(()=>{f.isUnmounted=!0},u),u&&u.pendingBranch&&!u.isUnmounted&&f.asyncDep&&!f.asyncResolved&&f.suspenseId===u.pendingId&&(u.deps--,u.deps===0&&u.resolve())},Se=(f,u,h,b=!1,_=!1,C=0)=>{for(let A=C;Af.shapeFlag&6?jt(f.component.subTree):f.shapeFlag&128?f.suspense.next():g(f.anchor||f.el),ys=(f,u,h)=>{f==null?u._vnode&&Fe(u._vnode,null,null,!0):O(u._vnode||null,f,u,null,null,null,h),Ms(),rn(),u._vnode=f},lt={p:O,um:Fe,m:Ye,r:bs,mt:M,mc:x,pc:Q,pbc:$,n:jt,o:e};let vn,An;return t&&([vn,An]=t(lt)),{render:ys,hydrate:vn,createApp:ul(ys,vn)}}function Je({effect:e,update:t},n){e.allowRecurse=t.allowRecurse=n}function ms(e,t,n=!1){const s=e.children,r=t.children;if(H(s)&&H(r))for(let i=0;i>1,e[n[l]]0&&(t[s]=n[i-1]),n[i]=s)}}for(i=n.length,o=n[i-1];i-- >0;)n[i]=o,o=t[o];return n}const ml=e=>e.__isTeleport,Ot=e=>e&&(e.disabled||e.disabled===""),Ds=e=>typeof SVGElement<"u"&&e instanceof SVGElement,qn=(e,t)=>{const n=e&&e.to;return se(n)?t?t(n):null:n},_l={__isTeleport:!0,process(e,t,n,s,r,i,o,l,c,a){const{mc:d,pc:p,pbc:g,o:{insert:v,querySelector:S,createText:O,createComment:q}}=a,m=Ot(t.props);let{shapeFlag:T,children:R,dynamicChildren:N}=t;if(e==null){const B=t.el=O(""),z=t.anchor=O("");v(B,n,s),v(z,n,s);const D=t.target=qn(t.props,S),x=t.targetAnchor=O("");D&&(v(x,D),o=o||Ds(D));const U=($,k)=>{T&16&&d(R,$,k,r,i,o,l,c)};m?U(n,z):D&&U(D,x)}else{t.el=e.el;const B=t.anchor=e.anchor,z=t.target=e.target,D=t.targetAnchor=e.targetAnchor,x=Ot(e.props),U=x?n:z,$=x?B:D;if(o=o||Ds(z),N?(g(e.dynamicChildren,N,U,r,i,o,l),ms(e,t,!0)):c||p(e,t,U,$,r,i,o,l,!1),m)x||Yt(t,n,B,a,1);else if((t.props&&t.props.to)!==(e.props&&e.props.to)){const k=t.target=qn(t.props,S);k&&Yt(t,k,null,a,0)}else x&&Yt(t,z,D,a,1)}ri(t)},remove(e,t,n,s,{um:r,o:{remove:i}},o){const{shapeFlag:l,children:c,anchor:a,targetAnchor:d,target:p,props:g}=e;if(p&&i(d),(o||!Ot(g))&&(i(a),l&16))for(let v=0;v0?Re||at:null,yl(),Nt>0&&Re&&Re.push(e),e}function zc(e,t,n,s,r,i){return oi(fi(e,t,n,s,r,i,!0))}function li(e,t,n,s,r){return oi(ce(e,t,n,s,r,!0))}function fn(e){return e?e.__v_isVNode===!0:!1}function et(e,t){return e.type===t.type&&e.key===t.key}const En="__vInternal",ci=({key:e})=>e??null,Gt=({ref:e,ref_key:t,ref_for:n})=>e!=null?se(e)||oe(e)||K(e)?{i:le,r:e,k:t,f:!!n}:e:null;function fi(e,t=null,n=null,s=0,r=null,i=e===he?0:1,o=!1,l=!1){const c={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&ci(t),ref:t&&Gt(t),scopeId:_n,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:i,patchFlag:s,dynamicProps:r,dynamicChildren:null,appContext:null,ctx:le};return l?(_s(c,n),i&128&&e.normalize(c)):n&&(c.shapeFlag|=se(n)?8:16),Nt>0&&!o&&Re&&(c.patchFlag>0||i&6)&&c.patchFlag!==32&&Re.push(c),c}const ce=wl;function wl(e,t=null,n=null,s=0,r=null,i=!1){if((!e||e===Yr)&&(e=be),fn(e)){const l=qe(e,t,!0);return n&&_s(l,n),Nt>0&&!i&&Re&&(l.shapeFlag&6?Re[Re.indexOf(e)]=l:Re.push(l)),l.patchFlag|=-2,l}if(Il(e)&&(e=e.__vccOpts),t){t=Cl(t);let{class:l,style:c}=t;l&&!se(l)&&(t.class=Zn(l)),te(c)&&(Ir(c)&&!H(c)&&(c=fe({},c)),t.style=Xn(c))}const o=se(e)?1:$o(e)?128:ml(e)?64:te(e)?4:K(e)?2:0;return fi(e,t,n,s,r,o,i,!0)}function Cl(e){return e?Ir(e)||En in e?fe({},e):e:null}function qe(e,t,n=!1){const{props:s,ref:r,patchFlag:i,children:o}=e,l=t?xl(s||{},t):s;return{__v_isVNode:!0,__v_skip:!0,type:e.type,props:l,key:l&&ci(l),ref:t&&t.ref?n&&r?H(r)?r.concat(Gt(t)):[r,Gt(t)]:Gt(t):r,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:o,target:e.target,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==he?i===-1?16:i|16:i,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:e.transition,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&qe(e.ssContent),ssFallback:e.ssFallback&&qe(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce}}function ai(e=" ",t=0){return ce(_t,null,e,t)}function Yc(e,t){const n=ce(Ft,null,e);return n.staticCount=t,n}function Jc(e="",t=!1){return t?(ii(),li(be,null,e)):ce(be,null,e)}function ve(e){return e==null||typeof e=="boolean"?ce(be):H(e)?ce(he,null,e.slice()):typeof e=="object"?Ke(e):ce(_t,null,String(e))}function Ke(e){return e.el===null&&e.patchFlag!==-1||e.memo?e:qe(e)}function _s(e,t){let n=0;const{shapeFlag:s}=e;if(t==null)t=null;else if(H(t))n=16;else if(typeof t=="object")if(s&65){const r=t.default;r&&(r._c&&(r._d=!1),_s(e,r()),r._c&&(r._d=!0));return}else{n=32;const r=t._;!r&&!(En in t)?t._ctx=le:r===3&&le&&(le.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else K(t)?(t={default:t,_ctx:le},n=32):(t=String(t),s&64?(n=16,t=[ai(t)]):n=8);e.children=t,e.shapeFlag|=n}function xl(...e){const t={};for(let n=0;nre||le,bt=e=>{re=e,e.scope.on()},it=()=>{re&&re.scope.off(),re=null};function di(e){return e.vnode.shapeFlag&4}let Ht=!1;function Al(e,t=!1){Ht=t;const{props:n,children:s}=e.vnode,r=di(e);il(e,n,r,t),cl(e,s);const i=r?Rl(e,t):void 0;return Ht=!1,i}function Rl(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=At(new Proxy(e.ctx,Go));const{setup:s}=n;if(s){const r=e.setupContext=s.length>1?pi(e):null;bt(e),yt();const i=We(s,e,0,[e.props,r]);if(wt(),it(),mr(i)){if(i.then(it,it),t)return i.then(o=>{ks(e,o,t)}).catch(o=>{gn(o,e,0)});e.asyncDep=i}else ks(e,i,t)}else hi(e,t)}function ks(e,t,n){K(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:te(t)&&(e.setupState=Lr(t)),hi(e,n)}let Ws;function hi(e,t,n){const s=e.type;if(!e.render){if(!t&&Ws&&!s.render){const r=s.template||ps(e).template;if(r){const{isCustomElement:i,compilerOptions:o}=e.appContext.config,{delimiters:l,compilerOptions:c}=s,a=fe(fe({isCustomElement:i,delimiters:l},o),c);s.render=Ws(r,a)}}e.render=s.render||Oe}bt(e),yt(),el(e),wt(),it()}function Ol(e){return new Proxy(e.attrs,{get(t,n){return pe(e,"get","$attrs"),t[n]}})}function pi(e){const t=s=>{e.exposed=s||{}};let n;return{get attrs(){return n||(n=Ol(e))},slots:e.slots,emit:e.emit,expose:t}}function Tn(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy(Lr(At(e.exposed)),{get(t,n){if(n in t)return t[n];if(n in Rt)return Rt[n](e)},has(t,n){return n in t||n in Rt}}))}function Fl(e,t=!0){return K(e)?e.displayName||e.name:e.name||t&&e.__name}function Il(e){return K(e)&&"__vccOpts"in e}const Te=(e,t)=>vo(e,t,Ht);function Xc(){return Ml().slots}function Ml(){const e=ui();return e.setupContext||(e.setupContext=pi(e))}function zn(e,t,n){const s=arguments.length;return s===2?te(t)&&!H(t)?fn(t)?ce(e,null,[t]):ce(e,t):ce(e,null,t):(s>3?n=Array.prototype.slice.call(arguments,2):s===3&&fn(n)&&(n=[n]),ce(e,t,n))}const Pl=Symbol(""),Ll=()=>pt(Pl),Sl="3.2.47",Nl="http://www.w3.org/2000/svg",tt=typeof document<"u"?document:null,Vs=tt&&tt.createElement("template"),Hl={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,s)=>{const r=t?tt.createElementNS(Nl,e):tt.createElement(e,n?{is:n}:void 0);return e==="select"&&s&&s.multiple!=null&&r.setAttribute("multiple",s.multiple),r},createText:e=>tt.createTextNode(e),createComment:e=>tt.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>tt.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,s,r,i){const o=n?n.previousSibling:t.lastChild;if(r&&(r===i||r.nextSibling))for(;t.insertBefore(r.cloneNode(!0),n),!(r===i||!(r=r.nextSibling)););else{Vs.innerHTML=s?`${e}`:e;const l=Vs.content;if(s){const c=l.firstChild;for(;c.firstChild;)l.appendChild(c.firstChild);l.removeChild(c)}t.insertBefore(l,n)}return[o?o.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}};function $l(e,t,n){const s=e._vtc;s&&(t=(t?[t,...s]:[...s]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}function Ul(e,t,n){const s=e.style,r=se(n);if(n&&!r){if(t&&!se(t))for(const i in t)n[i]==null&&Yn(s,i,"");for(const i in n)Yn(s,i,n[i])}else{const i=s.display;r?t!==n&&(s.cssText=n):t&&e.removeAttribute("style"),"_vod"in e&&(s.display=i)}}const qs=/\s*!important$/;function Yn(e,t,n){if(H(n))n.forEach(s=>Yn(e,t,s));else if(n==null&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const s=jl(e,t);qs.test(n)?e.setProperty(ot(s),n.replace(qs,""),"important"):e[s]=n}}const zs=["Webkit","Moz","ms"],In={};function jl(e,t){const n=In[t];if(n)return n;let s=Le(t);if(s!=="filter"&&s in e)return In[t]=s;s=dn(s);for(let r=0;rMn||(Vl.then(()=>Mn=0),Mn=Date.now());function zl(e,t){const n=s=>{if(!s._vts)s._vts=Date.now();else if(s._vts<=n.attached)return;xe(Yl(s,n.value),t,5,[s])};return n.value=e,n.attached=ql(),n}function Yl(e,t){if(H(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(s=>r=>!r._stopped&&s&&s(r))}else return t}const Xs=/^on[a-z]/,Jl=(e,t,n,s,r=!1,i,o,l,c)=>{t==="class"?$l(e,s,r):t==="style"?Ul(e,n,s):$t(t)?Qn(t)||kl(e,t,n,s,o):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):Xl(e,t,s,r))?Dl(e,t,s,i,o,l,c):(t==="true-value"?e._trueValue=s:t==="false-value"&&(e._falseValue=s),Bl(e,t,s,r))};function Xl(e,t,n,s){return s?!!(t==="innerHTML"||t==="textContent"||t in e&&Xs.test(t)&&K(n)):t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA"||Xs.test(t)&&se(n)?!1:t in e}const Be="transition",xt="animation",gi=(e,{slots:t})=>zn(Kr,Zl(e),t);gi.displayName="Transition";const mi={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String};gi.props=fe({},Kr.props,mi);const Xe=(e,t=[])=>{H(e)?e.forEach(n=>n(...t)):e&&e(...t)},Zs=e=>e?H(e)?e.some(t=>t.length>1):e.length>1:!1;function Zl(e){const t={};for(const F in e)F in mi||(t[F]=e[F]);if(e.css===!1)return t;const{name:n="v",type:s,duration:r,enterFromClass:i=`${n}-enter-from`,enterActiveClass:o=`${n}-enter-active`,enterToClass:l=`${n}-enter-to`,appearFromClass:c=i,appearActiveClass:a=o,appearToClass:d=l,leaveFromClass:p=`${n}-leave-from`,leaveActiveClass:g=`${n}-leave-active`,leaveToClass:v=`${n}-leave-to`}=e,S=Ql(r),O=S&&S[0],q=S&&S[1],{onBeforeEnter:m,onEnter:T,onEnterCancelled:R,onLeave:N,onLeaveCancelled:B,onBeforeAppear:z=m,onAppear:D=T,onAppearCancelled:x=R}=t,U=(F,W,M)=>{Ze(F,W?d:l),Ze(F,W?a:o),M&&M()},$=(F,W)=>{F._isLeaving=!1,Ze(F,p),Ze(F,v),Ze(F,g),W&&W()},k=F=>(W,M)=>{const ge=F?D:T,X=()=>U(W,F,M);Xe(ge,[W,X]),Qs(()=>{Ze(W,F?c:i),De(W,F?d:l),Zs(ge)||Gs(W,s,O,X)})};return fe(t,{onBeforeEnter(F){Xe(m,[F]),De(F,i),De(F,o)},onBeforeAppear(F){Xe(z,[F]),De(F,c),De(F,a)},onEnter:k(!1),onAppear:k(!0),onLeave(F,W){F._isLeaving=!0;const M=()=>$(F,W);De(F,p),tc(),De(F,g),Qs(()=>{F._isLeaving&&(Ze(F,p),De(F,v),Zs(N)||Gs(F,s,q,M))}),Xe(N,[F,M])},onEnterCancelled(F){U(F,!1),Xe(R,[F])},onAppearCancelled(F){U(F,!0),Xe(x,[F])},onLeaveCancelled(F){$(F),Xe(B,[F])}})}function Ql(e){if(e==null)return null;if(te(e))return[Pn(e.enter),Pn(e.leave)];{const t=Pn(e);return[t,t]}}function Pn(e){return Ui(e)}function De(e,t){t.split(/\s+/).forEach(n=>n&&e.classList.add(n)),(e._vtc||(e._vtc=new Set)).add(t)}function Ze(e,t){t.split(/\s+/).forEach(s=>s&&e.classList.remove(s));const{_vtc:n}=e;n&&(n.delete(t),n.size||(e._vtc=void 0))}function Qs(e){requestAnimationFrame(()=>{requestAnimationFrame(e)})}let Gl=0;function Gs(e,t,n,s){const r=e._endId=++Gl,i=()=>{r===e._endId&&s()};if(n)return setTimeout(i,n);const{type:o,timeout:l,propCount:c}=ec(e,t);if(!o)return s();const a=o+"end";let d=0;const p=()=>{e.removeEventListener(a,g),i()},g=v=>{v.target===e&&++d>=c&&p()};setTimeout(()=>{d(n[S]||"").split(", "),r=s(`${Be}Delay`),i=s(`${Be}Duration`),o=er(r,i),l=s(`${xt}Delay`),c=s(`${xt}Duration`),a=er(l,c);let d=null,p=0,g=0;t===Be?o>0&&(d=Be,p=o,g=i.length):t===xt?a>0&&(d=xt,p=a,g=c.length):(p=Math.max(o,a),d=p>0?o>a?Be:xt:null,g=d?d===Be?i.length:c.length:0);const v=d===Be&&/\b(transform|all)(,|$)/.test(s(`${Be}Property`).toString());return{type:d,timeout:p,propCount:g,hasTransform:v}}function er(e,t){for(;e.lengthtr(n)+tr(e[s])))}function tr(e){return Number(e.slice(0,-1).replace(",","."))*1e3}function tc(){return document.body.offsetHeight}const nr=e=>{const t=e.props["onUpdate:modelValue"]||!1;return H(t)?n=>Zt(t,n):t};function nc(e){e.target.composing=!0}function sr(e){const t=e.target;t.composing&&(t.composing=!1,t.dispatchEvent(new Event("input")))}const Zc={created(e,{modifiers:{lazy:t,trim:n,number:s}},r){e._assign=nr(r);const i=s||r.props&&r.props.type==="number";ft(e,t?"change":"input",o=>{if(o.target.composing)return;let l=e.value;n&&(l=l.trim()),i&&(l=Nn(l)),e._assign(l)}),n&&ft(e,"change",()=>{e.value=e.value.trim()}),t||(ft(e,"compositionstart",nc),ft(e,"compositionend",sr),ft(e,"change",sr))},mounted(e,{value:t}){e.value=t??""},beforeUpdate(e,{value:t,modifiers:{lazy:n,trim:s,number:r}},i){if(e._assign=nr(i),e.composing||document.activeElement===e&&e.type!=="range"&&(n||s&&e.value.trim()===t||(r||e.type==="number")&&Nn(e.value)===t))return;const o=t??"";e.value!==o&&(e.value=o)}},sc=["ctrl","shift","alt","meta"],rc={stop:e=>e.stopPropagation(),prevent:e=>e.preventDefault(),self:e=>e.target!==e.currentTarget,ctrl:e=>!e.ctrlKey,shift:e=>!e.shiftKey,alt:e=>!e.altKey,meta:e=>!e.metaKey,left:e=>"button"in e&&e.button!==0,middle:e=>"button"in e&&e.button!==1,right:e=>"button"in e&&e.button!==2,exact:(e,t)=>sc.some(n=>e[`${n}Key`]&&!t.includes(n))},Qc=(e,t)=>(n,...s)=>{for(let r=0;rn=>{if(!("key"in n))return;const s=ot(n.key);if(t.some(r=>r===s||ic[r]===s))return e(n)},ef={beforeMount(e,{value:t},{transition:n}){e._vod=e.style.display==="none"?"":e.style.display,n&&t?n.beforeEnter(e):Et(e,t)},mounted(e,{value:t},{transition:n}){n&&t&&n.enter(e)},updated(e,{value:t,oldValue:n},{transition:s}){!t!=!n&&(s?t?(s.beforeEnter(e),Et(e,!0),s.enter(e)):s.leave(e,()=>{Et(e,!1)}):Et(e,t))},beforeUnmount(e,{value:t}){Et(e,t)}};function Et(e,t){e.style.display=t?e._vod:"none"}const oc=fe({patchProp:Jl},Hl);let Ln,rr=!1;function lc(){return Ln=rr?Ln:hl(oc),rr=!0,Ln}const tf=(...e)=>{const t=lc().createApp(...e),{mount:n}=t;return t.mount=s=>{const r=cc(s);if(r)return n(r,!0,r instanceof SVGElement)},t};function cc(e){return se(e)?document.querySelector(e):e}const nf=(e,t)=>{const n=e.__vccOpts||e;for(const[s,r]of t)n[s]=r;return n},fc="modulepreload",ac=function(e){return"/document/"+e},ir={},sf=function(t,n,s){if(!n||n.length===0)return t();const r=document.getElementsByTagName("link");return Promise.all(n.map(i=>{if(i=ac(i),i in ir)return;ir[i]=!0;const o=i.endsWith(".css"),l=o?'[rel="stylesheet"]':"";if(!!s)for(let d=r.length-1;d>=0;d--){const p=r[d];if(p.href===i&&(!o||p.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${i}"]${l}`))return;const a=document.createElement("link");if(a.rel=o?"stylesheet":fc,o||(a.as="script",a.crossOrigin=""),a.href=i,document.head.appendChild(a),o)return new Promise((d,p)=>{a.addEventListener("load",d),a.addEventListener("error",()=>p(new Error(`Unable to preload CSS for ${i}`)))})})).then(()=>t())},uc=window.__VP_SITE_DATA__,_i=/^[a-z]+:/i,rf=/^pathname:\/\//,of="vitepress-theme-appearance",bi=/#.*$/,dc=/(index)?\.(md|html)$/,Ce=typeof document<"u",yi={relativePath:"",filePath:"",title:"404",description:"Not Found",headers:[],frontmatter:{sidebar:!1,layout:"page"},lastUpdated:0,isNotFound:!0};function hc(e,t,n=!1){if(t===void 0)return!1;if(e=or(`/${e}`),n)return new RegExp(t).test(e);if(or(t)!==e)return!1;const s=t.match(bi);return s?(Ce?location.hash:"")===s[0]:!0}function or(e){return decodeURI(e).replace(bi,"").replace(dc,"")}function pc(e){return _i.test(e)}function gc(e,t){var s,r,i,o,l,c,a;const n=Object.keys(e.locales).find(d=>d!=="root"&&!pc(d)&&hc(t,`/${d}/`,!0))||"root";return Object.assign({},e,{localeIndex:n,lang:((s=e.locales[n])==null?void 0:s.lang)??e.lang,dir:((r=e.locales[n])==null?void 0:r.dir)??e.dir,title:((i=e.locales[n])==null?void 0:i.title)??e.title,titleTemplate:((o=e.locales[n])==null?void 0:o.titleTemplate)??e.titleTemplate,description:((l=e.locales[n])==null?void 0:l.description)??e.description,head:Ci(e.head,((c=e.locales[n])==null?void 0:c.head)??[]),themeConfig:{...e.themeConfig,...(a=e.locales[n])==null?void 0:a.themeConfig}})}function wi(e,t){const n=t.title||e.title,s=t.titleTemplate??e.titleTemplate;if(typeof s=="string"&&s.includes(":title"))return s.replace(/:title/g,n);const r=mc(e.title,s);return`${n}${r}`}function mc(e,t){return t===!1?"":t===!0||t===void 0?` | ${e}`:e===t?"":` | ${t}`}function _c(e,t){const[n,s]=t;if(n!=="meta")return!1;const r=Object.entries(s)[0];return r==null?!1:e.some(([i,o])=>i===n&&o[r[0]]===r[1])}function Ci(e,t){return[...e.filter(n=>!_c(t,n)),...t]}const bc=/[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g,yc=/^[a-z]:/i;function lr(e){const t=yc.exec(e),n=t?t[0]:"";return n+e.slice(n.length).replace(bc,"_").replace(/(^|\/)_+(?=[^/]*$)/,"$1")}const wc=Symbol(),st=bo(uc);function lf(e){const t=Te(()=>gc(st.value,e.data.relativePath));return{site:t,theme:Te(()=>t.value.themeConfig),page:Te(()=>e.data),frontmatter:Te(()=>e.data.frontmatter),params:Te(()=>e.data.params),lang:Te(()=>t.value.lang),dir:Te(()=>t.value.dir),localeIndex:Te(()=>t.value.localeIndex||"root"),title:Te(()=>wi(t.value,e.data)),description:Te(()=>e.data.description||t.value.description),isDark:Mr(!1)}}function cf(){const e=pt(wc);if(!e)throw new Error("vitepress data not properly injected in app");return e}function Cc(e,t){return`${e}${t}`.replace(/\/+/g,"/")}function cr(e){return _i.test(e)||e.startsWith(".")?e:Cc(st.value.base,e)}function xc(e){let t=e.replace(/\.html$/,"");if(t=decodeURIComponent(t),t=t.replace(/\/$/,"/index"),Ce){const n="/document/";t=lr(t.slice(n.length).replace(/\//g,"_")||"index")+".md";let s=__VP_HASH_MAP__[t.toLowerCase()];s||(t=t.endsWith("_index.md")?t.slice(0,-9)+".md":t.slice(0,-3)+"_index.md",s=__VP_HASH_MAP__[t.toLowerCase()]),t=`${n}assets/${t}.${s}.js`}else t=`./${lr(t.slice(1).replace(/\//g,"_"))}.md.js`;return t}let en=[];function ff(e){en.push(e),xn(()=>{en=en.filter(t=>t!==e)})}const Ec=Symbol(),fr="http://a.com",Tc=()=>({path:"/",component:null,data:yi});function af(e,t){const n=pn(Tc()),s={route:n,go:r};async function r(l=Ce?location.href:"/"){var a,d;await((a=s.onBeforeRouteChange)==null?void 0:a.call(s,l));const c=new URL(l,fr);st.value.cleanUrls||!c.pathname.endsWith("/")&&!c.pathname.endsWith(".html")&&(c.pathname+=".html",l=c.pathname+c.search+c.hash),Ce&&l!==location.href&&(history.replaceState({scrollPosition:window.scrollY},document.title),history.pushState(null,"",l)),await o(l),await((d=s.onAfterRouteChanged)==null?void 0:d.call(s,l))}let i=null;async function o(l,c=0,a=!1){const d=new URL(l,fr),p=i=d.pathname;try{let g=await e(p);if(i===p){i=null;const{default:v,__pageData:S}=g;if(!v)throw new Error(`Invalid route component: ${v}`);n.path=Ce?p:cr(p),n.component=At(v),n.data=At(S),Ce&&Hr(()=>{let O=st.value.base+S.relativePath.replace(/(?:(^|\/)index)?\.md$/,"$1");if(!st.value.cleanUrls&&!O.endsWith("/")&&(O+=".html"),O!==d.pathname&&(d.pathname=O,l=O+d.search+d.hash,history.replaceState(null,"",l)),d.hash&&!c){let q=null;try{q=document.querySelector(decodeURIComponent(d.hash))}catch(m){console.warn(m)}if(q){ar(q,d.hash);return}}window.scrollTo(0,c)})}}catch(g){if(!/fetch/.test(g.message)&&!/^\/404(\.html|\/)?$/.test(l)&&console.error(g),!a)try{const v=await fetch(st.value.base+"hashmap.json");window.__VP_HASH_MAP__=await v.json(),await o(l,c,!0);return}catch{}i===p&&(i=null,n.path=Ce?p:cr(p),n.component=t?At(t):null,n.data=yi)}}return Ce&&(window.addEventListener("click",l=>{if(l.target.closest("button"))return;const a=l.target.closest("a");if(a&&!a.closest(".vp-raw")&&(a instanceof SVGElement||!a.download)){const{target:d}=a,{href:p,origin:g,pathname:v,hash:S,search:O}=new URL(a.href instanceof SVGAnimatedString?a.href.animVal:a.href,a.baseURI),q=window.location,m=v.match(/\.\w+$/);!l.ctrlKey&&!l.shiftKey&&!l.altKey&&!l.metaKey&&d!=="_blank"&&g===q.origin&&!(m&&m[0]!==".html")&&(l.preventDefault(),v===q.pathname&&O===q.search?S&&(S!==q.hash&&(history.pushState(null,"",S),window.dispatchEvent(new Event("hashchange"))),ar(a,S,a.classList.contains("header-anchor"))):r(p))}},{capture:!0}),window.addEventListener("popstate",l=>{o(location.href,l.state&&l.state.scrollPosition||0)}),window.addEventListener("hashchange",l=>{l.preventDefault()})),s}function vc(){const e=pt(Ec);if(!e)throw new Error("useRouter() is called without provider.");return e}function xi(){return vc().route}function ar(e,t,n=!1){let s=null;try{s=e.classList.contains("header-anchor")?e:document.querySelector(decodeURIComponent(t))}catch(r){console.warn(r)}if(s){const r=st.value.scrollOffset;let i=0;if(typeof r=="number")i=r;else if(typeof r=="string")i=ur(r);else if(Array.isArray(r))for(const c of r){const a=ur(c);if(a){i=a;break}}const o=parseInt(window.getComputedStyle(s).paddingTop,10),l=window.scrollY+s.getBoundingClientRect().top-i+o;!n||Math.abs(l-window.scrollY)>window.innerHeight?window.scrollTo(0,l):window.scrollTo({left:0,top:l,behavior:"smooth"})}}function ur(e){const t=document.querySelector(e);if(!t)return 0;const n=t.getBoundingClientRect().bottom;return n<0?0:n+24}const dr=()=>en.forEach(e=>e()),uf=Vr({name:"VitePressContent",props:{as:{type:[Object,String],default:"div"}},setup(e){const t=xi();return()=>zn(e.as,{style:{position:"relative"}},[t.component?zn(t.component,{onVnodeMounted:dr,onVnodeUpdated:dr}):"404 Page Not Found"])}});function df(e,t){let n=[],s=!0;const r=i=>{if(s){s=!1;return}n.forEach(o=>document.head.removeChild(o)),n=[],i.forEach(o=>{const l=Ac(o);document.head.appendChild(l),n.push(l)})};jo(()=>{const i=e.data,o=t.value,l=i&&i.description,c=i&&i.frontmatter.head||[];document.title=wi(o,i),document.querySelector("meta[name=description]").setAttribute("content",l||o.description),r(Ci(o.head,Oc(c)))})}function Ac([e,t,n]){const s=document.createElement(e);for(const r in t)s.setAttribute(r,t[r]);return n&&(s.innerHTML=n),s}function Rc(e){return e[0]==="meta"&&e[1]&&e[1].name==="description"}function Oc(e){return e.filter(t=>!Rc(t))}const Sn=new Set,Ei=()=>document.createElement("link"),Fc=e=>{const t=Ei();t.rel="prefetch",t.href=e,document.head.appendChild(t)},Ic=e=>{const t=new XMLHttpRequest;t.open("GET",e,t.withCredentials=!0),t.send()};let Jt;const Mc=Ce&&(Jt=Ei())&&Jt.relList&&Jt.relList.supports&&Jt.relList.supports("prefetch")?Fc:Ic;function hf(){if(!Ce||!window.IntersectionObserver)return;let e;if((e=navigator.connection)&&(e.saveData||/2g/.test(e.effectiveType)))return;const t=window.requestIdleCallback||setTimeout;let n=null;const s=()=>{n&&n.disconnect(),n=new IntersectionObserver(i=>{i.forEach(o=>{if(o.isIntersecting){const l=o.target;n.unobserve(l);const{pathname:c}=l;if(!Sn.has(c)){Sn.add(c);const a=xc(c);Mc(a)}}})}),t(()=>{document.querySelectorAll("#app a").forEach(i=>{const{target:o}=i,{hostname:l,pathname:c}=new URL(i.href instanceof SVGAnimatedString?i.href.animVal:i.href,i.baseURI),a=c.match(/\.\w+$/);a&&a[0]!==".html"||o!=="_blank"&&l===location.hostname&&(c!==location.pathname?n.observe(i):Sn.add(c))})})};Cn(s);const r=xi();Qt(()=>r.path,s),xn(()=>{n&&n.disconnect()})}const pf=Vr({setup(e,{slots:t}){const n=Mr(!1);return Cn(()=>{n.value=!0}),()=>n.value&&t.default?t.default():null}});function gf(){if(Ce){const e=new Map;window.addEventListener("click",t=>{var s;const n=t.target;if(n.matches('div[class*="language-"] > button.copy')){const r=n.parentElement,i=(s=n.nextElementSibling)==null?void 0:s.nextElementSibling;if(!r||!i)return;const o=/language-(shellscript|shell|bash|sh|zsh)/.test(r.className);let l="";i.querySelectorAll("span.line:not(.diff.remove)").forEach(c=>l+=(c.textContent||"")+` +`),l=l.slice(0,-1),o&&(l=l.replace(/^ *(\$|>) /gm,"").trim()),Pc(l).then(()=>{n.classList.add("copied"),clearTimeout(e.get(n));const c=setTimeout(()=>{n.classList.remove("copied"),n.blur(),e.delete(n)},2e3);e.set(n,c)})}})}}async function Pc(e){try{return navigator.clipboard.writeText(e)}catch{const t=document.createElement("textarea"),n=document.activeElement;t.value=e,t.setAttribute("readonly",""),t.style.contain="strict",t.style.position="absolute",t.style.left="-9999px",t.style.fontSize="12pt";const s=document.getSelection(),r=s?s.rangeCount>0&&s.getRangeAt(0):null;document.body.appendChild(t),t.select(),t.selectionStart=0,t.selectionEnd=e.length,document.execCommand("copy"),document.body.removeChild(t),r&&(s.removeAllRanges(),s.addRange(r)),n&&n.focus()}}function mf(){Ce&&window.addEventListener("click",e=>{var n,s;const t=e.target;if(t.matches(".vp-code-group input")){const r=(n=t.parentElement)==null?void 0:n.parentElement,i=Array.from((r==null?void 0:r.querySelectorAll("input"))||[]).indexOf(t),o=r==null?void 0:r.querySelector('div[class*="language-"].active'),l=(s=r==null?void 0:r.querySelectorAll('div[class*="language-"]:not(.language-id)'))==null?void 0:s[i];o&&l&&o!==l&&(o.classList.remove("active"),l.classList.add("active"))}})}export{ff as $,li as A,Po as B,Jc as C,xl as D,ce as E,he as F,Dc as G,sf as H,Bc as I,ef as J,Qc as K,Zc as L,kc as M,qc as N,Kc as O,rf as P,_i as Q,Ce as R,$c as S,gi as T,Uc as U,Yc as V,of as W,pt as X,Uo as Y,Yo as Z,nf as _,ai as a,bo as a0,Xn as a1,Hr as a2,Gc as a3,Vc as a4,jc as a5,Xc as a6,df as a7,hf as a8,gf as a9,mf as aa,zn as ab,Ec as ac,lf as ad,wc as ae,uf as af,pf as ag,st as ah,tf as ai,af as aj,xc as ak,wo as b,zc as c,Vr as d,Hc as e,Fr as f,Nc as g,Mr as h,Ki as i,Sc as j,jo as k,Te as l,ui as m,Zn as n,ii as o,Cn as p,pc as q,Wc as r,cr as s,Lc as t,cf as u,hc as v,Qt as w,xi as x,xn as y,fi as z}; diff --git a/docs/document/assets/chunks/theme.cbe2b3c0.js b/docs/document/assets/chunks/theme.cbe2b3c0.js new file mode 100644 index 000000000..d9cce63ed --- /dev/null +++ b/docs/document/assets/chunks/theme.cbe2b3c0.js @@ -0,0 +1,7 @@ +import{d as $,o as c,c as r,r as h,n as B,a as O,t as L,_ as g,u as nt,b as l,e as bt,f as st,g as kt,h as S,i as $t,j as Pt,w as ee,k as ae,l as w,m as xt,p as J,q as Vt,P as wt,s as be,v as te,x as le,y as Ie,z as u,F as T,A as V,B as v,T as Te,C as k,D as _e,E as p,G as W,H as St,I as Ke,J as Lt,K as ot,L as Mt,M as D,N as Ct,O as Q,Q as at,R as It,S as R,U,V as Tt,W as We,X as Ae,Y as he,Z as At,$ as ie,a0 as Be,a1 as Bt,a2 as Nt,a3 as zt,a4 as Ht,a5 as Et,a6 as Dt}from"./framework.5c8808ab.js";const Ot=$({__name:"VPBadge",props:{text:null,type:null},setup(e){return(t,n)=>(c(),r("span",{class:B(["VPBadge",e.type??"tip"])},[h(t.$slots,"default",{},()=>[O(L(e.text),1)],!0)],2))}});const Ft=g(Ot,[["__scopeId","data-v-e233384c"]]),M=nt;function it(e){return $t()?(Pt(e),!0):!1}function ct(e){return typeof e=="function"?e():l(e)}const jt=typeof window<"u",lt=()=>{};function qt(...e){if(e.length!==1)return bt(...e);const t=e[0];return typeof t=="function"?st(kt(()=>({get:t,set:lt}))):S(t)}function Gt(e){var t;const n=ct(e);return(t=n==null?void 0:n.$el)!=null?t:n}const Ne=jt?window:void 0;function Rt(...e){let t,n,s,o;if(typeof e[0]=="string"||Array.isArray(e[0])?([n,s,o]=e,t=Ne):[t,n,s,o]=e,!t)return lt;Array.isArray(n)||(n=[n]),Array.isArray(s)||(s=[s]);const a=[],i=()=>{a.forEach(y=>y()),a.length=0},_=(y,b,P,m)=>(y.addEventListener(b,P,m),()=>y.removeEventListener(b,P,m)),d=ee(()=>[Gt(t),ct(o)],([y,b])=>{i(),y&&a.push(...n.flatMap(P=>s.map(m=>_(y,P,m,b))))},{immediate:!0,flush:"post"}),f=()=>{d(),i()};return it(f),f}function Ut(){const e=S(!1);return xt()&&J(()=>{e.value=!0}),e}function Kt(e){const t=Ut();return w(()=>(t.value,!!e()))}function Se(e,t={}){const{window:n=Ne}=t,s=Kt(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let o;const a=S(!1),i=()=>{o&&("removeEventListener"in o?o.removeEventListener("change",_):o.removeListener(_))},_=()=>{s.value&&(i(),o=n.matchMedia(qt(e).value),a.value=!!(o!=null&&o.matches),o&&("addEventListener"in o?o.addEventListener("change",_):o.addListener(_)))};return ae(_),it(()=>i()),a}function Wt({window:e=Ne}={}){if(!e)return{x:S(0),y:S(0)};const t=S(e.scrollX),n=S(e.scrollY);return Rt(e,"scroll",()=>{t.value=e.scrollX,n.value=e.scrollY},{capture:!1,passive:!0}),{x:t,y:n}}function Yt(e,t){let n,s=!1;return()=>{n&&clearTimeout(n),s?n=setTimeout(e,t):(e(),s=!0,setTimeout(()=>{s=!1},t))}}function Le(e){return/^\//.test(e)?e:`/${e}`}function ce(e){if(Vt(e))return e.replace(wt,"");const{site:t}=M(),{pathname:n,search:s,hash:o}=new URL(e,"http://example.com"),a=n.endsWith("/")||n.endsWith(".html")?e:e.replace(/(?:(^\.+)\/)?.*$/,`$1${n.replace(/(\.md)?$/,t.value.cleanUrls?"":".html")}${s}${o}`);return be(a)}function rt(e,t){if(Array.isArray(e))return e;if(e==null)return[];t=Le(t);const n=Object.keys(e).sort((s,o)=>o.split("/").length-s.split("/").length).find(s=>t.startsWith(Le(s)));return n?e[n]:[]}function Xt(e){const t=[];let n=0;for(const s in e){const o=e[s];if(o.items){n=t.push(o);continue}t[n]||t.push({items:[]}),t[n].items.push(o)}return t}function Jt(e){const t=[];function n(s){for(const o of s)o.text&&o.link&&t.push({text:o.text,link:o.link}),o.items&&n(o.items)}return n(e),t}function Me(e,t){return Array.isArray(t)?t.some(n=>Me(e,n)):te(e,t.link)?!0:t.items?Me(e,t.items):!1}function K(){const e=le(),{theme:t,frontmatter:n}=M(),s=Se("(min-width: 960px)"),o=S(!1),a=w(()=>{const x=t.value.sidebar,A=e.data.relativePath;return x?rt(x,A):[]}),i=w(()=>n.value.sidebar!==!1&&a.value.length>0&&n.value.layout!=="home"),_=w(()=>d?n.value.aside==null?t.value.aside==="left":n.value.aside==="left":!1),d=w(()=>n.value.layout==="home"?!1:n.value.aside!=null?!!n.value.aside:t.value.aside!==!1),f=w(()=>i.value&&s.value),y=w(()=>i.value?Xt(a.value):[]);function b(){o.value=!0}function P(){o.value=!1}function m(){o.value?P():b()}return{isOpen:o,sidebar:a,sidebarGroups:y,hasSidebar:i,hasAside:d,leftAside:_,isSidebarEnabled:f,open:b,close:P,toggle:m}}function Qt(e,t){let n;ae(()=>{n=e.value?document.activeElement:void 0}),J(()=>{window.addEventListener("keyup",s)}),Ie(()=>{window.removeEventListener("keyup",s)});function s(o){o.key==="Escape"&&e.value&&(t(),n==null||n.focus())}}function Zt(e){const{page:t}=M(),n=S(!1),s=w(()=>e.value.collapsed!=null),o=w(()=>!!e.value.link),a=w(()=>te(t.value.relativePath,e.value.link)),i=w(()=>a.value?!0:e.value.items?Me(t.value.relativePath,e.value.items):!1),_=w(()=>!!(e.value.items&&e.value.items.length));ae(()=>{n.value=!!(s.value&&e.value.collapsed)}),ae(()=>{(a.value||i.value)&&(n.value=!1)});function d(){s.value&&(n.value=!n.value)}return{collapsed:n,collapsible:s,isLink:o,isActiveLink:a,hasActiveLink:i,hasChildren:_,toggle:d}}const en=$({__name:"VPSkipLink",setup(e){const t=le(),n=S();ee(()=>t.path,()=>n.value.focus());function s({target:o}){const a=document.querySelector(decodeURIComponent(o.hash));if(a){const i=()=>{a.removeAttribute("tabindex"),a.removeEventListener("blur",i)};a.setAttribute("tabindex","-1"),a.addEventListener("blur",i),a.focus(),window.scrollTo(0,0)}}return(o,a)=>(c(),r(T,null,[u("span",{ref_key:"backToTop",ref:n,tabindex:"-1"},null,512),u("a",{href:"#VPContent",class:"VPSkipLink visually-hidden",onClick:s}," Skip to content ")],64))}});const tn=g(en,[["__scopeId","data-v-994b33bc"]]),nn={key:0,class:"VPBackdrop"},sn=$({__name:"VPBackdrop",props:{show:{type:Boolean}},setup(e){return(t,n)=>(c(),V(Te,{name:"fade"},{default:v(()=>[e.show?(c(),r("div",nn)):k("",!0)]),_:1}))}});const on=g(sn,[["__scopeId","data-v-b2600058"]]);function an(){const e=S(!1);function t(){e.value=!0,window.addEventListener("resize",o)}function n(){e.value=!1,window.removeEventListener("resize",o)}function s(){e.value?n():t()}function o(){window.outerWidth>=768&&n()}const a=le();return ee(()=>a.path,n),{isScreenOpen:e,openScreen:t,closeScreen:n,toggleScreen:s}}function re({removeCurrent:e=!0,correspondingLink:t=!1}={}){const{site:n,localeIndex:s,page:o,theme:a}=M(),i=w(()=>{var d,f;return{label:(d=n.value.locales[s.value])==null?void 0:d.label,link:((f=n.value.locales[s.value])==null?void 0:f.link)||(s.value==="root"?"/":`/${s.value}/`)}});return{localeLinks:w(()=>Object.entries(n.value.locales).flatMap(([d,f])=>e&&i.value.label===f.label?[]:{text:f.label,link:cn(f.link||(d==="root"?"/":`/${d}/`),a.value.i18nRouting!==!1&&t,o.value.relativePath.slice(i.value.link.length-1),!n.value.cleanUrls)})),currentLang:i}}function cn(e,t,n,s){return t?e.replace(/\/$/,"")+Le(n.replace(/(^|\/)?index.md$/,"$1").replace(/\.md$/,s?".html":"")):e}const ln=["src","alt"],rn={inheritAttrs:!1},un=$({...rn,__name:"VPImage",props:{image:null,alt:null},setup(e){return(t,n)=>{const s=W("VPImage",!0);return e.image?(c(),r(T,{key:0},[typeof e.image=="string"||"src"in e.image?(c(),r("img",_e({key:0,class:"VPImage"},typeof e.image=="string"?t.$attrs:{...e.image,...t.$attrs},{src:l(be)(typeof e.image=="string"?e.image:e.image.src),alt:e.alt??(typeof e.image=="string"?"":e.image.alt||"")}),null,16,ln)):(c(),r(T,{key:1},[p(s,_e({class:"dark",image:e.image.dark,alt:e.image.alt},t.$attrs),null,16,["image","alt"]),p(s,_e({class:"light",image:e.image.light,alt:e.image.alt},t.$attrs),null,16,["image","alt"])],64))],64)):k("",!0)}}});const ze=g(un,[["__scopeId","data-v-74766fef"]]),dn=["href"],_n=$({__name:"VPNavBarTitle",setup(e){const{site:t,theme:n}=M(),{hasSidebar:s}=K(),{currentLang:o}=re();return(a,i)=>(c(),r("div",{class:B(["VPNavBarTitle",{"has-sidebar":l(s)}])},[u("a",{class:"title",href:l(ce)(l(o).link)},[h(a.$slots,"nav-bar-title-before",{},void 0,!0),l(n).logo?(c(),V(ze,{key:0,class:"logo",image:l(n).logo},null,8,["image"])):k("",!0),l(n).siteTitle?(c(),r(T,{key:1},[O(L(l(n).siteTitle),1)],64)):l(n).siteTitle===void 0?(c(),r(T,{key:2},[O(L(l(t).title),1)],64)):k("",!0),h(a.$slots,"nav-bar-title-after",{},void 0,!0)],8,dn)],2))}});const hn=g(_n,[["__scopeId","data-v-bd15f18e"]]),vn="/document/assets/flex-logo.2489261b.svg";function xe(e,t){return typeof e>"u"?t:e}function Ye(e){const t=Array(e);for(let n=0;n=this.minlength&&(_||!i[y])){let P=de(d,o,f),m="";switch(this.tokenize){case"full":if(3x;A--)if(A-x>=this.minlength){const N=de(d,o,f,b,x);m=y.substring(x,A),this.push_index(i,m,N,e,n)}break}case"reverse":if(2=this.minlength){const A=de(d,o,f,b,x);this.push_index(i,m,A,e,n)}m=""}case"forward":if(1=this.minlength&&this.push_index(i,m,P,e,n);break}default:if(this.boost&&(P=Math.min(0|P/this.boost(t,y,f),d-1)),this.push_index(i,y,P,e,n),_&&1=this.minlength&&!x[y]){x[y]=1;const C=de(A+(o/2>A?0:1),o,f,H-1,I-1),z=this.bidirectional&&y>N;this.push_index(a,z?N:y,C,e,n,z?y:N)}}}}}this.fastupdate||(this.register[e]=1)}}return this};function de(e,t,n,s,o){return n&&1=this.minlength&&!b[m]){if(!this.optimize&&!a&&!this.map[m])return i;P[A++]=m,b[m]=1}e=P,s=e.length}if(!s)return i;t||(t=100);let d,f=this.depth&&1=n)))));m++);if(f)return o?Qe(_,n,0):void(e[e.length]=_)}return!t&&_};function Qe(e,t,n){return e=e.length===1?e[0]:pn(e),n||e.length>t?e.slice(n,n+t):e}function Ze(e,t,n,s){if(n){const o=s&&t>n;e=e[o?t:n],e=e&&e[o?n:t]}else e=e[t];return e}F.prototype.contain=function(e){return!!this.register[e]},F.prototype.update=function(e,t){return this.remove(e).add(e,t)},F.prototype.remove=function(e,t){const n=this.register[e];if(n){if(this.fastupdate)for(let s,o=0;o{if(a.value){for(var I=b.value.search(a.value,{enrich:!0}),C=[],z=0;z!I||!I.length?[]:I.reduce((z,E)=>(z[C(E)]||(z[C(E)]=[]),z[C(E)].push(E),z),{}),N=()=>{setTimeout(()=>{_.value&&_.value.focus()},100),H(),o.value=!0};J(async()=>{var E,G;const I=await St(()=>import("./virtual_search-data.3548acb2.js"),[]);d.value=I.default.INDEX_DATA,f.value=I.default.PREVIEW_LOOKUP,y.value=I.default.Options,i.value=window.location.origin+be(n.value==="root"?"/":n.value),P.value=((E=y.value)==null?void 0:E.buttonLabel)||P.value,m.value=((G=y.value)==null?void 0:G.placeholder)||m.value;var C=new F(y.value);C.import("reg",d.value.reg),C.import("cfg",d.value.cfg),C.import("map",d.value.map),C.import("ctx",d.value.ctx),b.value=C,s.value.innerHTML=/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?"⌘":"Ctrl";const z=q=>{var ue;q.key==="k"&&(q.ctrlKey||q.metaKey)&&(q.preventDefault(),N()),q.key==="Escape"&&((ue=a.value)==null?void 0:ue.length)==0&&o.value&&(o.value=!1)};window.addEventListener("keydown",z)});function H(){o.value=!1,a.value=""}return(I,C)=>{const z=W("ClientOnly");return c(),r("div",zn,[p(z,null,{default:v(()=>[(c(),V(Ct,{to:"body"},[Ke(u("div",{class:"VPPluginSearch-modal-back",onClick:C[2]||(C[2]=E=>o.value=!1)},[u("div",{class:"VPPluginSearch-modal",onClick:C[1]||(C[1]=ot(()=>{},["stop"]))},[u("form",Hn,[En,Ke(u("input",{class:"DocSearch-Input","aria-autocomplete":"both","aria-labelledby":"docsearch-label",id:"docsearch-input",autocomplete:"off",autocorrect:"off",autocapitalize:"off",enterkeyhint:"search",spellcheck:"false",autofocus:"true","onUpdate:modelValue":C[0]||(C[0]=E=>a.value=E),placeholder:m.value,maxlength:"64",type:"search",ref_key:"input",ref:_},null,8,Dn),[[Mt,a.value]])]),u("div",On,[(c(!0),r(T,null,D(A(l(x),E=>E.link.split("/").slice(0,-1).join("-")),(E,G)=>(c(),r("div",{key:G},[u("span",Fn,L(G?G.toString()[0].toUpperCase()+G.toString().slice(1):"Home"),1),(c(!0),r(T,null,D(E,q=>(c(),r("a",{href:i.value+q.link,key:q.id,onClick:H},[u("div",qn,[u("span",Gn,L(q.link.includes("#")?"#":"▤"),1),u("div",Rn,[u("h3",null,L(q.title),1),u("p",null,[u("div",{innerHTML:q.preview},null,8,Un)])]),Kn])],8,jn))),128))]))),128))]),Wn])],512),[[Lt,o.value]])]))]),_:1}),u("div",{id:"docsearch",onClick:C[3]||(C[3]=E=>N())},[u("button",Yn,[u("span",Xn,[Jn,u("span",Qn,L(P.value),1)]),u("span",Zn,[u("span",{class:"DocSearch-Button-Key",ref_key:"metaKey",ref:s},"Meta",512),es])])])])}}});const ns={},ss={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",height:"24px",viewBox:"0 0 24 24",width:"24px"},os=u("path",{d:"M0 0h24v24H0V0z",fill:"none"},null,-1),as=u("path",{d:"M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"},null,-1),is=[os,as];function cs(e,t){return c(),r("svg",ss,is)}const ls=g(ns,[["render",cs]]),rs=$({__name:"VPLink",props:{tag:null,href:null,noIcon:{type:Boolean},target:null,rel:null},setup(e){const t=e,n=w(()=>t.tag??t.href?"a":"span"),s=w(()=>t.href&&at.test(t.href));return(o,a)=>(c(),V(Q(l(n)),{class:B(["VPLink",{link:e.href}]),href:e.href?l(ce)(e.href):void 0,target:e.target||(l(s)?"_blank":void 0),rel:e.rel||(l(s)?"noreferrer":void 0)},{default:v(()=>[h(o.$slots,"default",{},void 0,!0),l(s)&&!e.noIcon?(c(),V(ls,{key:0,class:"icon"})):k("",!0)]),_:3},8,["class","href","target","rel"]))}});const Y=g(rs,[["__scopeId","data-v-87683ad2"]]),us=$({__name:"VPNavBarMenuLink",props:{item:null},setup(e){const{page:t}=M();return(n,s)=>(c(),V(Y,{class:B({VPNavBarMenuLink:!0,active:l(te)(l(t).relativePath,e.item.activeMatch||e.item.link,!!e.item.activeMatch)}),href:e.item.link,target:e.item.target,rel:e.item.rel,tabindex:"0"},{default:v(()=>[O(L(e.item.text),1)]),_:1},8,["class","href","target","rel"]))}});const ds=g(us,[["__scopeId","data-v-6dd6d312"]]),He=S();let ut=!1,we=0;function _s(e){const t=S(!1);if(It){!ut&&hs(),we++;const n=ee(He,s=>{var o,a,i;s===e.el.value||(o=e.el.value)!=null&&o.contains(s)?(t.value=!0,(a=e.onFocus)==null||a.call(e)):(t.value=!1,(i=e.onBlur)==null||i.call(e))});Ie(()=>{n(),we--,we||vs()})}return st(t)}function hs(){document.addEventListener("focusin",dt),ut=!0,He.value=document.activeElement}function vs(){document.removeEventListener("focusin",dt)}function dt(){He.value=document.activeElement}const fs={},ps={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},ms=u("path",{d:"M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"},null,-1),gs=[ms];function ys(e,t){return c(),r("svg",ps,gs)}const _t=g(fs,[["render",ys]]),bs={},ks={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},$s=u("circle",{cx:"12",cy:"12",r:"2"},null,-1),Ps=u("circle",{cx:"19",cy:"12",r:"2"},null,-1),xs=u("circle",{cx:"5",cy:"12",r:"2"},null,-1),Vs=[$s,Ps,xs];function ws(e,t){return c(),r("svg",ks,Vs)}const Ss=g(bs,[["render",ws]]),Ls={class:"VPMenuLink"},Ms=$({__name:"VPMenuLink",props:{item:null},setup(e){const{page:t}=M();return(n,s)=>(c(),r("div",Ls,[p(Y,{class:B({active:l(te)(l(t).relativePath,e.item.activeMatch||e.item.link,!!e.item.activeMatch)}),href:e.item.link,target:e.item.target,rel:e.item.rel},{default:v(()=>[O(L(e.item.text),1)]),_:1},8,["class","href","target","rel"])]))}});const ke=g(Ms,[["__scopeId","data-v-b9520bf2"]]),Cs={class:"VPMenuGroup"},Is={key:0,class:"title"},Ts=$({__name:"VPMenuGroup",props:{text:null,items:null},setup(e){return(t,n)=>(c(),r("div",Cs,[e.text?(c(),r("p",Is,L(e.text),1)):k("",!0),(c(!0),r(T,null,D(e.items,s=>(c(),r(T,null,["link"in s?(c(),V(ke,{key:0,item:s},null,8,["item"])):k("",!0)],64))),256))]))}});const As=g(Ts,[["__scopeId","data-v-2bec9359"]]),Bs={class:"VPMenu"},Ns={key:0,class:"items"},zs=$({__name:"VPMenu",props:{items:null},setup(e){return(t,n)=>(c(),r("div",Bs,[e.items?(c(),r("div",Ns,[(c(!0),r(T,null,D(e.items,s=>(c(),r(T,{key:s.text},["link"in s?(c(),V(ke,{key:0,item:s},null,8,["item"])):(c(),V(As,{key:1,text:s.text,items:s.items},null,8,["text","items"]))],64))),128))])):k("",!0),h(t.$slots,"default",{},void 0,!0)]))}});const Hs=g(zs,[["__scopeId","data-v-7bffa9cd"]]),Es=["aria-expanded","aria-label"],Ds={key:0,class:"text"},Os={class:"menu"},Fs=$({__name:"VPFlyout",props:{icon:null,button:null,label:null,items:null},setup(e){const t=S(!1),n=S();_s({el:n,onBlur:s});function s(){t.value=!1}return(o,a)=>(c(),r("div",{class:"VPFlyout",ref_key:"el",ref:n,onMouseenter:a[1]||(a[1]=i=>t.value=!0),onMouseleave:a[2]||(a[2]=i=>t.value=!1)},[u("button",{type:"button",class:"button","aria-haspopup":"true","aria-expanded":t.value,"aria-label":e.label,onClick:a[0]||(a[0]=i=>t.value=!t.value)},[e.button||e.icon?(c(),r("span",Ds,[e.icon?(c(),V(Q(e.icon),{key:0,class:"option-icon"})):k("",!0),O(" "+L(e.button)+" ",1),p(_t,{class:"text-icon"})])):(c(),V(Ss,{key:1,class:"icon"}))],8,Es),u("div",Os,[p(Hs,{items:e.items},{default:v(()=>[h(o.$slots,"default",{},void 0,!0)]),_:3},8,["items"])])],544))}});const Ee=g(Fs,[["__scopeId","data-v-64c29883"]]),js=$({__name:"VPNavBarMenuGroup",props:{item:null},setup(e){const{page:t}=M();return(n,s)=>(c(),V(Ee,{class:B({VPNavBarMenuGroup:!0,active:l(te)(l(t).relativePath,e.item.activeMatch,!!e.item.activeMatch)}),button:e.item.text,items:e.item.items},null,8,["class","button","items"]))}}),qs=e=>(R("data-v-c6c3e6d4"),e=e(),U(),e),Gs={key:0,"aria-labelledby":"main-nav-aria-label",class:"VPNavBarMenu"},Rs=qs(()=>u("span",{id:"main-nav-aria-label",class:"visually-hidden"},"Main Navigation",-1)),Us=$({__name:"VPNavBarMenu",setup(e){const{theme:t}=M();return(n,s)=>l(t).nav?(c(),r("nav",Gs,[Rs,(c(!0),r(T,null,D(l(t).nav,o=>(c(),r(T,{key:o.text},["link"in o?(c(),V(ds,{key:0,item:o},null,8,["item"])):(c(),V(js,{key:1,item:o},null,8,["item"]))],64))),128))])):k("",!0)}});const Ks=g(Us,[["__scopeId","data-v-c6c3e6d4"]]),Ws={},Ys={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Xs=u("path",{d:"M0 0h24v24H0z",fill:"none"},null,-1),Js=u("path",{d:" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z ",class:"css-c4d79v"},null,-1),Qs=[Xs,Js];function Zs(e,t){return c(),r("svg",Ys,Qs)}const ht=g(Ws,[["render",Zs]]),eo={class:"items"},to={class:"title"},no=$({__name:"VPNavBarTranslations",setup(e){const{theme:t}=M(),{localeLinks:n,currentLang:s}=re({correspondingLink:!0});return(o,a)=>l(n).length&&l(s).label?(c(),V(Ee,{key:0,class:"VPNavBarTranslations",icon:ht,label:l(t).langMenuLabel||"Change language"},{default:v(()=>[u("div",eo,[u("p",to,L(l(s).label),1),(c(!0),r(T,null,D(l(n),i=>(c(),V(ke,{key:i.link,item:i},null,8,["item"]))),128))])]),_:1},8,["label"])):k("",!0)}});const so=g(no,[["__scopeId","data-v-3bf1c934"]]);const oo={},ao={class:"VPSwitch",type:"button",role:"switch"},io={class:"check"},co={key:0,class:"icon"};function lo(e,t){return c(),r("button",ao,[u("span",io,[e.$slots.default?(c(),r("span",co,[h(e.$slots,"default",{},void 0,!0)])):k("",!0)])])}const ro=g(oo,[["render",lo],["__scopeId","data-v-0a2eba70"]]),uo={},_o={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},ho=Tt('',9),vo=[ho];function fo(e,t){return c(),r("svg",_o,vo)}const po=g(uo,[["render",fo]]),mo={},go={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},yo=u("path",{d:"M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"},null,-1),bo=[yo];function ko(e,t){return c(),r("svg",go,bo)}const $o=g(mo,[["render",ko]]),Po={title:"toggle dark mode"},xo=$({__name:"VPSwitchAppearance",setup(e){const{site:t,isDark:n}=M(),s=S(!1),o=typeof localStorage<"u"?a():()=>{};J(()=>{s.value=document.documentElement.classList.contains("dark")});function a(){const i=window.matchMedia("(prefers-color-scheme: dark)"),_=document.documentElement.classList;let d=localStorage.getItem(We),f=t.value.appearance==="dark"&&d==null||(d==="auto"||d==null?i.matches:d==="dark");i.onchange=P=>{d==="auto"&&b(f=P.matches)};function y(){b(f=!f),d=f?i.matches?"auto":"dark":i.matches?"light":"auto",localStorage.setItem(We,d)}function b(P){const m=document.createElement("style");m.type="text/css",m.appendChild(document.createTextNode(`:not(.VPSwitchAppearance):not(.VPSwitchAppearance *) { + -webkit-transition: none !important; + -moz-transition: none !important; + -o-transition: none !important; + -ms-transition: none !important; + transition: none !important; +}`)),document.head.appendChild(m),s.value=P,_[P?"add":"remove"]("dark"),window.getComputedStyle(m).opacity,document.head.removeChild(m)}return y}return ee(s,i=>{n.value=i}),(i,_)=>(c(),r("label",Po,[p(ro,{class:"VPSwitchAppearance","aria-checked":s.value,onClick:l(o)},{default:v(()=>[p(po,{class:"sun"}),p($o,{class:"moon"})]),_:1},8,["aria-checked","onClick"])]))}});const De=g(xo,[["__scopeId","data-v-f37e294f"]]),Vo={key:0,class:"VPNavBarAppearance"},wo=$({__name:"VPNavBarAppearance",setup(e){const{site:t}=M();return(n,s)=>l(t).appearance?(c(),r("div",Vo,[p(De)])):k("",!0)}});const So=g(wo,[["__scopeId","data-v-88042fc7"]]),Lo={discord:'Discord',facebook:'Facebook',github:'GitHub',instagram:'Instagram',linkedin:'LinkedIn',mastodon:'Mastodon',slack:'Slack',twitter:'Twitter',youtube:'YouTube'},Mo=["href","aria-label","innerHTML"],Co=$({__name:"VPSocialLink",props:{icon:null,link:null},setup(e){const t=e,n=w(()=>typeof t.icon=="object"?t.icon.svg:Lo[t.icon]);return(s,o)=>(c(),r("a",{class:"VPSocialLink",href:e.link,"aria-label":typeof e.icon=="string"?e.icon:"",target:"_blank",rel:"noopener",innerHTML:l(n)},null,8,Mo))}});const Io=g(Co,[["__scopeId","data-v-ca994af5"]]),To={class:"VPSocialLinks"},Ao=$({__name:"VPSocialLinks",props:{links:null},setup(e){return(t,n)=>(c(),r("div",To,[(c(!0),r(T,null,D(e.links,({link:s,icon:o})=>(c(),V(Io,{key:s,icon:o,link:s},null,8,["icon","link"]))),128))]))}});const Oe=g(Ao,[["__scopeId","data-v-de2bf516"]]),Bo=$({__name:"VPNavBarSocialLinks",setup(e){const{theme:t}=M();return(n,s)=>l(t).socialLinks?(c(),V(Oe,{key:0,class:"VPNavBarSocialLinks",links:l(t).socialLinks},null,8,["links"])):k("",!0)}});const No=g(Bo,[["__scopeId","data-v-08b35e6f"]]),zo={key:0,class:"group translations"},Ho={class:"trans-title"},Eo={key:1,class:"group"},Do={class:"item appearance"},Oo={class:"label"},Fo={class:"appearance-action"},jo={key:2,class:"group"},qo={class:"item social-links"},Go=$({__name:"VPNavBarExtra",setup(e){const{site:t,theme:n}=M(),{localeLinks:s,currentLang:o}=re({correspondingLink:!0}),a=w(()=>s.value.length&&o.value.label||t.value.appearance||n.value.socialLinks);return(i,_)=>l(a)?(c(),V(Ee,{key:0,class:"VPNavBarExtra",label:"extra navigation"},{default:v(()=>[l(s).length&&l(o).label?(c(),r("div",zo,[u("p",Ho,L(l(o).label),1),(c(!0),r(T,null,D(l(s),d=>(c(),V(ke,{key:d.link,item:d},null,8,["item"]))),128))])):k("",!0),l(t).appearance?(c(),r("div",Eo,[u("div",Do,[u("p",Oo,L(l(n).darkModeSwitchLabel||"Appearance"),1),u("div",Fo,[p(De)])])])):k("",!0),l(n).socialLinks?(c(),r("div",jo,[u("div",qo,[p(Oe,{class:"social-links-list",links:l(n).socialLinks},null,8,["links"])])])):k("",!0)]),_:1})):k("",!0)}});const Ro=g(Go,[["__scopeId","data-v-47bb42ad"]]),Uo=e=>(R("data-v-670493dd"),e=e(),U(),e),Ko=["aria-expanded"],Wo=Uo(()=>u("span",{class:"container"},[u("span",{class:"top"}),u("span",{class:"middle"}),u("span",{class:"bottom"})],-1)),Yo=[Wo],Xo=$({__name:"VPNavBarHamburger",props:{active:{type:Boolean}},emits:["click"],setup(e){return(t,n)=>(c(),r("button",{type:"button",class:B(["VPNavBarHamburger",{active:e.active}]),"aria-label":"mobile navigation","aria-expanded":e.active,"aria-controls":"VPNavScreen",onClick:n[0]||(n[0]=s=>t.$emit("click"))},Yo,10,Ko))}});const Jo=g(Xo,[["__scopeId","data-v-670493dd"]]),Qo=e=>(R("data-v-82c325fa"),e=e(),U(),e),Zo={class:"container"},ea={class:"title"},ta={class:"content"},na=Qo(()=>u("div",{class:"curtain"},null,-1)),sa={class:"content-body"},oa=$({__name:"VPNavBar",props:{isScreenOpen:{type:Boolean}},emits:["toggle-screen"],setup(e){const{y:t}=Wt(),{hasSidebar:n}=K(),s=w(()=>({"has-sidebar":n.value,fill:t.value>0}));return(o,a)=>(c(),r("div",{class:B(["VPNavBar",l(s)])},[u("div",Zo,[u("div",ea,[p(hn,null,{"nav-bar-title-before":v(()=>[h(o.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":v(()=>[h(o.$slots,"nav-bar-title-after",{},void 0,!0)]),_:3})]),u("div",ta,[na,u("div",sa,[h(o.$slots,"nav-bar-content-before",{},void 0,!0),p(ts,{class:"search"}),p(Ks,{class:"menu"}),p(so,{class:"translations"}),p(So,{class:"appearance"}),p(No,{class:"social-links"}),p(Ro,{class:"extra"}),h(o.$slots,"nav-bar-content-after",{},void 0,!0),p(Jo,{class:"hamburger",active:e.isScreenOpen,onClick:a[0]||(a[0]=i=>o.$emit("toggle-screen"))},null,8,["active"])])])])],2))}});const aa=g(oa,[["__scopeId","data-v-82c325fa"]]);function ia(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t1),Z=[],ge=!1,je=-1,se=void 0,X=void 0,oe=void 0,vt=function(t){return Z.some(function(n){return!!(n.options.allowTouchMove&&n.options.allowTouchMove(t))})},ye=function(t){var n=t||window.event;return vt(n.target)||n.touches.length>1?!0:(n.preventDefault&&n.preventDefault(),!1)},ca=function(t){if(oe===void 0){var n=!!t&&t.reserveScrollBarGap===!0,s=window.innerWidth-document.documentElement.clientWidth;if(n&&s>0){var o=parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"),10);oe=document.body.style.paddingRight,document.body.style.paddingRight=o+s+"px"}}se===void 0&&(se=document.body.style.overflow,document.body.style.overflow="hidden")},la=function(){oe!==void 0&&(document.body.style.paddingRight=oe,oe=void 0),se!==void 0&&(document.body.style.overflow=se,se=void 0)},ra=function(){return window.requestAnimationFrame(function(){if(X===void 0){X={position:document.body.style.position,top:document.body.style.top,left:document.body.style.left};var t=window,n=t.scrollY,s=t.scrollX,o=t.innerHeight;document.body.style.position="fixed",document.body.style.top=-n,document.body.style.left=-s,setTimeout(function(){return window.requestAnimationFrame(function(){var a=o-window.innerHeight;a&&n>=o&&(document.body.style.top=-(n+a))})},300)}})},ua=function(){if(X!==void 0){var t=-parseInt(document.body.style.top,10),n=-parseInt(document.body.style.left,10);document.body.style.position=X.position,document.body.style.top=X.top,document.body.style.left=X.left,window.scrollTo(n,t),X=void 0}},da=function(t){return t?t.scrollHeight-t.scrollTop<=t.clientHeight:!1},_a=function(t,n){var s=t.targetTouches[0].clientY-je;return vt(t.target)?!1:n&&n.scrollTop===0&&s>0||da(n)&&s<0?ye(t):(t.stopPropagation(),!0)},ft=function(t,n){if(!t){console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");return}if(!Z.some(function(o){return o.targetElement===t})){var s={targetElement:t,options:n||{}};Z=[].concat(ia(Z),[s]),me?ra():ca(n),me&&(t.ontouchstart=function(o){o.targetTouches.length===1&&(je=o.targetTouches[0].clientY)},t.ontouchmove=function(o){o.targetTouches.length===1&&_a(o,t)},ge||(document.addEventListener("touchmove",ye,Fe?{passive:!1}:void 0),ge=!0))}},pt=function(){me&&(Z.forEach(function(t){t.targetElement.ontouchstart=null,t.targetElement.ontouchmove=null}),ge&&(document.removeEventListener("touchmove",ye,Fe?{passive:!1}:void 0),ge=!1),je=-1),me?ua():la(),Z=[]};const ha=$({__name:"VPNavScreenMenuLink",props:{text:null,link:null},setup(e){const t=Ae("close-screen");return(n,s)=>(c(),V(Y,{class:"VPNavScreenMenuLink",href:e.link,onClick:l(t)},{default:v(()=>[O(L(e.text),1)]),_:1},8,["href","onClick"]))}});const va=g(ha,[["__scopeId","data-v-0162d08e"]]),fa={},pa={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},ma=u("path",{d:"M18.9,10.9h-6v-6c0-0.6-0.4-1-1-1s-1,0.4-1,1v6h-6c-0.6,0-1,0.4-1,1s0.4,1,1,1h6v6c0,0.6,0.4,1,1,1s1-0.4,1-1v-6h6c0.6,0,1-0.4,1-1S19.5,10.9,18.9,10.9z"},null,-1),ga=[ma];function ya(e,t){return c(),r("svg",pa,ga)}const ba=g(fa,[["render",ya]]),ka=$({__name:"VPNavScreenMenuGroupLink",props:{text:null,link:null},setup(e){const t=Ae("close-screen");return(n,s)=>(c(),V(Y,{class:"VPNavScreenMenuGroupLink",href:e.link,onClick:l(t)},{default:v(()=>[O(L(e.text),1)]),_:1},8,["href","onClick"]))}});const mt=g(ka,[["__scopeId","data-v-7fd086c3"]]),$a={class:"VPNavScreenMenuGroupSection"},Pa={key:0,class:"title"},xa=$({__name:"VPNavScreenMenuGroupSection",props:{text:null,items:null},setup(e){return(t,n)=>(c(),r("div",$a,[e.text?(c(),r("p",Pa,L(e.text),1)):k("",!0),(c(!0),r(T,null,D(e.items,s=>(c(),V(mt,{key:s.text,text:s.text,link:s.link},null,8,["text","link"]))),128))]))}});const Va=g(xa,[["__scopeId","data-v-eb049aaa"]]),wa=["aria-controls","aria-expanded"],Sa={class:"button-text"},La=["id"],Ma={key:1,class:"group"},Ca=$({__name:"VPNavScreenMenuGroup",props:{text:null,items:null},setup(e){const t=e,n=S(!1),s=w(()=>`NavScreenGroup-${t.text.replace(" ","-").toLowerCase()}`);function o(){n.value=!n.value}return(a,i)=>(c(),r("div",{class:B(["VPNavScreenMenuGroup",{open:n.value}])},[u("button",{class:"button","aria-controls":l(s),"aria-expanded":n.value,onClick:o},[u("span",Sa,L(e.text),1),p(ba,{class:"button-icon"})],8,wa),u("div",{id:l(s),class:"items"},[(c(!0),r(T,null,D(e.items,_=>(c(),r(T,{key:_.text},["link"in _?(c(),r("div",{key:_.text,class:"item"},[p(mt,{text:_.text,link:_.link},null,8,["text","link"])])):(c(),r("div",Ma,[p(Va,{text:_.text,items:_.items},null,8,["text","items"])]))],64))),128))],8,La)],2))}});const Ia=g(Ca,[["__scopeId","data-v-48a8b068"]]),Ta={key:0,class:"VPNavScreenMenu"},Aa=$({__name:"VPNavScreenMenu",setup(e){const{theme:t}=M();return(n,s)=>l(t).nav?(c(),r("nav",Ta,[(c(!0),r(T,null,D(l(t).nav,o=>(c(),r(T,{key:o.text},["link"in o?(c(),V(va,{key:0,text:o.text,link:o.link},null,8,["text","link"])):(c(),V(Ia,{key:1,text:o.text||"",items:o.items},null,8,["text","items"]))],64))),128))])):k("",!0)}}),Ba={key:0,class:"VPNavScreenAppearance"},Na={class:"text"},za=$({__name:"VPNavScreenAppearance",setup(e){const{site:t,theme:n}=M();return(s,o)=>l(t).appearance?(c(),r("div",Ba,[u("p",Na,L(l(n).darkModeSwitchLabel||"Appearance"),1),p(De)])):k("",!0)}});const Ha=g(za,[["__scopeId","data-v-8d2d8cf1"]]),Ea={class:"list"},Da=$({__name:"VPNavScreenTranslations",setup(e){const{localeLinks:t,currentLang:n}=re({correspondingLink:!0}),s=S(!1);function o(){s.value=!s.value}return(a,i)=>l(t).length&&l(n).label?(c(),r("div",{key:0,class:B(["VPNavScreenTranslations",{open:s.value}])},[u("button",{class:"title",onClick:o},[p(ht,{class:"icon lang"}),O(" "+L(l(n).label)+" ",1),p(_t,{class:"icon chevron"})]),u("ul",Ea,[(c(!0),r(T,null,D(l(t),_=>(c(),r("li",{key:_.link,class:"item"},[p(Y,{class:"link",href:_.link},{default:v(()=>[O(L(_.text),1)]),_:2},1032,["href"])]))),128))])],2)):k("",!0)}});const Oa=g(Da,[["__scopeId","data-v-b72581fd"]]),Fa=$({__name:"VPNavScreenSocialLinks",setup(e){const{theme:t}=M();return(n,s)=>l(t).socialLinks?(c(),V(Oe,{key:0,class:"VPNavScreenSocialLinks",links:l(t).socialLinks},null,8,["links"])):k("",!0)}}),ja={class:"container"},qa=$({__name:"VPNavScreen",props:{open:{type:Boolean}},setup(e){const t=S(null);function n(){ft(t.value,{reserveScrollBarGap:!0})}function s(){pt()}return(o,a)=>(c(),V(Te,{name:"fade",onEnter:n,onAfterLeave:s},{default:v(()=>[e.open?(c(),r("div",{key:0,class:"VPNavScreen",ref_key:"screen",ref:t},[u("div",ja,[h(o.$slots,"nav-screen-content-before",{},void 0,!0),p(Aa,{class:"menu"}),p(Oa,{class:"translations"}),p(Ha,{class:"appearance"}),p(Fa,{class:"social-links"}),h(o.$slots,"nav-screen-content-after",{},void 0,!0)])],512)):k("",!0)]),_:3}))}});const Ga=g(qa,[["__scopeId","data-v-ea8d6f65"]]),Ra={class:"VPNav"},Ua=$({__name:"VPNav",setup(e){const{isScreenOpen:t,closeScreen:n,toggleScreen:s}=an();return he("close-screen",n),(o,a)=>(c(),r("header",Ra,[p(aa,{"is-screen-open":l(t),onToggleScreen:l(s)},{"nav-bar-title-before":v(()=>[h(o.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":v(()=>[h(o.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":v(()=>[h(o.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":v(()=>[h(o.$slots,"nav-bar-content-after",{},void 0,!0)]),_:3},8,["is-screen-open","onToggleScreen"]),p(Ga,{open:l(t)},{"nav-screen-content-before":v(()=>[h(o.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":v(()=>[h(o.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3},8,["open"])]))}});const Ka=g(Ua,[["__scopeId","data-v-b1949460"]]),Wa={},Ya={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Xa=u("path",{d:"M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"},null,-1),Ja=u("path",{d:"M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"},null,-1),Qa=u("path",{d:"M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"},null,-1),Za=u("path",{d:"M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"},null,-1),ei=[Xa,Ja,Qa,Za];function ti(e,t){return c(),r("svg",Ya,ei)}const ni=g(Wa,[["render",ti]]);function si(){const{hasSidebar:e}=K(),t=Se("(min-width: 960px)"),n=Se("(min-width: 1280px)");return{isAsideEnabled:w(()=>!n.value&&!t.value?!1:e.value?n.value:t.value)}}const oi=71;function qe(e){return typeof e.outline=="object"&&!Array.isArray(e.outline)&&e.outline.label||e.outlineTitle||"On this page"}function Ge(e){const t=[...document.querySelectorAll(".VPDoc h2,h3,h4,h5,h6")].filter(n=>n.id&&n.hasChildNodes()).map(n=>{const s=Number(n.tagName[1]);return{title:ai(n),link:"#"+n.id,level:s}});return ii(t,e)}function ai(e){let t="";for(const n of e.childNodes)if(n.nodeType===1){if(n.classList.contains("VPBadge")||n.classList.contains("header-anchor"))continue;t+=n.textContent}else n.nodeType===3&&(t+=n.textContent);return t.trim()}function ii(e,t){if(t===!1)return[];const n=(typeof t=="object"&&!Array.isArray(t)?t.level:t)||2,[s,o]=typeof n=="number"?[n,n]:n==="deep"?[2,6]:n;e=e.filter(i=>i.level>=s&&i.level<=o);const a=[];e:for(let i=0;i=0;d--){const f=e[d];if(f.level<_.level){(f.children||(f.children=[])).push(_);continue e}}a.push(_)}}return a}function ci(e,t){const{isAsideEnabled:n}=si(),s=Yt(a,100);let o=null;J(()=>{requestAnimationFrame(a),window.addEventListener("scroll",s)}),At(()=>{i(location.hash)}),Ie(()=>{window.removeEventListener("scroll",s)});function a(){if(!n.value)return;const _=[].slice.call(e.value.querySelectorAll(".outline-link")),d=[].slice.call(document.querySelectorAll(".content .header-anchor")).filter(m=>_.some(x=>x.hash===m.hash&&m.offsetParent!==null)),f=window.scrollY,y=window.innerHeight,b=document.body.offsetHeight,P=Math.abs(f+y-b)<1;if(d.length&&P){i(d[d.length-1].hash);return}for(let m=0;m{const o=W("VPDocOutlineItem",!0);return c(),r("ul",{class:B(e.root?"root":"nested")},[(c(!0),r(T,null,D(e.headers,({children:a,link:i,title:_})=>(c(),r("li",null,[u("a",{class:"outline-link",href:i,onClick:t,title:_},L(_),9,ri),a!=null&&a.length?(c(),V(o,{key:0,headers:a},null,8,["headers"])):k("",!0)]))),256))],2)}}});const Re=g(ui,[["__scopeId","data-v-efc119ee"]]),di={},_i={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},hi=u("path",{d:"M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"},null,-1),vi=[hi];function fi(e,t){return c(),r("svg",_i,vi)}const Ue=g(di,[["render",fi]]),pi=$({__name:"VPLocalNavOutlineDropdown",setup(e){const{frontmatter:t,theme:n}=M(),s=S(!1),o=S(0),a=S();ie(()=>{s.value=!1});function i(){s.value=!s.value,o.value=window.innerHeight+Math.min(window.scrollY-64,0)}function _(y){y.target.classList.contains("outline-link")&&(a.value&&(a.value.style.transition="none"),Nt(()=>{s.value=!1}))}function d(){s.value=!1,window.scrollTo({top:0,left:0,behavior:"smooth"})}const f=Be([]);return ie(()=>{f.value=Ge(t.value.outline??n.value.outline)}),(y,b)=>(c(),r("div",{class:"VPLocalNavOutlineDropdown",style:Bt({"--vp-vh":o.value+"px"})},[l(f).length>0?(c(),r("button",{key:0,onClick:i,class:B({open:s.value})},[O(L(l(qe)(l(n)))+" ",1),p(Ue,{class:"icon"})],2)):(c(),r("button",{key:1,onClick:d},L(l(n).returnToTopLabel||"Return to top"),1)),p(Te,{name:"flyout"},{default:v(()=>[s.value?(c(),r("div",{key:0,ref_key:"items",ref:a,class:"items",onClick:_},[u("a",{class:"top-link",href:"#",onClick:d},L(l(n).returnToTopLabel||"Return to top"),1),p(Re,{headers:l(f)},null,8,["headers"])],512)):k("",!0)]),_:1})],4))}});const mi=g(pi,[["__scopeId","data-v-07aca99e"]]),gi={key:0,class:"VPLocalNav"},yi=["aria-expanded"],bi={class:"menu-text"},ki=$({__name:"VPLocalNav",props:{open:{type:Boolean}},emits:["open-menu"],setup(e){const{theme:t,frontmatter:n}=M(),{hasSidebar:s}=K();return(o,a)=>l(n).layout!=="home"?(c(),r("div",gi,[l(s)?(c(),r("button",{key:0,class:"menu","aria-expanded":e.open,"aria-controls":"VPSidebarNav",onClick:a[0]||(a[0]=i=>o.$emit("open-menu"))},[p(ni,{class:"menu-icon"}),u("span",bi,L(l(t).sidebarMenuLabel||"Menu"),1)],8,yi)):k("",!0),p(mi)])):k("",!0)}});const $i=g(ki,[["__scopeId","data-v-9a33564b"]]),Pi=e=>(R("data-v-77d7a963"),e=e(),U(),e),xi=["role","tabindex"],Vi=Pi(()=>u("div",{class:"indicator"},null,-1)),wi=["onKeydown"],Si={key:1,class:"items"},Li=$({__name:"VPSidebarItem",props:{item:null,depth:null},setup(e){const t=e,{collapsed:n,collapsible:s,isLink:o,isActiveLink:a,hasActiveLink:i,hasChildren:_,toggle:d}=Zt(w(()=>t.item)),f=w(()=>_.value?"section":"div"),y=w(()=>o.value?"a":"div"),b=w(()=>_.value?t.depth+2===7?"p":`h${t.depth+2}`:"p"),P=w(()=>o.value?void 0:"button"),m=w(()=>[[`level-${t.depth}`],{collapsible:s.value},{collapsed:n.value},{"is-link":o.value},{"is-active":a.value},{"has-active":i.value}]);function x(N){"key"in N&&N.key!=="Enter"||!t.item.link&&d()}function A(){t.item.link&&d()}return(N,H)=>{const I=W("VPSidebarItem",!0);return c(),V(Q(l(f)),{class:B(["VPSidebarItem",l(m)])},{default:v(()=>[e.item.text?(c(),r("div",_e({key:0,class:"item",role:l(P)},Ht(e.item.items?{click:x,keydown:x}:{},!0),{tabindex:e.item.items&&0}),[Vi,e.item.link?(c(),V(Y,{key:0,tag:l(y),class:"link",href:e.item.link},{default:v(()=>[(c(),V(Q(l(b)),{class:"text",innerHTML:e.item.text},null,8,["innerHTML"]))]),_:1},8,["tag","href"])):(c(),V(Q(l(b)),{key:1,class:"text",innerHTML:e.item.text},null,8,["innerHTML"])),e.item.collapsed!=null?(c(),r("div",{key:2,class:"caret",role:"button","aria-label":"toggle section",onClick:A,onKeydown:zt(A,["enter"]),tabindex:"0"},[p(Ue,{class:"caret-icon"})],40,wi)):k("",!0)],16,xi)):k("",!0),e.item.items&&e.item.items.length?(c(),r("div",Si,[e.depth<5?(c(!0),r(T,{key:0},D(e.item.items,C=>(c(),V(I,{key:C.text,item:C,depth:e.depth+1},null,8,["item","depth"]))),128)):k("",!0)])):k("",!0)]),_:1},8,["class"])}}});const Mi=g(Li,[["__scopeId","data-v-77d7a963"]]),gt=e=>(R("data-v-a2c0de1b"),e=e(),U(),e),Ci=gt(()=>u("div",{class:"curtain"},null,-1)),Ii={class:"nav",id:"VPSidebarNav","aria-labelledby":"sidebar-aria-label",tabindex:"-1"},Ti=gt(()=>u("span",{class:"visually-hidden",id:"sidebar-aria-label"}," Sidebar Navigation ",-1)),Ai=$({__name:"VPSidebar",props:{open:{type:Boolean}},setup(e){const t=e,{sidebarGroups:n,hasSidebar:s}=K();let o=S(null);function a(){ft(o.value,{reserveScrollBarGap:!0})}function i(){pt()}return Et(async()=>{var _;t.open?(a(),(_=o.value)==null||_.focus()):i()}),(_,d)=>l(s)?(c(),r("aside",{key:0,class:B(["VPSidebar",{open:e.open}]),ref_key:"navEl",ref:o,onClick:d[0]||(d[0]=ot(()=>{},["stop"]))},[Ci,u("nav",Ii,[Ti,h(_.$slots,"sidebar-nav-before",{},void 0,!0),(c(!0),r(T,null,D(l(n),f=>(c(),r("div",{key:f.text,class:"group"},[p(Mi,{item:f,depth:0},null,8,["item"])]))),128)),h(_.$slots,"sidebar-nav-after",{},void 0,!0)])],2)):k("",!0)}});const Bi=g(Ai,[["__scopeId","data-v-a2c0de1b"]]),Ni={},zi={class:"VPPage"};function Hi(e,t){const n=W("Content");return c(),r("div",zi,[h(e.$slots,"page-top"),p(n),h(e.$slots,"page-bottom")])}const Ei=g(Ni,[["render",Hi]]),Di=$({__name:"VPButton",props:{tag:null,size:null,theme:null,text:null,href:null},setup(e){const t=e,n=w(()=>[t.size??"medium",t.theme??"brand"]),s=w(()=>t.href&&at.test(t.href)),o=w(()=>t.tag?t.tag:t.href?"a":"button");return(a,i)=>(c(),V(Q(l(o)),{class:B(["VPButton",l(n)]),href:e.href?l(ce)(e.href):void 0,target:l(s)?"_blank":void 0,rel:l(s)?"noreferrer":void 0},{default:v(()=>[O(L(e.text),1)]),_:1},8,["class","href","target","rel"]))}});const Oi=g(Di,[["__scopeId","data-v-a4b757f0"]]),Fi=e=>(R("data-v-3b95c4f3"),e=e(),U(),e),ji={class:"container"},qi={class:"main"},Gi={key:0,class:"name"},Ri={class:"clip"},Ui={key:1,class:"text"},Ki={key:2,class:"tagline"},Wi={key:0,class:"actions"},Yi={key:0,class:"image"},Xi={class:"image-container"},Ji=Fi(()=>u("div",{class:"image-bg"},null,-1)),Qi=$({__name:"VPHero",props:{name:null,text:null,tagline:null,image:null,actions:null},setup(e){const t=Ae("hero-image-slot-exists");return(n,s)=>(c(),r("div",{class:B(["VPHero",{"has-image":e.image||l(t)}])},[u("div",ji,[u("div",qi,[h(n.$slots,"home-hero-info",{},()=>[e.name?(c(),r("h1",Gi,[u("span",Ri,L(e.name),1)])):k("",!0),e.text?(c(),r("p",Ui,L(e.text),1)):k("",!0),e.tagline?(c(),r("p",Ki,L(e.tagline),1)):k("",!0)],!0),e.actions?(c(),r("div",Wi,[(c(!0),r(T,null,D(e.actions,o=>(c(),r("div",{key:o.link,class:"action"},[p(Oi,{tag:"a",size:"medium",theme:o.theme,text:o.text,href:o.link},null,8,["theme","text","href"])]))),128))])):k("",!0)]),e.image||l(t)?(c(),r("div",Yi,[u("div",Xi,[Ji,h(n.$slots,"home-hero-image",{},()=>[e.image?(c(),V(ze,{key:0,class:"image-src",image:e.image},null,8,["image"])):k("",!0)],!0)])])):k("",!0)])],2))}});const Zi=g(Qi,[["__scopeId","data-v-3b95c4f3"]]),ec=$({__name:"VPHomeHero",setup(e){const{frontmatter:t}=M();return(n,s)=>l(t).hero?(c(),V(Zi,{key:0,class:"VPHomeHero",name:l(t).hero.name,text:l(t).hero.text,tagline:l(t).hero.tagline,image:l(t).hero.image,actions:l(t).hero.actions},{"home-hero-info":v(()=>[h(n.$slots,"home-hero-info")]),"home-hero-image":v(()=>[h(n.$slots,"home-hero-image")]),_:3},8,["name","text","tagline","image","actions"])):k("",!0)}}),tc={},nc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},sc=u("path",{d:"M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"},null,-1),oc=[sc];function ac(e,t){return c(),r("svg",nc,oc)}const ic=g(tc,[["render",ac]]),cc={class:"box"},lc=["innerHTML"],rc=["innerHTML"],uc=["innerHTML"],dc={key:3,class:"link-text"},_c={class:"link-text-value"},hc=$({__name:"VPFeature",props:{icon:null,title:null,details:null,link:null,linkText:null},setup(e){return(t,n)=>(c(),V(Y,{class:"VPFeature",href:e.link,"no-icon":!0},{default:v(()=>[u("article",cc,[typeof e.icon=="object"?(c(),V(ze,{key:0,image:e.icon,alt:e.icon.alt,height:e.icon.height,width:e.icon.width},null,8,["image","alt","height","width"])):e.icon?(c(),r("div",{key:1,class:"icon",innerHTML:e.icon},null,8,lc)):k("",!0),u("h2",{class:"title",innerHTML:e.title},null,8,rc),e.details?(c(),r("p",{key:2,class:"details",innerHTML:e.details},null,8,uc)):k("",!0),e.linkText?(c(),r("div",dc,[u("p",_c,[O(L(e.linkText)+" ",1),p(ic,{class:"link-text-icon"})])])):k("",!0)])]),_:1},8,["href"]))}});const vc=g(hc,[["__scopeId","data-v-fdb307a3"]]),fc={key:0,class:"VPFeatures"},pc={class:"container"},mc={class:"items"},gc=$({__name:"VPFeatures",props:{features:null},setup(e){const t=e,n=w(()=>{const s=t.features.length;if(s){if(s===2)return"grid-2";if(s===3)return"grid-3";if(s%3===0)return"grid-6";if(s%2===0)return"grid-4"}else return});return(s,o)=>e.features?(c(),r("div",fc,[u("div",pc,[u("div",mc,[(c(!0),r(T,null,D(e.features,a=>(c(),r("div",{key:a.title,class:B(["item",[l(n)]])},[p(vc,{icon:a.icon,title:a.title,details:a.details,link:a.link,"link-text":a.linkText},null,8,["icon","title","details","link","link-text"])],2))),128))])])])):k("",!0)}});const yc=g(gc,[["__scopeId","data-v-5e2470ab"]]),bc=$({__name:"VPHomeFeatures",setup(e){const{frontmatter:t}=M();return(n,s)=>l(t).features?(c(),V(yc,{key:0,class:"VPHomeFeatures",features:l(t).features},null,8,["features"])):k("",!0)}}),kc={class:"VPHome"},$c=$({__name:"VPHome",setup(e){return(t,n)=>{const s=W("Content");return c(),r("div",kc,[h(t.$slots,"home-hero-before",{},void 0,!0),p(ec,null,{"home-hero-info":v(()=>[h(t.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-image":v(()=>[h(t.$slots,"home-hero-image",{},void 0,!0)]),_:3}),h(t.$slots,"home-hero-after",{},void 0,!0),h(t.$slots,"home-features-before",{},void 0,!0),p(bc),h(t.$slots,"home-features-after",{},void 0,!0),p(s)])}}});const Pc=g($c,[["__scopeId","data-v-8ebac4ee"]]),xc=e=>(R("data-v-c3ff47cc"),e=e(),U(),e),Vc={class:"content"},wc={class:"outline-title"},Sc={"aria-labelledby":"doc-outline-aria-label"},Lc=xc(()=>u("span",{class:"visually-hidden",id:"doc-outline-aria-label"}," Table of Contents for current page ",-1)),Mc=$({__name:"VPDocAsideOutline",setup(e){const{frontmatter:t,theme:n}=M(),s=Be([]);ie(()=>{s.value=Ge(t.value.outline??n.value.outline)});const o=S(),a=S();return ci(o,a),(i,_)=>(c(),r("div",{class:B(["VPDocAsideOutline",{"has-outline":l(s).length>0}]),ref_key:"container",ref:o},[u("div",Vc,[u("div",{class:"outline-marker",ref_key:"marker",ref:a},null,512),u("div",wc,L(l(qe)(l(n))),1),u("nav",Sc,[Lc,p(Re,{headers:l(s),root:!0},null,8,["headers"])])])],2))}});const Cc=g(Mc,[["__scopeId","data-v-c3ff47cc"]]),Ic={class:"VPDocAsideCarbonAds"},Tc=$({__name:"VPDocAsideCarbonAds",props:{carbonAds:null},setup(e){const t=()=>null;return(n,s)=>(c(),r("div",Ic,[p(l(t),{"carbon-ads":e.carbonAds},null,8,["carbon-ads"])]))}}),Ac=e=>(R("data-v-79cae1a0"),e=e(),U(),e),Bc={class:"VPDocAside"},Nc=Ac(()=>u("div",{class:"spacer"},null,-1)),zc=$({__name:"VPDocAside",setup(e){const{theme:t}=M();return(n,s)=>(c(),r("div",Bc,[h(n.$slots,"aside-top",{},void 0,!0),h(n.$slots,"aside-outline-before",{},void 0,!0),p(Cc),h(n.$slots,"aside-outline-after",{},void 0,!0),Nc,h(n.$slots,"aside-ads-before",{},void 0,!0),l(t).carbonAds?(c(),V(Tc,{key:0,"carbon-ads":l(t).carbonAds},null,8,["carbon-ads"])):k("",!0),h(n.$slots,"aside-ads-after",{},void 0,!0),h(n.$slots,"aside-bottom",{},void 0,!0)]))}});const Hc=g(zc,[["__scopeId","data-v-79cae1a0"]]);function Ec(){const{theme:e,page:t}=M();return w(()=>{const{text:n="Edit this page",pattern:s=""}=e.value.editLink||{};let o;return typeof s=="function"?o=s(t.value):o=s.replace(/:path/g,t.value.filePath),{url:o,text:n}})}function Dc(){const{page:e,theme:t,frontmatter:n}=M();return w(()=>{var i,_,d,f;const s=rt(t.value.sidebar,e.value.relativePath),o=Jt(s),a=o.findIndex(y=>te(e.value.relativePath,y.link));return{prev:n.value.prev===!1?void 0:{text:(typeof n.value.prev=="string"?n.value.prev:typeof n.value.prev=="object"?n.value.prev.text:void 0)??((i=o[a-1])==null?void 0:i.text),link:(typeof n.value.prev=="object"?n.value.prev.link:void 0)??((_=o[a-1])==null?void 0:_.link)},next:n.value.next===!1?void 0:{text:(typeof n.value.next=="string"?n.value.next:typeof n.value.next=="object"?n.value.next.text:void 0)??((d=o[a+1])==null?void 0:d.text),link:(typeof n.value.next=="object"?n.value.next.link:void 0)??((f=o[a+1])==null?void 0:f.link)}}})}const Oc={},Fc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},jc=u("path",{d:"M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"},null,-1),qc=u("path",{d:"M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"},null,-1),Gc=[jc,qc];function Rc(e,t){return c(),r("svg",Fc,Gc)}const Uc=g(Oc,[["render",Rc]]),Kc={class:"VPLastUpdated"},Wc=["datetime"],Yc=$({__name:"VPDocFooterLastUpdated",setup(e){const{theme:t,page:n,lang:s}=M(),o=w(()=>new Date(n.value.lastUpdated)),a=w(()=>o.value.toISOString()),i=S("");return J(()=>{ae(()=>{i.value=o.value.toLocaleString(s.value)})}),(_,d)=>(c(),r("p",Kc,[O(L(l(t).lastUpdatedText||"Last updated")+": ",1),u("time",{datetime:l(a)},L(i.value),9,Wc)]))}});const Xc=g(Yc,[["__scopeId","data-v-f00606ba"]]),Jc={key:0,class:"VPDocFooter"},Qc={key:0,class:"edit-info"},Zc={key:0,class:"edit-link"},el={key:1,class:"last-updated"},tl={key:1,class:"prev-next"},nl={class:"pager"},sl=["href"],ol=["innerHTML"],al=["innerHTML"],il=["href"],cl=["innerHTML"],ll=["innerHTML"],rl=$({__name:"VPDocFooter",setup(e){const{theme:t,page:n,frontmatter:s}=M(),o=Ec(),a=Dc(),i=w(()=>t.value.editLink&&s.value.editLink!==!1),_=w(()=>n.value.lastUpdated&&s.value.lastUpdated!==!1),d=w(()=>i.value||_.value||a.value.prev||a.value.next);return(f,y)=>{var b,P,m,x,A,N,H;return l(d)?(c(),r("footer",Jc,[h(f.$slots,"doc-footer-before",{},void 0,!0),l(i)||l(_)?(c(),r("div",Qc,[l(i)?(c(),r("div",Zc,[p(Y,{class:"edit-link-button",href:l(o).url,"no-icon":!0},{default:v(()=>[p(Uc,{class:"edit-link-icon","aria-label":"edit icon"}),O(" "+L(l(o).text),1)]),_:1},8,["href"])])):k("",!0),l(_)?(c(),r("div",el,[p(Xc)])):k("",!0)])):k("",!0),(b=l(a).prev)!=null&&b.link||(P=l(a).next)!=null&&P.link?(c(),r("div",tl,[u("div",nl,[(m=l(a).prev)!=null&&m.link?(c(),r("a",{key:0,class:"pager-link prev",href:l(ce)(l(a).prev.link)},[u("span",{class:"desc",innerHTML:((x=l(t).docFooter)==null?void 0:x.prev)||"Previous page"},null,8,ol),u("span",{class:"title",innerHTML:l(a).prev.text},null,8,al)],8,sl)):k("",!0)]),u("div",{class:B(["pager",{"has-prev":(A=l(a).prev)==null?void 0:A.link}])},[(N=l(a).next)!=null&&N.link?(c(),r("a",{key:0,class:"pager-link next",href:l(ce)(l(a).next.link)},[u("span",{class:"desc",innerHTML:((H=l(t).docFooter)==null?void 0:H.next)||"Next page"},null,8,cl),u("span",{class:"title",innerHTML:l(a).next.text},null,8,ll)],8,il)):k("",!0)],2)])):k("",!0)])):k("",!0)}}});const ul=g(rl,[["__scopeId","data-v-31cb5067"]]),dl={key:0,class:"VPDocOutlineDropdown"},_l={key:0,class:"items"},hl=$({__name:"VPDocOutlineDropdown",setup(e){const{frontmatter:t,theme:n}=M(),s=S(!1);ie(()=>{s.value=!1});const o=Be([]);return ie(()=>{o.value=Ge(t.value.outline??n.value.outline)}),(a,i)=>l(o).length>0?(c(),r("div",dl,[u("button",{onClick:i[0]||(i[0]=_=>s.value=!s.value),class:B({open:s.value})},[O(L(l(qe)(l(n)))+" ",1),p(Ue,{class:"icon"})],2),s.value?(c(),r("div",_l,[p(Re,{headers:l(o)},null,8,["headers"])])):k("",!0)])):k("",!0)}});const vl=g(hl,[["__scopeId","data-v-f751778e"]]),fl=e=>(R("data-v-5aafa2ac"),e=e(),U(),e),pl={class:"container"},ml=fl(()=>u("div",{class:"aside-curtain"},null,-1)),gl={class:"aside-container"},yl={class:"aside-content"},bl={class:"content"},kl={class:"content-container"},$l={class:"main"},Pl=$({__name:"VPDoc",setup(e){const t=le(),{hasSidebar:n,hasAside:s,leftAside:o}=K(),a=w(()=>t.path.replace(/[./]+/g,"_").replace(/_html$/,""));return(i,_)=>{const d=W("Content");return c(),r("div",{class:B(["VPDoc",{"has-sidebar":l(n),"has-aside":l(s)}])},[h(i.$slots,"doc-top",{},void 0,!0),u("div",pl,[l(s)?(c(),r("div",{key:0,class:B(["aside",{"left-aside":l(o)}])},[ml,u("div",gl,[u("div",yl,[p(Hc,null,{"aside-top":v(()=>[h(i.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":v(()=>[h(i.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":v(()=>[h(i.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":v(()=>[h(i.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":v(()=>[h(i.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":v(()=>[h(i.$slots,"aside-ads-after",{},void 0,!0)]),_:3})])])],2)):k("",!0),u("div",bl,[u("div",kl,[h(i.$slots,"doc-before",{},void 0,!0),p(vl),u("main",$l,[p(d,{class:B(["vp-doc",l(a)])},null,8,["class"])]),p(ul,null,{"doc-footer-before":v(()=>[h(i.$slots,"doc-footer-before",{},void 0,!0)]),_:3}),h(i.$slots,"doc-after",{},void 0,!0)])])]),h(i.$slots,"doc-bottom",{},void 0,!0)],2)}}});const xl=g(Pl,[["__scopeId","data-v-5aafa2ac"]]),$e=e=>(R("data-v-42c0c3ae"),e=e(),U(),e),Vl={class:"NotFound"},wl=$e(()=>u("p",{class:"code"},"404",-1)),Sl=$e(()=>u("h1",{class:"title"},"PAGE NOT FOUND",-1)),Ll=$e(()=>u("div",{class:"divider"},null,-1)),Ml=$e(()=>u("blockquote",{class:"quote"}," But if you don't change your direction, and if you keep looking, you may end up where you are heading. ",-1)),Cl={class:"action"},Il=["href"],Tl=$({__name:"NotFound",setup(e){const{site:t}=M(),{localeLinks:n}=re({removeCurrent:!1}),s=S("/");return J(()=>{var a;const o=window.location.pathname.replace(t.value.base,"").replace(/(^.*?\/).*$/,"/$1");n.value.length&&(s.value=((a=n.value.find(({link:i})=>i.startsWith(o)))==null?void 0:a.link)||n.value[0].link)}),(o,a)=>(c(),r("div",Vl,[wl,Sl,Ll,Ml,u("div",Cl,[u("a",{class:"link",href:l(be)(s.value),"aria-label":"go to home"}," Take me home ",8,Il)])]))}});const Al=g(Tl,[["__scopeId","data-v-42c0c3ae"]]),Bl=$({__name:"VPContent",setup(e){const{page:t,frontmatter:n}=M(),{hasSidebar:s}=K();return(o,a)=>(c(),r("div",{class:B(["VPContent",{"has-sidebar":l(s),"is-home":l(n).layout==="home"}]),id:"VPContent"},[l(t).isNotFound?h(o.$slots,"not-found",{key:0},()=>[p(Al)],!0):l(n).layout==="page"?(c(),V(Ei,{key:1},{"page-top":v(()=>[h(o.$slots,"page-top",{},void 0,!0)]),"page-bottom":v(()=>[h(o.$slots,"page-bottom",{},void 0,!0)]),_:3})):l(n).layout==="home"?(c(),V(Pc,{key:2},{"home-hero-before":v(()=>[h(o.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info":v(()=>[h(o.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-image":v(()=>[h(o.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":v(()=>[h(o.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":v(()=>[h(o.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":v(()=>[h(o.$slots,"home-features-after",{},void 0,!0)]),_:3})):(c(),V(xl,{key:3},{"doc-top":v(()=>[h(o.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":v(()=>[h(o.$slots,"doc-bottom",{},void 0,!0)]),"doc-footer-before":v(()=>[h(o.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":v(()=>[h(o.$slots,"doc-before",{},void 0,!0)]),"doc-after":v(()=>[h(o.$slots,"doc-after",{},void 0,!0)]),"aside-top":v(()=>[h(o.$slots,"aside-top",{},void 0,!0)]),"aside-outline-before":v(()=>[h(o.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":v(()=>[h(o.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":v(()=>[h(o.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":v(()=>[h(o.$slots,"aside-ads-after",{},void 0,!0)]),"aside-bottom":v(()=>[h(o.$slots,"aside-bottom",{},void 0,!0)]),_:3}))],2))}});const Nl=g(Bl,[["__scopeId","data-v-7f38fbbe"]]),zl={class:"container"},Hl=["innerHTML"],El=["innerHTML"],Dl=$({__name:"VPFooter",setup(e){const{theme:t}=M(),{hasSidebar:n}=K();return(s,o)=>l(t).footer?(c(),r("footer",{key:0,class:B(["VPFooter",{"has-sidebar":l(n)}])},[u("div",zl,[l(t).footer.message?(c(),r("p",{key:0,class:"message",innerHTML:l(t).footer.message},null,8,Hl)):k("",!0),l(t).footer.copyright?(c(),r("p",{key:1,class:"copyright",innerHTML:l(t).footer.copyright},null,8,El)):k("",!0)])],2)):k("",!0)}});const Ol=g(Dl,[["__scopeId","data-v-2425ede7"]]),Fl={key:0,class:"Layout"},jl=$({__name:"Layout",setup(e){const{isOpen:t,open:n,close:s}=K(),o=le();ee(()=>o.path,s),Qt(t,s),he("close-sidebar",s),he("is-sidebar-open",t);const{frontmatter:a}=M(),i=Dt(),_=w(()=>!!i["home-hero-image"]);return he("hero-image-slot-exists",_),(d,f)=>{const y=W("Content");return l(a).layout!==!1?(c(),r("div",Fl,[h(d.$slots,"layout-top",{},void 0,!0),p(tn),p(on,{class:"backdrop",show:l(t),onClick:l(s)},null,8,["show","onClick"]),p(Ka,null,{"nav-bar-title-before":v(()=>[h(d.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":v(()=>[h(d.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":v(()=>[h(d.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":v(()=>[h(d.$slots,"nav-bar-content-after",{},void 0,!0)]),"nav-screen-content-before":v(()=>[h(d.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":v(()=>[h(d.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3}),p($i,{open:l(t),onOpenMenu:l(n)},null,8,["open","onOpenMenu"]),p(Bi,{open:l(t)},{"sidebar-nav-before":v(()=>[h(d.$slots,"sidebar-nav-before",{},void 0,!0)]),"sidebar-nav-after":v(()=>[h(d.$slots,"sidebar-nav-after",{},void 0,!0)]),_:3},8,["open"]),p(Nl,null,{"page-top":v(()=>[h(d.$slots,"page-top",{},void 0,!0)]),"page-bottom":v(()=>[h(d.$slots,"page-bottom",{},void 0,!0)]),"not-found":v(()=>[h(d.$slots,"not-found",{},void 0,!0)]),"home-hero-before":v(()=>[h(d.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info":v(()=>[h(d.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-image":v(()=>[h(d.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":v(()=>[h(d.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":v(()=>[h(d.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":v(()=>[h(d.$slots,"home-features-after",{},void 0,!0)]),"doc-footer-before":v(()=>[h(d.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":v(()=>[h(d.$slots,"doc-before",{},void 0,!0)]),"doc-after":v(()=>[h(d.$slots,"doc-after",{},void 0,!0)]),"doc-top":v(()=>[h(d.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":v(()=>[h(d.$slots,"doc-bottom",{},void 0,!0)]),"aside-top":v(()=>[h(d.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":v(()=>[h(d.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":v(()=>[h(d.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":v(()=>[h(d.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":v(()=>[h(d.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":v(()=>[h(d.$slots,"aside-ads-after",{},void 0,!0)]),_:3}),p(Ol),h(d.$slots,"layout-bottom",{},void 0,!0)])):(c(),V(y,{key:1}))}}});const ql=g(jl,[["__scopeId","data-v-bd8710d4"]]);const Rl={Layout:ql,enhanceApp:({app:e})=>{e.component("Badge",Ft)}};export{Rl as t}; diff --git a/docs/document/assets/chunks/theme.t8lW09mq.js b/docs/document/assets/chunks/theme.t8lW09mq.js deleted file mode 100644 index 44231c96f..000000000 --- a/docs/document/assets/chunks/theme.t8lW09mq.js +++ /dev/null @@ -1,7 +0,0 @@ -import{d as y,o as r,c as u,r as v,n as A,a as G,t as T,_ as k,b as w,w as p,T as Ie,e as g,u as Je,i as vt,l as pt,f as me,g as V,h as M,j as te,k as d,m as l,p as W,q as J,s as ee,v as ae,x as Ve,y as se,z as ge,A as Ce,B as Ye,C as ft,D as Z,F as N,E as D,G as Te,H as re,I as _,J as Q,K as Xe,L as ke,M as de,N as $e,O as _t,P as Ze,Q as Qe,R as mt,S as gt,U as kt,V as $t,W as je,X as bt,Y as et,Z as yt,$ as Pt,a0 as tt,a1 as st,a2 as wt,a3 as Vt,a4 as Lt}from"./framework.0i_P4VHR.js";const St=y({__name:"VPBadge",props:{text:{},type:{default:"tip"}},setup(e){return(t,s)=>(r(),u("span",{class:A(["VPBadge",t.type])},[v(t.$slots,"default",{},()=>[G(T(t.text),1)],!0)],2))}}),Mt=k(St,[["__scopeId","data-v-57f18589"]]),It={key:0,class:"VPBackdrop"},Ct=y({__name:"VPBackdrop",props:{show:{type:Boolean}},setup(e){return(t,s)=>(r(),w(Ie,{name:"fade"},{default:p(()=>[t.show?(r(),u("div",It)):g("",!0)]),_:1}))}}),Tt=k(Ct,[["__scopeId","data-v-b30612d7"]]),C=Je;function At(e,t){let s,n=!1;return()=>{s&&clearTimeout(s),n?s=setTimeout(e,t):(e(),(n=!0)&&setTimeout(()=>n=!1,t))}}function Le(e){return/^\//.test(e)?e:`/${e}`}function Ae(e){const{pathname:t,search:s,hash:n,protocol:o}=new URL(e,"http://a.com");if(vt(e)||e.startsWith("#")||!o.startsWith("http")||/\.(?!html|md)\w+($|\?)/i.test(e)&&pt(e))return e;const{site:a}=C(),i=t.endsWith("/")||t.endsWith(".html")?e:e.replace(/(?:(^\.+)\/)?.*$/,`$1${t.replace(/(\.md)?$/,a.value.cleanUrls?"":".html")}${s}${n}`);return me(i)}function le({removeCurrent:e=!0,correspondingLink:t=!1}={}){const{site:s,localeIndex:n,page:o,theme:a}=C(),i=V(()=>{var h,f;return{label:(h=s.value.locales[n.value])==null?void 0:h.label,link:((f=s.value.locales[n.value])==null?void 0:f.link)||(n.value==="root"?"/":`/${n.value}/`)}});return{localeLinks:V(()=>Object.entries(s.value.locales).flatMap(([h,f])=>e&&i.value.label===f.label?[]:{text:f.label,link:Nt(f.link||(h==="root"?"/":`/${h}/`),a.value.i18nRouting!==!1&&t,o.value.relativePath.slice(i.value.link.length-1),!s.value.cleanUrls)})),currentLang:i}}function Nt(e,t,s,n){return t?e.replace(/\/$/,"")+Le(s.replace(/(^|\/)index\.md$/,"$1").replace(/\.md$/,n?".html":"")):e}const Bt=e=>(W("data-v-56f8922b"),e=e(),J(),e),Ht={class:"NotFound"},zt={class:"code"},xt={class:"title"},Et=Bt(()=>d("div",{class:"divider"},null,-1)),Dt={class:"quote"},Ot={class:"action"},Ft=["href","aria-label"],jt=y({__name:"NotFound",setup(e){const{site:t,theme:s}=C(),{localeLinks:n}=le({removeCurrent:!1}),o=M("/");return te(()=>{var i;const a=window.location.pathname.replace(t.value.base,"").replace(/(^.*?\/).*$/,"/$1");n.value.length&&(o.value=((i=n.value.find(({link:c})=>c.startsWith(a)))==null?void 0:i.link)||n.value[0].link)}),(a,i)=>{var c,h,f,m,$;return r(),u("div",Ht,[d("p",zt,T(((c=l(s).notFound)==null?void 0:c.code)??"404"),1),d("h1",xt,T(((h=l(s).notFound)==null?void 0:h.title)??"PAGE NOT FOUND"),1),Et,d("blockquote",Dt,T(((f=l(s).notFound)==null?void 0:f.quote)??"But if you don't change your direction, and if you keep looking, you may end up where you are heading."),1),d("div",Ot,[d("a",{class:"link",href:l(me)(o.value),"aria-label":((m=l(s).notFound)==null?void 0:m.linkLabel)??"go to home"},T((($=l(s).notFound)==null?void 0:$.linkText)??"Take me home"),9,Ft)])])}}}),Ut=k(jt,[["__scopeId","data-v-56f8922b"]]);function nt(e,t){if(Array.isArray(e))return he(e);if(e==null)return[];t=Le(t);const s=Object.keys(e).sort((o,a)=>a.split("/").length-o.split("/").length).find(o=>t.startsWith(Le(o))),n=s?e[s]:[];return Array.isArray(n)?he(n):he(n.items,n.base)}function qt(e){const t=[];let s=0;for(const n in e){const o=e[n];if(o.items){s=t.push(o);continue}t[s]||t.push({items:[]}),t[s].items.push(o)}return t}function Gt(e){const t=[];function s(n){for(const o of n)o.text&&o.link&&t.push({text:o.text,link:o.link,docFooterText:o.docFooterText}),o.items&&s(o.items)}return s(e),t}function Se(e,t){return Array.isArray(t)?t.some(s=>Se(e,s)):ee(e,t.link)?!0:t.items?Se(e,t.items):!1}function he(e,t){return[...e].map(s=>{const n={...s},o=n.base||t;return o&&n.link&&(n.link=o+n.link),n.items&&(n.items=he(n.items,o)),n})}function Y(){const{frontmatter:e,page:t,theme:s}=C(),n=Ve("(min-width: 960px)"),o=M(!1),a=V(()=>{const I=s.value.sidebar,S=t.value.relativePath;return I?nt(I,S):[]}),i=M(a.value);se(a,(I,S)=>{JSON.stringify(I)!==JSON.stringify(S)&&(i.value=a.value)});const c=V(()=>e.value.sidebar!==!1&&i.value.length>0&&e.value.layout!=="home"),h=V(()=>f?e.value.aside==null?s.value.aside==="left":e.value.aside==="left":!1),f=V(()=>e.value.layout==="home"?!1:e.value.aside!=null?!!e.value.aside:s.value.aside!==!1),m=V(()=>c.value&&n.value),$=V(()=>c.value?qt(i.value):[]);function L(){o.value=!0}function b(){o.value=!1}function P(){o.value?b():L()}return{isOpen:o,sidebar:i,sidebarGroups:$,hasSidebar:c,hasAside:f,leftAside:h,isSidebarEnabled:m,open:L,close:b,toggle:P}}function Rt(e,t){let s;ge(()=>{s=e.value?document.activeElement:void 0}),te(()=>{window.addEventListener("keyup",n)}),Ce(()=>{window.removeEventListener("keyup",n)});function n(o){o.key==="Escape"&&e.value&&(t(),s==null||s.focus())}}const ot=M(ae?location.hash:"");ae&&window.addEventListener("hashchange",()=>{ot.value=location.hash});function Kt(e){const{page:t}=C(),s=M(!1),n=V(()=>e.value.collapsed!=null),o=V(()=>!!e.value.link),a=M(!1),i=()=>{a.value=ee(t.value.relativePath,e.value.link)};se([t,e,ot],i),te(i);const c=V(()=>a.value?!0:e.value.items?Se(t.value.relativePath,e.value.items):!1),h=V(()=>!!(e.value.items&&e.value.items.length));ge(()=>{s.value=!!(n.value&&e.value.collapsed)}),Ye(()=>{(a.value||c.value)&&(s.value=!1)});function f(){n.value&&(s.value=!s.value)}return{collapsed:s,collapsible:n,isLink:o,isActiveLink:a,hasActiveLink:c,hasChildren:h,toggle:f}}function Wt(){const{hasSidebar:e}=Y(),t=Ve("(min-width: 960px)"),s=Ve("(min-width: 1280px)");return{isAsideEnabled:V(()=>!s.value&&!t.value?!1:e.value?s.value:t.value)}}const Jt=71;function Ne(e){return typeof e.outline=="object"&&!Array.isArray(e.outline)&&e.outline.label||e.outlineTitle||"On this page"}function Be(e){const t=[...document.querySelectorAll(".VPDoc :where(h1,h2,h3,h4,h5,h6)")].filter(s=>s.id&&s.hasChildNodes()).map(s=>{const n=Number(s.tagName[1]);return{title:Yt(s),link:"#"+s.id,level:n}});return Xt(t,e)}function Yt(e){let t="";for(const s of e.childNodes)if(s.nodeType===1){if(s.classList.contains("VPBadge")||s.classList.contains("header-anchor"))continue;t+=s.textContent}else s.nodeType===3&&(t+=s.textContent);return t.trim()}function Xt(e,t){if(t===!1)return[];const s=(typeof t=="object"&&!Array.isArray(t)?t.level:t)||2,[n,o]=typeof s=="number"?[s,s]:s==="deep"?[2,6]:s;e=e.filter(i=>i.level>=n&&i.level<=o);const a=[];e:for(let i=0;i=0;h--){const f=e[h];if(f.level{requestAnimationFrame(a),window.addEventListener("scroll",n)}),ft(()=>{i(location.hash)}),Ce(()=>{window.removeEventListener("scroll",n)});function a(){if(!s.value)return;const c=[].slice.call(e.value.querySelectorAll(".outline-link")),h=[].slice.call(document.querySelectorAll(".content .header-anchor")).filter(b=>c.some(P=>P.hash===b.hash&&b.offsetParent!==null)),f=window.scrollY,m=window.innerHeight,$=document.body.offsetHeight,L=Math.abs(f+m-$)<1;if(h.length&&L){i(h[h.length-1].hash);return}for(let b=0;b{const o=Z("VPDocOutlineItem",!0);return r(),u("ul",{class:A(s.root?"root":"nested")},[(r(!0),u(N,null,D(s.headers,({children:a,link:i,title:c})=>(r(),u("li",null,[d("a",{class:"outline-link",href:i,onClick:t,title:c},T(c),9,es),a!=null&&a.length?(r(),w(o,{key:0,headers:a},null,8,["headers"])):g("",!0)]))),256))],2)}}}),He=k(ts,[["__scopeId","data-v-42243c90"]]),ss=e=>(W("data-v-986658a7"),e=e(),J(),e),ns={class:"content"},os={class:"outline-title",role:"heading","aria-level":"2"},as={"aria-labelledby":"doc-outline-aria-label"},is=ss(()=>d("span",{class:"visually-hidden",id:"doc-outline-aria-label"}," Table of Contents for current page ",-1)),rs=y({__name:"VPDocAsideOutline",setup(e){const{frontmatter:t,theme:s}=C(),n=Te([]);re(()=>{n.value=Be(t.value.outline??s.value.outline)});const o=M(),a=M();return Zt(o,a),(i,c)=>(r(),u("div",{class:A(["VPDocAsideOutline",{"has-outline":n.value.length>0}]),ref_key:"container",ref:o,role:"navigation"},[d("div",ns,[d("div",{class:"outline-marker",ref_key:"marker",ref:a},null,512),d("div",os,T(l(Ne)(l(s))),1),d("nav",as,[is,_(He,{headers:n.value,root:!0},null,8,["headers"])])])],2))}}),ls=k(rs,[["__scopeId","data-v-986658a7"]]),cs={class:"VPDocAsideCarbonAds"},us=y({__name:"VPDocAsideCarbonAds",props:{carbonAds:{}},setup(e){const t=()=>null;return(s,n)=>(r(),u("div",cs,[_(l(t),{"carbon-ads":s.carbonAds},null,8,["carbon-ads"])]))}}),ds=e=>(W("data-v-872cba46"),e=e(),J(),e),hs={class:"VPDocAside"},vs=ds(()=>d("div",{class:"spacer"},null,-1)),ps=y({__name:"VPDocAside",setup(e){const{theme:t}=C();return(s,n)=>(r(),u("div",hs,[v(s.$slots,"aside-top",{},void 0,!0),v(s.$slots,"aside-outline-before",{},void 0,!0),_(ls),v(s.$slots,"aside-outline-after",{},void 0,!0),vs,v(s.$slots,"aside-ads-before",{},void 0,!0),l(t).carbonAds?(r(),w(us,{key:0,"carbon-ads":l(t).carbonAds},null,8,["carbon-ads"])):g("",!0),v(s.$slots,"aside-ads-after",{},void 0,!0),v(s.$slots,"aside-bottom",{},void 0,!0)]))}}),fs=k(ps,[["__scopeId","data-v-872cba46"]]);function _s(){const{theme:e,page:t}=C();return V(()=>{const{text:s="Edit this page",pattern:n=""}=e.value.editLink||{};let o;return typeof n=="function"?o=n(t.value):o=n.replace(/:path/g,t.value.filePath),{url:o,text:s}})}function ms(){const{page:e,theme:t,frontmatter:s}=C();return V(()=>{var h,f,m,$,L,b,P,I;const n=nt(t.value.sidebar,e.value.relativePath),o=Gt(n),a=o.findIndex(S=>ee(e.value.relativePath,S.link)),i=((h=t.value.docFooter)==null?void 0:h.prev)===!1&&!s.value.prev||s.value.prev===!1,c=((f=t.value.docFooter)==null?void 0:f.next)===!1&&!s.value.next||s.value.next===!1;return{prev:i?void 0:{text:(typeof s.value.prev=="string"?s.value.prev:typeof s.value.prev=="object"?s.value.prev.text:void 0)??((m=o[a-1])==null?void 0:m.docFooterText)??(($=o[a-1])==null?void 0:$.text),link:(typeof s.value.prev=="object"?s.value.prev.link:void 0)??((L=o[a-1])==null?void 0:L.link)},next:c?void 0:{text:(typeof s.value.next=="string"?s.value.next:typeof s.value.next=="object"?s.value.next.text:void 0)??((b=o[a+1])==null?void 0:b.docFooterText)??((P=o[a+1])==null?void 0:P.text),link:(typeof s.value.next=="object"?s.value.next.link:void 0)??((I=o[a+1])==null?void 0:I.link)}}})}const gs={},ks={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},$s=d("path",{d:"M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"},null,-1),bs=d("path",{d:"M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"},null,-1),ys=[$s,bs];function Ps(e,t){return r(),u("svg",ks,ys)}const ws=k(gs,[["render",Ps]]),K=y({__name:"VPLink",props:{tag:{},href:{},noIcon:{type:Boolean},target:{},rel:{}},setup(e){const t=e,s=V(()=>t.tag??(t.href?"a":"span")),n=V(()=>t.href&&Xe.test(t.href));return(o,a)=>(r(),w(Q(s.value),{class:A(["VPLink",{link:o.href,"vp-external-link-icon":n.value,"no-icon":o.noIcon}]),href:o.href?l(Ae)(o.href):void 0,target:o.target??(n.value?"_blank":void 0),rel:o.rel??(n.value?"noreferrer":void 0)},{default:p(()=>[v(o.$slots,"default")]),_:3},8,["class","href","target","rel"]))}}),Vs={class:"VPLastUpdated"},Ls=["datetime"],Ss=y({__name:"VPDocFooterLastUpdated",setup(e){const{theme:t,page:s,frontmatter:n,lang:o}=C(),a=V(()=>new Date(n.value.lastUpdated??s.value.lastUpdated)),i=V(()=>a.value.toISOString()),c=M("");return te(()=>{ge(()=>{var h,f,m;c.value=new Intl.DateTimeFormat((f=(h=t.value.lastUpdated)==null?void 0:h.formatOptions)!=null&&f.forceLocale?o.value:void 0,((m=t.value.lastUpdated)==null?void 0:m.formatOptions)??{dateStyle:"short",timeStyle:"short"}).format(a.value)})}),(h,f)=>{var m;return r(),u("p",Vs,[G(T(((m=l(t).lastUpdated)==null?void 0:m.text)||l(t).lastUpdatedText||"Last updated")+": ",1),d("time",{datetime:i.value},T(c.value),9,Ls)])}}}),Ms=k(Ss,[["__scopeId","data-v-f0eb8be1"]]),Is={key:0,class:"VPDocFooter"},Cs={key:0,class:"edit-info"},Ts={key:0,class:"edit-link"},As={key:1,class:"last-updated"},Ns={key:1,class:"prev-next"},Bs={class:"pager"},Hs=["innerHTML"],zs=["innerHTML"],xs={class:"pager"},Es=["innerHTML"],Ds=["innerHTML"],Os=y({__name:"VPDocFooter",setup(e){const{theme:t,page:s,frontmatter:n}=C(),o=_s(),a=ms(),i=V(()=>t.value.editLink&&n.value.editLink!==!1),c=V(()=>s.value.lastUpdated&&n.value.lastUpdated!==!1),h=V(()=>i.value||c.value||a.value.prev||a.value.next);return(f,m)=>{var $,L,b,P;return h.value?(r(),u("footer",Is,[v(f.$slots,"doc-footer-before",{},void 0,!0),i.value||c.value?(r(),u("div",Cs,[i.value?(r(),u("div",Ts,[_(K,{class:"edit-link-button",href:l(o).url,"no-icon":!0},{default:p(()=>[_(ws,{class:"edit-link-icon","aria-label":"edit icon"}),G(" "+T(l(o).text),1)]),_:1},8,["href"])])):g("",!0),c.value?(r(),u("div",As,[_(Ms)])):g("",!0)])):g("",!0),($=l(a).prev)!=null&&$.link||(L=l(a).next)!=null&&L.link?(r(),u("nav",Ns,[d("div",Bs,[(b=l(a).prev)!=null&&b.link?(r(),w(K,{key:0,class:"pager-link prev",href:l(a).prev.link},{default:p(()=>{var I;return[d("span",{class:"desc",innerHTML:((I=l(t).docFooter)==null?void 0:I.prev)||"Previous page"},null,8,Hs),d("span",{class:"title",innerHTML:l(a).prev.text},null,8,zs)]}),_:1},8,["href"])):g("",!0)]),d("div",xs,[(P=l(a).next)!=null&&P.link?(r(),w(K,{key:0,class:"pager-link next",href:l(a).next.link},{default:p(()=>{var I;return[d("span",{class:"desc",innerHTML:((I=l(t).docFooter)==null?void 0:I.next)||"Next page"},null,8,Es),d("span",{class:"title",innerHTML:l(a).next.text},null,8,Ds)]}),_:1},8,["href"])):g("",!0)])])):g("",!0)])):g("",!0)}}}),Fs=k(Os,[["__scopeId","data-v-72d7bc68"]]),js={},Us={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},qs=d("path",{d:"M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"},null,-1),Gs=[qs];function Rs(e,t){return r(),u("svg",Us,Gs)}const ze=k(js,[["render",Rs]]),Ks={key:0,class:"VPDocOutlineDropdown"},Ws={key:0,class:"items"},Js=y({__name:"VPDocOutlineDropdown",setup(e){const{frontmatter:t,theme:s}=C(),n=M(!1);re(()=>{n.value=!1});const o=Te([]);return re(()=>{o.value=Be(t.value.outline??s.value.outline)}),(a,i)=>o.value.length>0?(r(),u("div",Ks,[d("button",{onClick:i[0]||(i[0]=c=>n.value=!n.value),class:A({open:n.value})},[G(T(l(Ne)(l(s)))+" ",1),_(ze,{class:"icon"})],2),n.value?(r(),u("div",Ws,[_(He,{headers:o.value},null,8,["headers"])])):g("",!0)])):g("",!0)}}),Ys=k(Js,[["__scopeId","data-v-47981750"]]),Xs=e=>(W("data-v-e2d7a8eb"),e=e(),J(),e),Zs={class:"container"},Qs=Xs(()=>d("div",{class:"aside-curtain"},null,-1)),en={class:"aside-container"},tn={class:"aside-content"},sn={class:"content"},nn={class:"content-container"},on={class:"main"},an=y({__name:"VPDoc",setup(e){const{theme:t}=C(),s=ke(),{hasSidebar:n,hasAside:o,leftAside:a}=Y(),i=V(()=>s.path.replace(/[./]+/g,"_").replace(/_html$/,""));return(c,h)=>{const f=Z("Content");return r(),u("div",{class:A(["VPDoc",{"has-sidebar":l(n),"has-aside":l(o)}])},[v(c.$slots,"doc-top",{},void 0,!0),d("div",Zs,[l(o)?(r(),u("div",{key:0,class:A(["aside",{"left-aside":l(a)}])},[Qs,d("div",en,[d("div",tn,[_(fs,null,{"aside-top":p(()=>[v(c.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":p(()=>[v(c.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":p(()=>[v(c.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":p(()=>[v(c.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":p(()=>[v(c.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":p(()=>[v(c.$slots,"aside-ads-after",{},void 0,!0)]),_:3})])])],2)):g("",!0),d("div",sn,[d("div",nn,[v(c.$slots,"doc-before",{},void 0,!0),_(Ys),d("main",on,[_(f,{class:A(["vp-doc",[i.value,l(t).externalLinkIcon&&"external-link-icon-enabled"]])},null,8,["class"])]),_(Fs,null,{"doc-footer-before":p(()=>[v(c.$slots,"doc-footer-before",{},void 0,!0)]),_:3}),v(c.$slots,"doc-after",{},void 0,!0)])])]),v(c.$slots,"doc-bottom",{},void 0,!0)],2)}}}),rn=k(an,[["__scopeId","data-v-e2d7a8eb"]]),ln=y({__name:"VPButton",props:{tag:{},size:{default:"medium"},theme:{default:"brand"},text:{},href:{}},setup(e){const t=e,s=V(()=>t.href&&Xe.test(t.href)),n=V(()=>t.tag||t.href?"a":"button");return(o,a)=>(r(),w(Q(n.value),{class:A(["VPButton",[o.size,o.theme]]),href:o.href?l(Ae)(o.href):void 0,target:s.value?"_blank":void 0,rel:s.value?"noreferrer":void 0},{default:p(()=>[G(T(o.text),1)]),_:1},8,["class","href","target","rel"]))}}),cn=k(ln,[["__scopeId","data-v-33603068"]]),un=["src","alt"],dn=y({inheritAttrs:!1,__name:"VPImage",props:{image:{},alt:{}},setup(e){return(t,s)=>{const n=Z("VPImage",!0);return t.image?(r(),u(N,{key:0},[typeof t.image=="string"||"src"in t.image?(r(),u("img",de({key:0,class:"VPImage"},typeof t.image=="string"?t.$attrs:{...t.image,...t.$attrs},{src:l(me)(typeof t.image=="string"?t.image:t.image.src),alt:t.alt??(typeof t.image=="string"?"":t.image.alt||"")}),null,16,un)):(r(),u(N,{key:1},[_(n,de({class:"dark",image:t.image.dark,alt:t.image.alt},t.$attrs),null,16,["image","alt"]),_(n,de({class:"light",image:t.image.light,alt:t.image.alt},t.$attrs),null,16,["image","alt"])],64))],64)):g("",!0)}}}),pe=k(dn,[["__scopeId","data-v-57d5aa95"]]),hn=e=>(W("data-v-96363d7a"),e=e(),J(),e),vn={class:"container"},pn={class:"main"},fn={key:0,class:"name"},_n=["innerHTML"],mn=["innerHTML"],gn=["innerHTML"],kn={key:0,class:"actions"},$n={key:0,class:"image"},bn={class:"image-container"},yn=hn(()=>d("div",{class:"image-bg"},null,-1)),Pn=y({__name:"VPHero",props:{name:{},text:{},tagline:{},image:{},actions:{}},setup(e){const t=$e("hero-image-slot-exists");return(s,n)=>(r(),u("div",{class:A(["VPHero",{"has-image":s.image||l(t)}])},[d("div",vn,[d("div",pn,[v(s.$slots,"home-hero-info",{},()=>[s.name?(r(),u("h1",fn,[d("span",{innerHTML:s.name,class:"clip"},null,8,_n)])):g("",!0),s.text?(r(),u("p",{key:1,innerHTML:s.text,class:"text"},null,8,mn)):g("",!0),s.tagline?(r(),u("p",{key:2,innerHTML:s.tagline,class:"tagline"},null,8,gn)):g("",!0)],!0),s.actions?(r(),u("div",kn,[(r(!0),u(N,null,D(s.actions,o=>(r(),u("div",{key:o.link,class:"action"},[_(cn,{tag:"a",size:"medium",theme:o.theme,text:o.text,href:o.link},null,8,["theme","text","href"])]))),128))])):g("",!0)]),s.image||l(t)?(r(),u("div",$n,[d("div",bn,[yn,v(s.$slots,"home-hero-image",{},()=>[s.image?(r(),w(pe,{key:0,class:"image-src",image:s.image},null,8,["image"])):g("",!0)],!0)])])):g("",!0)])],2))}}),wn=k(Pn,[["__scopeId","data-v-96363d7a"]]),Vn=y({__name:"VPHomeHero",setup(e){const{frontmatter:t}=C();return(s,n)=>l(t).hero?(r(),w(wn,{key:0,class:"VPHomeHero",name:l(t).hero.name,text:l(t).hero.text,tagline:l(t).hero.tagline,image:l(t).hero.image,actions:l(t).hero.actions},{"home-hero-info":p(()=>[v(s.$slots,"home-hero-info")]),"home-hero-image":p(()=>[v(s.$slots,"home-hero-image")]),_:3},8,["name","text","tagline","image","actions"])):g("",!0)}}),Ln={},Sn={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Mn=d("path",{d:"M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"},null,-1),In=[Mn];function Cn(e,t){return r(),u("svg",Sn,In)}const Tn=k(Ln,[["render",Cn]]),An={class:"box"},Nn={key:0,class:"icon"},Bn=["innerHTML"],Hn=["innerHTML"],zn=["innerHTML"],xn={key:4,class:"link-text"},En={class:"link-text-value"},Dn=y({__name:"VPFeature",props:{icon:{},title:{},details:{},link:{},linkText:{},rel:{},target:{}},setup(e){return(t,s)=>(r(),w(K,{class:"VPFeature",href:t.link,rel:t.rel,target:t.target,"no-icon":!0,tag:t.link?"a":"div"},{default:p(()=>[d("article",An,[typeof t.icon=="object"&&t.icon.wrap?(r(),u("div",Nn,[_(pe,{image:t.icon,alt:t.icon.alt,height:t.icon.height||48,width:t.icon.width||48},null,8,["image","alt","height","width"])])):typeof t.icon=="object"?(r(),w(pe,{key:1,image:t.icon,alt:t.icon.alt,height:t.icon.height||48,width:t.icon.width||48},null,8,["image","alt","height","width"])):t.icon?(r(),u("div",{key:2,class:"icon",innerHTML:t.icon},null,8,Bn)):g("",!0),d("h2",{class:"title",innerHTML:t.title},null,8,Hn),t.details?(r(),u("p",{key:3,class:"details",innerHTML:t.details},null,8,zn)):g("",!0),t.linkText?(r(),u("div",xn,[d("p",En,[G(T(t.linkText)+" ",1),_(Tn,{class:"link-text-icon"})])])):g("",!0)])]),_:1},8,["href","rel","target","tag"]))}}),On=k(Dn,[["__scopeId","data-v-dc571927"]]),Fn={key:0,class:"VPFeatures"},jn={class:"container"},Un={class:"items"},qn=y({__name:"VPFeatures",props:{features:{}},setup(e){const t=e,s=V(()=>{const n=t.features.length;if(n){if(n===2)return"grid-2";if(n===3)return"grid-3";if(n%3===0)return"grid-6";if(n>3)return"grid-4"}else return});return(n,o)=>n.features?(r(),u("div",Fn,[d("div",jn,[d("div",Un,[(r(!0),u(N,null,D(n.features,a=>(r(),u("div",{key:a.title,class:A(["item",[s.value]])},[_(On,{icon:a.icon,title:a.title,details:a.details,link:a.link,"link-text":a.linkText,rel:a.rel,target:a.target},null,8,["icon","title","details","link","link-text","rel","target"])],2))),128))])])])):g("",!0)}}),Gn=k(qn,[["__scopeId","data-v-7fdf4b60"]]),Rn=y({__name:"VPHomeFeatures",setup(e){const{frontmatter:t}=C();return(s,n)=>l(t).features?(r(),w(Gn,{key:0,class:"VPHomeFeatures",features:l(t).features},null,8,["features"])):g("",!0)}}),Kn={class:"VPHome"},Wn=y({__name:"VPHome",setup(e){return(t,s)=>{const n=Z("Content");return r(),u("div",Kn,[v(t.$slots,"home-hero-before",{},void 0,!0),_(Vn,null,{"home-hero-info":p(()=>[v(t.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-image":p(()=>[v(t.$slots,"home-hero-image",{},void 0,!0)]),_:3}),v(t.$slots,"home-hero-after",{},void 0,!0),v(t.$slots,"home-features-before",{},void 0,!0),_(Rn),v(t.$slots,"home-features-after",{},void 0,!0),_(n)])}}}),Jn=k(Wn,[["__scopeId","data-v-4b752bfa"]]),Yn={},Xn={class:"VPPage"};function Zn(e,t){const s=Z("Content");return r(),u("div",Xn,[v(e.$slots,"page-top"),_(s),v(e.$slots,"page-bottom")])}const Qn=k(Yn,[["render",Zn]]),eo=y({__name:"VPContent",setup(e){const{page:t,frontmatter:s}=C(),{hasSidebar:n}=Y();return(o,a)=>(r(),u("div",{class:A(["VPContent",{"has-sidebar":l(n),"is-home":l(s).layout==="home"}]),id:"VPContent"},[l(t).isNotFound?v(o.$slots,"not-found",{key:0},()=>[_(Ut)],!0):l(s).layout==="page"?(r(),w(Qn,{key:1},{"page-top":p(()=>[v(o.$slots,"page-top",{},void 0,!0)]),"page-bottom":p(()=>[v(o.$slots,"page-bottom",{},void 0,!0)]),_:3})):l(s).layout==="home"?(r(),w(Jn,{key:2},{"home-hero-before":p(()=>[v(o.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info":p(()=>[v(o.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-image":p(()=>[v(o.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":p(()=>[v(o.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":p(()=>[v(o.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":p(()=>[v(o.$slots,"home-features-after",{},void 0,!0)]),_:3})):l(s).layout&&l(s).layout!=="doc"?(r(),w(Q(l(s).layout),{key:3})):(r(),w(rn,{key:4},{"doc-top":p(()=>[v(o.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":p(()=>[v(o.$slots,"doc-bottom",{},void 0,!0)]),"doc-footer-before":p(()=>[v(o.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":p(()=>[v(o.$slots,"doc-before",{},void 0,!0)]),"doc-after":p(()=>[v(o.$slots,"doc-after",{},void 0,!0)]),"aside-top":p(()=>[v(o.$slots,"aside-top",{},void 0,!0)]),"aside-outline-before":p(()=>[v(o.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":p(()=>[v(o.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":p(()=>[v(o.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":p(()=>[v(o.$slots,"aside-ads-after",{},void 0,!0)]),"aside-bottom":p(()=>[v(o.$slots,"aside-bottom",{},void 0,!0)]),_:3}))],2))}}),to=k(eo,[["__scopeId","data-v-e84d086a"]]),so={class:"container"},no=["innerHTML"],oo=["innerHTML"],ao=y({__name:"VPFooter",setup(e){const{theme:t,frontmatter:s}=C(),{hasSidebar:n}=Y();return(o,a)=>l(t).footer&&l(s).footer!==!1?(r(),u("footer",{key:0,class:A(["VPFooter",{"has-sidebar":l(n)}])},[d("div",so,[l(t).footer.message?(r(),u("p",{key:0,class:"message",innerHTML:l(t).footer.message},null,8,no)):g("",!0),l(t).footer.copyright?(r(),u("p",{key:1,class:"copyright",innerHTML:l(t).footer.copyright},null,8,oo)):g("",!0)])],2)):g("",!0)}}),io=k(ao,[["__scopeId","data-v-c4442a57"]]),ro={class:"header"},lo={class:"outline"},co=y({__name:"VPLocalNavOutlineDropdown",props:{headers:{},navHeight:{}},setup(e){const t=e,{theme:s}=C(),n=M(!1),o=M(0),a=M();re(()=>{n.value=!1});function i(){n.value=!n.value,o.value=window.innerHeight+Math.min(window.scrollY-t.navHeight,0)}function c(f){f.target.classList.contains("outline-link")&&(a.value&&(a.value.style.transition="none"),Ze(()=>{n.value=!1}))}function h(){n.value=!1,window.scrollTo({top:0,left:0,behavior:"smooth"})}return(f,m)=>(r(),u("div",{class:"VPLocalNavOutlineDropdown",style:_t({"--vp-vh":o.value+"px"})},[f.headers.length>0?(r(),u("button",{key:0,onClick:i,class:A({open:n.value})},[G(T(l(Ne)(l(s)))+" ",1),_(ze,{class:"icon"})],2)):(r(),u("button",{key:1,onClick:h},T(l(s).returnToTopLabel||"Return to top"),1)),_(Ie,{name:"flyout"},{default:p(()=>[n.value?(r(),u("div",{key:0,ref_key:"items",ref:a,class:"items",onClick:c},[d("div",ro,[d("a",{class:"top-link",href:"#",onClick:h},T(l(s).returnToTopLabel||"Return to top"),1)]),d("div",lo,[_(He,{headers:f.headers},null,8,["headers"])])],512)):g("",!0)]),_:1})],4))}}),uo=k(co,[["__scopeId","data-v-be609a8b"]]),ho={},vo={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},po=d("path",{d:"M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"},null,-1),fo=d("path",{d:"M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"},null,-1),_o=d("path",{d:"M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"},null,-1),mo=d("path",{d:"M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"},null,-1),go=[po,fo,_o,mo];function ko(e,t){return r(),u("svg",vo,go)}const $o=k(ho,[["render",ko]]),bo=["aria-expanded"],yo={class:"menu-text"},Po=y({__name:"VPLocalNav",props:{open:{type:Boolean}},emits:["open-menu"],setup(e){const{theme:t,frontmatter:s}=C(),{hasSidebar:n}=Y(),{y:o}=Qe(),a=Te([]),i=M(0);te(()=>{i.value=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--vp-nav-height"))}),re(()=>{a.value=Be(s.value.outline??t.value.outline)});const c=V(()=>a.value.length===0&&!n.value),h=V(()=>({VPLocalNav:!0,fixed:c.value,"reached-top":o.value>=i.value}));return(f,m)=>l(s).layout!=="home"&&(!c.value||l(o)>=i.value)?(r(),u("div",{key:0,class:A(h.value)},[l(n)?(r(),u("button",{key:0,class:"menu","aria-expanded":f.open,"aria-controls":"VPSidebarNav",onClick:m[0]||(m[0]=$=>f.$emit("open-menu"))},[_($o,{class:"menu-icon"}),d("span",yo,T(l(t).sidebarMenuLabel||"Menu"),1)],8,bo)):g("",!0),_(uo,{headers:a.value,navHeight:i.value},null,8,["headers","navHeight"])],2)):g("",!0)}}),wo=k(Po,[["__scopeId","data-v-49954ad8"]]);function Vo(){const e=M(!1);function t(){e.value=!0,window.addEventListener("resize",o)}function s(){e.value=!1,window.removeEventListener("resize",o)}function n(){e.value?s():t()}function o(){window.outerWidth>=768&&s()}const a=ke();return se(()=>a.path,s),{isScreenOpen:e,openScreen:t,closeScreen:s,toggleScreen:n}}const Lo={},So={class:"VPSwitch",type:"button",role:"switch"},Mo={class:"check"},Io={key:0,class:"icon"};function Co(e,t){return r(),u("button",So,[d("span",Mo,[e.$slots.default?(r(),u("span",Io,[v(e.$slots,"default",{},void 0,!0)])):g("",!0)])])}const To=k(Lo,[["render",Co],["__scopeId","data-v-37264fd4"]]),Ao={},No={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Bo=d("path",{d:"M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"},null,-1),Ho=[Bo];function zo(e,t){return r(),u("svg",No,Ho)}const xo=k(Ao,[["render",zo]]),Eo={},Do={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Oo=mt('',9),Fo=[Oo];function jo(e,t){return r(),u("svg",Do,Fo)}const Uo=k(Eo,[["render",jo]]),qo=y({__name:"VPSwitchAppearance",setup(e){const{isDark:t}=C(),s=$e("toggle-appearance",()=>{t.value=!t.value}),n=V(()=>t.value?"Switch to light theme":"Switch to dark theme");return(o,a)=>(r(),w(To,{title:n.value,class:"VPSwitchAppearance","aria-checked":l(t),onClick:l(s)},{default:p(()=>[_(Uo,{class:"sun"}),_(xo,{class:"moon"})]),_:1},8,["title","aria-checked","onClick"]))}}),xe=k(qo,[["__scopeId","data-v-35fbcff7"]]),Go={key:0,class:"VPNavBarAppearance"},Ro=y({__name:"VPNavBarAppearance",setup(e){const{site:t}=C();return(s,n)=>l(t).appearance&&l(t).appearance!=="force-dark"?(r(),u("div",Go,[_(xe)])):g("",!0)}}),Ko=k(Ro,[["__scopeId","data-v-09531cc8"]]),Ee=M();let at=!1,ye=0;function Wo(e){const t=M(!1);if(ae){!at&&Jo(),ye++;const s=se(Ee,n=>{var o,a,i;n===e.el.value||(o=e.el.value)!=null&&o.contains(n)?(t.value=!0,(a=e.onFocus)==null||a.call(e)):(t.value=!1,(i=e.onBlur)==null||i.call(e))});Ce(()=>{s(),ye--,ye||Yo()})}return gt(t)}function Jo(){document.addEventListener("focusin",it),at=!0,Ee.value=document.activeElement}function Yo(){document.removeEventListener("focusin",it)}function it(){Ee.value=document.activeElement}const Xo={},Zo={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Qo=d("path",{d:"M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"},null,-1),ea=[Qo];function ta(e,t){return r(),u("svg",Zo,ea)}const rt=k(Xo,[["render",ta]]),sa={},na={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},oa=d("circle",{cx:"12",cy:"12",r:"2"},null,-1),aa=d("circle",{cx:"19",cy:"12",r:"2"},null,-1),ia=d("circle",{cx:"5",cy:"12",r:"2"},null,-1),ra=[oa,aa,ia];function la(e,t){return r(),u("svg",na,ra)}const ca=k(sa,[["render",la]]),ua={class:"VPMenuLink"},da=y({__name:"VPMenuLink",props:{item:{}},setup(e){const{page:t}=C();return(s,n)=>(r(),u("div",ua,[_(K,{class:A({active:l(ee)(l(t).relativePath,s.item.activeMatch||s.item.link,!!s.item.activeMatch)}),href:s.item.link,target:s.item.target,rel:s.item.rel},{default:p(()=>[G(T(s.item.text),1)]),_:1},8,["class","href","target","rel"])]))}}),be=k(da,[["__scopeId","data-v-97be8de0"]]),ha={class:"VPMenuGroup"},va={key:0,class:"title"},pa=y({__name:"VPMenuGroup",props:{text:{},items:{}},setup(e){return(t,s)=>(r(),u("div",ha,[t.text?(r(),u("p",va,T(t.text),1)):g("",!0),(r(!0),u(N,null,D(t.items,n=>(r(),u(N,null,["link"in n?(r(),w(be,{key:0,item:n},null,8,["item"])):g("",!0)],64))),256))]))}}),fa=k(pa,[["__scopeId","data-v-7e01b81c"]]),_a={class:"VPMenu"},ma={key:0,class:"items"},ga=y({__name:"VPMenu",props:{items:{}},setup(e){return(t,s)=>(r(),u("div",_a,[t.items?(r(),u("div",ma,[(r(!0),u(N,null,D(t.items,n=>(r(),u(N,{key:n.text},["link"in n?(r(),w(be,{key:0,item:n},null,8,["item"])):(r(),w(fa,{key:1,text:n.text,items:n.items},null,8,["text","items"]))],64))),128))])):g("",!0),v(t.$slots,"default",{},void 0,!0)]))}}),ka=k(ga,[["__scopeId","data-v-6e39bf37"]]),$a=["aria-expanded","aria-label"],ba={key:0,class:"text"},ya=["innerHTML"],Pa={class:"menu"},wa=y({__name:"VPFlyout",props:{icon:{},button:{},label:{},items:{}},setup(e){const t=M(!1),s=M();Wo({el:s,onBlur:n});function n(){t.value=!1}return(o,a)=>(r(),u("div",{class:"VPFlyout",ref_key:"el",ref:s,onMouseenter:a[1]||(a[1]=i=>t.value=!0),onMouseleave:a[2]||(a[2]=i=>t.value=!1)},[d("button",{type:"button",class:"button","aria-haspopup":"true","aria-expanded":t.value,"aria-label":o.label,onClick:a[0]||(a[0]=i=>t.value=!t.value)},[o.button||o.icon?(r(),u("span",ba,[o.icon?(r(),w(Q(o.icon),{key:0,class:"option-icon"})):g("",!0),o.button?(r(),u("span",{key:1,innerHTML:o.button},null,8,ya)):g("",!0),_(rt,{class:"text-icon"})])):(r(),w(ca,{key:1,class:"icon"}))],8,$a),d("div",Pa,[_(ka,{items:o.items},{default:p(()=>[v(o.$slots,"default",{},void 0,!0)]),_:3},8,["items"])])],544))}}),De=k(wa,[["__scopeId","data-v-4f176a56"]]),Va={discord:'Discord',facebook:'Facebook',github:'GitHub',instagram:'Instagram',linkedin:'LinkedIn',mastodon:'Mastodon',slack:'Slack',twitter:'Twitter',x:'X',youtube:'YouTube'},La=["href","aria-label","innerHTML"],Sa=y({__name:"VPSocialLink",props:{icon:{},link:{},ariaLabel:{}},setup(e){const t=e,s=V(()=>typeof t.icon=="object"?t.icon.svg:Va[t.icon]);return(n,o)=>(r(),u("a",{class:"VPSocialLink no-icon",href:n.link,"aria-label":n.ariaLabel??(typeof n.icon=="string"?n.icon:""),target:"_blank",rel:"noopener",innerHTML:s.value},null,8,La))}}),Ma=k(Sa,[["__scopeId","data-v-1feba81e"]]),Ia={class:"VPSocialLinks"},Ca=y({__name:"VPSocialLinks",props:{links:{}},setup(e){return(t,s)=>(r(),u("div",Ia,[(r(!0),u(N,null,D(t.links,({link:n,icon:o,ariaLabel:a})=>(r(),w(Ma,{key:n,icon:o,link:n,ariaLabel:a},null,8,["icon","link","ariaLabel"]))),128))]))}}),Oe=k(Ca,[["__scopeId","data-v-ef495ef8"]]),Ta={key:0,class:"group translations"},Aa={class:"trans-title"},Na={key:1,class:"group"},Ba={class:"item appearance"},Ha={class:"label"},za={class:"appearance-action"},xa={key:2,class:"group"},Ea={class:"item social-links"},Da=y({__name:"VPNavBarExtra",setup(e){const{site:t,theme:s}=C(),{localeLinks:n,currentLang:o}=le({correspondingLink:!0}),a=V(()=>n.value.length&&o.value.label||t.value.appearance||s.value.socialLinks);return(i,c)=>a.value?(r(),w(De,{key:0,class:"VPNavBarExtra",label:"extra navigation"},{default:p(()=>[l(n).length&&l(o).label?(r(),u("div",Ta,[d("p",Aa,T(l(o).label),1),(r(!0),u(N,null,D(l(n),h=>(r(),w(be,{key:h.link,item:h},null,8,["item"]))),128))])):g("",!0),l(t).appearance&&l(t).appearance!=="force-dark"?(r(),u("div",Na,[d("div",Ba,[d("p",Ha,T(l(s).darkModeSwitchLabel||"Appearance"),1),d("div",za,[_(xe)])])])):g("",!0),l(s).socialLinks?(r(),u("div",xa,[d("div",Ea,[_(Oe,{class:"social-links-list",links:l(s).socialLinks},null,8,["links"])])])):g("",!0)]),_:1})):g("",!0)}}),Oa=k(Da,[["__scopeId","data-v-e4296c54"]]),Fa=e=>(W("data-v-38d1bd19"),e=e(),J(),e),ja=["aria-expanded"],Ua=Fa(()=>d("span",{class:"container"},[d("span",{class:"top"}),d("span",{class:"middle"}),d("span",{class:"bottom"})],-1)),qa=[Ua],Ga=y({__name:"VPNavBarHamburger",props:{active:{type:Boolean}},emits:["click"],setup(e){return(t,s)=>(r(),u("button",{type:"button",class:A(["VPNavBarHamburger",{active:t.active}]),"aria-label":"mobile navigation","aria-expanded":t.active,"aria-controls":"VPNavScreen",onClick:s[0]||(s[0]=n=>t.$emit("click"))},qa,10,ja))}}),Ra=k(Ga,[["__scopeId","data-v-38d1bd19"]]),Ka=["innerHTML"],Wa=y({__name:"VPNavBarMenuLink",props:{item:{}},setup(e){const{page:t}=C();return(s,n)=>(r(),w(K,{class:A({VPNavBarMenuLink:!0,active:l(ee)(l(t).relativePath,s.item.activeMatch||s.item.link,!!s.item.activeMatch)}),href:s.item.link,target:s.item.target,rel:s.item.rel,tabindex:"0"},{default:p(()=>[d("span",{innerHTML:s.item.text},null,8,Ka)]),_:1},8,["class","href","target","rel"]))}}),Ja=k(Wa,[["__scopeId","data-v-12d14006"]]),Ya=y({__name:"VPNavBarMenuGroup",props:{item:{}},setup(e){const t=e,{page:s}=C(),n=a=>"link"in a?ee(s.value.relativePath,a.link,!!t.item.activeMatch):a.items.some(n),o=V(()=>n(t.item));return(a,i)=>(r(),w(De,{class:A({VPNavBarMenuGroup:!0,active:l(ee)(l(s).relativePath,a.item.activeMatch,!!a.item.activeMatch)||o.value}),button:a.item.text,items:a.item.items},null,8,["class","button","items"]))}}),Xa=e=>(W("data-v-09e66f57"),e=e(),J(),e),Za={key:0,"aria-labelledby":"main-nav-aria-label",class:"VPNavBarMenu"},Qa=Xa(()=>d("span",{id:"main-nav-aria-label",class:"visually-hidden"},"Main Navigation",-1)),ei=y({__name:"VPNavBarMenu",setup(e){const{theme:t}=C();return(s,n)=>l(t).nav?(r(),u("nav",Za,[Qa,(r(!0),u(N,null,D(l(t).nav,o=>(r(),u(N,{key:o.text},["link"in o?(r(),w(Ja,{key:0,item:o},null,8,["item"])):(r(),w(Ya,{key:1,item:o},null,8,["item"]))],64))),128))])):g("",!0)}}),ti=k(ei,[["__scopeId","data-v-09e66f57"]]),si="/document/assets/flex-logo.SQNie4Vp.svg";function Pe(e,t){return typeof e>"u"?t:e}function qe(e){const t=Array(e);for(let s=0;s=this.minlength&&(c||!i[m])){let L=ue(h,o,f),b="";switch(this.tokenize){case"full":if(3<$){for(let P=0;P<$;P++)for(let I=$;I>P;I--)if(I-P>=this.minlength){const S=ue(h,o,f,$,P);b=m.substring(P,I),this.push_index(i,b,S,e,s)}break}case"reverse":if(2<$){for(let P=$-1;0=this.minlength){const I=ue(h,o,f,$,P);this.push_index(i,b,I,e,s)}b=""}case"forward":if(1<$){for(let P=0;P<$;P++)b+=m[P],b.length>=this.minlength&&this.push_index(i,b,L,e,s);break}default:if(this.boost&&(L=Math.min(0|L/this.boost(t,m,f),h-1)),this.push_index(i,m,L,e,s),c&&1=this.minlength&&!P[m]){P[m]=1;const R=ue(I+(o/2>I?0:1),o,f,U-1,E-1),X=this.bidirectional&&m>S;this.push_index(a,X?S:m,R,e,s,X?m:S)}}}}}this.fastupdate||(this.register[e]=1)}}return this};function ue(e,t,s,n,o){return s&&1=this.minlength&&!$[b]){if(!this.optimize&&!a&&!this.map[b])return i;L[I++]=b,$[b]=1}e=L,n=e.length}if(!n)return i;t||(t=100);let h,f=this.depth&&1=s)))));b++);if(f)return o?Ke(c,s,0):void(e[e.length]=c)}return!t&&c};function Ke(e,t,s){return e=e.length===1?e[0]:oi(e),s||e.length>t?e.slice(s,s+t):e}function We(e,t,s,n){if(s){const o=n&&t>s;e=e[o?t:s],e=e&&e[o?s:t]}else e=e[t];return e}j.prototype.contain=function(e){return!!this.register[e]},j.prototype.update=function(e,t){return this.remove(e).add(e,t)},j.prototype.remove=function(e,t){const s=this.register[e];if(s){if(this.fastupdate)for(let n,o=0;o{if(a.value){for(var H=$.value.search(a.value,{enrich:!0}),B=[],O=0;O!H||!H.length?[]:H.reduce((O,z)=>(O[B(z)]||(O[B(z)]=[]),O[B(z)].push(z),O),{}),R=()=>{setTimeout(()=>{c.value&&c.value.focus()},100),Fe(),o.value=!0};te(async()=>{var z,x;const H=await $t(()=>import("./virtual_search-data.FK9W8Fwo.js"),__vite__mapDeps([]));h.value=H.default.INDEX_DATA,f.value=H.default.PREVIEW_LOOKUP,m.value=H.default.Options,i.value=window.location.origin+me(s.value==="root"?"/":s.value),L.value=((z=m.value)==null?void 0:z.buttonLabel)||L.value,b.value=((x=m.value)==null?void 0:x.placeholder)||b.value;var B=new j(m.value);B.import("reg",h.value.reg),B.import("cfg",h.value.cfg),B.import("map",h.value.map),B.import("ctx",h.value.ctx),$.value=B,n.value.innerHTML=/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?"⌘":"Ctrl";const O=F=>{var oe;F.key==="k"&&(F.ctrlKey||F.metaKey)&&(F.preventDefault(),R()),F.key==="Escape"&&((oe=a.value)==null?void 0:oe.length)==0&&o.value&&(o.value=!1)};window.addEventListener("keydown",O)});const X=V(()=>E(U.value,H=>H.link.split("/").slice(0,-1).join("-"))),ne=V(()=>Object.values(X.value).flat().map(H=>H.id));function Fe(){o.value=!1,a.value=""}const dt=H=>{var B,O;if(document.getElementsByClassName("search-group")[0]){if(H.key=="ArrowUp"||H.key=="ArrowDown"){const z=ne.value.indexOf(P.value);if(H.key=="ArrowUp"){const x=z==0?ne.value.length-1:z-1;P.value=ne.value[x]}if(H.key=="ArrowDown"){const x=z>ne.value.length-2?0:z+1;P.value=ne.value[x]}if(z<5){const x=I.value.getElementsByClassName("VPPluginSearch-search-group")[0];x==null||x.scrollIntoView(!0)}else(B=document.getElementById(ne.value[P.value]))==null||B.scrollIntoView(!0);Ze()}H.key=="Enter"&&S.go(t.site.value.base+((O=I.value.getElementsByClassName("link-focused")[0].getAttribute("href"))==null?void 0:O.replace(i.value,"")))}};return(H,B)=>{const O=Z("ClientOnly");return r(),u("div",wi,[_(O,null,{default:p(()=>[(r(),w(Pt,{to:"body"},[je(d("div",{class:"VPPluginSearch-modal-back",onClick:B[2]||(B[2]=z=>o.value=!1),onKeydown:dt},[d("div",{class:"VPPluginSearch-modal",onClick:B[1]||(B[1]=et(()=>{},["stop"])),ref_key:"modal",ref:I},[d("form",Vi,[Li,je(d("input",{class:"DocSearch-Input","aria-autocomplete":"both","aria-labelledby":"docsearch-label",id:"docsearch-input",autocomplete:"off",autocorrect:"off",autocapitalize:"off",enterkeyhint:"search",spellcheck:"false",autofocus:"true","onUpdate:modelValue":B[0]||(B[0]=z=>a.value=z),placeholder:b.value,maxlength:"64",type:"search",ref_key:"input",ref:c},null,8,Si),[[yt,a.value]])]),d("div",Mi,[(r(!0),u(N,null,D(X.value,(z,x)=>(r(),u("div",{class:"search-group",key:x},[d("span",Ii,T(x?x.toString()[0].toUpperCase()+x.toString().slice(1):"Home"),1),(r(!0),u(N,null,D(z,(F,oe)=>(r(),u("a",{href:i.value+F.link,key:F.id,onClick:Fe,onMouseenter:ce=>P.value=F.id,class:A({"link-focused":P.value==F.id}),id:oe.toString()},[d("div",Ti,[d("span",Ai,T(F.link.includes("#")?"#":"▤"),1),d("div",Ni,[d("h3",null,T(F.title),1),d("p",null,[d("div",{innerHTML:F.preview},null,8,Bi)])]),Hi])],42,Ci))),128))]))),128))]),zi],512)],544),[[bt,o.value]])]))]),_:1}),d("div",{id:"docsearch",onClick:B[3]||(B[3]=z=>R())},[d("button",xi,[d("span",Ei,[Di,d("span",Oi,T(L.value),1)]),d("span",Fi,[d("span",{class:"DocSearch-Button-Key",ref_key:"metaKey",ref:n},"Meta",512),ji])])])])}}}),qi=y({__name:"VPNavBarSocialLinks",setup(e){const{theme:t}=C();return(s,n)=>l(t).socialLinks?(r(),w(Oe,{key:0,class:"VPNavBarSocialLinks",links:l(t).socialLinks},null,8,["links"])):g("",!0)}}),Gi=k(qi,[["__scopeId","data-v-d8e1041f"]]),Ri=["href"],Ki=y({__name:"VPNavBarTitle",setup(e){const{site:t,theme:s}=C(),{hasSidebar:n}=Y(),{currentLang:o}=le();return(a,i)=>(r(),u("div",{class:A(["VPNavBarTitle",{"has-sidebar":l(n)}])},[d("a",{class:"title",href:l(s).logoLink??l(Ae)(l(o).link)},[v(a.$slots,"nav-bar-title-before",{},void 0,!0),l(s).logo?(r(),w(pe,{key:0,class:"logo",image:l(s).logo},null,8,["image"])):g("",!0),l(s).siteTitle?(r(),u(N,{key:1},[G(T(l(s).siteTitle),1)],64)):l(s).siteTitle===void 0?(r(),u(N,{key:2},[G(T(l(t).title),1)],64)):g("",!0),v(a.$slots,"nav-bar-title-after",{},void 0,!0)],8,Ri)],2))}}),Wi=k(Ki,[["__scopeId","data-v-5606815e"]]),Ji={},Yi={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Xi=d("path",{d:"M0 0h24v24H0z",fill:"none"},null,-1),Zi=d("path",{d:" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z ",class:"css-c4d79v"},null,-1),Qi=[Xi,Zi];function er(e,t){return r(),u("svg",Yi,Qi)}const lt=k(Ji,[["render",er]]),tr={class:"items"},sr={class:"title"},nr=y({__name:"VPNavBarTranslations",setup(e){const{theme:t}=C(),{localeLinks:s,currentLang:n}=le({correspondingLink:!0});return(o,a)=>l(s).length&&l(n).label?(r(),w(De,{key:0,class:"VPNavBarTranslations",icon:lt,label:l(t).langMenuLabel||"Change language"},{default:p(()=>[d("div",tr,[d("p",sr,T(l(n).label),1),(r(!0),u(N,null,D(l(s),i=>(r(),w(be,{key:i.link,item:i},null,8,["item"]))),128))])]),_:1},8,["label"])):g("",!0)}}),or=k(nr,[["__scopeId","data-v-97e27cc0"]]),ar=e=>(W("data-v-80433010"),e=e(),J(),e),ir={class:"container"},rr={class:"title"},lr={class:"content"},cr=ar(()=>d("div",{class:"curtain"},null,-1)),ur={class:"content-body"},dr=y({__name:"VPNavBar",props:{isScreenOpen:{type:Boolean}},emits:["toggle-screen"],setup(e){const{y:t}=Qe(),{hasSidebar:s}=Y(),{frontmatter:n}=C(),o=M({});return Ye(()=>{o.value={"has-sidebar":s.value,top:n.value.layout==="home"&&t.value===0}}),(a,i)=>(r(),u("div",{class:A(["VPNavBar",o.value])},[d("div",ir,[d("div",rr,[_(Wi,null,{"nav-bar-title-before":p(()=>[v(a.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":p(()=>[v(a.$slots,"nav-bar-title-after",{},void 0,!0)]),_:3})]),d("div",lr,[cr,d("div",ur,[v(a.$slots,"nav-bar-content-before",{},void 0,!0),_(Ui,{class:"search"}),_(ti,{class:"menu"}),_(or,{class:"translations"}),_(Ko,{class:"appearance"}),_(Gi,{class:"social-links"}),_(Oa,{class:"extra"}),v(a.$slots,"nav-bar-content-after",{},void 0,!0),_(Ra,{class:"hamburger",active:a.isScreenOpen,onClick:i[0]||(i[0]=c=>a.$emit("toggle-screen"))},null,8,["active"])])])])],2))}}),hr=k(dr,[["__scopeId","data-v-80433010"]]),vr={key:0,class:"VPNavScreenAppearance"},pr={class:"text"},fr=y({__name:"VPNavScreenAppearance",setup(e){const{site:t,theme:s}=C();return(n,o)=>l(t).appearance&&l(t).appearance!=="force-dark"?(r(),u("div",vr,[d("p",pr,T(l(s).darkModeSwitchLabel||"Appearance"),1),_(xe)])):g("",!0)}}),_r=k(fr,[["__scopeId","data-v-6e00bd7a"]]),mr=y({__name:"VPNavScreenMenuLink",props:{item:{}},setup(e){const t=$e("close-screen");return(s,n)=>(r(),w(K,{class:"VPNavScreenMenuLink",href:s.item.link,target:s.item.target,rel:s.item.rel,onClick:l(t)},{default:p(()=>[G(T(s.item.text),1)]),_:1},8,["href","target","rel","onClick"]))}}),gr=k(mr,[["__scopeId","data-v-f1dc5061"]]),kr={},$r={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},br=d("path",{d:"M18.9,10.9h-6v-6c0-0.6-0.4-1-1-1s-1,0.4-1,1v6h-6c-0.6,0-1,0.4-1,1s0.4,1,1,1h6v6c0,0.6,0.4,1,1,1s1-0.4,1-1v-6h6c0.6,0,1-0.4,1-1S19.5,10.9,18.9,10.9z"},null,-1),yr=[br];function Pr(e,t){return r(),u("svg",$r,yr)}const wr=k(kr,[["render",Pr]]),Vr=y({__name:"VPNavScreenMenuGroupLink",props:{item:{}},setup(e){const t=$e("close-screen");return(s,n)=>(r(),w(K,{class:"VPNavScreenMenuGroupLink",href:s.item.link,target:s.item.target,rel:s.item.rel,onClick:l(t)},{default:p(()=>[G(T(s.item.text),1)]),_:1},8,["href","target","rel","onClick"]))}}),ct=k(Vr,[["__scopeId","data-v-5fa73bc4"]]),Lr={class:"VPNavScreenMenuGroupSection"},Sr={key:0,class:"title"},Mr=y({__name:"VPNavScreenMenuGroupSection",props:{text:{},items:{}},setup(e){return(t,s)=>(r(),u("div",Lr,[t.text?(r(),u("p",Sr,T(t.text),1)):g("",!0),(r(!0),u(N,null,D(t.items,n=>(r(),w(ct,{key:n.text,item:n},null,8,["item"]))),128))]))}}),Ir=k(Mr,[["__scopeId","data-v-78554050"]]),Cr=["aria-controls","aria-expanded"],Tr=["innerHTML"],Ar=["id"],Nr={key:1,class:"group"},Br=y({__name:"VPNavScreenMenuGroup",props:{text:{},items:{}},setup(e){const t=e,s=M(!1),n=V(()=>`NavScreenGroup-${t.text.replace(" ","-").toLowerCase()}`);function o(){s.value=!s.value}return(a,i)=>(r(),u("div",{class:A(["VPNavScreenMenuGroup",{open:s.value}])},[d("button",{class:"button","aria-controls":n.value,"aria-expanded":s.value,onClick:o},[d("span",{class:"button-text",innerHTML:a.text},null,8,Tr),_(wr,{class:"button-icon"})],8,Cr),d("div",{id:n.value,class:"items"},[(r(!0),u(N,null,D(a.items,c=>(r(),u(N,{key:c.text},["link"in c?(r(),u("div",{key:c.text,class:"item"},[_(ct,{item:c},null,8,["item"])])):(r(),u("div",Nr,[_(Ir,{text:c.text,items:c.items},null,8,["text","items"])]))],64))),128))],8,Ar)],2))}}),Hr=k(Br,[["__scopeId","data-v-71478f73"]]),zr={key:0,class:"VPNavScreenMenu"},xr=y({__name:"VPNavScreenMenu",setup(e){const{theme:t}=C();return(s,n)=>l(t).nav?(r(),u("nav",zr,[(r(!0),u(N,null,D(l(t).nav,o=>(r(),u(N,{key:o.text},["link"in o?(r(),w(gr,{key:0,item:o},null,8,["item"])):(r(),w(Hr,{key:1,text:o.text||"",items:o.items},null,8,["text","items"]))],64))),128))])):g("",!0)}}),Er=y({__name:"VPNavScreenSocialLinks",setup(e){const{theme:t}=C();return(s,n)=>l(t).socialLinks?(r(),w(Oe,{key:0,class:"VPNavScreenSocialLinks",links:l(t).socialLinks},null,8,["links"])):g("",!0)}}),Dr={class:"list"},Or=y({__name:"VPNavScreenTranslations",setup(e){const{localeLinks:t,currentLang:s}=le({correspondingLink:!0}),n=M(!1);function o(){n.value=!n.value}return(a,i)=>l(t).length&&l(s).label?(r(),u("div",{key:0,class:A(["VPNavScreenTranslations",{open:n.value}])},[d("button",{class:"title",onClick:o},[_(lt,{class:"icon lang"}),G(" "+T(l(s).label)+" ",1),_(rt,{class:"icon chevron"})]),d("ul",Dr,[(r(!0),u(N,null,D(l(t),c=>(r(),u("li",{key:c.link,class:"item"},[_(K,{class:"link",href:c.link},{default:p(()=>[G(T(c.text),1)]),_:2},1032,["href"])]))),128))])],2)):g("",!0)}}),Fr=k(Or,[["__scopeId","data-v-3dee8c57"]]),jr={class:"container"},Ur=y({__name:"VPNavScreen",props:{open:{type:Boolean}},setup(e){const t=M(null),s=tt(ae?document.body:null);return(n,o)=>(r(),w(Ie,{name:"fade",onEnter:o[0]||(o[0]=a=>s.value=!0),onAfterLeave:o[1]||(o[1]=a=>s.value=!1)},{default:p(()=>[n.open?(r(),u("div",{key:0,class:"VPNavScreen",ref_key:"screen",ref:t,id:"VPNavScreen"},[d("div",jr,[v(n.$slots,"nav-screen-content-before",{},void 0,!0),_(xr,{class:"menu"}),_(Fr,{class:"translations"}),_(_r,{class:"appearance"}),_(Er,{class:"social-links"}),v(n.$slots,"nav-screen-content-after",{},void 0,!0)])],512)):g("",!0)]),_:3}))}}),qr=k(Ur,[["__scopeId","data-v-05ed51bf"]]),Gr={key:0,class:"VPNav"},Rr=y({__name:"VPNav",setup(e){const{isScreenOpen:t,closeScreen:s,toggleScreen:n}=Vo(),{frontmatter:o}=C(),a=V(()=>o.value.navbar!==!1);return st("close-screen",s),ge(()=>{ae&&document.documentElement.classList.toggle("hide-nav",!a.value)}),(i,c)=>a.value?(r(),u("header",Gr,[_(hr,{"is-screen-open":l(t),onToggleScreen:l(n)},{"nav-bar-title-before":p(()=>[v(i.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":p(()=>[v(i.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":p(()=>[v(i.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":p(()=>[v(i.$slots,"nav-bar-content-after",{},void 0,!0)]),_:3},8,["is-screen-open","onToggleScreen"]),_(qr,{open:l(t)},{"nav-screen-content-before":p(()=>[v(i.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":p(()=>[v(i.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3},8,["open"])])):g("",!0)}}),Kr=k(Rr,[["__scopeId","data-v-ebb023b0"]]),Wr=e=>(W("data-v-cf728725"),e=e(),J(),e),Jr=["role","tabindex"],Yr=Wr(()=>d("div",{class:"indicator"},null,-1)),Xr={key:1,class:"items"},Zr=y({__name:"VPSidebarItem",props:{item:{},depth:{}},setup(e){const t=e,{collapsed:s,collapsible:n,isLink:o,isActiveLink:a,hasActiveLink:i,hasChildren:c,toggle:h}=Kt(V(()=>t.item)),f=V(()=>c.value?"section":"div"),m=V(()=>o.value?"a":"div"),$=V(()=>c.value?t.depth+2===7?"p":`h${t.depth+2}`:"p"),L=V(()=>o.value?void 0:"button"),b=V(()=>[[`level-${t.depth}`],{collapsible:n.value},{collapsed:s.value},{"is-link":o.value},{"is-active":a.value},{"has-active":i.value}]);function P(S){"key"in S&&S.key!=="Enter"||!t.item.link&&h()}function I(){t.item.link&&h()}return(S,U)=>{const E=Z("VPSidebarItem",!0);return r(),w(Q(f.value),{class:A(["VPSidebarItem",b.value])},{default:p(()=>[S.item.text?(r(),u("div",de({key:0,class:"item",role:L.value},Vt(S.item.items?{click:P,keydown:P}:{},!0),{tabindex:S.item.items&&0}),[Yr,S.item.link?(r(),w(K,{key:0,tag:m.value,class:"link",href:S.item.link,rel:S.item.rel,target:S.item.target},{default:p(()=>[(r(),w(Q($.value),{class:"text",innerHTML:S.item.text},null,8,["innerHTML"]))]),_:1},8,["tag","href","rel","target"])):(r(),w(Q($.value),{key:1,class:"text",innerHTML:S.item.text},null,8,["innerHTML"])),S.item.collapsed!=null?(r(),u("div",{key:2,class:"caret",role:"button","aria-label":"toggle section",onClick:I,onKeydown:wt(I,["enter"]),tabindex:"0"},[_(ze,{class:"caret-icon"})],32)):g("",!0)],16,Jr)):g("",!0),S.item.items&&S.item.items.length?(r(),u("div",Xr,[S.depth<5?(r(!0),u(N,{key:0},D(S.item.items,R=>(r(),w(E,{key:R.text,item:R,depth:S.depth+1},null,8,["item","depth"]))),128)):g("",!0)])):g("",!0)]),_:1},8,["class"])}}}),Qr=k(Zr,[["__scopeId","data-v-cf728725"]]),ut=e=>(W("data-v-4dca7019"),e=e(),J(),e),el=ut(()=>d("div",{class:"curtain"},null,-1)),tl={class:"nav",id:"VPSidebarNav","aria-labelledby":"sidebar-aria-label",tabindex:"-1"},sl=ut(()=>d("span",{class:"visually-hidden",id:"sidebar-aria-label"}," Sidebar Navigation ",-1)),nl=y({__name:"VPSidebar",props:{open:{type:Boolean}},setup(e){const{sidebarGroups:t,hasSidebar:s}=Y(),n=e,o=M(null),a=tt(ae?document.body:null);return se([n,o],()=>{var i;n.open?(a.value=!0,(i=o.value)==null||i.focus()):a.value=!1},{immediate:!0,flush:"post"}),(i,c)=>l(s)?(r(),u("aside",{key:0,class:A(["VPSidebar",{open:i.open}]),ref_key:"navEl",ref:o,onClick:c[0]||(c[0]=et(()=>{},["stop"]))},[el,d("nav",tl,[sl,v(i.$slots,"sidebar-nav-before",{},void 0,!0),(r(!0),u(N,null,D(l(t),h=>(r(),u("div",{key:h.text,class:"group"},[_(Qr,{item:h,depth:0},null,8,["item"])]))),128)),v(i.$slots,"sidebar-nav-after",{},void 0,!0)])],2)):g("",!0)}}),ol=k(nl,[["__scopeId","data-v-4dca7019"]]),al=y({__name:"VPSkipLink",setup(e){const t=ke(),s=M();se(()=>t.path,()=>s.value.focus());function n({target:o}){const a=document.getElementById(decodeURIComponent(o.hash).slice(1));if(a){const i=()=>{a.removeAttribute("tabindex"),a.removeEventListener("blur",i)};a.setAttribute("tabindex","-1"),a.addEventListener("blur",i),a.focus(),window.scrollTo(0,0)}}return(o,a)=>(r(),u(N,null,[d("span",{ref_key:"backToTop",ref:s,tabindex:"-1"},null,512),d("a",{href:"#VPContent",class:"VPSkipLink visually-hidden",onClick:n}," Skip to content ")],64))}}),il=k(al,[["__scopeId","data-v-6972e190"]]),rl=y({__name:"Layout",setup(e){const{isOpen:t,open:s,close:n}=Y(),o=ke();se(()=>o.path,n),Rt(t,n);const{frontmatter:a}=C(),i=Lt(),c=V(()=>!!i["home-hero-image"]);return st("hero-image-slot-exists",c),(h,f)=>{const m=Z("Content");return l(a).layout!==!1?(r(),u("div",{key:0,class:A(["Layout",l(a).pageClass])},[v(h.$slots,"layout-top",{},void 0,!0),_(il),_(Tt,{class:"backdrop",show:l(t),onClick:l(n)},null,8,["show","onClick"]),_(Kr,null,{"nav-bar-title-before":p(()=>[v(h.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":p(()=>[v(h.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":p(()=>[v(h.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":p(()=>[v(h.$slots,"nav-bar-content-after",{},void 0,!0)]),"nav-screen-content-before":p(()=>[v(h.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":p(()=>[v(h.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3}),_(wo,{open:l(t),onOpenMenu:l(s)},null,8,["open","onOpenMenu"]),_(ol,{open:l(t)},{"sidebar-nav-before":p(()=>[v(h.$slots,"sidebar-nav-before",{},void 0,!0)]),"sidebar-nav-after":p(()=>[v(h.$slots,"sidebar-nav-after",{},void 0,!0)]),_:3},8,["open"]),_(to,null,{"page-top":p(()=>[v(h.$slots,"page-top",{},void 0,!0)]),"page-bottom":p(()=>[v(h.$slots,"page-bottom",{},void 0,!0)]),"not-found":p(()=>[v(h.$slots,"not-found",{},void 0,!0)]),"home-hero-before":p(()=>[v(h.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info":p(()=>[v(h.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-image":p(()=>[v(h.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":p(()=>[v(h.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":p(()=>[v(h.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":p(()=>[v(h.$slots,"home-features-after",{},void 0,!0)]),"doc-footer-before":p(()=>[v(h.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":p(()=>[v(h.$slots,"doc-before",{},void 0,!0)]),"doc-after":p(()=>[v(h.$slots,"doc-after",{},void 0,!0)]),"doc-top":p(()=>[v(h.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":p(()=>[v(h.$slots,"doc-bottom",{},void 0,!0)]),"aside-top":p(()=>[v(h.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":p(()=>[v(h.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":p(()=>[v(h.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":p(()=>[v(h.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":p(()=>[v(h.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":p(()=>[v(h.$slots,"aside-ads-after",{},void 0,!0)]),_:3}),_(io),v(h.$slots,"layout-bottom",{},void 0,!0)],2)):(r(),w(m,{key:1}))}}}),ll=k(rl,[["__scopeId","data-v-7694a090"]]),ul={Layout:ll,enhanceApp:({app:e})=>{e.component("Badge",Mt)}};export{ul as t}; -function __vite__mapDeps(indexes) { - if (!__vite__mapDeps.viteFileDeps) { - __vite__mapDeps.viteFileDeps = [] - } - return indexes.map((i) => __vite__mapDeps.viteFileDeps[i]) -} diff --git a/docs/document/assets/chunks/virtual_search-data.FK9W8Fwo.js b/docs/document/assets/chunks/virtual_search-data.3548acb2.js similarity index 63% rename from docs/document/assets/chunks/virtual_search-data.FK9W8Fwo.js rename to docs/document/assets/chunks/virtual_search-data.3548acb2.js index dad59d05a..608edc157 100644 --- a/docs/document/assets/chunks/virtual_search-data.FK9W8Fwo.js +++ b/docs/document/assets/chunks/virtual_search-data.3548acb2.js @@ -1,345 +1,345 @@ -const e={map:'[{"高级属性":["0.0"],"option":["0.1","1.12","10.1","11.12","20.9","25.4","25.14","31.9","36.14"],"template":["0.2","10.2"],"events":["0.3","10.3"],"storage":["0.4","10.4"],"icons":["0.5","10.5","30.38","41.38"],"i18n":["0.6","10.6","30.42","41.42"],"notice":["0.7","3.3","10.7","13.3"],"layers":["0.8","10.8","30.28","41.28"],"controls":["0.9","10.9","30.31","41.31"],"contextmenu":["0.10","2.36","3.2","10.10","12.36","13.2","30.30","41.30"],"subtitle":["0.11","2.35","10.11","12.35","30.36","41.36"],"loading":["0.12","2.33","10.12","12.33"],"hotkey":["0.13","2.5","10.13","12.5","30.19","41.19"],"mask":["0.14","2.34","10.14","12.34"],"setting":["0.15","2.38","3.4","3.5","3.6","10.15","12.38","13.4","13.5","13.6","30.18","41.18"],"plugins":["0.16","10.16","30.34","41.34"],"静态属性":["1.0"],"instances":["1.1","11.1"],"version":["1.2","11.2"],"env":["1.3","11.3"],"build":["1.4","11.4"],"config":["1.5","11.5","25.11","36.11"],"utils":["1.6","11.6"],"scheme":["1.7","11.7"],"emitter":["1.8","11.8"],"validator":["1.9","11.9"],"kindof":["1.10","11.10"],"html":["1.11","11.11"],"实例事件":["2.0"],"ready":["2.1","12.1"],"restart":["2.2","12.2"],"pause":["2.3","5.2","12.3","15.2"],"play":["2.4","5.1","12.4","15.1"],"destroy":["2.6","5.4","12.6","15.4","28.9","39.9"],"focus":["2.7","12.7"],"blur":["2.8","12.8"],"dblclick":["2.9","12.9"],"click":["2.10","12.10"],"error":["2.11","12.11"],"hover":["2.12","12.12"],"mousemove":["2.13","12.13"],"resize":["2.14","3.7","12.14","13.7"],"view":["2.15","12.15"],"lock":["2.16","12.16","30.43","41.43"],"aspectratio":["2.17","5.29","12.17","15.29","30.16","41.16"],"autoheight":["2.18","5.30","12.18","15.30"],"autosize":["2.19","5.25","12.19","15.25","30.11","41.11"],"flip":["2.20","3.29","5.27","12.20","13.29","15.27","30.14","41.14"],"fullscreen":["2.21","3.30","5.19","12.21","13.30","15.19","30.22","41.22"],"fullscreenweb":["2.22","5.20","12.22","15.20","30.23","41.23"],"mini":["2.23","5.23","12.23","15.23"],"pip":["2.24","5.21","12.24","15.21","30.20","41.20"],"screenshot":["2.25","5.16","12.25","15.16","30.17","41.17"],"seek":["2.26","3.26","5.5","12.26","13.26","15.5"],"subtitleoffset":["2.27","12.27","30.24","41.24"],"subtitleupdate":["2.28","12.28"],"subtitleload":["2.29","12.29"],"subtitleswitch":["2.30","12.30"],"info":["2.31","3.21","12.31","13.21"],"layer":["2.32","12.32","18.0"],"control":["2.37","3.15","12.37","13.15"],"muted":["2.39","5.13","12.39","15.13","30.9","41.9"],"video":["2.40","2.41","2.42","2.43","2.44","2.45","2.46","2.47","2.48","2.49","2.50","2.51","2.52","2.53","2.54","2.55","2.56","2.57","2.58","2.59","2.60","5.39","12.40","12.41","12.42","12.43","12.44","12.45","12.46","12.47","12.48","12.49","12.50","12.51","12.52","12.53","12.54","12.55","12.56","12.57","12.58","12.59","12.60","15.39","24.0"],"全局属性":["3.0"],"debug":["3.1","13.1"],"scroll":["3.8","3.9","13.8","13.9"],"auto":["3.10","3.11","3.12","3.20","13.10","13.11","13.12","13.20"],"reconnect":["3.13","3.14","13.13","13.14"],"dbclick":["3.16","3.17","13.16","13.17"],"mobile":["3.18","3.19","13.18","13.19"],"fast":["3.22","3.23","13.22","13.23"],"touch":["3.24","13.24"],"volume":["3.25","5.8","13.25","15.8","30.7","41.7"],"playback":["3.27","13.27"],"aspect":["3.28","13.28"],"log":["3.31","13.31"],"use":["3.32","13.32"],"编写插件":["4.0"],"实例属性":["5.0"],"toggle":["5.3","15.3"],"forward":["5.6","15.6"],"backward":["5.7","15.7"],"url":["5.9","15.9","30.2","41.2"],"switch":["5.10","15.10"],"switchurl":["5.11","15.11"],"switchquality":["5.12","15.12"],"currenttime":["5.14","15.14"],"duration":["5.15","15.15"],"getdataurl":["5.17","15.17"],"getbloburl":["5.18","15.18"],"poster":["5.22","15.22","30.5","41.5"],"playing":["5.24","15.24"],"rect":["5.26","15.26"],"playbackrate":["5.28","15.28","30.15","41.15"],"attr":["5.31","15.31"],"type":["5.32","15.32","30.39","41.39"],"theme":["5.33","15.33","30.6","41.6"],"airplay":["5.34","15.34","30.47","41.47"],"loaded":["5.35","15.35"],"played":["5.36","15.36"],"proxy":["5.37","15.37"],"query":["5.38","15.38"],"cssvar":["5.40","15.40","30.48","41.48"],"quality":["5.41","15.41","30.32","41.32"],"右键菜单":["6.0"],"配置":["6.1","7.1","8.1"],"创建":["6.2","7.2","8.2","9.2","9.3","9.4","9.5"],"添加":["6.3","7.3","8.3","9.6"],"删除":["6.4","7.4","8.4","9.7"],"更新":["6.5","7.5","8.5","9.8"],"控制器":["7.0"],"业务层":["8.0"],"设置面板":["9.0"],"内置":["9.1"],"advanced":["10.0"],"static":["11.0"],"example":["12.0"],"global":["13.0"],"writing":["14.0"],"instance":["15.0"],"context":["16.0"],"configuration":["16.1","17.1","18.1"],"creation":["16.2","17.2","18.2"],"add":["16.3","18.3","19.6","29.3"],"delete":["16.4","17.4","18.4","19.7"],"updates":["16.5","19.8"],"controller":["17.0"],"adding":["17.3"],"update":["17.5","18.5"],"settings":["19.0","30.29","41.29"],"built":["19.1"],"create":["19.2","19.4","19.5"],"creating":["19.3"],"installation":["20.0","20.1","24.2","25.2","26.2","27.2","28.3"],"cdn":["20.2","24.3","25.3","26.3","27.3","28.4","31.2","35.3","36.3","37.3","38.3","39.4"],"usage":["20.3","24.4","28.5"],"vue":["20.4","20.7","31.4","31.7"],"react":["20.5","20.8","31.5","31.8"],"typescript":["20.6","31.6"],"javascript":["20.10","31.10"],"ancient":["20.11"],"dash":["21.0","26.0","32.0","37.0"],"flv":["22.0","33.0"],"hls":["23.0","27.0","34.0","38.0"],"demo":["24.1","25.1","26.1"],"danmuku":["25.0"],"using":["25.5","25.6","25.7"],"hide":["25.8","36.8"],"ishide":["25.9","36.9"],"emit":["25.10","36.10"],"load":["25.12","36.12"],"reset":["25.13","36.13"],"event":["25.15"],"demonstration":["27.1","28.2"],"iframe":["28.0","28.10","39.0","39.10"],"description":["28.1"],"index":["28.6","39.6"],"commit":["28.7","39.7"],"message":["28.8","39.8"],"inject":["28.11","39.11"],"postmessage":["28.12","39.12"],"例子":["28.13","39.13"],"language":["29.0"],"default":["29.1"],"importing":["29.2"],"modify":["29.4"],"basic":["30.0"],"container":["30.1","41.1"],"id":["30.3","41.3"],"onready":["30.4","41.4"],"islive":["30.8","41.8"],"autoplay":["30.10","41.10"],"automini":["30.12","41.12"],"loop":["30.13","41.13"],"mutex":["30.21","41.21"],"miniprogressbar":["30.25","41.25"],"usessr":["30.26","41.26"],"playsinline":["30.27","41.27"],"highlight":["30.33","41.33"],"thumbnails":["30.35","41.35"],"morevideoattr":["30.37","41.37"],"customtype":["30.40","41.40"],"lang":["30.41","41.41"],"fastforward":["30.44","41.44"],"autoplayback":["30.45","41.45"],"autoorientation":["30.46","41.46"],"安装使用":["31.0"],"安装":["31.1","35.2","36.2","37.2","38.2","39.3"],"使用":["31.3","35.4","39.5"],"古老的浏览器":["31.11"],"视频广告":["35.0"],"演示":["35.1","36.1","37.1","38.1","39.2"],"弹幕库":["36.0"],"选项":["36.4"],"使用弹幕数组":["36.5"],"使用弹幕":["36.6"],"使用异步调用":["36.7"],"事件":["36.15"],"说明":["39.1"],"语言设置":["40.0"],"默认语言":["40.1"],"导入语言":["40.2"],"新增语言":["40.3"],"修改语言":["40.4"],"基础选项":["41.0"]},{"0":["3.27","5.35","5.36","30.7","41.7"],"1":["25.4","31.11","36.4"],"2":["31.9"],"3":["3.28"],"4":["3.28","29.3","31.9","40.3"],"5":["3.27","8.2","18.2","25.4","36.4"],"7":["8.3","18.3","30.7"],"9":["40.3"],"10":["25.4","36.4"],"15":["4.0","14.0"],"21":["8.5","9.8","18.5","19.8"],"26":["7.5","17.5"],"27":["9.8","19.8"],"75":["3.27"],"250":["3.4"],"这里的":["0.0","1.0","3.0","5.0"],"播放器的选项":["0.1"],"div":["0.1","0.2","0.4","0.5","0.7","0.13","0.16","1.1","1.6","2.0","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.30","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.2","4.0","5.1","5.2","5.3","5.15","5.26","5.30","5.34","5.41","6.2","6.3","6.4","6.5","7.2","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.3","9.6","9.7","9.8","10.1","12.30","14.0","15.15","16.2","16.3","16.4","16.5","17.2","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.3","19.6","19.7","19.8","21.0","22.0","23.0","24.4","25.5","25.6","25.7","25.10","30.2","30.28","30.29","32.0","33.0","34.0","35.4","36.5","36.6","36.7","36.8","36.9","36.10","36.12","36.13","36.14","41.2","41.28","41.29","41.30","41.31"],"classname":["0.1","0.2","0.16","2.0","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.30","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","4.0","5.41","6.2","6.3","6.4","6.5","7.2","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.3","9.6","9.7","9.8","12.30","14.0","15.15","16.2","16.3","16.4","16.5","17.2","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.3","19.6","19.7","19.8","21.0","22.0","23.0","24.4","25.5","25.6","25.7","30.2","30.28","30.29","32.0","33.0","34.0","35.4","36.5","36.6","36.7","36.9","36.10","36.12","36.13","36.14","41.2","41.28","41.29"],"run":["0.1","0.2","2.0","2.2","2.6","2.11","2.12","2.17","2.18","2.20","2.21","2.22","2.23","2.24","2.25","2.27","2.28","2.29","2.30","2.38","4.0","5.41","6.2","6.3","6.4","6.5","7.2","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.3","9.6","9.7","9.8","14.0","16.2","16.3","16.4","16.5","17.2","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.3","19.6","19.7","19.8","21.0","22.0","23.0","24.4","25.5","25.6","25.7","30.2","30.28","32.0","33.0","34.0","35.4","36.5","36.6","36.7","36.9","36.10","36.12","36.13","36.14","41.2","41.28","41.29"],"管理播放器所有的":["0.2","0.3","0.5"],"dom":["0.2","0.3","5.37","5.38","9.2","9.4","9.5","10.2","10.3","15.37","15.38","19.2","19.4","19.5","30.1","41.1"],"元素":["0.2","9.4","9.5"],"事件":["0.3","4.0"],"实质上是代理了":["0.3"],"addeventlistener":["0.3","5.37","10.3","15.37"],"和":["0.3","4.0","5.12","36.8","41.4"],"removeeventlistener":["0.3","10.3"],"当使用以下方法来处理事件":["0.3"],"播放器销毁时也会自动销毁该事件":["0.3"],"proxy":["0.3","10.3"],"方法用于代理":["0.3"],"管理播放器的本地存储":["0.4"],"name":["0.4","4.0","10.4","17.1"],"属性用于设置缓存的":["0.4"],"key":["0.4","10.4"],"set":["0.4","10.4","13.5","13.6","15.10","15.11","15.12","15.13","15.14","15.19","15.20","15.21","15.22","15.27","15.28","15.29","30.35","30.36"],"方法用于设置缓存":["0.4"],"get":["0.4","0.6","10.6","15.14","15.15","15.19","15.21","15.22","15.24","15.31","25.14"],"方法用于获取缓存":["0.4"],"del":["0.4"],"方法用于删除缓存":["0.4"],"clear":["0.4","25.13"],"方法用于清空缓存":["0.4"],"svg":["0.5","10.5"],"图标":["0.5"],"管理播放器的":["0.6"],"方法用于获取":["0.6"],"的值":["0.6"],"update":["0.6","0.8","0.9","0.10","0.15"],"管理播放器的提示语":["0.7"],"只有一个":["0.7"],"show":["0.7","0.12","0.14","10.12","10.14","25.8","30.17","30.20","30.32","30.33","36.8"],"属性用于显示提示语":["0.7"],"管理播放器的层":["0.8"],"add":["0.8","0.9","0.10","0.13","0.15","0.16","10.8","10.9","10.10","10.13","10.15"],"方法用于动态添加层":["0.8"],"remove":["0.8","0.9","0.10","0.13","0.15"],"方法用于动态删除层":["0.8"],"管理播放器的控制器":["0.9"],"方法用于动态添加控制器":["0.9"],"方法用于动态删除控制器":["0.9"],"管理播放器的右键菜单":["0.10"],"方法用于动态添加菜单":["0.10"],"方法用于动态删除菜单":["0.10"],"方法用于动态更新菜单":["0.10"],"管理播放器的字幕功能":["0.11"],"url":["0.11","5.11","10.11","25.15","36.15"],"属性设置和返回当前字幕地址":["0.11"],"style":["0.11"],"方法设置当前字幕的样式":["0.11"],"管理播放器的加载层":["0.12"],"属性用于设置是否显示加载层":["0.12"],"toggle":["0.12","0.14","19.4"],"管理播放器的快捷键功能":["0.13"],"方法用于添加快捷键":["0.13"],"方法用于删除快捷键":["0.13"],"管理播放器的遮罩层":["0.14"],"属性用于设置是否显示遮罩层":["0.14"],"管理播放器的设置面板":["0.15"],"方法用于动态添加设置项":["0.15"],"方法用于动态删除设置项":["0.15"],"方法用于动态更新设置项":["0.15"],"管理播放器的插件功能":["0.16"],"只有一个方法":["0.16"],"用于动态添加插件":["0.16"],"返回全部播放器实例的数组":["1.1"],"假如你想同时管理多个播放器的时候":["1.1"],"可以用到该属性":["1.1"],"返回播放器的版本信息":["1.2"],"返回播放器的环境变量":["1.3"],"返回播放器的打包时间":["1.4"],"返回视频的默认配置":["1.5"],"返回播放器的工具函数集合":["1.6"],"返回播放器选项的校验方案":["1.7"],"返回事件分发器的构造函数":["1.8"],"返回选项的校验函数":["1.9"],"返回类型检测的函数工具":["1.10"],"返回播放器所需的":["1.11"],"返回播放器的默认选项":["1.12"],"播放器的事件分为两种":["2.0"],"一种视频的":["2.0"],"原生事件":["2.0"],"前缀":["2.0"],"video":["2.0","12.0","13.28","13.29","15.1","15.2","15.7","15.10","15.11","15.12","15.15","23.0","26.0","30.2","30.36","30.39","30.40","34.0"],"另外一种是":["2.0"],"自定义事件":["2.0"],"监听事件":["2.0"],"code":["2.0","2.2","2.27","2.30","4.0","6.2","6.3","6.4","6.5","7.2","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.3","9.6","9.7","9.8","14.0","16.2","16.3","16.4","16.5","17.2","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.3","19.6","19.7","19.8","20.1","20.2","20.3","20.4","20.5","21.0","22.0","23.0","24.2","24.3","24.4","25.2","25.3","25.5","25.6","25.7","26.2","26.3","27.2","27.3","28.3","28.4","28.5","30.2","30.28","31.1","31.2","31.3","31.4","31.5","32.0","33.0","34.0","35.2","35.3","35.4","36.2","36.3","36.5","36.6","36.7","36.9","36.10","36.12","36.13","36.14","37.2","37.3","38.2","38.3","39.3","39.4","39.5","41.2","41.28"],"js":["2.0","4.0","6.5","7.2","7.3","7.5","8.2","8.3","8.5","9.3","9.7","9.8","14.0","16.5","17.2","17.3","17.5","18.2","18.3","18.5","19.3","19.7","19.8","20.3","20.4","20.5","20.7","20.8","20.10","20.11","21.0","22.0","23.0","24.4","25.4","25.15","29.2","29.3","29.4","31.3","31.4","31.5","31.7","31.8","31.10","31.11","32.0","33.0","34.0","35.4","36.4","36.15","40.2","40.3","40.4"],"当播放器首次可以播放器时触发":["2.1"],"当播放器切换地址后并可以播放时触发":["2.2"],"当播放器暂停时触发":["2.3"],"当播放器播放时触发":["2.4"],"当播放器热键被按下时触发":["2.5"],"当播放器销毁时触发":["2.6"],"当播放器获得焦点时触发":["2.7"],"当播放器失去焦点时触发":["2.8"],"当播放器被双击时触发":["2.9"],"当播放器被单击时触发":["2.10"],"当播放器加载视频发生错误时触发":["2.11"],"当播放器被鼠标移出或者移入时触发":["2.12"],"当播放器被鼠标经过时触发":["2.13"],"当播放器尺寸变化时触发":["2.14"],"当播放器出现在视口时触发":["2.15"],"在移动端":["2.16","3.18","3.19","3.20","3.22","3.23","3.24"],"当锁定的状态发生变化时触发":["2.16"],"当播放器长宽比变化时触发":["2.17"],"当播放器自动设置高度时触发":["2.18"],"当播放器自动设置尺寸时触发":["2.19"],"当播放器发生翻转时触发":["2.20"],"当播放器发生窗口全屏时触发":["2.21"],"当播放器发生网页全屏时触发":["2.22"],"当播放器进入迷你模式时触发":["2.23"],"当播放器进入画中画时触发":["2.24"],"当播放器被截图时触发":["2.25"],"当播放器发生时间跳转时触发":["2.26"],"当播放器发生字幕偏移时触发":["2.27"],"当字幕更新时触发":["2.28"],"当字幕加载时触发":["2.29"],"当字幕切换时触发":["2.30"],"当信息面板显示或隐藏时触发":["2.31"],"当自定义层显示或隐藏时触发":["2.32"],"当加载器显示或隐藏时触发":["2.33"],"当遮罩层显示或隐藏时触发":["2.34"],"当字幕层显示或隐藏时触发":["2.35"],"当右键菜单显示或隐藏时触发":["2.36"],"当控制器显示或隐藏时触发":["2.37"],"当设置面板显示或隐藏时触发":["2.38"],"当静音的状态变化时触发":["2.39"],"canplay":["2.40","12.40"],"canplaythrough":["2.41","12.41"],"complete":["2.42","12.42"],"durationchange":["2.43","12.43"],"emptied":["2.44","12.44"],"ended":["2.45","12.45"],"error":["2.46","12.46"],"loadeddata":["2.47","12.47"],"loadedmetadata":["2.48","12.48"],"pause":["2.49","12.49","13.19"],"play":["2.50","3.18","3.19","12.50","13.18","13.19","15.3","30.10"],"playing":["2.51","12.51"],"progress":["2.52","12.52","30.35"],"ratechange":["2.53","12.53"],"seeked":["2.54","12.54"],"seeking":["2.55","12.55"],"stalled":["2.56","12.56"],"suspend":["2.57","12.57"],"timeupdate":["2.58","12.58"],"volumechange":["2.59","12.59"],"waiting":["2.60","12.60"],"是否开始":["3.1"],"模式":["3.1"],"是否开启右键菜单":["3.2"],"默认开启":["3.2"],"time":["3.3","3.7","3.8","3.13","3.14","3.15","3.16","3.20","3.21","3.23","13.3","13.7","13.8","13.13","13.14","13.15","13.16","13.20","13.21","13.23","25.10","25.11","30.24"],"提示信息的显示时长":["3.3"],"单位为毫秒":["3.3","3.7","3.8","3.12","3.15","3.16","3.21"],"width":["3.4","3.5","9.2","13.4","13.5","15.30"],"设置面板的默认宽度":["3.4"],"单位为像素":["3.4","3.5","3.6","3.9"],"默认为":["3.4","3.5","3.6","3.10","3.16","3.25","3.27","3.28","3.29","3.31","3.32"],"item":["3.5","3.6","13.5","13.6"],"设置面板的设置项的默认宽度":["3.5"],"height":["3.6","13.6"],"设置面板的设置项的默认高度":["3.6"],"事件的节流时间":["3.7","3.8"],"gap":["3.9","13.9"],"view":["3.9","24.1","25.1","26.1","27.1","28.2"],"事件的边界容差距离":["3.9"],"playback":["3.10","3.11","3.12","12.51","13.10","13.11","13.12","30.45"],"max":["3.10","3.13","13.10","13.13"],"自动回放功能的最大记录数":["3.10"],"min":["3.11","13.11"],"自动回放功能的最小记录时长":["3.11"],"单位为秒":["3.11","3.26"],"timeout":["3.12","13.12"],"自动回放功能的隐藏延迟时长":["3.12"],"发生连接错误时":["3.13","3.14"],"自动连接的最大次数":["3.13"],"sleep":["3.14","13.14"],"自动连接的延迟时间":["3.14"],"hide":["3.15","13.15"],"底部控制栏的自动隐藏的延迟时间":["3.15"],"双击事件的延迟事件":["3.16"],"fullscreen":["3.17","13.17"],"在桌面端":["3.17"],"是否双击切换全屏":["3.17"],"dbclick":["3.18","13.18"],"是否双击切换播放暂停":["3.18"],"click":["3.19","10.10","13.16","13.19"],"是否单击切换播放暂停":["3.19"],"orientation":["3.20","13.20"],"自动旋屏的延迟时间":["3.20"],"loop":["3.21","13.21"],"信息面板的刷新时间":["3.21"],"forward":["3.22","3.23","13.22","13.23"],"value":["3.22","13.22"],"长按加速的速率倍数":["3.22"],"长按加速的延迟时间":["3.23"],"move":["3.24","13.24"],"ratio":["3.24","3.28","12.17","13.24","13.25","13.28"],"左右滑动进度的速率倍数":["3.24"],"step":["3.25","3.26","13.25","13.26"],"快捷键调节音量的幅度比例":["3.25"],"快捷键调节播放进度的幅度":["3.26"],"rate":["3.27","13.27"],"内置播放速率的列表":["3.27"],"内置视频长宽比的列表":["3.28"],"default":["3.28","13.4","13.5","13.6","30.1","30.2","30.3","30.4","30.5","30.6","30.7","30.8","30.9","30.10","30.11","30.12","30.13","30.14","30.15","30.16","30.17","30.18","30.19","30.20","30.21","30.22","30.23","30.24","30.25","30.26","30.27","30.28","30.29","30.30","30.31","30.32","30.33","30.34","30.35","30.36","30.37","30.38","30.39","30.40","30.41","30.42","30.43","30.44","30.45","30.46","30.47","30.48","41.1","41.2","41.3","41.4","41.5","41.6","41.7","41.8","41.9","41.10","41.11","41.12","41.13","41.14","41.15","41.16","41.17","41.18","41.19","41.20","41.21","41.22","41.23","41.24","41.25","41.26","41.27","41.28","41.29","41.30","41.31","41.32","41.33","41.34","41.35","41.36","41.37","41.38","41.39","41.40","41.41","41.42","41.43","41.44","41.45","41.46","41.47","41.48"],"内置视频翻转的列表":["3.29"],"normal":["3.29"],"horizontal":["3.29"],"vertical":["3.29"],"web":["3.30","13.30"],"in":["3.30","10.3","13.23","13.27","13.28","13.29","13.30","19.1","25.11","29.2","30.39"],"body":["3.30","13.30"],"网页全屏时":["3.30"],"version":["3.31","13.31"],"设置是否打印播放器版本":["3.31"],"raf":["3.32","13.32"],"设置是否使用":["3.32"],"requestanimationframe":["3.32"],"但你已经知道播放器的":["4.0"],"属性":["4.0","6.1","7.1","8.1","9.2","9.4","9.5","41.32","41.33","41.35","41.36"],"方法":["4.0"],"后":["4.0"],"再编写插件是非常简单的事":["4.0"],"可以在实例化的时候加载插件的函数":["4.0"],"function":["4.0","5.1","5.2","5.3","5.4","5.11","5.12","5.16","5.17","5.18","5.25","5.30","5.31","5.34","5.37","5.38","5.40","9.2","14.0","15.1","15.2","15.3","15.4","15.11","15.12","15.16","15.17","15.18","15.25","15.30","15.31","15.34","15.37","15.38","15.40","19.2","28.7","30.4","41.4"],"myplugin":["4.0"],"art":["4.0","5.11","7.2","15.11","17.2","24.4","25.15","36.15"],"console":["4.0"],"info":["4.0"],"return":["4.0"],"something":["4.0"],"type":["5.1","5.2","5.3","5.4","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.14","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.23","5.24","5.25","5.26","5.27","5.28","5.29","5.30","5.31","5.33","5.34","5.35","5.36","5.37","5.38","5.39","5.40","5.41","15.1","15.2","15.3","15.4","15.5","15.6","15.7","15.8","15.9","15.10","15.11","15.12","15.13","15.14","15.15","15.16","15.17","15.18","15.19","15.20","15.21","15.22","15.23","15.24","15.25","15.26","15.27","15.28","15.29","15.30","15.31","15.33","15.34","15.35","15.36","15.37","15.38","15.39","15.40","15.41","16.1","17.1","18.1","19.2","19.4","19.5","20.10","30.1","30.2","30.3","30.4","30.5","30.6","30.7","30.8","30.9","30.10","30.11","30.12","30.13","30.14","30.15","30.16","30.17","30.18","30.19","30.20","30.21","30.22","30.23","30.24","30.25","30.26","30.27","30.28","30.29","30.30","30.31","30.32","30.33","30.34","30.35","30.36","30.37","30.38","30.40","30.41","30.42","30.43","30.44","30.45","30.46","30.47","30.48","41.1","41.2","41.3","41.4","41.5","41.6","41.7","41.8","41.9","41.10","41.11","41.12","41.13","41.14","41.15","41.16","41.17","41.18","41.19","41.20","41.21","41.22","41.23","41.24","41.25","41.26","41.27","41.28","41.29","41.30","41.31","41.32","41.33","41.34","41.35","41.36","41.37","41.38","41.40","41.41","41.42","41.43","41.44","41.45","41.46","41.47","41.48"],"播放视频":["5.1"],"暂停视频":["5.2"],"切换视频的播放和暂停":["5.3"],"parameter":["5.4","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.14","5.19","5.20","5.21","5.22","5.23","5.24","5.27","5.28","5.29","5.31","5.32","5.33","5.41","15.4","15.5","15.6","15.7","15.8","15.9","15.10","15.11","15.12","15.13","15.14","15.19","15.20","15.21","15.22","15.23","15.24","15.27","15.28","15.29","15.31","15.32","15.33","15.41"],"boolean":["5.4","5.13","5.19","5.20","5.21","5.24","7.1","15.4","15.13","15.19","15.20","15.21","15.23","15.24","16.1","17.1","18.1","30.8","30.9","30.10","30.11","30.12","30.13","30.14","30.15","30.16","30.17","30.18","30.19","30.20","30.21","30.22","30.23","30.24","30.25","30.26","30.27","30.43","30.44","30.45","30.46","30.47","41.8","41.9","41.10","41.11","41.12","41.13","41.14","41.15","41.16","41.17","41.18","41.19","41.20","41.21","41.22","41.23","41.24","41.25","41.26","41.27","41.43","41.44","41.45","41.46","41.47"],"setter":["5.5","5.6","5.7","5.8","5.9","5.10","5.13","5.14","5.19","5.20","5.21","5.22","5.23","5.27","5.28","5.29","5.32","5.33","5.41","15.5","15.6","15.7","15.8","15.9","15.10","15.13","15.14","15.19","15.20","15.21","15.22","15.23","15.27","15.28","15.29","15.32","15.33","15.41"],"number":["5.5","5.6","5.7","5.8","5.14","5.28","13.10","13.13","15.5","15.6","15.7","15.8","15.14","15.28","29.0","30.7","41.7"],"getter":["5.8","5.9","5.13","5.14","5.15","5.19","5.20","5.21","5.22","5.23","5.24","5.26","5.27","5.28","5.29","5.32","5.33","5.35","5.36","15.8","15.9","15.13","15.14","15.15","15.19","15.20","15.21","15.22","15.23","15.24","15.26","15.27","15.28","15.29","15.32","15.33","15.35","15.36"],"string":["5.10","5.11","5.12","5.22","5.27","5.29","5.31","5.32","5.33","9.2","9.4","9.5","15.9","15.10","15.11","15.12","15.22","15.27","15.29","15.31","15.32","15.33","17.1","19.2","19.4","19.5","30.1","30.2","30.3","30.5","30.6","30.39","30.41","41.1","41.2","41.3","41.5","41.6","41.39","41.41"],"设置视频地址":["5.10","5.11"],"设置时和":["5.10","5.11"],"设置视频画质地址":["5.12"],"获取视频时长":["5.15"],"下载当前视频帧的截图":["5.16"],"获取当前视频帧的截图的":["5.17","5.18"],"base64":["5.17","15.17"],"地址":["5.17","5.18","25.4","36.4"],"blob":["5.18","15.18"],"设置和获取视频海报":["5.22"],"设置视频是否自适应尺寸":["5.25"],"获取播放器的尺寸和坐标信息":["5.26"],"当容器只有宽度":["5.30"],"该属性可以自动计算出并设置视频的高度":["5.30"],"动态获取和设置":["5.31"],"开启隔空播放":["5.34"],"视频缓存的比例":["5.35"],"范围是":["5.35","5.36"],"视频播放的比例":["5.36"],"事件的代理函数":["5.37"],"实质上代理了":["5.37"],"的查询函数":["5.38"],"element":["5.39","9.2","9.4","9.5","15.39","19.2","19.4","19.5","30.1","41.1"],"快捷返回播放器的":["5.39"],"动态获取或设置":["5.40"],"css":["5.40"],"变量":["5.40","31.10"],"array":["5.41","9.2","11.1","15.41","19.2","25.5","30.28","30.29","30.30","30.31","30.32","30.33","30.34","41.28","41.29","41.30","41.31","41.32","41.33","41.34"],"动态设置画质列表":["5.41"],"类型":["6.1","7.1","8.1","9.2","9.4","9.5","41.33","41.35","41.36"],"描述":["6.1","7.1","8.1","9.2","9.4","9.5"],"disable":["6.1","7.1","8.1","16.1","17.1","18.1"],"var":["7.2","9.3","17.2","24.4","25.15","36.15"],"new":["7.2","17.2","24.4","25.15","36.15"],"artplayer":["7.2","17.2","20.3","20.4","20.5","20.11","24.4","25.5","25.15","29.2","30.1","31.3","31.5","31.11","35.4","36.5","36.15","40.2","40.4","41.1"],"container":["7.2","15.30","17.2","24.4","25.15","36.15"],"须先打开设置面板":["9.1"],"然后自带四个内置项":["9.1"],"flip":["9.1"],"playbackrate":["9.1"],"选择列表":["9.2"],"html":["9.2","9.4","9.5","19.2","19.4","19.5","28.5","28.6","28.7","28.10","28.13","39.5","39.6","39.7","39.10","39.13","41.38"],"元素的":["9.2","9.4","9.5"],"icon":["9.2","9.4","9.5","19.2","19.5"],"元素的图标":["9.2","19.2"],"selector":["9.2","19.2"],"元素列表":["9.2","19.2"],"onselect":["9.2","19.2"],"元素点击事件":["9.2"],"列表嵌套":["9.3"],"切换按钮":["9.4"],"范围滑块":["9.5"],"properties":["10.0","11.0","14.0","15.0"],"the":["10.0","10.1","10.2","10.3","10.4","10.5","10.6","10.7","10.8","10.9","10.10","10.11","10.12","10.13","10.14","10.15","10.16","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","12.0","12.1","12.2","12.3","12.4","12.6","12.7","12.8","12.9","12.10","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.31","12.35","12.36","12.37","12.38","12.39","12.40","12.41","12.44","12.56","13.2","13.3","13.4","13.5","13.6","13.7","13.8","13.9","13.10","13.11","13.12","13.13","13.14","13.22","13.23","13.24","13.25","13.26","13.27","14.0","15.3","15.4","15.10","15.11","15.15","15.17","15.18","15.19","15.26","15.30","15.35","15.36","15.41","17.1","19.1","19.5","20.9","20.10","20.11","25.8","25.9","25.10","25.11","25.12","25.13","25.14","29.0","29.1","30.1","30.2","30.3","30.4","30.5","30.7","30.11","30.17","30.32","30.33","30.35","30.36","30.39","30.40","30.45"],"options":["10.1","30.0"],"for":["10.1","10.3","10.8","13.7","13.8","15.37"],"player":["10.1","10.2","10.3","10.4","10.6","10.7","10.8","10.9","10.10","10.11","10.12","10.13","10.14","10.15","10.16","11.1","12.0","12.1","12.2","12.3","12.4","12.6","12.7","12.8","12.9","12.10","12.12","12.14","12.15","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","14.0"],"manages":["10.2","10.3","10.4"],"all":["10.2","10.3","10.5","11.1"],"of":["10.2","10.4","10.8","10.10","10.11","10.12","10.13","11.1","11.6","13.4","13.27","13.28","13.29","15.35","15.36","15.41","20.11","29.0","30.5","30.11","30.39"],"elements":["10.2"],"which":["10.3","13.26","15.37","30.4","30.39","30.42"],"is":["10.3","10.4","10.6","10.8","10.9","10.10","10.13","10.15","12.0","12.1","12.12","14.0","20.11","25.9","30.39"],"essentially":["10.3","15.37"],"a":["10.3","10.15","11.6","12.5","12.32","12.33","12.34","15.16","15.37","15.39","25.10","30.4"],"and":["10.3","14.0","15.14","15.19","15.21","15.22","15.26","20.0"],"when":["10.3","12.1","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.30","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.30","14.0","15.30"],"using":["10.3"],"following":["10.3"],"local":["10.4"],"attribute":["10.4","15.30","19.5"],"used":["10.4","10.6","10.8","10.9","10.10","10.15","25.12","25.13","25.14","30.38","30.39","30.48"],"to":["10.4","10.6","10.9","10.15","13.1","13.2","13.19","13.23","13.31","13.32","15.11","15.38","16.1","17.1","18.1","25.12","25.13","25.14","28.7","30.10","30.15","30.17","30.19","30.26","30.32","30.38","30.39","30.45","30.46","30.48"],"cache":["10.4"],"method":["10.4","10.6","10.8","10.9","10.10","10.13","10.15","25.10","25.11","25.12"],"manage":["10.5","10.6","10.7","10.8","10.9","10.10","10.11","10.12","10.13","10.14","10.15","10.16"],"s":["10.6","10.7","10.9","10.14","10.15","10.16","12.0","14.0","19.2","19.4","19.5","30.40"],"notices":["10.7"],"there":["10.7"],"dynamically":["10.8","10.9","10.15","15.31","15.32","15.33","15.40","15.41"],"controllers":["10.9"],"right":["10.10","12.36"],"context":["10.10","30.30"],"menu":["10.10","16.0","30.30"],"features":["10.11","10.16"],"layer":["10.12","10.14"],"functionality":["10.13"],"property":["10.14","16.1","17.1","18.1","19.2","19.4"],"settings":["10.15","12.38","19.1","29.0"],"panel":["10.15","12.38","13.21","19.0","19.1","30.29"],"plugin":["10.16","14.0","24.4","25.5","28.1","35.4","36.5"],"with":["10.16","20.11","25.8","25.9","25.11","28.1"],"here":["11.0","13.0","15.0"],"returns":["11.1","11.2","11.3","11.4","11.5","11.6","11.7","11.8","11.9","11.10","11.11","11.12"],"an":["11.1","12.11","12.46"],"collection":["11.6"],"utility":["11.6"],"events":["12.0","14.0","15.37"],"are":["12.0","29.2"],"divided":["12.0"],"into":["12.0"],"two":["12.0"],"types":["12.0"],"one":["12.0"],"native":["12.0"],"prefix":["12.0"],"other":["12.0"],"custom":["12.0","12.32","30.28","30.29","30.30","30.31","30.34","30.42"],"triggered":["12.1","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.30","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39"],"switches":["12.2"],"occurs":["12.11","12.27"],"mouse":["12.13"],"on":["12.16","13.17","13.18","13.19","13.20","13.22","13.24","30.33","30.35"],"mobile":["12.16","13.20","13.22","13.24"],"aspect":["12.17"],"automatically":["12.18","30.10","30.12"],"goes":["12.21"],"enters":["12.23","12.24"],"subtitle":["12.27","12.28","12.29","30.24"],"offset":["12.27"],"updates":["12.28"],"loads":["12.29"],"subtitles":["12.30","30.36"],"switch":["12.30"],"information":["12.31","30.33"],"loader":["12.33"],"controller":["12.37"],"browser":["12.40"],"media":["12.44"],"content":["12.44"],"attributes":["13.0","25.11"],"whether":["13.1","13.2","13.17","13.18","13.19","13.31","13.32","15.25","16.1","17.1","18.1","25.9","30.10","30.14","30.15","30.17","30.19","30.26","30.32","30.43","30.44","30.45","30.46","30.47"],"start":["13.1"],"mode":["13.1","36.11"],"enable":["13.2"],"display":["13.3","30.18","30.22","30.23"],"duration":["13.3","13.11","13.12"],"throttle":["13.7","13.8"],"boundary":["13.9"],"tolerance":["13.9"],"distance":["13.9"],"maximum":["13.10","13.13"],"minimum":["13.11"],"delay":["13.12","13.14","13.15","13.16"],"auto":["13.15"],"double":["13.16"],"event":["13.16"],"desktop":["13.17"],"devices":["13.20"],"refresh":["13.21"],"milliseconds":["13.23"],"increment":["13.26"],"by":["13.26"],"list":["13.27","13.28","13.29","15.41","19.2"],"built":["13.27","13.28","13.29"],"flips":["13.29"],"setting":["13.31","13.32","15.11","15.40","15.41"],"plugins":["14.0"],"once":["14.0"],"you":["14.0","20.9","28.1","29.2"],"know":["14.0"],"methods":["14.0"],"very":["14.0"],"simple":["14.0"],"can":["14.0","15.30","20.9","25.12","28.1"],"load":["14.0"],"functions":["14.0"],"instantiated":["14.0"],"jump":["15.5"],"sets":["15.8","15.25"],"address":["15.11","15.17","15.18","30.2"],"similar":["15.11","15.38"],"quality":["15.12","27.0"],"download":["15.16"],"gets":["15.17","15.18","15.26"],"size":["15.26","30.11"],"has":["15.30"],"only":["15.30","20.11"],"this":["15.30","28.1","28.7"],"activate":["15.34"],"proportion":["15.35","15.36"],"proxies":["15.37"],"shortcut":["15.39"],"getting":["15.40"],"or":["15.40","25.8","25.9"],"description":["16.1","17.1","18.1","19.2","19.4","19.5"],"component":["17.1"],"first":["19.1"],"open":["19.1"],"selection":["19.2","30.32"],"nested":["19.3"],"lists":["19.3"],"button":["19.4"],"range":["19.5"],"slider":["19.5"],"group":["20.1","20.2","20.3","20.4","20.5","24.2","24.3","25.2","25.3","26.2","26.3","27.2","27.3","28.3","28.4","28.5","31.1","31.2","31.3","31.4","31.5","35.2","35.3","36.2","36.3","37.2","37.3","38.2","38.3","39.3","39.4","39.5"],"bash":["20.2","24.2","24.3","25.2","25.3","26.2","26.3","27.2","27.3","28.3","28.4","31.2","35.2","35.3","36.2","36.3","37.2","37.3","38.2","38.3","39.3","39.4"],"index":["20.3","24.4","28.5","28.7","28.13","31.3","35.4","39.5","39.7","39.12","39.13"],"import":["20.3","20.5","20.9","29.4","31.3","31.5","31.9","40.4"],"from":["20.3","20.5","28.7","29.4","31.5","40.4"],"const":["20.3"],"jsx":["20.5","20.8","31.5","31.8"],"useeffect":["20.5","31.5"],"useref":["20.5","31.5"],"importing":["20.6"],"also":["20.9"],"separately":["20.9"],"sometimes":["20.10"],"your":["20.10"],"file":["20.10"],"may":["20.10"],"lose":["20.10"],"typescript":["20.10","31.10"],"hints":["20.10"],"browsers":["20.11"],"production":["20.11"],"build":["20.11"],"compatible":["20.11"],"https":["21.0","22.0","23.0","32.0","33.0","34.0"],"github":["21.0","22.0","23.0","32.0","33.0","34.0"],"com":["21.0","22.0","23.0","32.0","33.0","34.0"],"industry":["21.0","32.0"],"forum":["21.0","32.0"],"bilibili":["22.0","33.0"],"data":["22.0","23.0","24.4","25.5","25.7","33.0","34.0","35.4","36.5","36.7","36.9","36.10","36.14"],"dev":["23.0","34.0"],"libs":["23.0","24.4","25.5","34.0","35.4","36.5","36.7","36.10"],"ads":["24.0","24.4","35.4"],"jsdelivr":["24.3","25.3","26.3","27.3","28.4","35.3","36.3","37.3","38.3","39.4"],"uncompiled":["24.4","25.5","35.4","36.5"],"app":["24.4","25.15","36.15"],"danmuku":["25.4","25.5","25.6","36.4","36.11"],"弹幕库":["25.4","36.4"],"支持数组":["25.4","36.4"],"xml":["25.4","25.6","36.4","36.6"],"promise返回数组":["25.4","36.4"],"speed":["25.4","36.4","36.11"],"弹幕持续时间":["25.4","36.4"],"单位秒":["25.4","36.4"],"范围在":["25.4","36.4"],"opacity":["25.4","36.4","36.11"],"asynchronous":["25.7"],"call":["25.7"],"bullet":["25.8"],"comments":["25.8"],"judge":["25.9"],"current":["25.9","25.13","25.14"],"barrage":["25.9","25.11","25.14"],"hidden":["25.9"],"displayed":["25.9","25.13"],"send":["25.10"],"real":["25.10","25.11"],"danmaku":["25.10"],"message":["25.10"],"through":["25.10"],"change":["25.11"],"configuration":["25.11","30.42"],"supported":["25.11"],"be":["25.12","30.42"],"reload":["25.12"],"danmu":["25.12"],"assets":["25.15","36.15"],"sample":["25.15","36.15"],"control":["28.0","30.31"],"doctype":["28.5","39.5"],"push":["28.7","28.12"],"messages":["28.7","28.8","28.12"],"iframe":["28.7","28.13","39.7","39.13"],"receive":["28.8"],"after":["28.9"],"最常遇到的问题是":["28.13","39.13"],"播放器在":["28.13","39.13"],"里进行网页全屏":["28.13","39.13"],"但在":["28.13","39.13"],"danger":["29.0","40.0"],"given":["29.0"],"increasing":["29.0"],"bundled":["29.0"],"languages":["29.1","29.2"],"language":["29.2","29.3","29.4","30.41","41.41"],"files":["29.2"],"before":["29.2"],"packaging":["29.2"],"located":["29.2"],"src":["29.2","40.2"],"i18n":["29.2","40.2"],"zhtw":["29.4","40.4"],"where":["30.1"],"source":["30.2"],"unique":["30.3"],"undefined":["30.4","41.4"],"constructor":["30.4"],"accepts":["30.4"],"as":["30.4"],"second":["30.4"],"argument":["30.4"],"f00":["30.6","41.6"],"false":["30.8","30.9","30.10","30.11","30.12","30.13","30.14","30.15","30.16","30.17","30.18","30.20","30.22","30.23","30.24","30.25","30.26","30.37","30.43","30.44","30.45","30.46","30.47","41.10","41.11","41.12","41.14","41.15","41.16","41.17","41.24","41.26","41.43","41.45","41.47"],"use":["30.8","30.19","30.26","30.45"],"displays":["30.16"],"true":["30.19","30.21","30.27","41.19"],"hotkeys":["30.19"],"if":["30.21"],"mini":["30.25"],"ssr":["30.26","41.26"],"server":["30.26"],"initializes":["30.28","30.29","30.31"],"initialize":["30.30","30.34"],"bottom":["30.31"],"object":["30.35","30.36","30.37","30.38","30.40","30.42","30.48","41.35","41.36","41.37","41.38","41.40","41.42","41.48"],"bar":["30.35"],"supporting":["30.36"],"formats":["30.36"],"vtt":["30.36","41.36"],"srt":["30.36","41.36"],"controls":["30.37","41.37"],"preload":["30.37"],"replace":["30.38"],"specify":["30.39"],"format":["30.39"],"conjunction":["30.39"],"matches":["30.40"],"navigator":["30.41","41.41"],"will":["30.42"],"deeply":["30.42"],"merged":["30.42"],"automatic":["30.45"],"导入":["31.6"],"你也可以单独导入选项的类型":["31.9"],"ts":["31.9"],"有时你的":["31.10"],"文件会丢失":["31.10"],"的类型提示":["31.10"],"这时候你可以手动导入类型":["31.10"],"生产构建的":["31.11"],"只兼容最新一个主版本的":["31.11"],"chrome":["31.11"],"last":["31.11"],"查看完整演示":["35.1","36.1","37.1","38.1","39.2"],"通过方法":["36.8","36.10","36.11"],"进行隐藏或者显示弹幕":["36.8"],"通过属性":["36.9"],"判断当前弹幕是隐藏或者显示":["36.9"],"发送一条实时弹幕":["36.10"],"实时改变弹幕配置":["36.11"],"支持属性有":["36.11"],"fontsize":["36.11"],"color":["36.11"],"margin":["36.11"],"通过":["36.12"],"方法可以重载弹幕源":["36.12"],"或者切换新弹幕":["36.12"],"用于清空当前显示的弹幕":["36.13"],"用于获取当前弹幕配置":["36.14"],"画质":["37.0","38.0"],"控制":["39.0"],"通过该插件":["39.1"],"你可以轻松在":["39.1"],"从":["39.7","40.0"],"将消息推送到":["39.7","39.12"],"该函数将在":["39.7"],"在":["39.8"],"销毁后":["39.9"],"注入脚本":["39.11"],"鉴于捆绑的多国语言越来越多":["40.0"],"默认语言有":["40.1"],"en":["40.1"],"zh":["40.1"],"打包前的语言文件存放于":["40.2"],"欢迎来添加你的语言":["40.2"],"打包后的语言文件存放于":["40.2"],"dist":["40.2"],"播放器挂载的":["41.1"],"视频源地址":["41.2"],"播放器的唯一标识":["41.3"],"构造函数接受一个函数作为第二个参数":["41.4"],"播放器初始化成功且视频可以播放时触发":["41.4"],"ready":["41.4"],"视频的海报":["41.5"],"是否自动播放":["41.10"],"是否使用快捷键":["41.19"],"字幕时间偏移":["41.24"],"是否使用":["41.26"],"初始化自定义的":["41.28","41.29","41.30","41.34"],"层":["41.28"],"设置面板":["41.29"],"右键菜单":["41.30"],"初始化自定义的底部":["41.31"],"控制栏":["41.31"],"是否在底部控制栏里显示":["41.32"],"画质选择":["41.32"],"列表":["41.32"],"在进度条上显示":["41.33"],"高亮信息":["41.33"],"插件":["41.34"],"在进度条上设置":["41.35"],"预览图":["41.35"],"设置视频的字幕":["41.36"],"支持字幕格式":["41.36"],"ass":["41.36"],"用于替换默认图标":["41.38"],"支持":["41.38"],"用于指明视频的格式":["41.39"],"需要配合":["41.39"],"customtype":["41.39"],"通过视频的":["41.40"],"自定义":["41.42"],"配置":["41.42"],"该配置会和自带的":["41.42"],"进行深度合并":["41.42"],"新增你的语言":["41.42"],"是否使用自动":["41.45"],"回放功能":["41.45"],"用于改变内置的css变量":["41.48"]},{"0":["3.24","3.25","5.8","13.27","23.0","25.4","29.0","34.0","36.4","40.0"],"1":["3.25","3.27","5.8","5.35","5.36","13.27","20.11","22.0","29.0","31.10","33.0","40.0"],"2":["3.27","20.8","20.9","21.0","22.0","31.8","32.0","33.0"],"3":["3.22","13.28","23.0","30.2","31.10","34.0","41.2"],"4":["6.2","13.28","16.2","20.9","21.0","30.45","32.0","41.42"],"5":["3.11","3.13","3.24","3.26","13.27","21.0","29.0","30.28","30.29","32.0","40.0","41.28","41.29"],"6":["2.0","6.3","7.3","12.0","16.3","17.3","22.0","33.0"],"7":["15.15","41.7"],"8":["23.0","34.0"],"9":["3.28","9.6","13.28","19.6","29.3","41.42"],"10":["2.2","3.10","7.2","17.2"],"11":["2.27"],"13":["2.30","6.2","6.3","16.2","16.3"],"14":["9.6","19.6"],"16":["3.28","13.28"],"19":["5.41"],"21":["6.4","6.5","7.3","7.4","8.4","16.4","16.5","17.3","17.4","18.4"],"22":["8.2","8.3","9.7","18.2","18.3","19.7"],"23":["30.28","41.28"],"24":["6.5","16.5"],"25":["3.27","25.4","36.4"],"29":["5.41","8.5","18.5"],"34":["30.29","41.29"],"35":["3.6"],"40":["7.5","17.5"],"50":["3.9"],"75":["13.27"],"200":["3.5","3.7","3.8","3.20"],"300":["3.16"],"1000":["3.14","3.21","3.23"],"2000":["3.3"],"3000":["3.12","3.15"],"code":["0.1","0.2","0.4","0.5","0.6","0.7","0.12","0.13","0.14","0.15","0.16","1.1","1.6","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.28","2.29","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.2","3.4","3.5","3.6","3.16","3.28","3.29","5.1","5.2","5.3","5.11","5.13","5.15","5.16","5.19","5.20","5.21","5.22","5.24","5.25","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.40","5.41","9.2","10.1","10.2","12.0","12.20","12.28","12.29","12.30","13.19","15.1","15.2","15.11","15.15","15.19","15.34","15.40","15.41","19.2","25.8","25.9","25.10","25.12","25.13","25.14","30.1","30.7","30.10","30.19","30.29","30.30","30.31","30.34","30.42","30.45","36.8","36.11","40.2","41.1","41.4","41.10","41.19","41.29","41.30","41.31","41.34","41.38","41.42","41.45","41.48"],"js":["0.2","0.4","0.13","0.16","2.2","2.18","2.23","2.27","2.28","2.29","2.30","5.41","6.2","6.3","6.4","7.4","8.4","9.2","9.6","10.2","12.0","12.30","15.15","15.41","16.2","16.3","16.4","17.4","18.4","19.2","19.6","25.5","25.7","25.10","30.1","30.2","30.19","30.28","30.29","30.45","36.5","36.7","36.9","36.10","36.12","39.7","39.12","40.1","41.2","41.4","41.28","41.29","41.31","41.42"],"var":["0.2","0.4","2.0","2.30","4.0","5.41","6.2","6.3","6.4","6.5","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.2","9.6","9.7","9.8","10.2","12.0","14.0","15.15","16.2","16.3","16.4","16.5","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.2","19.3","19.6","19.7","19.8","25.5","29.3","30.2","30.28","30.29","35.4","36.5","39.7","40.3","40.4","41.2","41.28","41.29"],"hover":["0.3"],"方法用于代理自定义的":["0.3"],"loadimg":["0.3"],"方法用于监听图片的":["0.3"],"load":["0.3"],"加载事件":["0.3"],"div":["0.3","0.6","0.8","0.9","0.10","0.11","0.12","0.14","0.15","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.11","1.12","3.1","3.3","3.4","3.5","3.6","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","3.16","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.28","3.29","3.31","3.32","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.14","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.23","5.24","5.25","5.27","5.28","5.29","5.31","5.32","5.33","5.37","5.39","5.40","9.1","9.2","10.2","10.5","11.6","12.0","12.3","12.4","12.6","12.7","12.8","12.9","12.10","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.33","12.37","12.38","12.39","13.19","13.29","15.1","15.2","15.7","15.11","15.19","15.21","15.26","15.30","15.34","15.40","15.41","19.2","20.4","25.8","25.9","25.12","25.13","25.14","30.1","30.7","30.10","30.19","30.30","30.31","30.34","30.38","30.42","30.45","31.4","36.11","41.1","41.3","41.4","41.5","41.7","41.8","41.9","41.10","41.13","41.17","41.19","41.21","41.25","41.34","41.38","41.42","41.44","41.45","41.48"],"classname":["0.4","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.13","0.14","0.15","1.1","1.2","1.3","1.4","1.5","1.6","1.7","1.8","1.9","1.10","1.12","3.1","3.2","3.3","3.4","3.5","3.6","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.15","3.16","3.17","3.18","3.19","3.21","3.22","3.25","3.26","3.28","3.29","3.31","3.32","5.1","5.2","5.3","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.23","5.24","5.25","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.39","5.40","9.1","9.2","10.1","10.2","10.5","12.0","12.3","12.4","12.6","12.7","12.8","12.9","12.10","12.14","12.16","12.18","12.20","12.21","12.22","12.23","12.25","12.26","12.27","12.28","12.29","12.39","13.19","15.1","15.2","15.11","15.19","15.21","15.26","15.30","15.34","15.40","15.41","19.2","25.8","25.9","25.10","25.12","25.13","25.14","30.1","30.7","30.10","30.19","30.30","30.31","30.34","30.38","30.42","30.45","36.8","36.11","41.1","41.3","41.4","41.5","41.7","41.9","41.10","41.13","41.17","41.19","41.30","41.31","41.34","41.38","41.42","41.44","41.45","41.48"],"run":["0.4","0.5","0.6","0.7","0.10","0.11","0.12","0.13","0.14","0.15","0.16","1.1","1.6","2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.13","2.14","2.15","2.16","2.19","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.39","3.2","3.4","3.5","3.6","3.7","3.8","3.9","3.10","3.16","3.21","3.28","3.29","3.31","5.1","5.2","5.3","5.7","5.9","5.11","5.13","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.24","5.25","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.40","9.1","9.2","10.1","10.2","10.5","12.0","12.6","12.7","12.8","12.10","12.20","12.23","12.27","12.28","12.29","12.30","13.19","15.1","15.2","15.11","15.15","15.19","15.21","15.30","15.34","15.40","15.41","19.2","25.8","25.9","25.10","25.12","25.13","25.14","28.7","30.1","30.7","30.10","30.19","30.29","30.30","30.31","30.34","30.42","30.45","36.8","36.11","41.1","41.4","41.5","41.7","41.10","41.19","41.30","41.31","41.34","41.38","41.42","41.45","41.48"],"art":["0.4","2.0","5.10","5.12","5.41","6.2","6.3","6.4","6.5","7.3","7.4","7.5","8.2","8.3","8.5","9.2","9.3","9.6","9.7","9.8","12.0","14.0","15.10","15.12","15.15","16.2","16.3","16.4","16.5","17.3","17.4","17.5","18.2","18.3","18.5","19.2","19.3","19.6","19.7","19.8","20.3","20.5","25.5","29.3","30.2","31.3","31.10","35.4","36.5","40.3","41.2"],"new":["0.4","2.0","4.0","6.2","6.3","6.4","6.5","7.3","7.4","7.5","8.3","9.2","9.3","9.6","9.7","9.8","12.0","14.0","16.2","16.3","16.4","16.5","17.3","17.4","17.5","18.3","19.2","19.3","19.6","19.7","19.8","20.3","20.5","25.5","25.12","30.2","31.3","35.4","40.3","41.2"],"artplayer":["0.4","2.0","4.0","6.2","6.3","6.4","6.5","7.3","7.4","7.5","9.2","9.3","9.7","9.8","12.0","14.0","16.2","16.3","16.4","16.5","17.3","17.4","17.5","19.2","19.3","19.7","19.8","20.6","25.6","25.7","25.10","26.2","27.2","28.5","29.4","30.2","31.4","31.6","31.9","31.10","36.6","36.7","36.8","36.9","36.10","36.12","36.13","36.14","37.2","38.2","39.5","41.2"],"container":["0.4","2.0","4.0","6.4","6.5","7.3","7.5","9.2","9.3","9.7","9.8","12.0","14.0","16.4","16.5","17.3","17.5","19.2","19.3","19.7","19.8","20.3","30.2","30.11","31.3","35.4","41.11"],"方法用于更新":["0.6"],"对象":["0.6"],"方法用于动态更新层":["0.8"],"show":["0.8","0.9","0.10","0.15","10.7","30.14","30.15"],"属性用于设置是否显示全部层":["0.8"],"toggle":["0.8","0.9","0.10","0.15","13.18","30.18"],"方法用于切换是否显示全部层":["0.8"],"方法用于动态更新控制器":["0.9"],"属性用于设置是否显示全部控制器":["0.9"],"方法用于切换是否显示全部控制器":["0.9"],"属性用于设置是否显示全部菜单":["0.10"],"方法用于切换是否显示全部菜单":["0.10"],"switch":["0.11","9.4","13.17","19.4","25.12","30.20"],"方法设置当前字幕地址和选项":["0.11"],"属性用于切换是否显示加载层":["0.12"],"属性用于切换是否显示遮罩层":["0.14"],"属性用于设置是否显示全部设置项":["0.15"],"方法用于切换是否显示全部设置项":["0.15"],"字符串":["1.11"],"app":["2.0","4.0","7.2","7.5","9.2","9.3","9.7","9.8","12.0","14.0","17.2","17.5","19.3","19.7","19.8","20.3","30.2","35.4"],"url":["2.0","4.0","5.10","7.2","7.5","9.3","9.8","12.0","14.0","15.10","15.11","17.2","17.5","19.3","19.8","20.3","24.4","30.35","30.36","35.4","41.35","41.36"],"assets":["2.0","4.0","7.2","8.2","8.3","8.4","8.5","9.3","9.8","12.0","14.0","17.2","18.2","18.3","18.4","18.5","19.3","19.8","24.4","30.2","30.28","35.4","41.28"],"sample":["2.0","4.0","7.2","8.2","8.3","8.4","8.5","9.3","9.8","14.0","17.2","18.2","18.3","18.4","18.5","19.3","19.8","24.4","30.2","30.28","35.4","41.28"],"mp4":["2.0","4.0","7.2","14.0","17.2","24.4","25.15","36.15"],"on":["2.0","4.0","12.5","14.0","30.21","30.22","30.23","30.46"],"canplay":["2.0"],"浏览器可以播放媒体文件了":["2.40"],"浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束":["2.41"],"offlineaudiocontext":["2.42","12.42"],"duration":["2.43"],"媒体内容变为空":["2.44"],"例如":["2.44"],"视频停止播放":["2.45"],"获取媒体数据时出错":["2.46"],"media":["2.47","12.40","12.57"],"已加载元数据":["2.48"],"播放已暂停":["2.49"],"播放已开始":["2.50"],"由于缺乏数据而暂停或延迟后":["2.51"],"在浏览器加载资源时周期性触发":["2.52"],"播放速率发生变化":["2.53"],"跳帧":["2.54","2.55"],"用户代理":["2.56"],"媒体数据加载已暂停":["2.57"],"currenttime":["2.58"],"音量发生变化":["2.59"],"由于暂时缺少数据":["2.60"],"可以打印出视频全部的内置事件":["3.1"],"默认关闭":["3.1"],"默认为":["3.3","3.7","3.8","3.9","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.26","3.30","5.4"],"单位为毫秒":["3.14","3.20","3.23"],"true":["3.17","3.18","3.31","5.4","24.4","25.15","36.15","41.21","41.27"],"false":["3.19","3.30","3.32","13.19","13.32","41.8","41.9","41.13","41.18","41.20","41.22","41.23","41.25","41.37","41.44","41.46"],"是否把播放器挂在在":["3.30"],"元素下":["3.30"],"目前主要用于进度条的平滑效果":["3.32"],"dosomething":["4.0","14.0"],"video":["4.0","5.31","5.35","5.36","7.2","9.3","9.8","14.0","15.3","15.6","15.8","15.9","15.13","15.14","15.16","15.17","15.18","15.22","15.24","15.25","15.30","15.31","15.32","15.35","15.36","17.2","19.3","19.8","20.3","24.4","25.15","30.4","30.5","30.14","30.16","30.37","36.15","41.40"],"plugins":["4.0","24.4","25.15","36.15"],"ready":["4.0","12.51","14.0","30.4"],"可以在实例化之后再加载插件的函数":["4.0"],"销毁播放器":["5.4"],"接受一个参数表示是否销毁后同时移除播放器的":["5.4"],"html":["5.4","24.4","28.12","30.38","39.1","39.8","39.12","41.26","41.32"],"视频时间跳转":["5.5"],"单位秒":["5.5","5.6","5.7","41.33"],"视频时间快进":["5.6"],"视频时间快退":["5.7"],"设置和获取视频音量":["5.8"],"范围在":["5.8","41.24"],"string":["5.9","6.1","7.1","8.1","11.11","16.1","18.1","30.35","30.36","41.32","41.33","41.35","41.36"],"设置和获取视频地址":["5.9"],"类似":["5.10","5.11","5.12","5.14","5.38"],"但会执行一些优化操作":["5.10","5.11"],"switchurl":["5.12","15.12"],"但会带上之前的播放进度":["5.12"],"设置和获取视频是否静音":["5.13"],"设置和获取视频当前时间":["5.14"],"设置时间时和":["5.14"],"seek":["5.14"],"但它不会触发额外的事件":["5.14"],"返回的是一个":["5.17","5.18"],"promise":["5.17","5.18"],"设置和获取播放器窗口全屏":["5.19"],"设置和获取播放器网页全屏":["5.20"],"设置和获取播放器画中画模式":["5.21"],"只有在视频播放前才能看到海报效果":["5.22"],"boolean":["5.23","6.1","8.1","9.4","19.4","41.32"],"设置和获取播放器迷你模式":["5.23"],"获取视频是否正在播放中":["5.24"],"设置和获取播放器翻转":["5.27"],"支持":["5.27"],"normal":["5.27","13.29"],"horizontal":["5.27","13.29"],"vertical":["5.27","13.29"],"设置和获取播放器播放速度":["5.28"],"设置和获取播放器长宽比":["5.29"],"元素的属性":["5.31"],"动态获取和设置视频类型":["5.32"],"动态获取和设置播放器主题颜色":["5.33"],"常配合":["5.35","5.36"],"timeupdate":["5.35","5.36"],"事件使用":["5.35","5.36"],"和":["5.37","41.6","41.14","41.15","41.16"],"removeeventlistener":["5.37","15.37"],"当使用":["5.37"],"来处理事件":["5.37"],"播放器销毁时也会自动销毁该事件":["5.37"],"document":["5.38","15.38"],"queryselector":["5.38","15.38"],"但被查询的对象局限于当前播放器内":["5.38"],"可以避免同类名的错误":["5.38"],"元素":["5.39"],"是否禁用组件":["6.1","7.1","8.1"],"name":["6.1","7.1","7.2","8.1","14.0","16.1","17.2","18.1","30.36","41.36"],"组件唯一名称":["7.1"],"用于标记类名":["7.1"],"index":["7.1","7.2","17.1","17.2","25.5","25.7","25.10","28.9","28.12","36.5","36.7","36.9","36.10","36.12","36.14","39.1","39.8","39.9"],"controls":["7.2","17.2"],"your":["7.2","17.2","29.2","30.42"],"button":["7.2","17.2","30.17","30.18","30.22","30.23","30.43","30.47"],"img":["8.2","8.3","8.4","8.5","18.2","18.3","18.4","18.5","30.28","41.28"],"layer":["8.2","8.3","8.4","8.5","12.34","12.35","18.2","18.3","18.4","18.5","30.28"],"png":["8.2","8.3","8.5","18.2","18.3","18.5"],"aspectratio":["9.1"],"subtitleoffset":["9.1"],"number":["9.2","17.1","19.2","30.33","30.35","41.33","41.35"],"列表宽度":["9.2","19.2"],"tooltip":["9.2","9.4","9.5","19.2"],"提示文本":["9.2","9.5","19.2"],"元素的图标":["9.4","9.5"],"按钮默认状态":["9.4"],"onswitch":["9.4"],"function":["9.4","9.5","11.9","11.10","19.5","20.5","30.44","31.5"],"按钮切换事件":["9.4"],"range":["9.5","30.24"],"array":["9.5","19.5"],"默认状态数组":["9.5"],"onrange":["9.5","19.5"],"完成时触发的事件":["9.5"],"onchange":["9.5"],"变化时触发的事件":["9.5"],"here":["10.0"],"methods":["10.3","25.8"],"to":["10.3","10.7","10.10","10.12","10.13","10.14","10.16","12.0","12.1","12.2","13.0","13.4","13.17","13.18","13.29","13.30","15.5","15.10","15.12","15.37","15.39","20.3","28.12","29.2","30.4","30.9","30.13","30.14","30.27","30.40","30.43","30.44","30.47"],"handle":["10.3","15.37"],"event":["10.3","13.7","13.8","13.9","15.37","19.5"],"will":["10.3","15.11","15.37","28.7","30.8","30.11","30.17"],"also":["10.3","28.7"],"be":["10.3","15.11","28.7"],"automatically":["10.3","12.19","15.30","15.37"],"destroyed":["10.3","12.6"],"method":["10.3","10.16"],"get":["10.4","15.13","15.20","15.23","15.27","15.28","15.29","15.32","15.33"],"del":["10.4"],"of":["10.5","10.6","11.2","11.3","11.4","11.5","12.17","13.3","13.5","13.6","13.10","13.13","13.22","13.24","13.25","15.3","15.14","15.16","15.17","15.18","15.26","15.28","15.29","15.30","15.31","16.1","17.1","18.1","30.3","30.7","30.15"],"player":["10.5","11.6","11.12","12.5","12.11","12.13","12.17","12.27","13.30","13.31","15.4","15.19","15.20","15.21","15.23","15.26","15.27","15.33","20.5","28.1","30.1","30.3","30.4","30.6","30.7","30.11","30.46","31.5"],"retrieve":["10.6","15.9"],"value":["10.6"],"update":["10.6","10.8","10.9","10.15"],"only":["10.7","10.16","15.22","30.5","30.25"],"one":["10.7","10.16"],"property":["10.7","10.11","10.12","11.1","25.9","30.32","30.33","30.35","30.36"],"used":["10.7","10.12","10.13","10.14","28.7","30.6"],"display":["10.7","10.12","10.14","30.41","30.43","30.47"],"adding":["10.8"],"remove":["10.8","10.9","10.10","10.13","10.15"],"removing":["10.8"],"dynamically":["10.10","10.16"],"items":["10.10","13.5","13.6"],"sets":["10.11","12.18","12.19"],"and":["10.11","12.2","15.3","15.8","15.9","15.13","15.20","15.23","15.27","15.28","15.29","15.30","15.31","15.32","15.33","15.37","19.1","25.8","28.7","30.4","30.17","30.38"],"returns":["10.11"],"current":["10.11","15.14","15.16","15.17","15.18"],"address":["10.11","12.2","15.9","15.10","15.12"],"style":["10.11"],"is":["10.12","10.14","12.2","12.3","12.5","12.6","12.9","12.10","12.11","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.51","13.19","13.23","13.26","13.28","13.32","15.10","15.13","15.22","15.24","15.35","30.4","30.24"],"set":["10.12","10.14","15.9","15.23","15.30","15.31","15.32","15.33"],"whether":["10.12","10.14","13.30","15.4","15.13","15.24","30.9","30.13","30.27"],"a":["10.13","12.25","12.54","12.55","15.4","15.5","24.4","28.11","30.40","30.43"],"item":["10.15"],"add":["10.16","29.2","30.42","30.44"],"refer":["11.0","13.0"],"you":["11.1","20.10","20.11","30.26"],"can":["11.1","12.40","13.1","20.10","28.7"],"use":["11.1","30.27"],"this":["11.1","20.10"],"when":["11.1","13.13","13.14","13.22","13.23","15.37","30.4","30.5","30.12","30.25"],"information":["11.2","15.26"],"environment":["11.3"],"variables":["11.3","15.40","20.10","30.48"],"time":["11.4","12.26","15.5","15.6","15.7","15.14","30.33","41.33"],"default":["11.5","13.16","13.19","13.21","13.23","13.27","13.28","13.32","19.4","19.5","20.5","31.5"],"configuration":["11.5","25.14"],"functions":["11.6"],"for":["11.6","11.7","11.8","11.10","12.1","12.44","13.9","13.10","13.11","13.12","13.14","13.15","13.20","17.1","20.9","20.11","30.18"],"the":["11.6","12.5","12.11","12.45","12.47","12.53","12.58","13.0","13.15","13.20","13.30","13.31","13.32","15.6","15.8","15.9","15.13","15.14","15.16","15.20","15.21","15.22","15.23","15.24","15.25","15.27","15.28","15.29","15.31","15.32","15.33","15.37","15.38","15.39","16.1","18.1","26.1","27.1","28.1","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.24","30.42","30.46","30.47"],"validation":["11.7","11.9"],"constructor":["11.8"],"tool":["11.10"],"required":["11.11"],"s":["11.12","15.33","24.4"],"listening":["12.0"],"able":["12.1","12.2"],"play":["12.1","12.2","12.40","30.4"],"paused":["12.3"],"starts":["12.4"],"playing":["12.4"],"pressed":["12.5"],"gains":["12.7"],"loses":["12.8"],"focus":["12.8"],"double":["12.9","13.23"],"clicked":["12.9","12.10"],"while":["12.11"],"loading":["12.11"],"hovered":["12.12"],"or":["12.12","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","25.12"],"unhovered":["12.12"],"by":["12.12","13.27","30.9","30.11","30.39"],"moves":["12.13"],"over":["12.13"],"size":["12.14","12.19"],"changes":["12.14","12.16","12.17","12.39"],"appears":["12.15","30.5","30.25"],"in":["12.15","12.24","12.26","12.27","13.3","13.4","13.5","13.6","13.7","13.8","13.9","13.11","13.16","13.21","15.5","15.7","15.21","20.10","30.17","30.20","30.32","30.42","30.48"],"viewport":["12.15"],"locked":["12.16"],"state":["12.16","12.39","15.3","19.4","19.5"],"height":["12.18","15.30"],"flips":["12.20"],"into":["12.21"],"full":["12.21","24.1","25.1","28.2"],"screen":["12.21"],"enters":["12.22"],"web":["12.22","15.20","30.23","30.46"],"fullscreen":["12.22","24.4","30.23"],"mode":["12.23","12.24","15.21","25.4","25.11","30.8","30.12","30.26","30.27","36.4"],"picture":["12.24","15.21","30.20"],"takes":["12.25"],"jumps":["12.26"],"panel":["12.31","13.4","13.5","13.6"],"shown":["12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38"],"hidden":["12.31","12.32","12.33","12.34","12.35","12.37","12.38"],"click":["12.36","13.2"],"menu":["12.36","13.2"],"browser":["12.41"],"estimates":["12.41"],"triggered":["12.43","19.5","30.4"],"becomes":["12.44"],"empty":["12.44"],"example":["12.44"],"occurred":["12.46"],"metadata":["12.48","30.37","41.37"],"playback":["12.49","12.50","12.60","13.26","15.28","30.15"],"periodically":["12.52"],"user":["12.56"],"agent":["12.56"],"volume":["12.59"],"which":["13.1","15.8","15.10","30.5","30.8"],"print":["13.1","13.31"],"out":["13.1"],"all":["13.1","21.0","32.0"],"built":["13.1","30.42","30.48"],"right":["13.2"],"context":["13.2","30.17"],"notification":["13.3"],"message":["13.3"],"settings":["13.4","13.5","13.6"],"pixels":["13.4","13.9"],"defaults":["13.4","13.7","13.8","13.29"],"milliseconds":["13.7","13.8","13.16","13.21"],"view":["13.9"],"records":["13.10"],"automatic":["13.10","13.13","13.14"],"feature":["13.11","13.12","30.14","30.15","30.16","30.45"],"hiding":["13.12"],"reconnection":["13.13","13.14"],"attempts":["13.13"],"attempt":["13.14"],"bottom":["13.15","30.32"],"measured":["13.16"],"pause":["13.18","15.3"],"single":["13.19"],"delay":["13.20"],"rotation":["13.20"],"unit":["13.21"],"multiplier":["13.22"],"rate":["13.22"],"speed":["13.22","13.24","15.28","25.11","30.15"],"tapped":["13.23"],"sliding":["13.24"],"adjusting":["13.25"],"with":["13.25","19.1","30.39","30.42"],"shortcuts":["13.25"],"progress":["13.26","30.25","30.33"],"adjusted":["13.26"],"via":["13.26"],"speeds":["13.27"],"ratios":["13.28"],"mount":["13.30","30.26"],"requestanimationframe":["13.32"],"currently":["13.32","15.24","30.3","30.6","30.41"],"myplugin":["14.0"],"console":["14.0"],"info":["14.0"],"return":["14.0","15.39"],"something":["14.0"],"accepts":["15.4"],"indicating":["15.4"],"specific":["15.5"],"fast":["15.6","30.44"],"rewind":["15.7"],"seconds":["15.7"],"gets":["15.8"],"ranges":["15.8"],"similar":["15.10","15.12"],"but":["15.11","15.12","15.38"],"some":["15.11"],"optimization":["15.11"],"operations":["15.11"],"executed":["15.11"],"it":["15.12","19.1","24.4","30.16","30.17"],"setting":["15.14","25.15","36.15"],"screenshot":["15.17","15.18"],"window":["15.19","30.22"],"page":["15.20"],"effect":["15.22"],"visible":["15.22"],"should":["15.25"],"auto":["15.25"],"adjust":["15.25"],"position":["15.26"],"supports":["15.27","30.38","30.41"],"aspect":["15.29","30.16"],"ratio":["15.29","30.16"],"calculate":["15.30"],"attributes":["15.31","30.37"],"that":["15.35","15.36"],"cached":["15.35"],"ranging":["15.35","15.36"],"from":["15.35","15.36","28.8","29.0","31.3","31.9"],"has":["15.36"],"been":["15.36"],"using":["15.37"],"object":["15.38"],"being":["15.38"],"queried":["15.38"],"css":["15.40","30.48"],"qualities":["15.41"],"component":["16.1","18.1"],"unique":["16.1","17.1","18.1"],"class":["17.1"],"identification":["17.1"],"then":["19.1"],"comes":["19.1"],"four":["19.1"],"元素点击事件":["19.2"],"width":["19.2"],"icon":["19.4"],"upon":["19.5"],"usage":["20.0"],"bash":["20.1","31.1"],"npm":["20.1","24.2","25.2","26.2","27.2","28.3","31.1","35.2","36.2","37.2","38.2","39.3"],"jsdelivr":["20.2","31.2"],"net":["20.2","24.3","25.3","26.3","27.3","28.4","31.2","35.3","36.3","37.3","38.3","39.4"],"https":["20.2","24.3","25.3","26.3","27.3","28.4","31.2","35.3","36.3","37.3","38.3","39.4"],"path":["20.3"],"template":["20.4","31.4"],"ref":["20.4"],"artref":["20.4","20.5","31.5"],"export":["20.5","31.5"],"option":["20.5","31.5"],"getinstance":["20.5","31.5"],"rest":["20.5","31.5"],"const":["20.5","31.3","31.5"],"import":["20.8","20.10","31.8","31.10"],"type":["20.9","31.9","31.10"],"options":["20.9"],"ts":["20.9","41.39"],"case":["20.10"],"manually":["20.10"],"types":["20.10"],"latest":["20.11"],"major":["20.11"],"version":["20.11","29.0","31.11"],"chrome":["20.11"],"last":["20.11"],"data":["21.0","25.6","25.8","25.9","25.10","25.12","25.13","25.14","32.0","36.6","36.8","36.11","36.12","36.13"],"libs":["21.0","22.0","25.6","25.7","25.9","25.10","25.13","25.14","32.0","33.0","36.6","36.8","36.9","36.11","36.12","36.13","36.14"],"cdnjs":["21.0","22.0","23.0","32.0","33.0","34.0"],"cloudflare":["21.0","22.0","23.0","32.0","33.0","34.0"],"ajax":["21.0","22.0","23.0","32.0","33.0","34.0"],"dashjs":["21.0","32.0"],"beta":["23.0","34.0"],"min":["23.0","34.0"],"install":["24.2","25.2","26.2","27.2","28.3","35.2","36.2","37.2","38.2","39.3"],"autosize":["24.4"],"fullscreenweb":["24.4","28.13","39.13"],"artplayerpluginads":["24.4"],"ad":["24.4"],"ignored":["24.4"],"if":["24.4","30.26"],"弹幕透明度":["25.4","36.4"],"fontsize":["25.4","25.11","36.4"],"字体大小":["25.4","36.4"],"支持数字和百分比":["25.4","36.4"],"color":["25.4","25.11","30.6","36.4"],"ffffff":["25.4","36.4"],"默认字体颜色":["25.4","36.4"],"默认模式":["25.4","36.4"],"uncompiled":["25.6","25.7","25.9","25.10","36.6","36.7","36.8","36.9","36.10","36.11","36.12","36.13","36.14"],"plugin":["25.6","25.7","25.10","36.6","36.7","36.8","36.9","36.10","36.12","36.13","36.14"],"danmuku":["25.7","25.10","25.11","25.15","36.5","36.7","36.9","36.10","36.12","36.13","36.14","36.15"],"include":["25.11"],"opacity":["25.11"],"margin":["25.11"],"antioverlap":["25.11","36.11"],"synchronousplayback":["25.11","36.11"],"filter":["25.11","36.11"],"locktime":["25.11","36.11"],"beforeemit":["25.11","36.11"],"source":["25.12"],"barrages":["25.13"],"artplayerplugindanmuku":["25.15","36.15"],"xml":["25.15","36.15"],"quality":["26.0"],"easily":["28.1"],"control":["28.1","30.32"],"inside":["28.1","28.7"],"head":["28.5","39.5"],"title":["28.5","39.5"],"meta":["28.5","39.5"],"interface":["28.6","28.10"],"iframe":["28.8","39.12"],"destruction":["28.9"],"warning":["28.10","39.10"],"script":["28.11"],"是不生效的":["28.13","39.13"],"这时候只要监听":["28.13","39.13"],"里的":["28.13","39.13"],"事件并通知到":["28.13","39.13"],"multilingual":["29.0"],"packs":["29.0"],"starting":["29.0"],"are":["29.1","30.21"],"en":["29.1","41.41"],"zh":["29.1","29.4","40.2","40.4","41.41"],"cn":["29.1","40.1"],"welcome":["29.2"],"packaged":["29.2"],"at":["29.2"],"dist":["29.2"],"i18n":["29.4","40.4"],"tw":["29.4","40.2","40.4"],"mounts":["30.1"],"identifier":["30.3"],"successfully":["30.4"],"initialized":["30.4"],"live":["30.8"],"hide":["30.8"],"mute":["30.9"],"fill":["30.11"],"entire":["30.11"],"enter":["30.12"],"mini":["30.12"],"appear":["30.17"],"toolbar":["30.17"],"there":["30.21"],"multiple":["30.21"],"players":["30.21"],"offset":["30.24"],"5s":["30.24","41.24"],"bar":["30.25","30.31","30.32","30.33"],"side":["30.26"],"rendering":["30.26"],"useful":["30.26"],"want":["30.26"],"list":["30.32"],"description":["30.32","30.33","30.35","30.36"],"thumbnail":["30.35"],"ass":["30.36"],"additional":["30.37"],"these":["30.37"],"strings":["30.38"],"htmlelement":["30.38","41.38"],"customtype":["30.39"],"same":["30.39"],"as":["30.39"],"file":["30.39"],"extension":["30.39"],"delegate":["30.40"],"decoding":["30.40"],"third":["30.40"],"tolowercase":["30.41","41.41"],"language":["30.42"],"forward":["30.44"],"rotate":["30.46"],"mobile":["30.46"],"change":["30.48"],"let":["31.10"],"null":["31.10"],"参数":["31.10"],"对于古老的浏览器":["31.11"],"可以使用":["31.11"],"legacy":["31.11"],"文件":["31.11"],"里控制跨域":["39.1"],"接口":["39.6","39.10"],"内部运行":["39.7"],"同时它也能用于异步获取":["39.7"],"里的值":["39.7"],"接收来自":["39.11"],"无需手动导入":["40.1"],"手动导入的语言有":["40.2"],"cs":["40.2"],"es":["40.2"],"fa":["40.2"],"fr":["40.2"],"id":["40.2"],"pl":["40.2"],"ru":["40.2"],"group":["40.2"],"容器":["41.1"],"目前只用于记忆播放":["41.3"],"autoplayback":["41.3"],"事件一样":["41.4"],"只会出现在播放器初始化且未播放的状态下":["41.5"],"播放器主题颜色":["41.6"],"目前用于":["41.6"],"进度条":["41.6"],"播放器的默认音量":["41.7"],"使用直播模式":["41.8"],"会隐藏进度条和播放时间":["41.8"],"是否默认静音":["41.9"],"播放器的尺寸默认会填充整个":["41.11"],"容器尺寸":["41.11"],"所以经常出现黑边":["41.11"],"该值能自动调整播放器尺寸以隐藏黑边":["41.11"],"当播放器滚动到浏览器视口以外时":["41.12"],"自动进入":["41.12"],"迷你播放":["41.12"],"模式":["41.12","41.27"],"是否循环播放":["41.13"],"是否显示视频翻转功能":["41.14"],"目前只出现在":["41.14"],"设置面板":["41.14","41.15","41.16","41.18","41.24"],"右键菜单":["41.14","41.15","41.16"],"是否显示视频播放速度功能":["41.15"],"会出现在":["41.15","41.16"],"是否显示视频长宽比功能":["41.16"],"是否在底部控制栏里显示":["41.17","41.18","41.20"],"视频截图":["41.17"],"功能":["41.17"],"的开关按钮":["41.18","41.20"],"画中画":["41.20"],"假如页面里同时存在多个播放器":["41.21"],"是否只能让一个播放器播放":["41.21"],"是否在底部控制栏里显示播放器":["41.22","41.23"],"窗口全屏":["41.22"],"按钮":["41.22","41.23","41.47"],"网页全屏":["41.23"],"出现在":["41.24"],"迷你进度条":["41.25"],"只在播放器失去焦点后且正在播放时出现":["41.25"],"挂载模式":["41.26"],"假如你希望在播放器挂载前":["41.26"],"就提前渲染好播放器所需的":["41.26"],"时有用":["41.26"],"你可以通过":["41.26"],"在移动端是否使用":["41.27"],"类型":["41.32"],"描述":["41.32","41.33","41.35","41.36"],"默认画质":["41.32"],"画质名字":["41.32"],"高亮时间":["41.33"],"text":["41.33"],"高亮文本":["41.33"],"预览图地址":["41.35"],"预览图数量":["41.35"],"column":["41.35"],"字幕名字":["41.36"],"字幕地址":["41.36"],"字幕类型":["41.36"],"可选":["41.36"],"preload":["41.37"],"更多视频属性":["41.37"],"这些属性将直接写入视频元素里":["41.37"],"字符串和":["41.38"],"一起使用":["41.39"],"默认视频的格式就是视频地址的后缀":["41.39"],"如":["41.39"],"m3u8":["41.39"],"mkv":["41.39"],"但有时候视频地地址没有正确的后缀":["41.39"],"进行匹配":["41.40"],"把视频解码权交给第三方程序进行处理":["41.40"],"处理的函数能接收三个参数":["41.40"],"视频":["41.40"],"dom":["41.40"],"默认显示语言":["41.41"],"目前支持":["41.41"],"是否在移动端显示一个":["41.43"],"锁定按钮":["41.43"],"用于隐藏底部":["41.43"],"控制栏":["41.43"],"是否在移动端添加长按视频快进功能":["41.44"],"是否在移动端的网页全屏时":["41.46"],"根据视频尺寸和视口尺寸":["41.46"],"旋转播放器":["41.46"],"是否显示":["41.47"],"当前只有部分浏览器支持该功能":["41.47"]},{"0":["9.5","13.25","15.8","15.35","15.36"],"1":["9.5","13.25","15.8","15.35","15.36","19.5","20.10"],"2":["13.27","30.1","41.1"],"3":["20.7","20.10","31.7"],"4":["30.7","30.10","30.19","30.30","30.31","30.38","30.42","40.1","41.10","41.19","41.30","41.31","41.38","41.45","41.48"],"5":["9.5","13.11","19.5","30.45","41.45"],"6":["2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39"],"7":["2.19","2.21","2.22","2.24","2.25","5.15","5.26","5.30","15.30","30.4","30.38","41.4","41.38"],"8":["2.17","2.20","5.1","5.13","5.20","5.28","5.29","5.31","5.32","5.33","5.40","12.20","15.40","28.5","39.5"],"9":["2.28","2.29","5.11","5.19","5.21","5.22","5.34","12.28","12.29","15.11","15.19","15.21","15.34","30.4","30.42","41.4"],"10":["2.6","2.18","2.23","7.5","9.5","12.23","13.10","13.23","17.5"],"11":["5.2","5.3","5.20","5.30","12.27","15.2","15.30","31.11"],"12":["30.30","41.30"],"13":["12.30"],"15":["30.34","41.34"],"16":["30.31","41.31"],"17":["4.0"],"18":["21.0","32.0"],"19":["15.41","22.0","33.0"],"21":["23.0","34.0"],"23":["21.0","32.0"],"24":["22.0","33.0"],"25":["13.27"],"26":["23.0","34.0"],"29":["15.41"],"35":["13.6"],"50":["13.9"],"200":["13.5","13.7","13.8","13.20"],"250":["9.2","13.4","19.2"],"300":["13.16"],"1000":["13.21"],"2000":["13.3"],"是指挂载在":["0.0","1.0","5.0"],"js":["0.1","0.3","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.14","0.15","1.1","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.19","2.20","2.21","2.22","2.24","2.25","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.2","3.4","3.5","3.6","3.7","3.8","3.9","3.16","3.27","3.28","3.29","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.24","5.25","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.37","5.40","9.1","9.4","9.5","10.1","10.4","10.5","10.6","10.13","12.6","12.18","12.20","12.23","12.27","12.28","12.29","13.19","15.1","15.2","15.11","15.19","15.21","15.26","15.30","15.34","15.40","19.5","25.6","25.8","25.9","25.11","25.12","25.13","25.14","28.7","28.12","29.0","30.4","30.7","30.10","30.30","30.31","30.34","30.38","30.42","36.6","36.8","36.11","36.13","36.14","40.0","41.1","41.7","41.10","41.19","41.30","41.33","41.34","41.38","41.45","41.48"],"var":["0.1","0.3","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.13","0.14","0.15","0.16","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","5.2","5.3","5.11","5.13","5.15","5.19","5.21","5.22","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.40","9.4","10.1","10.5","12.28","12.29","12.30","13.19","15.2","15.11","15.19","15.21","15.30","15.40","15.41","25.6","25.7","25.9","25.10","28.7","29.4","30.1","30.7","30.10","30.19","30.30","30.31","30.42","30.45","36.7","36.8","36.9","36.10","36.11","36.12","36.14","40.1","41.1","41.4","41.10","41.19","41.30","41.31","41.38","41.42","41.45"],"art":["0.1","0.2","0.5","0.6","0.7","0.10","0.13","0.15","0.16","2.2","2.6","2.11","2.12","2.16","2.17","2.18","2.20","2.21","2.22","2.23","2.24","2.25","2.27","2.28","2.29","2.30","2.38","5.15","5.19","5.21","5.22","5.26","5.30","5.40","8.4","9.4","10.1","10.2","12.30","13.19","15.19","15.21","15.30","15.40","15.41","18.4","20.10","21.0","23.0","25.7","25.9","25.10","29.4","30.1","30.7","30.10","30.19","30.28","30.29","30.30","30.31","30.42","30.45","31.5","32.0","34.0","36.7","36.9","36.10","36.11","36.12","39.7","40.1","40.4","41.1","41.4","41.19","41.28","41.29","41.30","41.31","41.34","41.38","41.40","41.42","41.45"],"new":["0.1","0.2","0.6","0.7","0.13","0.15","0.16","2.2","2.6","2.17","2.18","2.20","2.23","2.27","2.28","2.29","2.30","5.11","5.22","5.40","5.41","8.2","8.4","8.5","10.1","10.2","12.30","15.11","15.15","15.19","15.21","15.30","15.41","18.2","18.4","18.5","25.7","25.10","29.3","29.4","30.1","30.7","30.10","30.19","30.28","30.29","30.30","30.31","30.42","30.45","31.5","36.5","36.7","36.9","36.10","36.11","36.12","39.7","40.4","41.1","41.4","41.28","41.29","41.30","41.31","41.42"],"artplayer":["0.2","0.3","0.7","0.13","0.15","0.16","2.2","2.23","2.27","2.28","2.29","2.30","3.4","3.5","3.6","3.28","3.29","5.11","5.22","5.41","8.2","8.3","8.4","8.5","9.6","10.1","10.2","12.30","13.19","15.11","15.15","15.19","15.30","15.41","18.2","18.3","18.4","18.5","19.6","20.1","20.8","20.9","20.10","24.2","24.3","25.2","25.3","25.8","25.9","25.11","25.12","25.13","25.14","26.3","27.3","28.3","28.4","29.0","29.3","30.7","30.10","30.19","30.28","30.29","30.30","30.31","30.42","30.45","31.1","31.8","35.2","35.3","36.2","36.3","36.11","37.3","38.3","39.3","39.4","39.7","40.0","40.3","41.4","41.26","41.28","41.29","41.30","41.31","41.42"],"container":["0.2","0.3","0.13","0.16","2.2","2.27","2.30","5.11","5.41","6.2","6.3","7.4","8.2","8.3","8.4","8.5","9.6","10.2","12.30","15.11","15.15","15.19","15.41","16.2","16.3","17.4","18.2","18.3","18.4","18.5","19.6","20.5","25.5","25.10","29.3","29.4","30.7","30.10","30.19","30.28","30.29","30.30","30.31","30.42","30.45","31.5","36.5","36.9","36.10","36.12","39.7","40.3","40.4","41.2","41.4","41.28","41.29","41.31","41.42"],"app":["0.2","0.4","0.13","2.30","5.41","6.2","6.3","6.4","6.5","7.3","7.4","8.2","8.3","8.4","8.5","9.6","10.2","15.11","15.15","15.41","16.2","16.3","16.4","16.5","17.3","17.4","18.2","18.3","18.4","18.5","19.2","19.6","20.4","25.5","25.10","30.1","30.19","30.28","30.29","30.45","31.3","36.5","36.9","36.10","39.7","40.4","41.2","41.4","41.28","41.29","41.42"],"url":["0.2","0.4","5.41","6.2","6.3","6.4","6.5","7.3","7.4","8.2","8.3","8.5","9.2","9.6","9.7","10.2","15.15","15.41","16.2","16.3","16.4","16.5","17.3","17.4","18.2","18.3","18.5","19.2","19.6","19.7","21.0","22.0","23.0","25.5","30.19","30.28","30.29","30.32","30.39","30.45","31.3","32.0","33.0","34.0","36.5","36.10","39.7","41.28","41.29","41.32","41.40","41.42"],"classname":["0.3","1.11","3.14","3.20","3.23","3.24","3.27","3.30","5.4","5.14","5.27","5.35","5.36","5.37","5.38","9.4","10.4","10.6","10.7","10.13","10.16","11.6","12.1","12.2","12.5","12.11","12.12","12.13","12.15","12.17","12.19","12.24","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","13.2","13.4","13.7","13.8","13.9","13.16","13.21","13.27","13.28","13.29","13.31","15.3","15.5","15.6","15.7","15.8","15.9","15.10","15.13","15.16","15.20","15.22","15.23","15.24","15.25","15.27","15.28","15.29","15.31","15.32","15.33","15.37","15.39","19.4","25.11","30.4","30.9","30.13","30.33","30.41","30.48","41.6","41.8","41.12","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.24","41.25","41.26","41.27","41.32","41.33","41.37","41.39","41.41","41.43","41.46","41.47"],"run":["0.3","0.8","0.9","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.11","1.12","3.1","3.3","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.22","3.23","3.24","3.25","3.26","3.27","3.30","3.32","5.4","5.5","5.6","5.8","5.10","5.12","5.14","5.23","5.27","5.35","5.36","5.37","5.38","5.39","9.4","10.4","10.6","10.7","10.13","10.16","11.6","12.1","12.2","12.3","12.4","12.5","12.9","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.7","13.8","13.9","13.16","13.21","13.27","13.28","13.29","15.3","15.6","15.7","15.8","15.9","15.13","15.16","15.20","15.22","15.24","15.25","15.26","15.27","15.28","15.29","15.31","15.32","15.33","15.37","19.4","25.11","30.4","30.9","30.13","30.33","30.38","30.41","30.48","41.3","41.6","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.17","41.18","41.20","41.21","41.22","41.23","41.24","41.25","41.27","41.32","41.33","41.37","41.39","41.41","41.43","41.44","41.46","41.47"],"code":["0.3","0.8","0.9","0.10","0.11","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.12","3.1","3.3","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.30","3.31","3.32","5.4","5.5","5.6","5.7","5.8","5.9","5.10","5.12","5.14","5.17","5.18","5.23","5.27","5.35","5.36","5.37","5.38","5.39","9.1","9.4","10.4","10.5","10.6","10.7","10.13","10.16","11.6","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.7","13.8","13.16","13.21","13.28","13.29","15.3","15.7","15.8","15.9","15.13","15.16","15.20","15.21","15.24","15.26","15.27","15.28","15.29","15.30","15.31","15.32","15.33","15.37","19.4","25.11","28.13","29.0","29.2","30.4","30.38","30.48","39.13","41.3","41.5","41.7","41.8","41.9","41.12","41.13","41.17","41.18","41.20","41.21","41.22","41.23","41.24","41.25","41.27","41.32","41.33","41.37","41.39","41.41","41.43","41.44","41.46","41.47"],"document":["0.3","30.1"],"queryselector":["0.3"],"assets":["0.4","5.41","6.2","6.3","6.4","6.5","7.3","7.4","7.5","9.2","9.6","9.7","10.2","15.11","15.15","16.2","16.3","16.4","16.5","17.3","17.4","17.5","19.2","19.6","19.7","25.5","30.29","30.45","36.5","36.10","41.2","41.29","41.42"],"sample":["0.4","5.41","6.2","6.3","6.4","6.5","7.3","7.4","7.5","9.2","9.7","10.2","12.0","15.15","16.2","16.3","16.4","16.5","17.3","17.4","17.5","19.2","19.7","25.5","30.29","36.5","41.2","41.29","41.42"],"video":["0.4","5.41","6.2","6.3","6.4","6.5","7.3","7.5","8.2","8.3","8.5","9.2","9.7","10.2","11.5","12.11","13.1","15.5","16.2","16.3","16.4","16.5","17.3","17.5","18.2","18.3","18.5","19.2","19.7","21.0","22.0","25.5","30.13","30.15","30.29","30.44","31.3","32.0","33.0","35.4","36.5","41.2"],"mp4":["0.4","6.3","6.4","6.5","7.3","7.5","8.2","8.3","8.5","9.2","9.3","9.7","9.8","12.0","16.3","16.4","16.5","17.3","17.5","18.2","18.3","18.5","19.2","19.3","19.7","19.8","20.3","25.5","30.2","31.3","35.4","41.2"],"test":["0.4"],"foo":["0.4"],"bar":["0.4","13.15","13.32","30.6","30.8","30.17","30.22","30.23"],"const":["0.4","9.5","19.5","31.9"],"console":["1.1","2.0","12.0","25.15","36.15"],"info":["2.0","12.0","25.15","36.15"],"只监听一次事件":["2.0"],"但估计没有足够的数据来支撑播放到结束":["2.40"],"渲染完成":["2.42"],"属性的值改变时触发":["2.43"],"当这个":["2.44"],"因为":["2.45"],"或者资源类型不是受支持的媒体格式":["2.46"],"中的首帧已经完成加载":["2.47"],"播放准备开始":["2.51"],"seek":["2.54","2.55","12.54","12.55","13.24","15.14"],"user":["2.56"],"属性指定的时间发生变化":["2.58"],"播放已停止":["2.60"],"也是指挂载在":["3.0"],"构造函数":["3.0"],"div":["3.30","5.4","5.35","5.36","5.38","9.4","10.4","10.6","10.7","10.13","10.16","11.9","11.12","12.1","12.2","12.5","12.11","12.12","12.31","12.32","12.34","12.35","12.36","13.2","13.3","13.4","13.5","13.6","13.7","13.8","13.9","13.10","13.16","13.21","13.25","13.27","13.28","13.31","15.3","15.5","15.6","15.8","15.9","15.10","15.12","15.13","15.16","15.17","15.18","15.20","15.22","15.23","15.24","15.25","15.27","15.28","15.29","15.31","15.32","15.33","15.37","15.39","19.4","25.11","30.4","30.9","30.13","30.24","30.27","30.33","30.41","30.48","41.6","41.12","41.14","41.15","41.16","41.18","41.20","41.22","41.23","41.24","41.26","41.27","41.32","41.33","41.37","41.39","41.40","41.41","41.43","41.46","41.47"],"组件唯一名称":["6.1","8.1"],"用于标记类名":["6.1","8.1"],"index":["6.1","7.5","8.1","16.1","17.5","18.1","25.6","25.8","25.9","25.11","25.12","25.13","25.14","36.6","36.8","36.11","36.13","39.11"],"number":["6.1","7.1","8.1","16.1","18.1"],"contextmenu":["6.4","6.5","16.4","16.5"],"name":["6.5","7.5","9.8","16.5","17.5","19.8","30.32"],"组件索引":["7.1"],"用于显示的优先级":["7.1"],"html":["7.1","7.2","9.3","9.8","15.4","17.1","17.2","19.3","19.8","20.3","28.1","28.8","28.9","30.26","30.32","35.4","39.9"],"element":["7.1","13.30","15.31","17.1"],"position":["7.2","7.5","17.2","17.5"],"left":["7.2","13.24","17.2"],"tooltip":["7.2","9.8","17.2","19.4","19.5","19.8"],"style":["7.2","9.2","17.2","30.36","41.36"],"color":["7.2","15.33","17.2"],"red":["7.2","17.2"],"click":["7.2","13.17","13.18","17.2"],"function":["7.2","17.2","19.4","21.0","22.0","23.0","30.17","30.34","30.40","31.10","32.0","33.0","34.0","41.34"],"args":["7.2","17.2"],"controls":["7.3","7.5","17.3","17.5"],"add":["7.3","17.3"],"button1":["7.5","17.5"],"png":["8.4","18.4","30.28","41.28"],"setting":["9.2","9.3","9.7","9.8","19.2","19.3","19.7","19.8","25.5"],"true":["9.2","9.3","9.7","9.8","13.17","13.18","13.19","13.31","19.2","19.3","19.7","19.8","25.4","25.5","35.4","36.4"],"settings":["9.2","9.3","9.8","19.2","19.3","19.8","30.14","30.16","30.18","30.24"],"subtitle":["9.2","19.2"],"01":["9.2","9.3","19.2"],"default":["9.2","11.12","13.2","13.9","13.10","13.11","13.12","13.13","13.15","13.17","13.18","13.22","13.24","13.25","13.31","19.2"],"span":["9.2"],"multi":["9.3","19.3"],"level":["9.3","13.0","19.3"],"selector":["9.3","19.3"],"提示文本":["9.4"],"value":["9.5","30.11"],"min":["9.5","21.0","22.0","32.0","33.0"],"flip":["9.7","19.1","19.7"],"slider":["9.8","19.8"],"5x":["9.8","19.8"],"icon":["9.8","19.8"],"refer":["10.0","15.0"],"to":["10.0","10.8","11.0","11.1","12.51","12.56","13.3","13.7","13.8","13.20","13.24","15.0","15.4","15.14","20.11","31.3","39.7"],"used":["10.3","13.32","15.35","15.36","16.1","17.1","18.1","30.3"],"hover":["10.3"],"custom":["10.3"],"loadimg":["10.3"],"delete":["10.4"],"clear":["10.4"],"object":["10.6","41.11"],"updating":["10.8"],"show":["10.8","10.9","10.10","10.15"],"property":["10.8","10.9","10.15"],"set":["10.8","10.9","10.15"],"whether":["10.9","10.15"],"display":["10.9","17.1","30.17"],"update":["10.10"],"attribute":["10.10","10.12"],"method":["10.11"],"switch":["10.11"],"toggle":["10.12","10.14"],"the":["11.0","12.43","13.1","15.0","15.5","15.12","24.4","28.10","30.8","30.25","30.26","30.37","30.43","30.44"],"want":["11.1"],"manage":["11.1"],"multiple":["11.1"],"players":["11.1"],"player":["11.2","11.3","11.4","11.7","11.11","15.28","15.29","15.37","15.38","15.39","30.5","30.12","30.21","30.25","30.26"],"options":["11.7","11.9","11.12","30.36"],"event":["11.8","12.0","19.4","30.4","39.12"],"dispatcher":["11.8"],"for":["11.9","11.11","13.22","13.32","16.1","18.1","30.3","30.6","30.40"],"type":["11.10"],"checking":["11.10"],"on":["12.0","13.23","19.5","25.15","30.20","30.27","30.43","30.44","36.15"],"canplay":["12.0"],"listen":["12.0"],"an":["12.0"],"only":["12.0","30.3","30.14","30.21","30.47"],"once":["12.0"],"first":["12.1","12.47","13.0"],"time":["12.1","12.58"],"mouse":["12.12"],"hidden":["12.36"],"file":["12.40","20.11"],"but":["12.40","15.10","15.14"],"estimates":["12.40"],"there":["12.40"],"it":["12.41","15.14","30.15"],"can":["12.41","15.38","20.11","28.9","30.11","30.40"],"play":["12.41"],"rendering":["12.42"],"when":["12.43","12.44"],"this":["12.44","30.11"],"has":["12.44","12.45","12.48","12.49","12.50","12.60"],"stopped":["12.45"],"while":["12.46","12.52","14.0"],"fetching":["12.46"],"media":["12.46"],"frame":["12.47","15.16","15.17","15.18"],"start":["12.51"],"triggered":["12.52"],"playback":["12.53","15.12","30.3","30.8"],"is":["12.56","13.5","13.6","13.9","13.10","13.13","13.15","13.16","13.17","13.18","13.21","13.25","13.31","15.14","15.37","15.38","30.2","30.5"],"trying":["12.56"],"data":["12.57","25.11"],"specified":["12.58"],"changed":["12.59"],"properties":["13.0"],"mounted":["13.0"],"in":["13.1","13.12","13.14","13.15","13.20","13.26","15.6","28.8","30.2","30.11","30.14","30.15","30.16","30.18","30.24","30.33","30.46"],"events":["13.1"],"of":["13.1","13.11","13.12","13.23","14.0","15.39","24.4","30.12","30.35"],"by":["13.1","13.2","30.44"],"enabled":["13.2"],"milliseconds":["13.3","13.12","13.14","13.15","13.20"],"defaults":["13.3","13.20","13.30"],"pixels":["13.5","13.6"],"feature":["13.10"],"seconds":["13.11","13.26","15.5","15.6","30.33"],"with":["13.11","13.12","15.35","15.36","30.3"],"a":["13.11","13.12","13.13","13.14","14.0","15.17","15.18"],"connection":["13.13","13.14"],"error":["13.13","13.14"],"occurs":["13.13","13.14"],"measured":["13.15"],"double":["13.17","13.18"],"long":["13.22","30.44"],"pressing":["13.22","30.44"],"mobile":["13.23","30.27","30.43"],"delay":["13.23"],"and":["13.24","30.5","30.6","30.8","30.25"],"right":["13.24"],"keyboard":["13.26"],"shortcuts":["13.26"],"under":["13.30"],"mainly":["13.32"],"smooth":["13.32"],"progress":["13.32","15.12","30.6","30.8"],"here":["14.0"],"translation":["14.0"],"provided":["14.0"],"text":["14.0","19.4","19.5","30.33"],"into":["14.0","30.37"],"english":["14.0"],"preserving":["14.0"],"markdown":["14.0"],"formatting":["14.0"],"that":["14.0"],"allows":["14.0"],"loading":["14.0"],"after":["14.0","15.4"],"instantiation":["14.0"],"remove":["15.4"],"s":["15.4","15.23","17.1","30.26"],"from":["15.8","20.8","20.9","28.1","31.8","31.11","40.2"],"performs":["15.10"],"some":["15.10","30.47"],"optimization":["15.10"],"operations":["15.10"],"will":["15.12","20.6","29.0","30.15","30.16","30.37"],"carry":["15.12"],"over":["15.12"],"previous":["15.12"],"similar":["15.14","30.4"],"does":["15.14","30.39"],"which":["15.17","15.18","15.38","20.11","29.1","30.2","30.11"],"returns":["15.17","15.18"],"promise":["15.17","15.18"],"full":["15.20","26.1","27.1","30.46"],"screen":["15.20","30.46"],"before":["15.22","30.5","30.26"],"starts":["15.22"],"playing":["15.22"],"mode":["15.23"],"its":["15.25"],"size":["15.25"],"normal":["15.27"],"horizontal":["15.27"],"vertical":["15.27"],"commonly":["15.35","15.36"],"be":["15.37","30.21","30.37"],"destroyed":["15.37"],"limited":["15.38"],"within":["15.38","28.7"],"current":["15.38","20.5","31.5"],"marking":["16.1","18.1"],"class":["16.1","18.1"],"priority":["17.1"],"items":["19.1"],"playbackrate":["19.1"],"aspectratio":["19.1"],"subtitleoffset":["19.1"],"onswitch":["19.4"],"completion":["19.5"],"onchange":["19.5"],"change":["19.5"],"install":["20.1","31.1"],"head":["20.3"],"title":["20.3"],"demo":["20.3"],"if":["20.5","23.0","31.5","34.0"],"typeof":["20.5","31.5"],"return":["20.5"],"let":["20.10"],"null":["20.10"],"parameters":["20.10"],"use":["20.11"],"legacy":["20.11"],"up":["20.11"],"ie":["20.11","31.11"],"plaympd":["21.0","32.0"],"playflv":["22.0","33.0"],"playm3u8":["23.0","34.0"],"plugin":["24.2","24.3","25.2","25.3","25.8","25.9","25.11","25.12","25.13","25.14","26.2","26.3","27.2","27.3","28.3","28.4","35.2","35.3","36.2","36.3","36.11","37.2","37.3","38.2","38.3","39.3","39.4"],"ads":["24.2","35.2"],"npm":["24.3","25.3","26.3","27.3","28.4","35.3","36.3","37.3","38.3","39.4"],"img":["24.4"],"src":["24.4"],"poster":["24.4"],"jpg":["24.4"],"test1":["24.4"],"redirect":["24.4"],"no":["24.4","29.0"],"redirection":["24.4"],"empty":["24.4"],"danmuku":["25.2","25.8","25.9","25.12","25.13","25.14","36.2","36.6","36.8"],"滚动":["25.4","36.4"],"静止":["25.4","36.4"],"margin":["25.4","36.4"],"弹幕上下边距":["25.4","36.4"],"antioverlap":["25.4","36.4"],"是否防重叠":["25.4","36.4"],"useworker":["25.4","36.4"],"是否使用":["25.4","36.4"],"web":["25.4","36.4"],"worker":["25.4","36.4"],"plugins":["25.5","35.4"],"libs":["25.8","25.11","25.12"],"uncompiled":["25.8","25.11","25.12","25.13","25.14"],"emit":["25.15","36.15"],"danmu":["25.15","36.15"],"新增弹幕":["25.15","36.15"],"loaded":["25.15","36.15"],"dash":["26.2","26.3","37.2","37.3"],"quality":["26.2","26.3","27.2","27.3","37.2","37.3","38.2","38.3"],"hls":["27.2","27.3","38.2","38.3"],"cross":["28.1"],"domain":["28.1"],"iframe":["28.1","28.3","28.5","28.12","39.1","39.3","39.5","39.8"],"page":["28.1","30.21"],"charset":["28.5","39.5"],"utf":["28.5","39.5","41.36"],"body":["28.5","39.5"],"id":["28.5","29.2","39.5"],"asynchronously":["28.7"],"retrieve":["28.7"],"values":["28.7"],"receive":["28.11","30.40"],"message":["28.12","39.12"],"即可":["28.13","39.13"],"group":["28.13","39.13"],"doctype":["28.13","39.13"],"core":["29.0"],"longer":["29.0"],"do":["29.1"],"not":["29.1","30.2","30.39"],"require":["29.1"],"manual":["29.1"],"manually":["29.2"],"imported":["29.2"],"include":["29.2"],"cs":["29.2"],"es":["29.2"],"fa":["29.2"],"fr":["29.2"],"pl":["29.2"],"ru":["29.2"],"zh":["29.2","30.41"],"tw":["29.2"],"sometimes":["30.2","30.39"],"known":["30.2"],"so":["30.2"],"quickly":["30.2"],"case":["30.2"],"you":["30.2"],"remembering":["30.3"],"initialized":["30.5"],"highlight":["30.6"],"often":["30.11"],"results":["30.11"],"black":["30.11"],"bars":["30.11"],"scrolls":["30.12"],"out":["30.12"],"currently":["30.14","30.47"],"available":["30.14"],"panel":["30.14","30.16","30.18","30.24"],"appear":["30.15","30.16"],"menu":["30.17"],"bottom":["30.17","30.18","30.20","30.43"],"control":["30.17","30.20","30.22","30.23"],"button":["30.20"],"should":["30.21"],"one":["30.21"],"at":["30.22","30.23"],"appearing":["30.24"],"loses":["30.25"],"focus":["30.25"],"pre":["30.26"],"render":["30.26"],"required":["30.26"],"devices":["30.27"],"boolean":["30.32"],"string":["30.32","30.33"],"myplugin":["30.34","41.34"],"column":["30.35"],"columns":["30.35"],"width":["30.35","41.35"],"encoding":["30.36","41.36"],"directly":["30.37"],"written":["30.37"],"such":["30.39"],"m3u8":["30.39"],"mkv":["30.39"],"ts":["30.39"],"however":["30.39"],"have":["30.39"],"party":["30.40"],"program":["30.40"],"processing":["30.40"],"en":["30.41"],"cn":["30.41","41.41"],"hide":["30.43"],"pages":["30.46"],"according":["30.46"],"browsers":["30.47"],"support":["30.47"],"path":["31.3","39.7"],"ref":["31.4"],"artref":["31.4"],"时会自动导入的":["31.6"],"types":["31.9"],"param":["31.10"],"getinstance":["31.10"],"可以兼容到":["31.11"],"import":["31.11","40.2"],"autosize":["35.4"],"fullscreen":["35.4"],"fullscreenweb":["35.4"],"artplayerpluginads":["35.4"],"html广告":["35.4"],"假如是视频广告则忽略该值":["35.4"],"接收来自":["39.8"],"无法与":["39.9"],"提示":["39.10"],"版本开始":["40.0"],"核心代码除了包含":["40.0"],"zhtw":["40.2"],"高亮元素":["41.6"],"上":["41.6"],"类似":["41.11"],"css":["41.11"],"的":["41.11"],"fit":["41.11"],"里":["41.14","41.15","41.16","41.24"],"访问到播放器所需的":["41.26"],"layer":["41.28"],"画质地址":["41.32"],"预览图列数":["41.35"],"预览图宽度":["41.35"],"height":["41.35"],"预览图高度":["41.35"],"字幕样式":["41.36"],"字幕编码":["41.36"],"默认":["41.36"],"所以需要特别指明":["41.39"],"元素":["41.40"],"视频地址":["41.40"],"当前实例":["41.40"]},{"0":["13.24","19.5"],"1":["3.28","9.2","13.28","19.2","25.5"],"2":["3.28","9.5","13.28","19.5","41.3"],"3":["9.5","13.22"],"4":["9.1","29.1","30.17","30.33","30.48","31.10","41.5","41.7","41.8","41.9","41.13","41.17","41.21","41.24","41.25","41.32","41.33","41.37","41.39","41.41","41.44"],"5":["13.13","13.24","13.26","39.7"],"6":["5.38","5.39","12.3","12.4","12.5","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","31.10"],"7":["5.4","5.5","5.6","5.9","5.16","5.17","5.18","5.23","5.35","5.36","12.19","12.21","12.22","12.24","12.25","15.9","15.26","41.37"],"8":["5.8","5.14","5.24","5.25","5.27","5.37","12.17","15.1","15.8","15.13","15.20","15.24","15.27","15.28","15.29","15.31","15.32","15.33","15.37","20.3","28.13","30.36","39.13","41.36"],"9":["5.10","5.12","15.10","15.22"],"10":["5.7","5.37","7.3","7.4","12.2","12.6","12.18","15.7","15.11","15.37","17.3","17.4","19.5"],"11":["15.3","15.20","20.11"],"14":["41.32"],"17":["14.0"],"22":["9.8","19.8"],"25":["30.33","41.33"],"40":["3.6"],"50":["25.4","36.4"],"100":["3.9"],"111":["25.5","36.5"],"150":["9.3","19.3"],"300":["3.4","3.5"],"500":["3.7","3.8","3.16"],"1000":["13.14"],"3000":["13.12","13.15"],"实例":["0.0","5.0"],"artplayer":["0.1","0.5","0.6","0.8","0.9","0.10","0.11","0.12","0.14","1.1","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.24","2.25","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.1","3.2","3.3","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","3.16","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.30","3.31","3.32","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.19","5.20","5.21","5.24","5.26","5.27","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.37","5.40","9.1","9.4","10.4","10.5","10.6","10.7","10.13","10.16","11.6","12.2","12.6","12.18","12.20","12.23","12.27","12.28","12.29","13.4","13.7","13.8","13.16","13.21","13.27","13.28","13.29","15.2","15.21","15.26","15.34","15.37","15.40","19.4","20.2","28.7","28.13","30.4","30.38","31.2","39.13","40.1","41.10","41.19","41.33","41.38","41.39","41.45","41.48"],"container":["0.1","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.14","0.15","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.28","2.29","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","5.2","5.3","5.8","5.10","5.12","5.13","5.15","5.19","5.20","5.21","5.22","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.37","5.40","9.4","10.1","10.3","10.4","10.5","10.6","10.7","10.13","10.16","12.20","12.23","12.27","12.28","12.29","13.19","15.2","15.21","15.26","15.37","15.40","19.4","25.6","25.7","25.8","25.9","25.11","25.12","28.7","30.4","30.38","31.9","36.7","36.8","36.11","36.13","36.14","40.1","40.2","41.10","41.19","41.30","41.33","41.38","41.45","41.48"],"app":["0.1","0.3","0.5","0.6","0.7","0.8","0.9","0.10","0.15","0.16","2.2","2.6","2.17","2.18","2.20","2.23","2.27","2.28","2.29","5.11","5.15","5.19","5.21","5.22","5.26","5.30","5.31","5.40","9.4","10.1","10.4","10.5","10.6","10.13","12.30","13.19","15.19","15.21","15.30","15.37","15.40","19.4","20.5","25.6","25.7","25.8","25.9","25.11","25.12","28.7","29.3","29.4","30.4","30.7","30.10","30.30","30.31","30.38","30.42","31.4","31.9","36.7","36.8","36.11","36.12","36.14","40.3","41.1","41.19","41.30","41.31","41.38","41.45"],"assets":["0.2","0.3","0.6","0.7","0.10","0.13","0.15","0.16","2.2","2.27","2.30","5.11","5.22","5.40","9.4","10.1","10.4","10.6","10.13","12.30","13.19","15.19","15.21","15.30","15.41","25.7","25.9","25.10","25.11","25.12","29.3","29.4","30.1","30.4","30.7","30.10","30.19","30.30","30.31","30.42","36.7","36.8","36.9","36.11","36.12","40.3","40.4","41.1","41.4","41.30","41.31"],"sample":["0.2","0.3","0.6","0.13","0.15","0.16","2.2","2.27","2.30","5.11","5.22","9.4","9.6","10.1","10.4","10.6","10.13","12.30","13.19","15.11","15.19","15.21","15.30","15.41","19.6","25.7","25.9","25.10","25.11","25.12","29.4","30.1","30.4","30.7","30.10","30.19","30.30","30.31","30.42","30.45","36.7","36.9","36.10","36.11","36.12","40.4","41.4","41.30","41.31"],"video":["0.2","0.3","0.13","0.15","0.16","2.30","5.11","7.4","8.4","9.4","9.6","10.4","10.6","10.13","12.30","13.19","15.19","15.21","15.41","17.4","18.4","19.6","25.7","25.9","25.10","28.7","29.4","30.1","30.7","30.10","30.19","30.28","30.30","30.31","30.42","30.45","30.46","36.7","36.9","36.10","36.11","36.12","39.7","40.4","41.4","41.28","41.29","41.31","41.42"],"mp4":["0.2","0.13","0.16","2.30","5.11","5.41","6.2","7.4","8.4","9.4","9.6","10.2","10.4","12.30","15.11","15.15","15.19","15.21","15.30","15.41","16.2","17.4","18.4","19.6","25.9","25.10","28.7","30.1","30.4","30.7","30.10","30.19","30.28","30.29","30.30","30.31","30.42","30.45","36.5","36.9","36.10","36.11","36.12","39.7","40.4","41.4","41.28","41.29","41.42"],"console":["0.2","0.4","1.6","7.2","10.2","11.6","15.15","17.2","28.12","30.34","39.12","41.34"],"info":["0.2","0.4","1.1","7.2","10.2","11.6","15.15","17.2","28.12","30.34","39.12","41.34"],"art":["0.3","0.8","0.9","0.11","0.12","0.14","2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.13","2.14","2.15","2.19","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.39","3.4","3.5","3.6","3.29","5.1","5.2","5.3","5.5","5.6","5.7","5.8","5.9","5.13","5.14","5.16","5.17","5.18","5.20","5.23","5.24","5.25","5.27","5.28","5.29","5.31","5.32","5.33","5.34","9.1","10.4","10.5","10.6","10.7","10.13","10.16","12.2","12.3","12.4","12.6","12.7","12.8","12.9","12.10","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.38","12.39","15.1","15.2","15.3","15.7","15.9","15.13","15.22","15.26","15.28","15.29","15.31","15.32","15.33","15.34","19.4","22.0","25.6","25.8","25.11","25.12","25.13","25.14","28.7","30.4","30.34","30.38","30.48","33.0","36.6","36.8","36.13","36.14","40.2","41.5","41.7","41.10","41.17","41.32","41.33","41.39","41.48"],"new":["0.3","0.5","0.8","0.9","0.10","0.11","0.12","0.14","2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.19","2.21","2.22","2.24","2.25","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.4","3.29","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.24","5.25","5.26","5.27","5.28","5.29","5.30","5.31","5.32","5.33","5.34","9.1","9.4","10.4","10.5","10.6","10.7","10.13","10.16","12.2","12.6","12.7","12.8","12.10","12.16","12.17","12.18","12.20","12.21","12.22","12.23","12.25","12.27","12.28","12.29","13.19","15.1","15.2","15.7","15.22","15.26","15.31","15.32","15.34","15.40","19.4","23.0","25.6","25.8","25.9","25.11","25.13","25.14","28.7","30.4","30.38","34.0","36.6","36.8","36.13","36.14","40.1","40.2","41.7","41.10","41.19","41.33","41.38","41.39","41.45","41.48"],"url":["0.3","0.6","0.7","0.9","0.10","0.13","0.15","0.16","2.2","2.18","2.23","2.27","2.28","2.29","2.30","5.19","5.22","5.30","5.40","8.4","9.4","10.1","10.4","10.6","10.13","12.30","13.19","15.19","15.21","15.30","15.40","18.4","19.4","25.7","25.9","25.10","25.11","25.12","28.7","29.3","29.4","30.1","30.4","30.7","30.10","30.30","30.31","30.40","30.42","36.7","36.8","36.9","36.11","36.12","40.3","40.4","41.1","41.4","41.30","41.31","41.38","41.45"],"function":["0.13","6.5","16.5","17.1","20.10","41.36"],"构造函数":["1.0"],"var":["1.1","3.4","3.5","3.6","3.16","3.29","5.1","5.5","5.6","5.7","5.8","5.9","5.10","5.12","5.14","5.16","5.17","5.18","5.20","5.23","5.24","5.25","5.27","5.35","5.36","5.37","5.39","9.1","10.3","10.4","10.6","10.7","10.13","10.16","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.31","12.32","12.33","12.34","12.35","12.37","12.38","12.39","13.29","15.1","15.3","15.7","15.8","15.9","15.13","15.20","15.22","15.24","15.26","15.27","15.28","15.29","15.31","15.32","15.33","15.34","15.37","19.4","25.8","25.11","25.12","25.13","25.14","29.1","30.4","30.33","30.38","30.48","36.6","36.13","40.2","41.3","41.5","41.7","41.17","41.24","41.32","41.33","41.39","41.48"],"js":["1.6","3.1","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.30","3.31","3.32","5.4","5.5","5.6","5.14","5.23","5.27","5.35","5.36","5.38","5.39","10.3","10.7","10.16","11.6","12.1","12.2","12.3","12.4","12.5","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.19","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.21","13.27","13.28","13.29","15.3","15.6","15.7","15.8","15.9","15.10","15.12","15.13","15.16","15.17","15.18","15.20","15.22","15.24","15.25","15.27","15.28","15.29","15.31","15.32","15.33","15.37","19.4","29.1","30.17","30.33","30.41","30.48","41.3","41.5","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.17","41.18","41.20","41.21","41.22","41.23","41.24","41.25","41.26","41.27","41.32","41.37","41.39","41.41","41.43","41.44","41.46","41.47"],"code":["1.11","9.5","10.3","12.1","13.2","13.3","13.5","13.6","13.9","13.10","13.11","13.12","13.13","13.15","13.17","13.18","13.20","13.22","13.25","13.27","13.30","13.31","13.32","15.5","15.6","15.10","15.12","15.14","15.17","15.18","15.22","15.23","15.25","15.35","15.36","15.39","19.1","20.11","30.3","30.6","30.8","30.9","30.13","30.17","30.20","30.22","30.23","30.24","30.27","30.32","30.33","30.37","30.39","30.41","31.11","41.6","41.11","41.14","41.15","41.16","41.26","41.35","41.40"],"once":["2.0"],"subtitle":["2.30","7.2","7.5","17.2","17.5"],"不必停下来进一步缓冲内容":["2.40"],"media":["2.44","2.45","12.41","12.56"],"已经加载完成":["2.44"],"操作完成":["2.54"],"操作开始":["2.55"],"agent":["2.56"],"的":["3.0"],"false":["3.2","13.30","20.5","25.4","31.5","36.4"],"add":["4.0","6.3","8.3","14.0","24.2","25.2","26.2","27.2","28.3","35.2","36.2","37.2","38.2","39.3"],"例如我想写一个在视频暂停后":["4.0"],"显示一个图片广告的插件":["4.0"],"on":["5.11","13.0","15.11","15.15","15.30"],"document":["5.37","10.3","15.37","41.1"],"queryselector":["5.37","10.3","15.37","30.1","41.1"],"default":["5.41","7.5","13.1","13.14","13.26","15.41","17.5","31.10"],"true":["5.41","7.5","9.6","15.4","15.41","17.5","19.6","30.4","30.29","30.45","36.5","41.4","41.29","41.36"],"html":["5.41","6.1","6.2","6.3","6.4","6.5","7.3","7.5","8.1","8.2","8.3","8.5","9.7","15.41","16.1","16.2","16.3","16.4","16.5","17.3","17.5","18.1","18.2","18.3","18.5","19.7","30.28","30.29","30.36","31.3","39.11","41.28","41.29","41.36"],"sd":["5.41","15.41"],"480p":["5.41"],"组件索引":["6.1","8.1"],"用于显示的优先级":["6.1","8.1"],"contextmenu":["6.2","6.3","16.2","16.3"],"name":["6.2","6.3","6.4","7.3","7.4","8.2","8.3","8.4","8.5","9.7","16.2","16.3","16.4","17.3","17.4","18.2","18.3","18.4","18.5","19.7","30.28","30.34","41.28","41.34"],"your":["6.2","6.3","6.4","6.5","7.3","16.2","16.3","16.4","16.5","17.3","30.45","41.42"],"menu":["6.2","6.3","6.4","6.5","16.2","16.3","16.4","16.5","30.14","30.15","30.16"],"click":["6.4","6.5","16.4","16.5","17.1"],"args":["6.5","16.5"],"组件的":["7.1"],"dom":["7.1","17.1","30.40"],"元素":["7.1"],"style":["7.1","8.2","8.3","8.5","17.1","18.2","18.3","18.5","19.2","30.28"],"object":["7.1","17.1"],"mounted":["7.2","17.2"],"button1":["7.3","7.4","17.3","17.4"],"index":["7.3","7.4","17.3","17.4","28.1","28.8"],"position":["7.3","15.19","17.3"],"left":["7.3","17.3"],"controls":["7.4","15.19","17.4"],"right":["7.5","15.19","17.5"],"selector":["7.5","17.5","30.29","41.29"],"01":["7.5","17.5","19.3"],"layers":["8.2","8.3","8.4","8.5","18.2","18.3","18.4","18.5"],"potser":["8.2","8.3","8.5","41.28"],"width":["8.2","8.3","8.5","9.3","9.8","18.2","18.3","18.5","19.3","19.8","30.28"],"100px":["8.2","8.3","8.5","18.2","18.3","18.5","30.28"],"src":["8.2","8.5","9.8","18.2","18.5","19.8","35.4"],"color":["9.2","19.2"],"red":["9.2","19.2"],"srt":["9.2","19.2"],"id":["9.2","19.2","30.45"],"yellow":["9.2","19.2"],"02":["9.2","19.2"],"setting":["9.4","9.6","19.6","30.29","36.5","41.29"],"max":["9.5","19.5"],"step":["9.5"],"div":["9.5","10.3","10.11","10.12","10.14","11.1","11.2","11.3","11.4","11.5","11.7","11.8","11.10","11.11","13.1","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.24","13.26","13.30","13.32","15.4","15.14","15.35","15.36","19.1","20.3","20.5","30.3","30.5","30.6","30.8","30.12","30.14","30.15","30.16","30.17","30.18","30.20","30.22","30.23","30.25","30.32","30.35","30.37","30.39","30.43","30.44","30.47","31.5","41.11","41.35"],"classname":["9.5","10.3","10.14","11.1","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","13.3","13.5","13.6","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.24","13.25","13.26","13.30","13.32","15.12","15.14","15.17","15.18","15.35","15.36","19.1","30.3","30.5","30.6","30.8","30.12","30.14","30.16","30.17","30.18","30.20","30.22","30.23","30.24","30.25","30.27","30.32","30.35","30.37","30.39","30.43","30.44","30.47","41.11","41.35","41.40"],"run":["9.5","10.3","11.1","11.2","11.3","11.4","11.5","11.8","11.9","11.10","11.12","13.2","13.3","13.5","13.6","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.24","13.25","13.26","13.30","13.31","13.32","15.5","15.10","15.12","15.14","15.17","15.18","15.23","15.35","15.36","15.39","19.1","30.3","30.5","30.6","30.8","30.12","30.14","30.16","30.17","30.18","30.20","30.22","30.23","30.24","30.25","30.27","30.32","30.35","30.37","30.39","30.43","30.47","41.11","41.26","41.35","41.40"],"settings":["9.7","19.7","30.15"],"slider":["9.7","19.7"],"tooltip":["9.7","19.7"],"5x":["9.7","19.7"],"icon":["9.7","19.7"],"img":["9.8","19.8","35.4"],"heigth":["9.8","19.8"],"state":["9.8","19.8"],"svg":["9.8","19.8"],"secondary":["10.0"],"attributes":["10.0"],"listen":["10.3"],"load":["10.3"],"of":["10.3","10.9","10.14","12.47"],"images":["10.3"],"test":["10.4"],"foo":["10.4"],"bar":["10.4","30.18","30.20","30.43"],"const":["10.4","20.8","20.9","21.0","22.0","23.0","31.8","32.0","33.0","34.0"],"whether":["10.8","10.10","30.36"],"display":["10.8","10.15","16.1","18.1"],"all":["10.8","10.9","10.10","10.15"],"or":["10.8","12.44","12.46","24.4"],"not":["10.8","12.40","15.14"],"toggle":["10.8","10.9","10.10","10.15"],"set":["10.10","30.2"],"options":["10.11"],"items":["10.15"],"first":["11.0"],"level":["11.0"],"at":["11.1","30.21"],"the":["11.1","12.52","39.7"],"same":["11.1","15.38"],"time":["11.1","25.5","30.8","30.21"],"is":["12.40","12.42","13.1","13.14","13.22","13.24","24.4","30.25"],"enough":["12.40"],"value":["12.43","19.5","24.4"],"been":["12.44","12.48","12.49"],"completely":["12.44"],"loaded":["12.44"],"because":["12.45"],"data":["12.46","31.10"],"started":["12.50"],"following":["12.51"],"a":["12.51","30.21"],"rate":["12.53"],"frame":["12.54","12.55"],"fetch":["12.56"],"loading":["12.57"],"by":["12.58"],"stopped":["12.60"],"constructor":["13.0"],"property":["13.0"],"turned":["13.1"],"off":["13.1"],"long":["13.23"],"press":["13.23"],"acceleration":["13.23"],"effects":["13.32"],"primary":["15.0"],"destruction":["15.4"],"which":["15.4","24.4"],"defaults":["15.4"],"ready":["15.11","15.15","15.30"],"seek":["15.11","39.7"],"settimeout":["15.11"],"trigger":["15.14"],"additional":["15.14"],"events":["15.14"],"timeupdate":["15.35","15.36"],"event":["15.35","15.36","28.12"],"prevent":["15.38"],"errors":["15.38"],"due":["15.38"],"having":["15.38"],"priority":["16.1","18.1"],"element":["16.1","18.1","30.37","30.40"],"poster":["18.2","18.3","18.5","30.28","35.4"],"span":["19.2"],"min":["19.5"],"yarn":["20.1","24.2","25.2","26.2","27.2","28.3","31.1","35.2","36.2","37.2","38.2","39.3"],"npm":["20.2","31.2"],"dist":["20.2","20.11","24.3","25.3","26.3","27.3","28.4","31.2","31.11","35.3","36.3","37.3","38.3","39.4"],"meta":["20.3","28.13","39.13"],"charset":["20.3","28.13","39.13"],"utf":["20.3","28.13","30.36","39.13"],"body":["20.3"],"class":["20.3"],"get":["20.4","39.7"],"instance":["20.4"],"getinstance":["20.4","20.10"],"destroy":["20.5","21.0","22.0","23.0","31.5","32.0","33.0","34.0"],"ref":["20.5","31.5"],"automatically":["20.6","30.11"],"types":["20.9"],"param":["20.10"],"properties":["20.10"],"import":["20.11","29.1","29.2"],"from":["20.11","28.11","29.2"],"group":["20.11","29.2","31.11"],"bash":["20.11","31.11"],"if":["21.0","22.0","32.0","33.0"],"supportsmediasource":["21.0","32.0"],"mediaplayer":["21.0","32.0"],"create":["21.0","32.0"],"flvjs":["22.0","33.0"],"issupported":["22.0","23.0","33.0","34.0"],"loadsource":["23.0","34.0"],"ads":["24.3","35.3"],"http":["24.4"],"org":["24.4"],"duration":["24.4"],"that":["24.4"],"must":["24.4"],"be":["24.4","30.39"],"watched":["24.4"],"can":["24.4","30.2","30.26"],"t":["24.4"],"skipped":["24.4"],"in":["24.4"],"seconds":["24.4"],"this":["24.4","30.47"],"greater":["24.4"],"than":["24.4"],"danmuku":["25.3","36.3"],"synchronousplayback":["25.4","36.4"],"是否同步到播放速度":["25.4","36.4"],"filter":["25.4","36.4"],"danmu":["25.4","36.4"],"text":["25.4","25.5","36.4","36.5"],"length":["25.4","25.15","36.4","36.15"],"弹幕过滤函数":["25.4","36.4"],"返回":["25.4","36.4"],"则可以发送":["25.4","36.4"],"locktime":["25.4","36.4"],"artplayerplugindanmuku":["25.5","25.10","36.5","36.9","36.10","36.11","36.12"],"send":["25.5"],"plugins":["25.10","36.5","36.9","36.10","36.11","36.12"],"danmus":["25.15","36.15"],"加载弹幕":["25.15","36.15"],"error":["25.15","36.15"],"demo":["27.1"],"within":["28.1"],"for":["28.1"],"example":["28.1"],"iframe":["28.4","39.4","39.9"],"path":["28.7"],"no":["28.9"],"longer":["28.9"],"messages":["28.11"],"head":["28.13","31.3","39.13"],"title":["28.13","31.3","39.13"],"include":["29.0"],"other":["29.0"],"languages":["29.0"],"besides":["29.0"],"simplified":["29.0"],"chinese":["29.0"],"and":["29.0","30.14","30.15","30.16","30.46"],"english":["29.0"],"zhtw":["29.2"],"you":["30.1"],"may":["30.1"],"asynchronously":["30.2"],"autoplayback":["30.3"],"muted":["30.4","41.4"],"it":["30.5","30.39"],"starts":["30.5"],"playing":["30.5","30.25"],"elements":["30.6"],"adjust":["30.11"],"to":["30.11","30.21","30.36"],"hide":["30.11"],"browser":["30.12"],"viewport":["30.12","30.46"],"context":["30.14","30.15","30.16"],"panel":["30.15"],"control":["30.18","30.43"],"description":["30.19"],"allowed":["30.21"],"play":["30.21","41.42"],"bottom":["30.22","30.23"],"mounts":["30.26"],"access":["30.26"],"setting01":["30.29","41.29"],"return":["30.34","31.5","31.10","41.34"],"height":["30.35"],"escape":["30.36","41.36"],"boolean":["30.36","41.36"],"tags":["30.36"],"correct":["30.39"],"so":["30.39"],"needs":["30.39"],"specifically":["30.39"],"stated":["30.39"],"three":["30.40"],"parameters":["30.40"],"lang":["30.42","41.42"],"mobile":["30.44"],"devices":["30.44"],"warning":["30.45"],"size":["30.46"],"feature":["30.47"],"属性":["31.10"],"export":["31.10"],"jsdelivr":["31.11"],"jpg":["35.4"],"视频广告的地址":["35.4"],"test1":["35.4"],"广告跳转网址":["35.4"],"弹幕数组":["36.5"],"页面里的播放器":["39.1"],"如在":["39.1"],"的消息":["39.8"],"简体中文":["40.0"],"和":["40.0"],"英文":["40.0"],"有时候":["41.2"],"地址没那么快知道":["41.2"],"这时候你可以异步设置":["41.2"],"cover":["41.11"],"是否转义":["41.36"],"标签":["41.36"],"默认为":["41.36"],"onvttload":["41.36"],"用于修改":["41.36"]},{"0":["15.11","24.4"],"1":["3.24","9.8","19.8","36.5"],"2":["3.25","9.2","19.2","30.3"],"3":["3.27","13.27","19.5","41.1"],"4":["3.27","13.27","19.1","20.10","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.16","30.18","30.20","30.22","30.23","30.24","30.25","30.27","30.32","30.35","30.37","30.39","30.41","30.47","41.6","41.11","41.12","41.14","41.15","41.16","41.18","41.20","41.22","41.23","41.27","41.35","41.36","41.40","41.43","41.46","41.47"],"5":["3.22","3.28","9.8","13.28","19.8","28.7","30.7","35.4"],"6":["3.28","12.1","13.28","15.39","20.10","30.2","41.2"],"7":["15.5","15.6","15.16","15.17","15.18","15.23","15.35","15.36","30.37","41.26"],"8":["15.14","15.25","30.35","31.3","41.35","41.40"],"9":["15.12","30.28"],"10":["3.11","3.13","3.26","5.11","9.8","19.8"],"14":["30.32"],"20":["3.10"],"22":["9.4"],"40":["13.6"],"60":["25.4","36.4"],"100":["13.9","25.4","36.4"],"200":["25.4","36.4"],"300":["13.4","13.5"],"500":["3.20","13.7","13.8","13.16","25.4","36.4"],"1000":["13.23"],"2000":["3.21","3.23","13.21"],"3000":["3.14","15.11"],"5000":["3.3","3.12","3.15"],"的":["0.0","0.4","1.0","5.0"],"url":["0.1","0.5","0.8","0.12","0.14","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.19","2.20","2.21","2.22","2.24","2.25","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.4","3.29","5.1","5.2","5.3","5.7","5.8","5.12","5.13","5.14","5.15","5.17","5.18","5.20","5.21","5.24","5.26","5.27","5.28","5.29","5.31","5.32","5.33","5.34","9.1","9.5","10.3","10.5","10.7","10.16","12.2","12.6","12.7","12.8","12.10","12.16","12.17","12.18","12.20","12.21","12.22","12.23","12.24","12.25","12.27","12.28","12.29","15.1","15.2","15.3","15.7","15.8","15.13","15.22","15.26","15.27","15.28","15.29","15.31","15.32","15.33","15.34","15.37","20.9","25.6","25.8","25.13","25.14","29.2","30.17","30.33","30.38","30.48","31.9","36.6","36.13","36.14","40.1","40.2","41.7","41.10","41.19","41.33","41.39","41.48"],"assets":["0.1","0.5","0.8","0.9","0.11","0.12","0.14","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.28","2.29","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.29","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.19","5.20","5.21","5.24","5.26","5.27","5.28","5.29","5.30","5.31","5.32","5.33","5.34","9.1","9.5","10.3","10.5","10.7","10.16","12.2","12.6","12.17","12.18","12.20","12.23","12.27","12.28","12.29","15.2","15.13","15.22","15.26","15.29","15.31","15.32","15.34","15.37","15.40","19.4","20.9","25.6","25.8","25.13","25.14","29.2","30.17","30.33","30.38","30.39","31.9","36.6","36.13","36.14","40.1","40.2","41.10","41.19","41.32","41.33","41.38","41.39","41.45","41.48"],"sample":["0.1","0.5","0.7","0.8","0.9","0.10","0.11","0.12","0.14","2.6","2.11","2.12","2.16","2.17","2.18","2.20","2.21","2.22","2.23","2.24","2.25","2.28","2.29","2.38","5.2","5.3","5.8","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.19","5.20","5.21","5.26","5.27","5.28","5.29","5.30","5.31","5.32","5.33","5.40","9.5","10.3","10.5","10.7","10.16","12.2","12.18","12.20","12.23","12.27","12.28","12.29","15.2","15.22","15.26","15.31","15.37","15.40","19.4","20.9","25.6","25.8","25.13","25.14","29.3","30.17","30.33","30.38","30.39","31.9","36.6","36.8","36.13","36.14","40.2","40.3","41.1","41.10","41.19","41.32","41.33","41.38","41.39","41.45","41.48"],"video":["0.1","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.14","2.2","2.6","2.12","2.17","2.18","2.20","2.21","2.22","2.23","2.24","2.25","2.27","2.28","2.29","5.2","5.3","5.8","5.10","5.12","5.13","5.15","5.19","5.21","5.22","5.26","5.28","5.29","5.30","5.32","5.33","5.40","10.1","10.3","10.5","10.7","10.16","12.2","12.23","12.27","12.28","12.29","15.26","15.37","15.40","19.4","25.6","25.8","25.11","25.12","25.14","29.3","30.38","31.9","36.8","36.13","36.14","40.2","40.3","41.1","41.10","41.19","41.30","41.33","41.38","41.39","41.45"],"mp4":["0.3","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.15","2.2","2.17","2.18","2.20","2.23","2.27","2.28","2.29","5.15","5.19","5.21","5.22","5.26","5.29","5.30","5.31","5.40","10.1","10.3","10.5","10.6","10.7","10.13","10.16","12.27","12.28","12.29","13.19","15.22","15.26","15.37","15.40","19.4","25.6","25.7","25.8","25.11","25.12","29.3","29.4","30.38","31.9","36.7","36.8","36.13","36.14","40.2","40.3","41.1","41.10","41.19","41.30","41.31","41.33","41.38","41.45"],"click":["0.3","0.13","6.2","6.3","7.1","7.3","10.3","10.13","15.19","15.21","16.2","16.3","17.3","25.10","30.30","36.10"],"event":["0.3","0.13","9.2","9.3","10.13","12.44","17.1","19.2","19.3"],"console":["0.3","0.6","0.13","0.16","6.2","6.3","6.4","6.5","9.2","9.3","10.1","10.3","10.4","10.5","10.6","10.13","11.1","16.2","16.3","16.4","16.5","19.2","19.3","30.29"],"info":["0.3","0.6","0.13","0.16","1.6","6.2","6.3","6.4","6.5","9.2","9.3","10.1","10.3","10.4","10.6","10.13","11.1","16.2","16.3","16.4","16.5","19.2","19.3","30.29"],"warning":["0.4","10.2","10.4","11.6","15.11","15.15","15.19","15.30","20.3","20.4","30.7","30.10","40.0"],"提示":["0.4"],"默认所有播放器实例都是共享同一个":["0.4"],"localstorage":["0.4"],"而且默认的":["0.4"],"是":["0.4"],"settings":["0.4","9.4","19.4"],"如果你想不同的播放器使用不同的":["0.4"],"play":["0.6","10.6","30.42","41.4"],"on":["0.7","0.8","0.9","0.10","2.2","5.30","5.40","7.5","8.5","9.8","10.0","10.13","11.0","15.0","15.40","17.5","18.5","19.8","20.3","21.0","23.0","29.0","32.0","34.0"],"ready":["0.9","0.10","2.2","5.11","5.40","7.5","10.13","17.5"],"app":["0.11","0.12","0.14","2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.19","2.21","2.22","2.24","2.25","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.4","3.5","3.6","3.29","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.16","5.17","5.18","5.20","5.24","5.25","5.27","5.28","5.29","5.32","5.33","5.34","5.37","9.1","9.5","10.3","10.7","10.16","12.2","12.6","12.7","12.8","12.9","12.10","12.12","12.13","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.38","12.39","13.29","15.1","15.2","15.3","15.7","15.8","15.9","15.10","15.12","15.13","15.20","15.22","15.26","15.27","15.28","15.29","15.31","15.32","15.33","15.34","20.9","25.13","25.14","29.2","30.17","30.33","30.39","30.48","31.5","36.6","36.13","40.1","40.2","41.7","41.10","41.17","41.24","41.26","41.32","41.33","41.39","41.48"],"hotkeyevent":["0.13","10.13"],"true":["0.15","2.27","3.1","3.19","3.30","3.32","7.2","9.4","17.2","19.4","30.10","30.36"],"flip":["0.15"],"playbackrate":["0.15"],"aspectratio":["0.15"],"function":["0.16","6.2","6.3","6.4","7.1","7.3","9.3","10.13","10.16","15.19","15.21","16.2","16.3","16.4","17.3","19.3","25.10","30.29","30.30","30.36","36.10","39.7","41.29"],"myplugin":["0.16","10.16"],"art":["1.1","3.1","3.2","3.3","3.7","3.8","3.9","3.10","3.11","3.12","3.16","3.17","3.20","3.21","3.22","3.23","3.26","3.27","3.28","3.31","3.32","5.4","5.35","5.36","5.37","5.38","5.39","9.5","10.3","10.9","10.11","10.14","10.15","12.1","12.5","12.11","12.12","12.31","12.32","12.33","12.34","12.35","12.36","12.37","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.28","13.29","15.5","15.6","15.8","15.14","15.16","15.17","15.18","15.20","15.23","15.24","15.25","15.27","15.35","15.36","15.37","15.39","19.1","19.5","20.8","29.1","29.2","30.9","30.13","30.17","30.24","30.27","30.32","30.33","30.35","30.39","30.40","30.41","31.8","41.3","41.6","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.24","41.25","41.27","41.35","41.37","41.41","41.43","41.44","41.46","41.47"],"new":["1.1","3.2","3.5","3.6","3.7","3.8","3.9","3.10","3.16","3.21","3.27","3.28","3.32","5.4","5.5","5.6","5.23","5.35","5.36","5.37","5.38","5.39","9.5","10.3","10.9","10.15","12.1","12.3","12.4","12.5","12.9","12.11","12.12","12.13","12.14","12.15","12.19","12.24","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.7","13.8","13.16","13.28","13.29","15.3","15.5","15.6","15.8","15.9","15.10","15.12","15.13","15.14","15.16","15.17","15.18","15.20","15.23","15.24","15.25","15.27","15.28","15.29","15.33","15.37","15.39","19.1","19.5","29.1","29.2","30.9","30.13","30.17","30.24","30.32","30.33","30.39","30.41","30.48","41.3","41.5","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.17","41.18","41.20","41.21","41.22","41.23","41.24","41.25","41.27","41.32","41.35","41.37","41.41","41.43","41.44","41.46","41.47"],"container":["1.1","2.1","2.3","2.4","2.14","3.4","3.5","3.6","3.7","3.8","3.9","3.16","3.28","3.29","5.1","5.4","5.5","5.6","5.7","5.9","5.14","5.16","5.17","5.18","5.23","5.24","5.25","5.27","5.35","5.36","5.38","5.39","9.1","9.5","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.29","15.1","15.3","15.7","15.8","15.9","15.10","15.12","15.13","15.17","15.18","15.20","15.22","15.24","15.27","15.28","15.29","15.31","15.32","15.33","15.34","20.9","25.13","25.14","29.1","29.2","30.17","30.24","30.32","30.33","30.39","30.41","30.48","36.6","41.5","41.7","41.17","41.24","41.26","41.32","41.35","41.37","41.39","41.41"],"js":["1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.12","10.8","10.9","10.10","10.11","10.12","10.14","10.15","11.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.24","13.25","13.26","13.30","13.31","13.32","15.4","15.5","15.14","15.23","15.35","15.36","15.39","19.1","20.2","24.3","25.3","26.3","27.3","28.4","28.8","30.3","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.24","30.25","30.27","30.32","30.35","30.37","30.39","30.43","30.44","30.47","31.2","35.3","36.3","37.3","38.3","39.4","39.8","39.11","41.6","41.11","41.35","41.36","41.40"],"artplayer":["1.6","5.4","5.5","5.6","5.16","5.23","5.25","5.35","5.36","5.38","5.39","9.5","10.3","10.9","10.15","12.1","12.3","12.4","12.5","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.19","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.2","13.3","13.5","13.6","13.9","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.24","13.25","13.26","13.30","13.31","13.32","15.1","15.3","15.6","15.7","15.8","15.9","15.10","15.12","15.13","15.16","15.17","15.18","15.20","15.22","15.23","15.24","15.25","15.27","15.28","15.29","15.31","15.32","15.33","19.1","19.5","29.1","30.17","30.24","30.26","30.32","30.33","30.39","30.41","30.48","41.3","41.5","41.7","41.8","41.9","41.13","41.14","41.15","41.16","41.17","41.21","41.24","41.25","41.32","41.35","41.37","41.41","41.44"],"手动触发事件":["2.0"],"subtitle":["2.27","2.28","2.29","12.30"],"srt":["2.30","12.30"],"或者部分加载完成":["2.44"],"则发送此事件":["2.44"],"已经到达结束点":["2.45"],"正在尝试获取媒体数据":["2.56"],"一级属性":["3.0"],"var":["3.1","3.2","3.3","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.28","3.30","3.31","3.32","5.4","5.38","9.5","10.9","10.11","10.12","10.14","10.15","12.1","12.11","12.36","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.21","13.27","13.28","15.5","15.6","15.10","15.12","15.14","15.16","15.17","15.18","15.23","15.25","15.35","15.36","15.39","19.1","19.5","29.2","30.3","30.9","30.13","30.17","30.24","30.27","30.32","30.35","30.37","30.39","30.41","41.6","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.25","41.26","41.27","41.35","41.37","41.40","41.41","41.43","41.44","41.46","41.47"],"false":["3.17","3.18","3.31","6.5","13.2","16.5","25.5","36.5"],"adsplugin":["4.0","14.0"],"option":["4.0","14.0","20.4","21.0","25.15","31.4","32.0","36.15"],"layers":["4.0","14.0"],"ads":["4.0"],"html":["4.0","7.4","8.4","9.6","15.19","15.21","17.4","18.4","19.6","25.10","25.11","28.11","30.30","30.31","36.9","36.10","36.11","36.12","41.30","41.31"],"img":["4.0","9.4","9.7","19.7","30.38","41.38"],"style":["4.0","6.1","7.3","8.1","8.4","16.1","17.3","18.1","18.4","20.4","41.28"],"width":["4.0","8.4","9.4","9.7","18.4","19.7","41.28"],"100px":["4.0","8.4","18.4","41.28"],"src":["4.0","8.3","8.4","9.7","18.3","18.4","19.7","30.28","41.28"],"display":["4.0"],"none":["4.0"],"position":["4.0","5.19","7.4","8.2","8.3","8.5","15.21","17.4","18.2","18.3","18.5","25.9","25.10","25.11","25.12","30.28","30.31","36.9","36.10","36.11","36.12","41.28","41.31"],"absolute":["4.0","8.2","8.3","8.5","18.2","18.3","18.5","30.28","41.28"],"top":["4.0","8.2","8.3","8.5","18.2","18.3","18.5","30.28","41.28"],"20px":["4.0","30.28","41.28"],"right":["4.0","7.2","7.4","8.2","8.5","15.21","17.2","17.4","18.2","18.5","25.9","25.10","25.11","30.28","36.9","36.10","36.11","36.12"],"seek":["5.11","28.7"],"settimeout":["5.11","7.5","17.5","30.2"],"controls":["5.19","5.21","15.21","25.9","25.10","25.11","25.12","36.9","36.10","36.11","36.12"],"jpg":["5.22"],"hd":["5.41","15.41"],"720p":["5.41","15.41"],"element":["6.1","8.1"],"组件的":["6.1","8.1"],"dom":["6.1","8.1","9.3","16.1","18.1","19.3"],"元素":["6.1","8.1"],"args":["6.2","6.3","6.4","16.2","16.3","16.4","30.29","30.30","41.29"],"show":["6.5","9.6","9.8","16.4","16.5","19.6","19.8"],"组件样式对象":["7.1"],"组件点击事件":["7.1"],"mounted":["7.1","10.0","11.0","15.0","17.1"],"selector":["7.2","17.2"],"default":["7.2","10.4","17.2","20.10","29.4","40.4"],"span":["7.2","17.2"],"01":["7.2","17.2","30.29","41.29"],"button":["7.3","7.4","17.3","17.4"],"tooltip":["7.3","7.4","8.2","8.3","17.1","17.3","17.4","18.2","18.3","30.31"],"color":["7.3","17.3","25.5","36.5"],"red":["7.3","17.3"],"your":["7.4","15.30","17.4","29.0","30.30","30.31","41.30","41.31","41.45"],"02":["7.5","9.3","17.5","19.3","30.29","41.29"],"update":["7.5"],"the":["7.5","12.46","17.5","20.3","28.7","29.4","40.4"],"tip":["8.2","8.3","18.2","18.3"],"50px":["8.2","8.3","8.5","18.2","18.3","18.5"],"potser":["8.4"],"item":["9.2","9.3","19.2","19.3"],"onselect":["9.3","19.3","30.29","41.29"],"pip":["9.4","19.4"],"mode":["9.4","19.4"],"close":["9.4","19.4"],"heigth":["9.4","9.7","19.7"],"add":["9.6","20.1","31.1"],"slider":["9.6","19.6"],"state":["9.7","19.7"],"range":["9.8","19.8","36.11"],"to":["10.2","12.40","12.41","12.60","14.0","24.4","25.5","25.7","29.0","30.1"],"easily":["10.2"],"distinguish":["10.2"],"between":["10.2"],"by":["10.4","30.45"],"all":["10.4","13.0"],"zh":["10.6"],"cn":["10.6"],"div":["10.8","10.9","10.10","10.15","13.23","15.38","19.5","30.21","30.26","30.36","30.40","30.46","41.36"],"classname":["10.8","10.9","10.10","10.11","10.12","10.15","13.1","13.23","15.4","15.38","19.5","30.15","30.21","30.26","30.36","30.40","30.46","41.36"],"run":["10.8","10.9","10.10","10.11","10.12","10.14","10.15","11.7","11.11","13.1","13.23","15.4","15.38","19.5","30.15","30.21","30.26","30.36","30.40","30.44","30.46","41.36"],"code":["10.8","10.9","10.10","10.11","10.12","10.14","10.15","11.1","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","13.1","13.14","13.23","13.24","13.26","15.4","15.38","19.5","30.5","30.12","30.14","30.15","30.16","30.18","30.21","30.25","30.26","30.35","30.36","30.40","30.43","30.44","30.46","30.47","41.36"],"switch":["10.10","15.11","15.19"],"visibility":["10.10"],"full":["11.6"],"list":["11.6"],"manually":["12.0"],"trigger":["12.0"],"data":["12.40","12.56","20.10"],"through":["12.40","12.41","30.26"],"of":["12.43","28.1","30.1"],"partially":["12.44"],"media":["12.45","12.47"],"resource":["12.46"],"type":["12.46","22.0","33.0","36.11"],"loaded":["12.48"],"paused":["12.49","14.0"],"pause":["12.51"],"or":["12.51"],"delay":["12.51"],"browser":["12.52"],"has":["12.53","12.57"],"skipping":["12.54","12.55"],"operation":["12.54","12.55"],"but":["12.56"],"due":["12.60"],"names":["13.0"],"are":["13.0"],"in":["13.0","25.5"],"devices":["13.19"],"a":["13.19","15.15"],"tap":["13.19"],"toggles":["13.19"],"for":["14.0"],"example":["14.0"],"i":["14.0"],"want":["14.0","30.10"],"write":["14.0"],"displays":["14.0"],"an":["14.0"],"image":["14.0"],"advertisement":["14.0"],"t":["15.11"],"and":["15.11"],"note":["15.15"],"some":["15.15"],"videos":["15.15"],"do":["15.15"],"not":["15.15"],"have":["15.15"],"resize":["15.30"],"class":["15.38"],"name":["15.38"],"480p":["15.41"],"object":["16.1","18.1","30.11"],"triggered":["17.1"],"after":["17.1"],"is":["17.1"],"poster":["18.4"],"setting":["19.4","36.14"],"step":["19.5"],"unpkg":["20.2","24.3","25.3","26.3","27.3","28.4","31.2","35.3","36.3","37.3","38.3","39.4"],"player":["20.3","30.45"],"s":["20.3","30.11"],"size":["20.3","30.1"],"depends":["20.3"],"import":["20.6","29.0"],"useref":["20.8","31.8"],"export":["20.10"],"return":["20.10","25.7"],"jsdelivr":["20.11"],"net":["20.11","31.11"],"https":["20.11","31.11"],"cdn":["20.11","31.11"],"npm":["20.11","31.11"],"initialize":["21.0","30.1","32.0"],"autoplay":["21.0","32.0"],"createplayer":["22.0","33.0"],"attachmediaelement":["22.0","33.0"],"load":["22.0","33.0"],"attachmedia":["23.0","34.0"],"else":["23.0","34.0"],"canplaytype":["23.0","34.0"],"application":["23.0","34.0"],"com":["24.3","25.3","26.3","27.3","28.4","35.3","36.3","37.3","38.3","39.4"],"equal":["24.4"],"totalduration":["24.4"],"closed":["24.4"],"early":["24.4"],"less":["24.4"],"then":["24.4"],"输入框锁定时间":["25.4","36.4"],"maxlength":["25.4","36.4"],"输入框最大可输入的字数":["25.4","36.4"],"minwidth":["25.4","36.4"],"输入框最小宽度":["25.4","36.4"],"seconds":["25.5"],"fff":["25.5","36.5"],"local":["25.5"],"border":["25.5","36.5"],"whether":["25.5"],"plugins":["25.6","25.7","25.8","25.9","25.11","25.12","36.7","36.8"],"artplayerplugindanmuku":["25.7","25.8","25.9","25.11","25.12","36.7","36.8"],"use":["25.7","39.7"],"promise":["25.7","36.7"],"xml":["25.9","25.10","25.11","25.12","36.9","36.10","36.11","36.12"],"text":["25.10","30.36","36.10"],"prompt":["25.10"],"danmaku":["25.11"],"加载错误":["25.15","36.15"],"config":["25.15","36.15"],"配置变化":["25.15","36.15"],"functionalities":["28.1"],"get":["28.7","31.4"],"value":["28.7","39.7"],"communicate":["28.9"],"with":["28.9"],"can":["28.10"],"index":["28.11"],"commit":["28.12","39.12"],"body":["28.13","31.3","39.13"],"id":["28.13","39.13","41.45"],"you":["29.0","30.10"],"need":["29.0","30.1"],"required":["29.0"],"change":["29.4","40.4"],"like":["30.1"],"css":["30.1","30.11","41.1"],"this":["30.4","41.4"],"equivalent":["30.4"],"will":["30.7"],"cache":["30.7"],"muted":["30.10"],"if":["30.10"],"similar":["30.11"],"fit":["30.11"],"increase":["30.19"],"volume":["30.19"],"decrease":["30.19"],"fast":["30.19"],"forward":["30.19"],"rewind":["30.19"],"opacity":["30.28"],"left":["30.31","41.31"],"something":["30.34","41.34"],"dosomething":["30.34","41.34"],"onvttload":["30.36"],"modify":["30.36"],"loading":["30.38","41.38"],"address":["30.40"],"current":["30.40"],"instance":["30.40","31.4"],"modifying":["30.42"],"existing":["30.42"],"because":["30.45"],"uses":["30.45"],"as":["30.45"],"key":["30.45"],"dimensions":["30.46"],"demo":["31.3"],"meta":["31.3"],"charset":["31.3"],"utf":["31.3"],"getinstance":["31.4"],"d":["31.6"],"选项":["31.10"],"为空则不跳转":["35.4"],"http":["35.4"],"org":["35.4"],"必须观看的时长":["35.4"],"期间不能被跳过":["35.4"],"单位为秒":["35.4"],"当该值大于或等于totalduration时":["35.4"],"不能提前关闭广告":["35.4"],"当该值等于或小于0时":["35.4"],"则随时都可以关闭广告":["35.4"],"playduration":["35.4"],"弹幕文本":["36.5"],"time":["36.5"],"发送时间":["36.5"],"单位秒":["36.5"],"弹幕局部颜色":["36.5"],"使用":["36.7"],"异步返回":["36.7"],"隐藏弹幕":["36.9"],"发送弹幕":["36.10"],"弹幕大小":["36.11"],"input":["36.11"],"重载弹幕":["36.12"],"里通过代码控制":["39.1"],"from":["39.7"],"async":["39.7"],"通信":["39.9"],"只能运行在":["39.10"],"的消息":["39.11"],"artplayerpluginiframe":["39.12"],"外":["40.0"],"不再捆绑其它多国语言":["40.0"],"需要自行导入需要的语言":["40.0"],"lang":["40.3"],"language":["40.4"],"您可能需要初始化容器元素的大小":["41.1"],"如":["41.1"],"等同于":["41.4"],"document":["41.26"],"queryselector":["41.26"],"menu":["41.30"],"control":["41.31"],"文本的函数":["41.36"],"修改现有的语言":["41.42"]},{"0":["5.11","20.9","25.5","31.9","36.5"],"1":["9.7","13.24","19.7","25.11","36.11"],"2":["13.25"],"3":["30.1"],"4":["30.15","30.21","30.36","30.40","30.43","30.44","30.46"],"5":["9.7","13.22","19.7","20.9","24.4","31.9"],"6":["15.38"],"7":["15.4","30.26"],"8":["12.0","30.40"],"9":["41.28"],"10":["9.7","13.11","13.13","13.26","19.7","24.4","35.4"],"11":["30.42","41.42"],"12":["25.11","30.36","36.11","41.36"],"20":["13.10"],"22":["9.5","9.6","19.4","19.6"],"25":["25.11","36.11"],"32":["0.13","10.13"],"50":["25.11","36.11"],"60":["30.33","41.33"],"120":["41.33"],"150":["9.2","19.2"],"222":["36.5"],"400":["25.4","36.4"],"404":["2.11","12.11"],"500":["13.20"],"1000":["30.2"],"2000":["13.23"],"3000":["5.11","13.14"],"5000":["13.3","13.12","13.15"],"二级属性":["0.0"],"mp4":["0.1","0.12","0.14","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.19","2.21","2.22","2.24","2.25","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.4","3.5","3.6","3.28","3.29","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.17","5.18","5.20","5.24","5.27","5.28","5.32","5.33","5.34","5.37","9.1","9.5","10.8","10.9","10.10","10.15","12.2","12.6","12.7","12.8","12.9","12.10","12.12","12.13","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.38","13.29","15.1","15.2","15.3","15.7","15.8","15.9","15.10","15.12","15.13","15.17","15.18","15.20","15.24","15.27","15.28","15.29","15.31","15.32","15.33","15.34","19.5","20.5","20.9","25.13","25.14","29.2","30.17","30.32","30.33","30.35","30.48","31.5","36.6","40.1","41.7","41.24","41.32","41.35","41.48"],"console":["0.1","0.5","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.11","1.12","5.8","5.13","5.14","5.15","5.22","5.26","5.27","5.28","5.29","5.31","5.32","5.33","5.40","7.3","8.2","8.3","10.16","15.26","15.31","15.37","15.40","17.3","18.2","18.3","30.28","30.30","30.31","41.28","41.29","41.30"],"info":["0.1","0.5","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.12","5.8","5.13","5.15","5.22","5.26","5.28","5.29","5.31","5.32","5.33","7.3","8.2","8.3","10.5","10.16","15.26","15.31","15.37","17.3","18.2","18.3","30.28","30.30","41.28","41.29","41.30"],"warning":["0.2","1.6","5.11","10.1","10.5","10.6","15.21","15.37","29.0","30.2","30.4","30.17","30.19","30.39","31.4","41.10","41.39","41.45","41.48"],"提示":["0.2","5.11","41.45"],"为了方便区别":["0.2"],"元素和普通对象":["0.2"],"播放器里的所有":["0.2"],"mouseenter":["0.3","10.3"],"你可以修改":["0.4"],"即可":["0.4"],"zh":["0.6"],"cn":["0.6","29.4","40.4"],"your":["0.6","10.6","20.3","29.3","29.4","30.3","40.3","40.4","41.3"],"ready":["0.7","0.8","0.11","0.12","0.13","0.14","0.15","2.6","2.18","2.23","2.30","5.8","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.22","5.26","5.27","5.28","5.29","5.30","5.31","5.32","5.33","5.41","6.5","8.5","9.8","10.7","10.9","10.10","12.2","12.18","12.23","12.30","15.8","15.10","15.13","15.22","15.26","15.28","15.29","15.31","15.32","15.33","15.40","15.41","16.5","18.5","19.8"],"html":["0.8","0.9","0.10","5.19","5.21","14.0","25.8","25.9","25.12","36.8"],"some":["0.8","0.9","0.10","15.37"],"text":["0.8","0.9","0.10","17.1"],"position":["0.9","5.21","5.34","7.1","8.4","14.0","17.1","18.4","25.8","36.8"],"on":["0.11","0.12","0.13","0.14","0.15","2.6","2.11","2.12","2.18","2.23","2.30","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.20","5.22","5.26","5.27","5.28","5.29","5.31","5.32","5.33","5.41","6.4","6.5","7.4","10.7","10.9","10.10","12.2","12.6","12.18","12.23","12.30","15.7","15.8","15.10","15.12","15.13","15.22","15.26","15.27","15.28","15.29","15.31","15.32","15.33","15.41","16.4","16.5","17.4","22.0","30.4","33.0"],"subtitleoffset":["0.15"],"return":["0.16","9.2","9.3","10.16","15.11","19.2","19.3","28.7","36.7","36.10","39.7"],"name":["0.16","10.16"],"something":["0.16"],"dosomething":["0.16"],"一级属性":["1.0","5.0"],"app":["1.1","3.2","3.7","3.8","3.9","3.10","3.11","3.12","3.16","3.21","3.22","3.27","3.28","3.32","5.4","5.5","5.6","5.23","5.35","5.36","5.38","5.39","10.8","10.9","10.10","10.11","10.12","10.14","10.15","12.1","12.3","12.4","12.5","12.11","12.14","12.31","12.32","12.33","12.34","12.35","12.36","12.37","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.21","13.27","13.28","15.5","15.6","15.14","15.16","15.17","15.18","15.23","15.24","15.25","15.35","15.36","15.39","19.1","19.5","29.1","30.9","30.13","30.24","30.26","30.32","30.35","30.36","30.37","30.41","41.5","41.6","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.25","41.27","41.35","41.36","41.37","41.40","41.41","41.43","41.44","41.46","41.47"],"url":["1.1","3.5","3.6","3.7","3.8","3.9","3.16","3.21","3.27","3.28","5.4","5.5","5.6","5.16","5.23","5.25","5.35","5.36","5.37","5.38","5.39","10.8","10.9","10.10","10.12","10.14","10.15","12.1","12.3","12.4","12.5","12.9","12.11","12.12","12.13","12.14","12.15","12.19","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.27","13.28","13.29","15.5","15.6","15.12","15.14","15.16","15.17","15.18","15.20","15.23","15.24","15.25","15.35","15.36","15.39","19.1","19.5","20.5","29.1","30.24","30.41","31.5","41.3","41.5","41.8","41.9","41.13","41.14","41.15","41.16","41.17","41.21","41.24","41.25","41.37","41.41","41.44"],"assets":["1.1","2.1","2.3","2.4","2.14","3.4","3.5","3.6","3.7","3.8","3.9","3.16","3.27","3.28","5.1","5.4","5.5","5.6","5.16","5.23","5.25","5.35","5.36","5.37","5.38","5.39","10.8","10.9","10.10","10.11","10.12","10.14","10.15","12.1","12.3","12.4","12.5","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.19","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.5","13.6","13.27","13.28","13.29","15.1","15.3","15.5","15.6","15.7","15.8","15.9","15.10","15.12","15.14","15.16","15.17","15.18","15.20","15.23","15.24","15.25","15.27","15.28","15.33","19.1","19.5","20.5","29.1","30.24","30.32","30.35","30.41","30.48","31.5","41.5","41.7","41.17","41.24","41.35","41.36","41.37","41.41"],"全部工具函数请参考以下地址":["1.6"],"js":["1.11","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","13.1","13.23","15.38","28.11","30.11","30.21","30.26","30.36","30.40","30.46","39.9"],"emit":["2.0","12.0"],"focus":["2.0","12.0"],"移除事件":["2.0"],"sample":["2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.13","2.14","2.15","2.19","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.39","3.4","3.5","3.6","3.7","3.8","3.9","3.16","3.27","3.28","3.29","5.1","5.5","5.6","5.7","5.9","5.16","5.23","5.24","5.25","5.34","5.35","5.36","5.37","5.38","9.1","10.8","10.9","10.10","10.11","10.12","10.14","10.15","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.19","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.28","13.29","15.1","15.3","15.7","15.8","15.9","15.10","15.12","15.13","15.14","15.17","15.18","15.20","15.24","15.27","15.28","15.29","15.32","15.33","15.34","19.1","19.5","20.5","29.1","29.2","30.24","30.32","30.35","30.41","30.48","31.5","40.1","41.5","41.7","41.17","41.24","41.35","41.36","41.37","41.41"],"video":["2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.13","2.14","2.15","2.16","2.19","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.4","3.5","3.6","3.27","3.28","3.29","5.1","5.5","5.6","5.7","5.9","5.14","5.16","5.17","5.18","5.20","5.23","5.24","5.25","5.27","5.34","5.37","9.1","9.5","10.8","10.9","10.10","10.11","10.15","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.37","12.38","12.39","13.4","15.20","15.27","15.28","15.29","15.33","15.34","19.5","20.5","20.9","25.13","29.2","30.17","30.24","30.32","30.33","30.35","30.41","30.48","31.5","36.6","40.1","41.7","41.17","41.24","41.32","41.35","41.48"],"true":["2.16","2.17","2.20","2.21","2.22","2.23","2.24","2.25","2.38","3.29","5.2","5.3","5.20","6.2","6.4","6.5","9.1","9.5","10.15","12.17","12.20","12.27","13.1","13.30","13.32","15.2","15.20","16.2","16.4","16.5","19.5","25.13","25.14","30.17","36.13","36.14","41.10","41.32","41.45"],"setting":["2.17","2.20","2.27","3.29","9.1","9.5","12.20","13.29","19.5","25.13","25.14","36.13"],"srt":["2.27","2.28","2.29"],"并调用":["2.44"],"但数据意外未出现":["2.56"],"属性名字全部都是大写的形式":["3.0"],"未来容易发生变动":["3.0"],"new":["3.1","3.3","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.22","3.23","3.24","3.25","3.26","3.30","3.31","10.8","10.10","10.11","10.12","10.14","11.1","13.2","13.3","13.5","13.6","13.9","13.10","13.11","13.12","13.17","13.18","13.20","13.21","13.22","13.25","13.27","13.30","13.31","13.32","15.4","15.35","15.36","15.38","21.0","30.3","30.5","30.6","30.8","30.12","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.27","30.34","30.35","30.36","30.37","30.40","30.43","30.44","30.46","30.47","32.0","41.6","41.11","41.34","41.36","41.40"],"container":["3.1","3.2","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.30","3.31","3.32","10.8","10.9","10.10","10.11","10.12","10.14","10.15","12.1","13.5","13.6","13.7","13.8","13.9","13.16","13.21","13.27","13.28","15.4","15.5","15.6","15.14","15.16","15.23","15.25","15.35","15.36","15.39","19.1","19.5","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.25","30.26","30.27","30.35","30.36","30.37","30.43","30.47","31.10","41.3","41.6","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.25","41.27","41.36","41.40","41.43","41.44","41.46","41.47"],"art":["3.13","3.14","3.15","3.18","3.19","3.24","3.25","3.30","10.8","10.10","10.12","11.1","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.21","13.22","13.24","13.25","13.26","13.27","13.30","13.31","13.32","15.4","15.38","30.3","30.5","30.6","30.8","30.12","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.36","30.37","30.43","30.44","30.46","30.47","31.9","41.11","41.26","41.36"],"show":["4.0","6.2","6.3","6.4","14.0","16.2","16.3","21.0","22.0","23.0","30.28","30.30","32.0","33.0","34.0"],"block":["4.0","14.0"],"hide":["4.0","14.0","25.9"],"controls":["4.0","5.34","15.34","25.8","36.8"],"tooltip":["4.0","7.1","9.6","19.6","41.31"],"muted":["5.2","5.3","5.24","15.2","15.3","24.4","35.4","41.10"],"seek":["5.10","5.12"],"t":["5.11"],"right":["5.19","5.21","8.3","8.4","14.0","17.1","18.3","18.4","25.8","25.12","36.8","41.28"],"switch":["5.19"],"click":["5.19","5.21","6.1","8.1","8.2","8.3","15.37","16.1","18.1","18.2","18.3","25.9","25.12","30.28","30.31","36.8","36.9","36.12","41.28","41.30","41.31"],"function":["5.19","5.21","6.1","8.1","8.2","8.3","16.1","18.1","18.2","18.3","25.7","25.9","25.12","30.28","30.31","36.7","36.9","36.12","41.28","41.30"],"log":["5.40","15.40"],"theme":["5.40","15.40","25.4","36.4"],"settimeout":["5.41","6.5","8.5","9.8","10.13","15.41","16.5","18.5","19.8","41.2"],"object":["6.1","8.1"],"组件样式对象":["6.1","8.1"],"false":["6.2","6.3","6.4","9.4","13.17","13.18","13.31","16.2","16.3","16.4","19.4","30.30","35.4"],"update":["6.5","8.5","9.8","16.5","19.8"],"组件挂载后触发":["7.1"],"组件的提示文本":["7.1"],"yellow":["7.2","17.2"],"02":["7.2","17.2"],"onselect":["7.2","17.2"],"item":["7.2","9.4","17.2"],"dom":["7.2","17.2"],"args":["7.3","8.2","8.3","17.3","18.2","18.3","30.28","30.31","41.28","41.30"],"mounted":["7.3","8.2","8.3","17.3","18.2","18.3"],"style":["7.4","14.0","17.4","20.5","25.11","30.31","31.4","31.5","36.11","41.31"],"color":["7.4","17.4","30.31","41.31"],"red":["7.4","17.4"],"control":["7.5","17.1","17.5"],"by":["7.5","8.5","9.8","17.5","18.5","19.8","24.4","30.10"],"absolute":["8.4","14.0","18.4"],"top":["8.4","14.0","18.4"],"50px":["8.4","18.4"],"the":["8.5","9.8","18.5","19.8","25.6","30.10"],"quality":["9.2","19.2"],"1080p":["9.2","19.2"],"src":["9.4","14.0","19.4","23.0","30.38","34.0","41.38"],"state":["9.4","30.38","41.38"],"svg":["9.4","9.7","19.4","19.7"],"settings":["9.5","10.4","19.5"],"slider":["9.5"],"5x":["9.5","9.6","19.5","19.6"],"img":["9.5","9.6","14.0","19.4","19.6"],"width":["9.5","9.6","14.0","19.4","19.6","20.5","30.1","41.1"],"icon":["9.6","19.6"],"range":["9.7","19.7","25.11"],"instance":["10.0"],"which":["10.0","11.0","15.0"],"reminder":["10.1"],"if":["10.1","10.4","15.37","20.11","25.9","25.10","30.45","36.9","36.10"],"you":["10.1","10.4","15.30","15.37"],"directly":["10.1"],"and":["10.2","10.4","12.44","17.1"],"plain":["10.2"],"objects":["10.2"],"in":["10.2"],"are":["10.2","15.15"],"mouseleave":["10.3"],"instances":["10.4"],"share":["10.4"],"same":["10.4","15.11"],"localstorage":["10.4"],"want":["10.4"],"different":["10.4"],"players":["10.4"],"use":["10.4","28.7","30.1"],"loading":["10.5","12.52"],"this":["10.5","30.39"],"using":["10.6"],"can":["10.6","30.39"],"only":["10.6","28.10","30.39"],"var":["10.8","10.10","11.1","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","15.4","15.38","21.0","30.5","30.6","30.8","30.12","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.26","30.34","30.36","30.40","30.43","30.44","30.46","30.47","32.0","41.11","41.34","41.36"],"artplayer":["10.8","10.10","10.11","10.12","10.14","11.1","13.1","13.23","15.4","15.5","15.14","15.35","15.36","15.38","15.39","21.0","30.3","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.25","30.27","30.34","30.35","30.36","30.37","30.43","30.44","30.47","32.0","41.6","41.11","41.12","41.18","41.20","41.22","41.23","41.27","41.34","41.36","41.40","41.43","41.46","41.47"],"flip":["10.15"],"playbackrate":["10.15"],"aspectratio":["10.15"],"constructor":["11.0"],"please":["11.6","25.10"],"refer":["11.6"],"remove":["12.0"],"end":["12.40","12.41"],"without":["12.40","12.41"],"duration":["12.43"],"is":["12.44","12.46","12.52","15.30"],"sent":["12.44"],"reached":["12.45"],"not":["12.46","15.30","20.4"],"has":["12.47","12.54","12.55"],"due":["12.51","15.19","15.21","30.17"],"changed":["12.53"],"unexpectedly":["12.56"],"been":["12.57"],"currenttime":["12.58","28.7","39.7"],"attribute":["12.58"],"temporarily":["12.60"],"uppercase":["13.0"],"subject":["13.0"],"change":["13.0"],"defaults":["13.19"],"ads":["14.0"],"100px":["14.0"],"display":["14.0","25.5","36.11"],"none":["14.0"],"20px":["14.0"],"have":["15.11"],"functionality":["15.11"],"however":["15.11"],"method":["15.11"],"a":["15.11","29.0"],"promise":["15.11"],"such":["15.15"],"as":["15.15"],"that":["15.15"],"being":["15.15"],"live":["15.15"],"streamed":["15.15"],"or":["15.15","30.1"],"note":["15.19","30.2"],"to":["15.19","15.21"],"browser":["15.19","15.21","30.17"],"security":["15.19","15.21"],"mechanisms":["15.19","15.21"],"before":["15.19"],"triggering":["15.19"],"jpg":["15.22"],"json":["15.26"],"stringify":["15.26"],"but":["15.30","30.45"],"do":["15.30"],"know":["15.30"],"exact":["15.30"],"property":["15.30"],"tip":["15.37","20.11","30.19"],"need":["15.37"],"event":["16.1","18.1","25.9","28.8","36.9","39.8"],"left":["17.1"],"heigth":["19.4"],"pnpm":["20.1","24.2","25.2","26.2","27.2","28.3","31.1","35.2","36.2","37.2","38.2","39.3"],"com":["20.2","20.11","31.2","31.11"],"of":["20.3","30.45"],"so":["20.3"],"responsive":["20.4"],"modifying":["20.4"],"https":["20.5","31.5"],"org":["20.5","31.5"],"600px":["20.5"],"height":["20.5","30.1","41.1"],"400px":["20.5","30.1","41.1"],"margin":["20.5"],"d":["20.6"],"null":["20.8","31.8"],"volume":["20.9","31.9"],"options":["20.10"],"option":["20.10","31.10"],"unpkg":["20.11","31.11"],"else":["21.0","22.0","32.0","33.0"],"notice":["21.0","22.0","23.0","32.0","33.0","34.0"],"unsupported":["21.0","22.0","23.0","32.0","33.0","34.0"],"playback":["21.0","22.0","23.0","32.0","33.0","34.0"],"format":["21.0","22.0","23.0","32.0","33.0","34.0"],"mpd":["21.0","32.0"],"vnd":["23.0","34.0"],"apple":["23.0","34.0"],"mpegurl":["23.0","34.0"],"m3u8":["23.0","34.0"],"at":["24.4"],"any":["24.4"],"time":["24.4"],"playduration":["24.4"],"total":["24.4"],"whether":["24.4"],"填":["25.4","36.4"],"则为无限制":["25.4","36.4"],"maxwidth":["25.4","36.4"],"输入框最大宽度":["25.4","36.4"],"infinity":["25.4","36.4"],"则为":["25.4","36.4"],"宽度":["25.4","36.4"],"outline":["25.5"],"mode":["25.5","36.5"],"for":["25.5","30.2"],"scrolling":["25.5"],"artplayerplugindanmuku":["25.6","25.13","25.14","36.6","36.13","36.14"],"file":["25.6","30.2"],"consistent":["25.6"],"with":["25.6"],"asynchronously":["25.7"],"resolve":["25.7"],"xml":["25.8","36.8"],"enter":["25.10"],"test":["25.10"],"size":["25.11","30.7"],"input":["25.11"],"type":["25.11","28.12","39.12"],"min":["25.11","36.11"],"max":["25.11","36.11"],"step":["25.11","36.11"],"value":["25.11","36.11"],"plugins":["25.13","25.14","36.6","36.13","36.14"],"stop":["25.15","36.15"],"弹幕停止":["25.15","36.15"],"start":["25.15","36.15"],"async":["28.7"],"keyword":["28.7","39.7"],"await":["28.7","39.7"],"iframe":["28.9"],"run":["28.10","30.11"],"artplayerpluginiframe":["28.12","39.11"],"own":["29.0"],"when":["29.0","30.7"],"cannot":["29.0"],"be":["29.0"],"matched":["29.0"],"lang":["29.2","29.3","40.2"],"script":["29.2","40.2"],"i18n":["29.3","35.4","40.0","40.3"],"play":["29.4","30.19","40.4"],"300px":["30.1","41.1"],"support":["30.2"],"three":["30.2"],"formats":["30.2"],"last":["30.7"],"upon":["30.10"],"entering":["30.10"],"cover":["30.11"],"div":["30.11","31.3"],"classname":["30.11"],"code":["30.11"],"space":["30.19"],"toggle":["30.19"],"pause":["30.19"],"these":["30.19"],"document":["30.26"],"queryselector":["30.26"],"setting02":["30.29","41.29"],"green":["30.31","41.31"],"one":["30.33","41.33"],"more":["30.33","41.33"],"chance":["30.33","41.33"],"gif":["30.38","41.38"],"recognition":["30.39"],"extensions":["30.39"],"player":["30.39"],"parse":["30.39"],"cache":["30.45"],"progress":["30.45"],"class":["31.3"],"ts":["31.6"],"types":["31.10"],"const":["31.10"],"广告总时长":["35.4"],"totalduration":["35.4"],"视频广告是否默认静音":["35.4"],"多语言支持":["35.4"],"close":["35.4"],"关闭广告":["35.4"],"countdown":["35.4"],"s秒":["35.4"],"是否显示描边":["36.5"],"弹幕模式":["36.5"],"0表示滚动":["36.5"],"1静止":["36.5"],"弹幕":["36.6"],"resovle":["36.7"],"隐藏弹幕":["36.8"],"prompt":["36.10"],"请输入弹幕文本":["36.10"],"弹幕测试文本":["36.10"],"trim":["36.10"],"flex":["36.11"],"alignitems":["36.11"],"播放器的功能":["39.1"],"当无法匹配到语言时":["40.0"],"会默认显示英文":["40.0"],"或者使用":["41.1"],"aspect":["41.1"],"热键":["41.19"],"描述":["41.19"],"增加音量":["41.19"],"降低音量":["41.19"],"innerhtml":["41.26"],"opacity":["41.28"],"sd":["41.32"],"ploading":["41.38"],"后缀的识别":["41.39"],"播放器只能解析这种后缀":["41.39"],"因为播放器默认使用":["41.45"]},{"0":["20.5","31.5"],"1":["25.7","36.7"],"2":["5.28","25.5","36.5"],"4":["30.11"],"5":["5.7","5.8","5.14","15.7","41.7"],"8":["2.0"],"9":["5.29","30.1"],"10":["5.10","5.12","15.10","15.12"],"16":["5.29","15.29","25.10","30.1","36.10","41.1"],"22":["19.5"],"60":["30.35","41.35"],"100":["28.5","39.5"],"111":["25.7","36.7"],"120":["30.33"],"180":["30.33","41.33"],"222":["25.5","25.7","36.7"],"240":["41.33"],"333":["36.5"],"360":["9.2","19.2"],"720":["9.2","19.2"],"1000":["0.8","0.9","0.10","0.15","10.8","10.9","41.2"],"1080":["9.2","19.2"],"5000":["0.13","10.13"],"比较少用":["0.0"],"warning":["0.1","0.5","0.6","0.7","0.8","5.15","5.19","5.21","5.26","5.30","5.37","10.3","10.7","10.9","10.13","15.26","20.5","30.28","30.29","30.30","30.31","30.38","30.41","30.48","31.3","41.2","41.4","41.7","41.17","41.19","41.30","41.31","41.38","41.41"],"提示":["0.1","5.15","5.19","5.21","5.30","31.3","41.2","41.7","41.10","41.17"],"假如直接修改这个":["0.1"],"元素都是以":["0.2"],"开头命名的":["0.2"],"这是所有":["0.2"],"元素的定义":["0.2"],"mouseleave":["0.3"],"poster":["0.3","10.3"],"jpg":["0.3","10.3"],"then":["0.3","10.3","20.11","30.45"],"img":["0.3","10.3","19.5"],"loading":["0.5","12.47"],"这是所有图标的定义":["0.5"],"types":["0.5","1.6","40.0","41.48"],"使用":["0.6"],"只能更新实例化之后的":["0.6"],"to":["0.7","11.6","30.2","30.30","30.31"],"play":["0.7","4.0","5.2","10.7","15.2","29.3","30.2","40.3"],"如果想马上隐藏":["0.7"],"settimeout":["0.8","0.9","0.10","0.12","0.13","0.14","0.15","5.2","5.3","5.7","5.10","5.12","5.20","6.4","7.4","8.4","9.7","10.8","10.9","10.10","10.15","15.2","15.7","15.10","15.12","16.4","17.4","18.4","19.7"],"false":["0.8","0.9","0.10","0.14","0.15","10.8","10.9","10.10","10.15","24.4","30.28","41.28","41.30"],"left":["0.9","7.1","10.9"],"true":["0.10","0.12","2.19","3.4","3.5","3.6","3.27","3.28","5.1","5.13","5.24","5.31","6.3","10.10","12.16","12.19","12.21","12.22","12.23","12.24","12.25","12.38","13.4","13.5","13.6","13.27","13.28","13.29","15.1","15.3","15.24","15.31","16.3","19.1","30.24","30.32","41.17","41.24"],"srt":["0.11","12.27","12.28","12.29"],"on":["0.16","2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.13","2.14","2.15","2.16","2.17","2.19","2.20","2.21","2.22","2.24","2.25","2.26","2.27","2.28","2.29","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.7","3.8","3.9","3.16","5.1","5.2","5.3","5.4","5.5","5.6","5.16","5.23","5.24","5.25","5.35","5.36","8.4","9.7","10.8","10.11","10.12","10.14","10.15","12.1","12.3","12.4","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.17","12.19","12.20","12.21","12.22","12.24","12.25","12.26","12.27","12.28","12.29","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.7","13.8","13.9","13.16","15.1","15.2","15.3","15.5","15.6","15.9","15.14","15.16","15.17","15.18","15.20","15.21","15.23","15.24","15.25","15.35","15.36","18.4","19.7","25.13","25.14","35.4","36.13","36.14","41.4"],"非常少使用":["1.0"],"sample":["1.1","3.1","3.2","3.3","3.10","3.11","3.12","3.17","3.20","3.21","3.22","3.23","3.26","3.30","3.31","3.32","5.4","5.39","11.1","12.1","13.5","13.6","13.7","13.8","13.9","13.10","13.11","13.12","13.16","13.20","13.21","13.27","13.32","15.4","15.5","15.6","15.16","15.23","15.25","15.35","15.36","15.38","15.39","20.10","22.0","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.25","30.27","30.34","30.36","30.37","30.40","30.43","30.44","30.47","31.10","33.0","41.6","41.8","41.9","41.11","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.25","41.27","41.34","41.40","41.43","41.44","41.46","41.47"],"video":["1.1","3.7","3.8","3.9","3.10","3.11","3.12","3.16","3.20","3.21","3.22","3.23","3.30","3.32","5.4","5.38","10.12","10.14","11.1","12.1","12.36","13.5","13.6","13.7","13.8","13.9","13.16","13.21","13.27","15.4","15.23","15.38","19.1","20.10","29.1","30.9","30.27","31.10","41.5","41.6","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.25","41.27","41.36","41.37","41.41","41.43","41.44","41.46","41.47"],"mp4":["1.1","3.7","3.8","3.9","3.16","3.21","3.27","5.4","5.5","5.6","5.16","5.23","5.25","5.35","5.36","5.38","5.39","10.11","10.12","10.14","12.1","12.3","12.4","12.5","12.11","12.14","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.39","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.21","13.27","13.28","15.4","15.5","15.6","15.14","15.16","15.23","15.25","15.35","15.36","15.38","15.39","19.1","20.10","29.1","30.5","30.14","30.16","30.24","30.36","30.37","30.41","31.10","41.5","41.8","41.9","41.13","41.14","41.15","41.16","41.17","41.21","41.25","41.36","41.37","41.41","41.44"],"artplayer":["1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.11","1.12","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","22.0","23.0","30.11","30.21","30.40","30.46","33.0","34.0"],"d":["1.6"],"info":["1.11","2.12","5.14","5.27","5.37","5.38","9.4","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","15.8","15.13","15.14","15.22","15.27","15.28","15.29","15.32","15.33","19.4","20.5","28.8","30.31","31.5","39.8","41.31"],"const":["2.0","5.17","5.18","9.4","12.0","15.17","15.18","19.4","20.10","25.11","36.11"],"onready":["2.0","12.0"],"console":["2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.28","2.29","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.39","5.24","5.37","5.38","5.39","9.4","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","12.7","12.8","12.9","12.10","12.12","12.13","12.15","12.26","15.8","15.13","15.14","15.22","15.27","15.28","15.29","15.32","15.33","15.39","19.4","20.5","25.14","28.8","31.5","35.4","36.14","39.8","41.31"],"event":["2.5","2.7","2.8","2.9","2.10","2.12","2.13","5.37","9.4","12.5","12.7","12.8","12.9","12.10","12.12","12.13"],"reconnecttime":["2.11","12.11"],"state":["2.12","2.15","2.16","2.21","2.22","2.23","2.24","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","9.5","9.6","12.12","12.15","12.21","12.22","12.23","12.24","12.31","12.32","12.33","12.34","12.35","12.37","19.6"],"height":["2.18","19.5","31.5"],"datauri":["2.25","12.25"],"currenttime":["2.26","12.26","28.12","39.12"],"offset":["2.27"],"text":["2.28","10.8","10.9","10.10","12.28","25.7","36.7"],"ass":["2.30","12.30"],"load":["2.44","12.44"],"方法重新加载它":["2.44"],"基本上用不到":["3.0"],"app":["3.1","3.3","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.23","3.24","3.25","3.26","3.30","3.31","11.1","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","15.4","15.38","20.10","21.0","22.0","23.0","28.5","28.13","30.3","30.5","30.6","30.8","30.11","30.12","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.27","30.34","30.40","30.43","30.44","30.46","30.47","31.10","32.0","33.0","34.0","39.5","39.13","41.3","41.11","41.34"],"url":["3.1","3.2","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.22","3.23","3.24","3.25","3.26","3.30","3.31","3.32","11.1","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.21","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","15.4","15.38","20.10","30.3","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.27","30.34","30.37","30.43","30.44","30.46","30.47","31.10","41.6","41.11","41.12","41.18","41.20","41.22","41.23","41.26","41.27","41.34","41.43","41.46","41.47"],"assets":["3.1","3.2","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.30","3.31","3.32","11.1","13.2","13.3","13.7","13.8","13.9","13.10","13.11","13.12","13.16","13.20","13.21","13.22","13.30","13.31","13.32","15.4","15.35","15.36","15.38","15.39","20.10","22.0","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.27","30.34","30.36","30.37","30.40","30.43","30.44","30.46","30.47","31.10","33.0","41.3","41.6","41.8","41.9","41.11","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.25","41.26","41.27","41.34","41.40","41.43","41.44","41.46","41.47"],"loop":["3.4","3.5","3.6","13.4","13.5","13.6"],"flip":["3.4","3.5","3.6","13.4"],"dblclick":["3.16"],"setting":["3.27","3.28","12.17","12.27","13.27","13.28","19.1","25.11","36.11"],"playbackrate":["3.27","13.27"],"contextmenu":["3.27","3.28","3.29","13.28","13.29"],"aspectratio":["3.28","13.28"],"show":["3.28","3.29","9.7","13.29","19.7","25.9","36.9","41.28","41.30"],"click":["4.0","5.34","5.37","14.0","15.34","25.8","35.4"],"marginright":["4.0","14.0"],"比较常用":["5.0"],"muted":["5.1","15.1","15.24"],"ready":["5.2","5.3","5.5","5.6","5.7","5.9","5.16","5.20","5.23","5.24","5.25","6.4","7.4","8.4","9.7","10.8","10.11","10.12","10.14","10.15","12.0","12.6","15.2","15.3","15.7","15.9","15.12","15.14","15.17","15.18","15.20","15.24","15.27","16.4","17.4","18.4","19.7","25.14","36.14"],"seek":["5.7","15.7","15.10","15.12"],"switch":["5.11"],"和":["5.11","7.1","36.6"],"的功能是一样的":["5.11"],"只是":["5.11"],"有的视频是没有时长的":["5.15"],"async":["5.17","5.18","15.17","15.18"],"await":["5.17","5.18","15.17","15.18"],"t":["5.22"],"json":["5.26"],"stringify":["5.26"],"resize":["5.30","36.13"],"当你的容器只有宽度":["5.30"],"playsinline":["5.31","15.31","41.37"],"m3u8":["5.32","30.2","41.40"],"000":["5.33"],"right":["5.34","7.1","15.34"],"html":["5.34","10.8","10.9","10.10","15.34","20.1","31.1"],"green":["5.40","15.40"],"1080p":["5.41","15.41"],"组件点击事件":["6.1","8.1"],"mounted":["6.1","8.1","16.1","18.1","25.11","30.28","36.11","41.28"],"组件挂载后触发":["6.1","8.1"],"get":["6.2","6.3","7.2","7.3","8.2","8.3","16.2","16.3","17.2","17.3","18.2","18.3"],"the":["6.2","6.3","6.4","6.5","7.2","7.3","7.4","8.2","8.3","8.4","9.7","16.2","16.3","16.4","16.5","17.2","17.3","17.4","18.2","18.3","18.4","19.7","30.19","30.30"],"element":["6.2","6.3","7.2","7.3","8.2","8.3","16.2","16.3","17.2","17.3","18.2","18.3"],"of":["6.2","6.3","7.2","7.3","8.2","8.3","12.51","15.37","16.2","16.3","17.2","17.3","18.2","18.3","25.6","30.38"],"by":["6.2","6.3","6.4","6.5","7.2","7.4","8.4","16.2","16.3","16.4","16.5","17.2","17.4","18.4","29.0"],"delete":["6.4","7.4","8.4","9.7"],"控制控制器出现的左右位置":["7.1"],"selector":["7.1","17.1"],"array":["7.1","17.1"],"return":["7.2","17.2","25.10"],"control":["7.2","7.3","7.4","17.2","17.3","17.4"],"200px":["8.5","18.5"],"720p":["9.2","19.2"],"360p":["9.2","19.2"],"nextstate":["9.4","19.4"],"heigth":["9.5","9.6","19.6"],"src":["9.5","9.6","19.5","19.6"],"svg":["9.5","9.6","19.5","19.6"],"pip":["9.8","19.8"],"mode":["9.8","19.8"],"close":["9.8","19.8","24.4"],"are":["10.0","11.0","15.0"],"less":["10.0"],"commonly":["10.0","15.0"],"modify":["10.1","10.4","20.11"],"this":["10.1"],"object":["10.1"],"named":["10.2"],"starting":["10.2"],"with":["10.2"],"a":["10.2","12.46","15.21","20.3"],"here":["10.2"],"is":["10.2","10.5","16.1","18.1","30.7","30.45","35.4"],"definition":["10.2","10.5","30.38"],"if":["10.3","10.6","30.2","30.4","30.17"],"you":["10.3","10.6","20.3","30.45"],"need":["10.3","20.11","30.2","30.45"],"some":["10.3","10.8","10.9","10.10"],"only":["10.3","10.13","15.37","30.19"],"exist":["10.3","15.37"],"can":["10.4","15.11","20.3"],"accordingly":["10.4"],"after":["10.6","10.13","16.1","18.1","30.19"],"instantiation":["10.6"],"want":["10.6"],"before":["10.6"],"please":["10.6","20.11","30.29","30.30"],"immediately":["10.7"],"hide":["10.7","25.15","36.15"],"position":["10.9","15.34"],"shortcut":["10.13"],"keys":["10.13"],"will":["10.13","20.4","30.19"],"work":["10.13","30.19"],"subtitleoffset":["10.15"],"something":["10.16"],"dosomething":["10.16"],"very":["11.0","15.30"],"rarely":["11.0"],"container":["11.1","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","15.38","20.10","21.0","22.0","23.0","30.3","30.21","30.34","30.40","30.44","30.46","32.0","33.0","34.0","41.34"],"following":["11.6","20.11"],"address":["11.6","30.17"],"off":["12.0"],"having":["12.40"],"stop":["12.40"],"for":["12.40","12.41","29.0","30.10","30.48"],"stopping":["12.41"],"content":["12.41"],"property":["12.43"],"changes":["12.43"],"method":["12.44","28.7","39.7"],"called":["12.44"],"end":["12.45"],"point":["12.45"],"supported":["12.46"],"finished":["12.47"],"lack":["12.51"],"resources":["12.52"],"completed":["12.54"],"started":["12.55"],"has":["12.56","12.58"],"not":["12.56"],"suspended":["12.57"],"missing":["12.60"],"future":["13.0"],"and":["13.0","20.11"],"new":["13.1","13.13","13.14","13.15","13.23","13.24","13.26","20.8","20.9","22.0","30.11","30.26","31.8","31.9","33.0","41.26"],"art":["13.23","20.9","28.12","30.11","30.26","39.12"],"controls":["14.0"],"tooltip":["14.0"],"quite":["15.0"],"when":["15.11"],"it":["15.11","15.30","15.37"],"resolves":["15.11"],"indicates":["15.11"],"that":["15.11"],"played":["15.11"],"been":["15.15"],"fully":["15.15"],"decoded":["15.15"],"in":["15.15","20.4"],"which":["15.15"],"page":["15.19","30.10"],"must":["15.19","20.3","30.10"],"have":["15.19","20.3"],"had":["15.19"],"an":["15.19","17.1","30.4"],"user":["15.21"],"interaction":["15.21"],"e":["15.21"],"g":["15.21"],"useful":["15.30"],"as":["15.30","30.2","30.7"],"s":["15.30"],"during":["15.37"],"lifespan":["15.37"],"triggered":["16.1","18.1"],"context":["16.4"],"controller":["17.1"],"objects":["17.1"],"selection":["17.1"],"list":["17.1"],"onselect":["17.1"],"item":["19.4"],"width":["19.5","28.5","31.5","39.5"],"tip":["20.3","20.9","31.9","31.11"],"see":["20.3","24.4"],"more":["20.3","30.41"],"examples":["20.3"],"directly":["20.4"],"60px":["20.5","31.5"],"auto":["20.5","31.5"],"non":["20.5"],"responsive":["20.5"],"ts":["20.6"],"current":["20.8","31.8"],"complete":["20.9"],"support":["20.11","24.4"],"even":["20.11"],"older":["20.11"],"configuration":["20.11","30.28","30.30","30.31"],"akamaized":["21.0","32.0"],"net":["21.0","32.0"],"akamai":["21.0","32.0"],"bbb":["21.0","32.0"],"30fps":["21.0","32.0"],"var":["22.0","23.0","30.11","33.0","34.0"],"test":["23.0","34.0"],"streams":["23.0","34.0"],"mux":["23.0","34.0"],"x36xhzz":["23.0","34.0"],"default":["24.4","29.0"],"multilingual":["24.4"],"i18n":["24.4","29.0"],"countdown":["24.4"],"detail":["24.4","35.4"],"details":["24.4"],"canbeclosed":["24.4","35.4"],"until":["24.4"],"dark":["25.4","36.4"],"输入框自定义挂载时的主题色":["25.4","36.4"],"默认为":["25.4","36.4"],"可以选填亮色":["25.4","36.4"],"light":["25.4","36.4"],"heatmap":["25.4","36.4"],"是否开启弹幕热度图":["25.4","36.4"],"beforeemit":["25.4","36.4"],"trim":["25.4","25.10","36.4"],"stationary":["25.5"],"red":["25.5","36.5"],"format":["25.6"],"bilibili":["25.6","36.6"],"website":["25.6"],"time":["25.7","30.7","36.7"],"function":["25.8","25.11","36.8","36.11","41.31"],"target":["25.9","36.9"],"innertext":["25.9","36.9"],"else":["25.9","36.9"],"color":["25.10","36.10"],"math":["25.10","36.10"],"floor":["25.10","36.10"],"random":["25.10","36.10"],"0xffffff":["25.10","36.10"],"tostring":["25.10","36.10"],"display":["25.11"],"flex":["25.11"],"alignitems":["25.11"],"center":["25.11","36.11"],"queryselector":["25.11","36.11"],"config":["25.12","36.12"],"xml":["25.13","25.14","36.13","36.14"],"弹幕开始":["25.15","36.15"],"弹幕隐藏":["25.15","36.15"],"or":["28.1","28.7","30.2","39.7"],"retrieve":["28.1"],"values":["28.1"],"div":["28.5","28.13","39.5","39.13"],"class":["28.5","28.13","39.5","39.13"],"style":["28.5","39.5"],"resolve":["28.7","39.7"],"currenttime2":["28.7","39.7"],"js":["28.9"],"inside":["28.10","30.4"],"artplayerpluginiframe":["28.11"],"data":["28.12","39.12"],"displayed":["29.0"],"usage":["29.0"],"lang":["29.1","40.1"],"window":["29.2","40.2"],"imported":["29.4","40.4"],"aspect":["30.1"],"ratio":["30.1","41.1"],"ogg":["30.2","41.2"],"webm":["30.2","41.2"],"other":["30.2"],"such":["30.2","30.7"],"callback":["30.4"],"refers":["30.4"],"instance":["30.4"],"but":["30.4","30.39"],"arrow":["30.4"],"initialized":["30.7"],"next":["30.7"],"refreshing":["30.7"],"be":["30.10"],"set":["30.10"],"security":["30.17"],"mechanisms":["30.17"],"source":["30.17"],"player":["30.19"],"gains":["30.19"],"focus":["30.19"],"innerhtml":["30.26"],"component":["30.28","30.30","30.31"],"refer":["30.30","30.31"],"sd":["30.32"],"480p":["30.32","41.32"],"谁でもいいはずなのに":["30.33","41.33"],"夏の想い出がまわる":["30.33","41.33"],"png":["30.35","30.38","41.35","41.38"],"all":["30.38"],"cannot":["30.39"],"zh":["30.42","41.42"],"cn":["30.42","41.42"],"same":["30.45"],"different":["30.45"],"reference":["30.48"],"syntax":["30.48"],"播放器的尺寸依赖于容器":["31.3"],"的尺寸":["31.3"],"所以你的容器":["31.3"],"非响应式":["31.4"],"在":["31.4"],"600px":["31.5"],"400px":["31.5"],"margin":["31.5"],"全部":["31.9"],"typescript":["31.9"],"volume":["31.10"],"假如你要兼容更古老的浏览器时":["31.11"],"查看详情":["35.4"],"s秒后可关闭广告":["35.4"],"ad":["35.4"],"clicked":["35.4"],"文件":["36.6"],"网站的弹幕格式一致":["36.6"],"切换弹幕":["36.12"],"或者获取":["39.1"],"里":["39.10"],"写法参考":["40.0","41.48"],"默认支持三种视频文件格式":["41.2"],"播放器会缓存最后一次音量的大小":["41.7"],"假如希望默认进入页面就能自动播放视频":["41.10"],"必需为":["41.10"],"视频快进":["41.19"],"视频快退":["41.19"],"space":["41.19"],"切换播放":["41.19"],"暂停":["41.19"],"subtitle":["41.24"],"组件配置":["41.30"],"args":["41.31"],"hd":["41.32"],"webkit":["41.37"],"全部图标的定义":["41.38"],"但无法解析这种后缀":["41.39"],"作为":["41.45"],"key":["41.45"],"来缓存播放进度的":["41.45"],"但假如你的同一个视频的":["41.45"]},{"0":["5.9","5.10","5.12","5.15","5.22","15.9","15.10","15.12","15.15","15.22","20.10","31.10"],"1":["9.6","19.6"],"2":["5.7","15.7","15.28","25.7","36.7"],"3":["25.5","25.7","36.5","36.7"],"5":["5.5","5.6","9.6","15.5","15.6","15.8","15.14","19.6","20.10","31.10"],"9":["15.29","41.1"],"10":["9.6","19.6","30.35","41.35"],"100":["28.13","39.13"],"240":["30.33"],"300":["30.33","41.33"],"333":["25.5","25.7","36.7"],"404":["3.13","3.14","13.13","13.14"],"1000":["0.12","0.14","10.10","10.12","10.14","10.15","28.7","39.7"],"3000":["5.2","5.3","5.7","5.10","5.12","5.20","5.41","6.4","6.5","7.4","7.5","8.4","8.5","9.7","9.8","15.2","15.3","15.7","15.10","15.12","15.20","15.41","16.4","16.5","17.4","17.5","18.4","18.5","19.7","19.8"],"对象":["0.1"],"播放器不会马上做出响应":["0.1"],"types":["0.2","2.0","10.2","10.5","11.6","29.0","30.38","30.48","41.38"],"d":["0.2","0.5","2.0","10.2","10.5","11.6","12.0","29.0","30.38","30.48","40.0","41.38","41.48"],"ts":["0.2","0.5","1.6","2.0","10.2","10.5","11.6","12.0","29.0","30.38","30.48","40.0","41.38","41.48"],"warning":["0.3","0.9","0.10","0.13","0.15","2.0","10.8","10.10","10.15","12.0","30.1","30.35","30.42","31.5","41.1","41.28","41.29","41.35","41.42"],"提示":["0.3","0.13","5.26","5.37","41.1","41.4","41.19"],"假如你需要一些":["0.3","5.37"],"事件只存在于播放器的生命周期上时":["0.3","5.37"],"强烈建议使用这些函数":["0.3"],"以避免造成内存泄漏":["0.3","5.37"],"your":["0.4","10.4"],"假如想在实例化之前更新":["0.6"],"请使用基础选项的":["0.6"],"来更新":["0.6"],"的显示":["0.7"],"组件配置":["0.8","0.9","0.10","41.28","41.31"],"请参考以下地址":["0.8","0.9","0.10","0.15","41.28","41.29","41.30","41.31"],"component":["0.8","0.9","0.10","0.15","10.8","10.9","10.10","10.15","30.29","41.28","41.29","41.30","41.31"],"color":["0.11","10.11","30.36","41.36"],"red":["0.11","10.11"],"false":["0.12","5.20","9.8","10.12","10.14","15.20","19.8"],"只在播放器获得焦点后":["0.13","41.19"],"如点击了播放器后":["0.13","41.19"],"这些快捷键才会生效":["0.13","41.19"],"true":["0.14","3.10","3.11","3.12","3.20","3.21","3.22","3.23","5.23","10.12","10.14","13.10","13.11","13.12","13.20","13.21","13.22","13.23","15.13","15.23","25.10","30.8","30.9","30.11","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.25","30.26","30.37","30.43","30.44","30.46","30.47","36.10","41.8","41.9","41.11","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.22","41.23","41.25","41.26","41.37","41.43","41.44","41.46","41.47"],"设置面板":["0.15"],"html":["0.15","10.15","24.2","25.2","26.2","27.2","28.3","30.41","30.42","35.2","36.2","37.2","38.2","39.3","41.41","41.42"],"ready":["0.16","2.0","5.1","5.4","10.16","15.1","15.4","15.5","15.6","15.16","15.23","15.25","21.0","22.0","23.0","32.0","33.0","34.0"],"off":["2.0"],"全部事件请参考以下地址":["2.0"],"events":["2.0"],"info":["2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.30","5.17","5.18","5.24","5.35","5.36","5.39","9.5","12.1","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.30","15.17","15.18","15.24","15.35","15.36","15.38","15.39","19.5","21.0","22.0","23.0","24.4","25.14","32.0","33.0","34.0","35.4","36.14"],"console":["2.2","2.6","2.19","2.27","2.30","2.38","3.7","3.8","3.9","3.16","5.17","5.18","5.35","5.36","9.5","12.1","12.2","12.3","12.4","12.5","12.6","12.11","12.14","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.27","12.28","12.29","12.30","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.7","13.8","13.9","13.16","15.17","15.18","15.24","15.35","15.36","15.38","19.5","21.0","22.0","23.0","24.4","32.0","33.0","34.0"],"log":["2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.7","3.8","3.9","3.16","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.7","13.8","13.9","13.16"],"video":["3.1","3.2","3.3","3.15","3.17","3.18","3.19","3.24","3.25","3.26","3.31","13.2","13.3","13.10","13.11","13.12","13.15","13.17","13.18","13.20","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","30.3","30.6","30.8","30.11","30.12","30.18","30.20","30.21","30.22","30.23","30.25","30.26","30.34","30.43","30.47","41.3","41.11","41.26","41.34"],"mp4":["3.1","3.2","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.22","3.23","3.24","3.25","3.26","3.30","3.31","3.32","11.1","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","30.3","30.6","30.8","30.9","30.11","30.12","30.13","30.15","30.18","30.20","30.21","30.22","30.23","30.25","30.26","30.27","30.34","30.43","30.44","30.46","30.47","41.3","41.6","41.11","41.12","41.18","41.20","41.22","41.23","41.26","41.27","41.34","41.43","41.46","41.47"],"playbackrate":["3.4","3.5","3.6","13.4","13.5","13.6"],"aspectratio":["3.4","3.5","3.6","13.4","13.5","13.6"],"autoplayback":["3.10","3.11","3.12","13.10","13.11","13.12"],"sample":["3.13","3.14","3.15","3.18","3.19","3.24","3.25","13.1","13.2","13.3","13.13","13.14","13.15","13.17","13.18","13.22","13.23","13.24","13.25","13.26","13.30","13.31","30.3","30.11","30.21","30.26","30.46","41.3","41.26"],"autoorientation":["3.20","13.20"],"show":["3.21","3.27","13.21","13.27","13.28","25.15","36.15"],"fastforward":["3.22","3.23","13.22","13.23"],"fullscreenweb":["3.30","13.30"],"miniprogressbar":["3.32","13.32"],"pause":["4.0","14.0"],"layer":["4.0","14.0"],"png":["4.0","14.0"],"t":["5.9","5.10","5.12","15.9","15.10","15.12","15.22"],"方法会返回":["5.11"],"promise":["5.11"],"当":["5.11"],"resolve":["5.11"],"时表示新地址是可以播放":["5.11"],"reject":["5.11"],"时表示新地址加载错误":["5.11"],"例如直播中的视频或者没被解码完成的视频":["5.15"],"这个时候获取的时长会是":["5.15"],"由于浏览器安全机制":["5.19","5.21","41.17"],"触发窗口全屏前":["5.19"],"页面必须先存在交互":["5.19","5.21"],"例如用户点击过页面":["5.19","5.21"],"触发画中画前":["5.21"],"尺寸和坐标信息是通过":["5.26"],"getboundingclientrect":["5.26","15.26"],"获取的":["5.26"],"但不知道具体高度时":["5.30"],"这个属性很有用":["5.30"],"它能自动计算出视频的高度":["5.30"],"但你需要确定设置这个属性的时机":["5.30"],"强烈建议使用该函数":["5.37"],"4k":["5.41","15.41"],"tooltip":["6.1","8.1","16.1","18.1"],"组件的提示文本":["6.1","8.1"],"remove":["6.4","7.4","8.4","9.7","16.4","17.4","18.4","19.7"],"选择列表的对象数组":["7.1"],"onselect":["7.1"],"选择列表的元素被点击时触发的函数":["7.1"],"by":["7.3","8.2","8.3","9.7","17.3","18.2","18.3","19.7"],"left":["8.5","18.5","30.2"],"switchquality":["9.2","19.2"],"open":["9.4","19.4"],"return":["9.4","9.5","19.4","19.5"],"item":["9.5","17.1","19.5"],"event":["9.5"],"x":["9.5","19.5"],"range":["9.6","19.6"],"switch":["9.8","19.8"],"used":["10.0","11.0","15.0","30.4"],"will":["10.1","15.15","20.5","30.4"],"not":["10.1","13.0","20.5","30.4"],"respond":["10.1"],"immediately":["10.1"],"during":["10.3"],"lifecycle":["10.3"],"it":["10.3","12.44","20.11","30.7"],"strongly":["10.3"],"recommended":["10.3","15.37"],"use":["10.3","10.6","15.37","20.3","30.39"],"these":["10.3"],"functions":["10.3"],"avoid":["10.3","15.37"],"causing":["10.3","15.37"],"memory":["10.3","15.37"],"leaks":["10.3","15.37"],"from":["10.6","17.1"],"basic":["10.6"],"options":["10.6","30.1"],"for":["10.6","12.0","30.4"],"of":["10.7","12.0"],"configuration":["10.8","10.9","10.10"],"please":["10.8","10.9","10.10","10.15","12.0","30.2","30.10","30.28"],"refer":["10.8","10.9","10.10","10.15","12.0","20.11","29.0","30.2","30.28","30.29"],"following":["10.8","10.9","10.10","10.15","12.0","20.3","30.28","30.29","30.30","30.31"],"address":["10.8","10.9","10.10","12.0","30.28","30.29","30.30","30.31"],"srt":["10.11","30.24","41.24"],"settimeout":["10.12","10.14","15.3","15.20","28.7","39.7"],"has":["10.13"],"gained":["10.13"],"focus":["10.13"],"e":["10.13","15.19"],"g":["10.13","15.19"],"clicking":["10.13","30.19"],"link":["10.15","20.3"],"on":["10.16","15.4","15.19","24.4","30.2","30.19"],"a":["12.0"],"full":["12.0"],"list":["12.0"],"state":["12.36","12.38"],"further":["12.40"],"buffering":["12.40","12.41"],"to":["12.44","15.30","30.28","30.29"],"reload":["12.44"],"format":["12.46"],"data":["12.51","12.60"],"appeared":["12.56"],"changed":["12.58"],"basically":["13.0"],"needed":["13.0"],"assets":["13.1","13.13","13.14","13.15","13.17","13.18","13.23","13.24","13.25","13.26","30.3","30.11","30.26"],"flip":["13.5","13.6"],"dblclick":["13.16"],"contextmenu":["13.27"],"play":["14.0"],"rejects":["15.11"],"there":["15.11"],"was":["15.11"],"an":["15.11"],"error":["15.11"],"loading":["15.11"],"case":["15.15"],"obtained":["15.15","15.26"],"be":["15.15"],"interaction":["15.19"],"user":["15.19"],"clicked":["15.19","17.1","24.4"],"page":["15.21","30.7"],"must":["15.21"],"occur":["15.21","30.17"],"before":["15.21"],"triggering":["15.21"],"coordinates":["15.26"],"are":["15.26","30.17"],"via":["15.26"],"need":["15.30"],"make":["15.30"],"sure":["15.30"],"m3u8":["15.32","30.40","41.2"],"000":["15.33"],"highly":["15.37"],"this":["15.37","30.7"],"text":["16.1","18.1"],"when":["17.1"],"script":["20.1","24.2","25.2","26.2","27.2","28.3","31.1","35.2","36.2","37.2","38.2","39.3"],"at":["20.3"],"packages":["20.3","20.9","31.3","31.9"],"template":["20.3","31.3"],"change":["20.4","20.5","36.11"],"the":["20.4","20.5","30.28","30.29","30.31"],"player":["20.4"],"in":["20.5"],"directly":["20.5"],"modifying":["20.5"],"typescript":["20.9"],"definitions":["20.9"],"volume":["20.10"],"art8":["20.10","31.10"],"new":["20.10","31.10"],"yourself":["20.11"],"scripts":["20.11","31.11"],"documentation":["20.11"],"browserslist":["20.11","31.11"],"type":["21.0","23.0","32.0","34.0"],"customtype":["21.0","22.0","23.0","32.0","33.0","34.0"],"click":["24.4"],"skip":["24.4","35.4"],"发送弹幕前的自定义校验":["25.4","36.4"],"通过":["25.4","36.4"],"mount":["25.4","36.4"],"选项可以自定义输入框挂载的位置":["25.4","36.4"],"默认挂载于播放器底部":["25.4","36.4"],"仅在当宽度小于最小值时生效":["25.4","36.4"],"document":["25.4","36.4"],"queryselector":["25.4","36.4"],"artplayer":["25.4","36.4"],"green":["25.5","36.5"],"border":["25.10","36.10"],"addeventlistener":["25.11","36.11"],"number":["25.11","36.11"],"v2":["25.12","36.12"],"resize":["25.13"],"弹幕显示":["25.15","36.15"],"destroy":["25.15","36.15"],"弹幕销毁":["25.15","36.15"],"height":["28.5","28.13","39.5","39.13"],"style":["28.13","39.13"],"width":["28.13","39.13"],"or":["29.1","40.1"],"tip":["30.1","31.3"],"among":["30.1"],"all":["30.1"],"only":["30.1"],"is":["30.1"],"mandatory":["30.1"],"flv":["30.2","41.2"],"third":["30.2"],"party":["30.2"],"libraries":["30.2"],"side":["30.2"],"point":["30.4"],"jpg":["30.5","41.5"],"ffad00":["30.6","41.6"],"read":["30.7","30.10"],"cached":["30.7"],"value":["30.7"],"more":["30.10","30.42"],"information":["30.10"],"policy":["30.10","41.10"],"changes":["30.10","41.10"],"url":["30.11","30.26"],"setting":["30.14","30.15","30.16","30.24","41.14","41.15","41.16","41.24"],"website":["30.17"],"cross":["30.17"],"origin":["30.17"],"failure":["30.17"],"may":["30.17"],"such":["30.19"],"as":["30.19"],"hd":["30.32"],"720p":["30.32","41.32"],"こんなとこにあるはずもないのに":["30.33","41.33"],"终わり":["30.33","41.33"],"online":["30.35"],"generation":["30.35"],"tool":["30.35","41.35"],"03a9f4":["30.36","41.36"],"font":["30.36","41.36"],"size":["30.36","41.36"],"30px":["30.36","41.36"],"webkit":["30.37"],"playsinline":["30.37"],"therefore":["30.39"],"if":["30.39"],"you":["30.39"],"best":["30.39"],"well":["30.39"],"settings":["30.41","30.42"],"start":["30.41","30.42","41.41","41.42"],"i18n":["30.41","41.41"],"tw":["30.42","41.42"],"identify":["30.45"],"unique":["30.45"],"必须是有尺寸的":["31.3"],"以下链接可以看到更多的使用例子":["31.3"],"里直接修改":["31.4","31.5"],"是不会改变播放器的":["31.4","31.5"],"非响应式":["31.5"],"在":["31.5"],"定义":["31.9"],"请修改以下配置然后自行构建":["31.11"],"构建配置":["31.11"],"build":["31.11"],"参考文档":["31.11"],"skipped":["35.4"],"显示弹幕":["36.8","36.9"],"hide":["36.9"],"播放器的值":["39.1"],"全部选项里":["41.1"],"只有":["41.1"],"是必填的":["41.1"],"如需要播放":["41.2"],"或者":["41.2"],"等其它格式":["41.2"],"请参考左侧的":["41.2"],"第三方库":["41.2"],"回调函数里的":["41.4"],"就是播放器实例":["41.4"],"但回调函数假如使用了箭头函数":["41.4"],"则不会指向播放器实例":["41.4"],"下次初始化时":["41.7"],"如刷新页面":["41.7"],"播放器会读取该缓存值":["41.7"],"更多信息请阅读":["41.10"],"假如视频源地址和网站是跨域的":["41.17"],"可能会出现截图失败":["41.17"],"在线生成预览图":["41.35"],"thumbnail":["41.35"],"所以假如你使用了":["41.39"],"最好同时要指明":["41.39"],"function":["41.40"],"更多的语言设置":["41.41","41.42"],"是不同的话":["41.45"],"那么你需要使用":["41.45"],"来标识视频的唯一":["41.45"]}]'},t={"0.0":{t:"# 高级属性",p:`这里的 高级属性 是指挂载在 实例 的 二级属性，比较少用 -`,l:"advanced/built-in.html",a:"高级属性"},"0.1":{t:"`option`",p:`播放器的选项 -<div className="run-code">▶ Run Code< ...`,l:"advanced/built-in.html#option",a:"option"},"0.2":{t:"`template`",p:`管理播放器所有的 DOM 元素 -<div className="run-code">▶ Ru ...`,l:"advanced/built-in.html#template",a:"template"},"0.3":{t:"`events`",p:"管理播放器所有的 DOM 事件，实质上是代理了 addEventListener 和 removeEventListener ...",l:"advanced/built-in.html#events",a:"events"},"0.4":{t:"`storage`",p:`管理播放器的本地存储 +const e={map:'[{"高级属性":["0.0"],"option":["0.1","1.12","10.1","11.12","20.9","25.4","25.14","31.9","36.14"],"template":["0.2","10.2"],"events":["0.3","10.3"],"storage":["0.4","10.4"],"icons":["0.5","10.5","30.38","41.38"],"i18n":["0.6","10.6","30.42","41.42"],"notice":["0.7","3.3","10.7","13.3"],"layers":["0.8","10.8","30.28","41.28"],"controls":["0.9","10.9","30.31","41.31"],"contextmenu":["0.10","2.36","3.2","10.10","12.36","13.2","30.30","41.30"],"subtitle":["0.11","2.35","10.11","12.35","30.36","41.36"],"loading":["0.12","2.33","10.12","12.33"],"hotkey":["0.13","2.5","10.13","12.5","30.19","41.19"],"mask":["0.14","2.34","10.14","12.34"],"setting":["0.15","2.38","3.4","3.5","3.6","10.15","12.38","13.4","13.5","13.6","30.18","41.18"],"plugins":["0.16","10.16","30.34","41.34"],"静态属性":["1.0"],"instances":["1.1","11.1"],"version":["1.2","11.2"],"env":["1.3","11.3"],"build":["1.4","11.4"],"config":["1.5","11.5","25.11","36.11"],"utils":["1.6","11.6"],"scheme":["1.7","11.7"],"emitter":["1.8","11.8"],"validator":["1.9","11.9"],"kindof":["1.10","11.10"],"html":["1.11","11.11"],"实例事件":["2.0"],"ready":["2.1","12.1"],"restart":["2.2","12.2"],"pause":["2.3","5.2","12.3","15.2"],"play":["2.4","5.1","12.4","15.1"],"destroy":["2.6","5.4","12.6","15.4","28.9","39.9"],"focus":["2.7","12.7"],"blur":["2.8","12.8"],"dblclick":["2.9","12.9"],"click":["2.10","12.10"],"error":["2.11","12.11"],"hover":["2.12","12.12"],"mousemove":["2.13","12.13"],"resize":["2.14","3.7","12.14","13.7"],"view":["2.15","12.15"],"lock":["2.16","12.16","30.43","41.43"],"aspectratio":["2.17","5.29","12.17","15.29","30.16","41.16"],"autoheight":["2.18","5.30","12.18","15.30"],"autosize":["2.19","5.25","12.19","15.25","30.11","41.11"],"flip":["2.20","3.29","5.27","12.20","13.29","15.27","30.14","41.14"],"fullscreen":["2.21","3.30","5.19","12.21","13.30","15.19","30.22","41.22"],"fullscreenweb":["2.22","5.20","12.22","15.20","30.23","41.23"],"mini":["2.23","5.23","12.23","15.23"],"pip":["2.24","5.21","12.24","15.21","30.20","41.20"],"screenshot":["2.25","5.16","12.25","15.16","30.17","41.17"],"seek":["2.26","3.26","5.5","12.26","13.26","15.5"],"subtitleoffset":["2.27","12.27","30.24","41.24"],"subtitleupdate":["2.28","12.28"],"subtitleload":["2.29","12.29"],"subtitleswitch":["2.30","12.30"],"info":["2.31","3.21","12.31","13.21"],"layer":["2.32","12.32","18.0"],"control":["2.37","3.15","12.37","13.15"],"muted":["2.39","5.13","12.39","15.13","30.9","41.9"],"video":["2.40","2.41","2.42","2.43","2.44","2.45","2.46","2.47","2.48","2.49","2.50","2.51","2.52","2.53","2.54","2.55","2.56","2.57","2.58","2.59","2.60","5.39","12.40","12.41","12.42","12.43","12.44","12.45","12.46","12.47","12.48","12.49","12.50","12.51","12.52","12.53","12.54","12.55","12.56","12.57","12.58","12.59","12.60","15.39","24.0"],"全局属性":["3.0"],"debug":["3.1","13.1"],"scroll":["3.8","3.9","13.8","13.9"],"auto":["3.10","3.11","3.12","3.20","13.10","13.11","13.12","13.20"],"reconnect":["3.13","3.14","13.13","13.14"],"dbclick":["3.16","3.17","13.16","13.17"],"mobile":["3.18","3.19","13.18","13.19"],"fast":["3.22","3.23","13.22","13.23"],"touch":["3.24","13.24"],"volume":["3.25","5.8","13.25","15.8","30.7","41.7"],"playback":["3.27","13.27"],"aspect":["3.28","13.28"],"log":["3.31","13.31"],"use":["3.32","13.32"],"编写插件":["4.0"],"实例属性":["5.0"],"toggle":["5.3","15.3"],"forward":["5.6","15.6"],"backward":["5.7","15.7"],"url":["5.9","15.9","30.2","41.2"],"switch":["5.10","15.10"],"switchurl":["5.11","15.11"],"switchquality":["5.12","15.12"],"currenttime":["5.14","15.14"],"duration":["5.15","15.15"],"getdataurl":["5.17","15.17"],"getbloburl":["5.18","15.18"],"poster":["5.22","15.22","30.5","41.5"],"playing":["5.24","15.24"],"rect":["5.26","15.26"],"playbackrate":["5.28","15.28","30.15","41.15"],"attr":["5.31","15.31"],"type":["5.32","15.32","30.39","41.39"],"theme":["5.33","15.33","30.6","41.6"],"airplay":["5.34","15.34","30.47","41.47"],"loaded":["5.35","15.35"],"played":["5.36","15.36"],"proxy":["5.37","15.37"],"query":["5.38","15.38"],"cssvar":["5.40","15.40","30.48","41.48"],"quality":["5.41","15.41","30.32","41.32"],"右键菜单":["6.0"],"配置":["6.1","7.1","8.1"],"创建":["6.2","7.2","8.2","9.2","9.3","9.4","9.5"],"添加":["6.3","7.3","8.3","9.6"],"删除":["6.4","7.4","8.4","9.7"],"更新":["6.5","7.5","8.5","9.8"],"控制器":["7.0"],"业务层":["8.0"],"设置面板":["9.0"],"内置":["9.1"],"advanced":["10.0"],"static":["11.0"],"example":["12.0"],"global":["13.0"],"writing":["14.0"],"instance":["15.0"],"context":["16.0"],"configuration":["16.1","17.1","18.1"],"creation":["16.2","17.2","18.2"],"add":["16.3","18.3","19.6","29.3"],"delete":["16.4","17.4","18.4","19.7"],"updates":["16.5","19.8"],"controller":["17.0"],"adding":["17.3"],"update":["17.5","18.5"],"settings":["19.0","30.29","41.29"],"built":["19.1"],"create":["19.2","19.4","19.5"],"creating":["19.3"],"installation":["20.0","20.1","24.2","25.2","26.2","27.2","28.3"],"cdn":["20.2","24.3","25.3","26.3","27.3","28.4","31.2","35.3","36.3","37.3","38.3","39.4"],"usage":["20.3","24.4","28.5"],"vue":["20.4","20.7","31.4","31.7"],"react":["20.5","20.8","31.5","31.8"],"typescript":["20.6","31.6"],"javascript":["20.10","31.10"],"ancient":["20.11"],"dash":["21.0","26.0","32.0","37.0"],"flv":["22.0","33.0"],"hls":["23.0","27.0","34.0","38.0"],"demo":["24.1","25.1","26.1"],"danmuku":["25.0"],"using":["25.5","25.6","25.7"],"hide":["25.8","36.8"],"ishide":["25.9","36.9"],"emit":["25.10","36.10"],"load":["25.12","36.12"],"reset":["25.13","36.13"],"event":["25.15"],"demonstration":["27.1","28.2"],"iframe":["28.0","28.10","39.0","39.10"],"description":["28.1"],"index":["28.6","39.6"],"commit":["28.7","39.7"],"message":["28.8","39.8"],"inject":["28.11","39.11"],"postmessage":["28.12","39.12"],"例子":["28.13","39.13"],"language":["29.0"],"default":["29.1"],"importing":["29.2"],"modify":["29.4"],"basic":["30.0"],"container":["30.1","41.1"],"id":["30.3","41.3"],"onready":["30.4","41.4"],"islive":["30.8","41.8"],"autoplay":["30.10","41.10"],"automini":["30.12","41.12"],"loop":["30.13","41.13"],"mutex":["30.21","41.21"],"miniprogressbar":["30.25","41.25"],"usessr":["30.26","41.26"],"playsinline":["30.27","41.27"],"highlight":["30.33","41.33"],"thumbnails":["30.35","41.35"],"morevideoattr":["30.37","41.37"],"customtype":["30.40","41.40"],"lang":["30.41","41.41"],"fastforward":["30.44","41.44"],"autoplayback":["30.45","41.45"],"autoorientation":["30.46","41.46"],"安装使用":["31.0"],"安装":["31.1","35.2","36.2","37.2","38.2","39.3"],"使用":["31.3","35.4","39.5"],"古老的浏览器":["31.11"],"视频广告":["35.0"],"演示":["35.1","36.1","37.1","38.1","39.2"],"弹幕库":["36.0"],"选项":["36.4"],"使用弹幕数组":["36.5"],"使用弹幕":["36.6"],"使用异步调用":["36.7"],"事件":["36.15"],"说明":["39.1"],"语言设置":["40.0"],"默认语言":["40.1"],"导入语言":["40.2"],"新增语言":["40.3"],"修改语言":["40.4"],"基础选项":["41.0"]},{"0":["3.27","5.35","5.36","30.7","41.7"],"1":["25.4","31.11","36.4"],"2":["31.9"],"3":["3.28"],"4":["3.28","29.3","31.9","40.3"],"5":["3.27","8.2","18.2","25.4","36.4"],"7":["8.3","18.3","30.7"],"9":["40.3"],"10":["25.4","36.4"],"15":["4.0","14.0"],"21":["8.5","9.8","18.5","19.8"],"26":["7.5","17.5"],"27":["9.8","19.8"],"75":["3.27"],"250":["3.4"],"这里的":["0.0","1.0","3.0","5.0"],"播放器的选项":["0.1"],"div":["0.1","0.2","0.4","0.5","0.7","0.13","0.16","1.1","1.6","2.0","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.30","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.2","4.0","5.1","5.2","5.3","5.15","5.26","5.30","5.34","5.41","6.2","6.3","6.4","6.5","7.2","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.3","9.6","9.7","9.8","10.1","12.30","14.0","15.15","16.2","16.3","16.4","16.5","17.2","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.3","19.6","19.7","19.8","21.0","22.0","23.0","24.4","25.5","25.6","25.7","25.10","30.2","30.28","30.29","32.0","33.0","34.0","35.4","36.5","36.6","36.7","36.8","36.9","36.10","36.12","36.13","36.14","41.2","41.28","41.29","41.30","41.31"],"classname":["0.1","0.2","0.16","2.0","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.30","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","4.0","5.41","6.2","6.3","6.4","6.5","7.2","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.3","9.6","9.7","9.8","12.30","14.0","15.15","16.2","16.3","16.4","16.5","17.2","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.3","19.6","19.7","19.8","21.0","22.0","23.0","24.4","25.5","25.6","25.7","30.2","30.28","30.29","32.0","33.0","34.0","35.4","36.5","36.6","36.7","36.9","36.10","36.12","36.13","36.14","41.2","41.28","41.29"],"run":["0.1","0.2","2.0","2.2","2.6","2.11","2.12","2.17","2.18","2.20","2.21","2.22","2.23","2.24","2.25","2.27","2.28","2.29","2.30","2.38","4.0","5.41","6.2","6.3","6.4","6.5","7.2","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.3","9.6","9.7","9.8","14.0","16.2","16.3","16.4","16.5","17.2","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.3","19.6","19.7","19.8","21.0","22.0","23.0","24.4","25.5","25.6","25.7","30.2","30.28","32.0","33.0","34.0","35.4","36.5","36.6","36.7","36.9","36.10","36.12","36.13","36.14","41.2","41.28","41.29"],"管理播放器所有的":["0.2","0.3","0.5"],"dom":["0.2","0.3","5.37","5.38","9.2","9.4","9.5","10.2","10.3","15.37","15.38","19.2","19.4","19.5","30.1","41.1"],"元素":["0.2","9.4","9.5"],"事件":["0.3","4.0"],"实质上是代理了":["0.3"],"addeventlistener":["0.3","5.37","10.3","15.37"],"和":["0.3","4.0","5.12","36.8","41.4"],"removeeventlistener":["0.3","10.3"],"当使用以下方法来处理事件":["0.3"],"播放器销毁时也会自动销毁该事件":["0.3"],"proxy":["0.3","10.3"],"方法用于代理":["0.3"],"管理播放器的本地存储":["0.4"],"name":["0.4","4.0","10.4","17.1"],"属性用于设置缓存的":["0.4"],"key":["0.4","10.4"],"set":["0.4","10.4","13.5","13.6","15.10","15.11","15.12","15.13","15.14","15.19","15.20","15.21","15.22","15.27","15.28","15.29","30.35","30.36"],"方法用于设置缓存":["0.4"],"get":["0.4","0.6","10.6","15.14","15.15","15.19","15.21","15.22","15.24","15.31","25.14"],"方法用于获取缓存":["0.4"],"del":["0.4"],"方法用于删除缓存":["0.4"],"clear":["0.4","25.13"],"方法用于清空缓存":["0.4"],"svg":["0.5","10.5"],"图标":["0.5"],"管理播放器的":["0.6"],"方法用于获取":["0.6"],"的值":["0.6"],"update":["0.6","0.8","0.9","0.10","0.15"],"管理播放器的提示语":["0.7"],"只有一个":["0.7"],"show":["0.7","0.12","0.14","10.12","10.14","25.8","30.17","30.20","30.32","30.33","36.8"],"属性用于显示提示语":["0.7"],"管理播放器的层":["0.8"],"add":["0.8","0.9","0.10","0.13","0.15","0.16","10.8","10.9","10.10","10.13","10.15"],"方法用于动态添加层":["0.8"],"remove":["0.8","0.9","0.10","0.13","0.15"],"方法用于动态删除层":["0.8"],"管理播放器的控制器":["0.9"],"方法用于动态添加控制器":["0.9"],"方法用于动态删除控制器":["0.9"],"管理播放器的右键菜单":["0.10"],"方法用于动态添加菜单":["0.10"],"方法用于动态删除菜单":["0.10"],"方法用于动态更新菜单":["0.10"],"管理播放器的字幕功能":["0.11"],"url":["0.11","5.11","10.11","25.15","36.15"],"属性设置和返回当前字幕地址":["0.11"],"style":["0.11"],"方法设置当前字幕的样式":["0.11"],"管理播放器的加载层":["0.12"],"属性用于设置是否显示加载层":["0.12"],"toggle":["0.12","0.14","19.4"],"管理播放器的快捷键功能":["0.13"],"方法用于添加快捷键":["0.13"],"方法用于删除快捷键":["0.13"],"管理播放器的遮罩层":["0.14"],"属性用于设置是否显示遮罩层":["0.14"],"管理播放器的设置面板":["0.15"],"方法用于动态添加设置项":["0.15"],"方法用于动态删除设置项":["0.15"],"方法用于动态更新设置项":["0.15"],"管理播放器的插件功能":["0.16"],"只有一个方法":["0.16"],"用于动态添加插件":["0.16"],"返回全部播放器实例的数组":["1.1"],"假如你想同时管理多个播放器的时候":["1.1"],"可以用到该属性":["1.1"],"返回播放器的版本信息":["1.2"],"返回播放器的环境变量":["1.3"],"返回播放器的打包时间":["1.4"],"返回视频的默认配置":["1.5"],"返回播放器的工具函数集合":["1.6"],"返回播放器选项的校验方案":["1.7"],"返回事件分发器的构造函数":["1.8"],"返回选项的校验函数":["1.9"],"返回类型检测的函数工具":["1.10"],"返回播放器所需的":["1.11"],"返回播放器的默认选项":["1.12"],"播放器的事件分为两种":["2.0"],"一种视频的":["2.0"],"原生事件":["2.0"],"前缀":["2.0"],"video":["2.0","12.0","13.28","13.29","15.1","15.2","15.7","15.10","15.11","15.12","15.15","23.0","26.0","30.2","30.36","30.39","30.40","34.0"],"另外一种是":["2.0"],"自定义事件":["2.0"],"监听事件":["2.0"],"code":["2.0","2.2","2.27","2.30","4.0","6.2","6.3","6.4","6.5","7.2","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.3","9.6","9.7","9.8","14.0","16.2","16.3","16.4","16.5","17.2","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.3","19.6","19.7","19.8","20.1","20.2","20.3","20.4","20.5","21.0","22.0","23.0","24.2","24.3","24.4","25.2","25.3","25.5","25.6","25.7","26.2","26.3","27.2","27.3","28.3","28.4","28.5","30.2","30.28","31.1","31.2","31.3","31.4","31.5","32.0","33.0","34.0","35.2","35.3","35.4","36.2","36.3","36.5","36.6","36.7","36.9","36.10","36.12","36.13","36.14","37.2","37.3","38.2","38.3","39.3","39.4","39.5","41.2","41.28"],"js":["2.0","4.0","6.5","7.2","7.3","7.5","8.2","8.3","8.5","9.3","9.7","9.8","14.0","16.5","17.2","17.3","17.5","18.2","18.3","18.5","19.3","19.7","19.8","20.3","20.4","20.5","20.7","20.8","20.10","20.11","21.0","22.0","23.0","24.4","25.4","25.15","29.2","29.3","29.4","31.3","31.4","31.5","31.7","31.8","31.10","31.11","32.0","33.0","34.0","35.4","36.4","36.15","40.2","40.3","40.4"],"当播放器首次可以播放器时触发":["2.1"],"当播放器切换地址后并可以播放时触发":["2.2"],"当播放器暂停时触发":["2.3"],"当播放器播放时触发":["2.4"],"当播放器热键被按下时触发":["2.5"],"当播放器销毁时触发":["2.6"],"当播放器获得焦点时触发":["2.7"],"当播放器失去焦点时触发":["2.8"],"当播放器被双击时触发":["2.9"],"当播放器被单击时触发":["2.10"],"当播放器加载视频发生错误时触发":["2.11"],"当播放器被鼠标移出或者移入时触发":["2.12"],"当播放器被鼠标经过时触发":["2.13"],"当播放器尺寸变化时触发":["2.14"],"当播放器出现在视口时触发":["2.15"],"在移动端":["2.16","3.18","3.19","3.20","3.22","3.23","3.24"],"当锁定的状态发生变化时触发":["2.16"],"当播放器长宽比变化时触发":["2.17"],"当播放器自动设置高度时触发":["2.18"],"当播放器自动设置尺寸时触发":["2.19"],"当播放器发生翻转时触发":["2.20"],"当播放器发生窗口全屏时触发":["2.21"],"当播放器发生网页全屏时触发":["2.22"],"当播放器进入迷你模式时触发":["2.23"],"当播放器进入画中画时触发":["2.24"],"当播放器被截图时触发":["2.25"],"当播放器发生时间跳转时触发":["2.26"],"当播放器发生字幕偏移时触发":["2.27"],"当字幕更新时触发":["2.28"],"当字幕加载时触发":["2.29"],"当字幕切换时触发":["2.30"],"当信息面板显示或隐藏时触发":["2.31"],"当自定义层显示或隐藏时触发":["2.32"],"当加载器显示或隐藏时触发":["2.33"],"当遮罩层显示或隐藏时触发":["2.34"],"当字幕层显示或隐藏时触发":["2.35"],"当右键菜单显示或隐藏时触发":["2.36"],"当控制器显示或隐藏时触发":["2.37"],"当设置面板显示或隐藏时触发":["2.38"],"当静音的状态变化时触发":["2.39"],"canplay":["2.40","12.40"],"canplaythrough":["2.41","12.41"],"complete":["2.42","12.42"],"durationchange":["2.43","12.43"],"emptied":["2.44","12.44"],"ended":["2.45","12.45"],"error":["2.46","12.46"],"loadeddata":["2.47","12.47"],"loadedmetadata":["2.48","12.48"],"pause":["2.49","12.49","13.19"],"play":["2.50","3.18","3.19","12.50","13.18","13.19","15.3","30.10"],"playing":["2.51","12.51"],"progress":["2.52","12.52","30.35"],"ratechange":["2.53","12.53"],"seeked":["2.54","12.54"],"seeking":["2.55","12.55"],"stalled":["2.56","12.56"],"suspend":["2.57","12.57"],"timeupdate":["2.58","12.58"],"volumechange":["2.59","12.59"],"waiting":["2.60","12.60"],"是否开始":["3.1"],"模式":["3.1"],"是否开启右键菜单":["3.2"],"默认开启":["3.2"],"time":["3.3","3.7","3.8","3.13","3.14","3.15","3.16","3.20","3.21","3.23","13.3","13.7","13.8","13.13","13.14","13.15","13.16","13.20","13.21","13.23","25.10","25.11","30.24"],"提示信息的显示时长":["3.3"],"单位为毫秒":["3.3","3.7","3.8","3.12","3.15","3.16","3.21"],"width":["3.4","3.5","9.2","13.4","13.5","15.30"],"设置面板的默认宽度":["3.4"],"单位为像素":["3.4","3.5","3.6","3.9"],"默认为":["3.4","3.5","3.6","3.10","3.16","3.25","3.27","3.28","3.29","3.31","3.32"],"item":["3.5","3.6","13.5","13.6"],"设置面板的设置项的默认宽度":["3.5"],"height":["3.6","13.6"],"设置面板的设置项的默认高度":["3.6"],"事件的节流时间":["3.7","3.8"],"gap":["3.9","13.9"],"view":["3.9","24.1","25.1","26.1","27.1","28.2"],"事件的边界容差距离":["3.9"],"playback":["3.10","3.11","3.12","12.51","13.10","13.11","13.12","30.45"],"max":["3.10","3.13","13.10","13.13"],"自动回放功能的最大记录数":["3.10"],"min":["3.11","13.11"],"自动回放功能的最小记录时长":["3.11"],"单位为秒":["3.11","3.26"],"timeout":["3.12","13.12"],"自动回放功能的隐藏延迟时长":["3.12"],"发生连接错误时":["3.13","3.14"],"自动连接的最大次数":["3.13"],"sleep":["3.14","13.14"],"自动连接的延迟时间":["3.14"],"hide":["3.15","13.15"],"底部控制栏的自动隐藏的延迟时间":["3.15"],"双击事件的延迟事件":["3.16"],"fullscreen":["3.17","13.17"],"在桌面端":["3.17"],"是否双击切换全屏":["3.17"],"dbclick":["3.18","13.18"],"是否双击切换播放暂停":["3.18"],"click":["3.19","10.10","13.16","13.19"],"是否单击切换播放暂停":["3.19"],"orientation":["3.20","13.20"],"自动旋屏的延迟时间":["3.20"],"loop":["3.21","13.21"],"信息面板的刷新时间":["3.21"],"forward":["3.22","3.23","13.22","13.23"],"value":["3.22","13.22"],"长按加速的速率倍数":["3.22"],"长按加速的延迟时间":["3.23"],"move":["3.24","13.24"],"ratio":["3.24","3.28","12.17","13.24","13.25","13.28"],"左右滑动进度的速率倍数":["3.24"],"step":["3.25","3.26","13.25","13.26"],"快捷键调节音量的幅度比例":["3.25"],"快捷键调节播放进度的幅度":["3.26"],"rate":["3.27","13.27"],"内置播放速率的列表":["3.27"],"内置视频长宽比的列表":["3.28"],"default":["3.28","13.4","13.5","13.6","30.1","30.2","30.3","30.4","30.5","30.6","30.7","30.8","30.9","30.10","30.11","30.12","30.13","30.14","30.15","30.16","30.17","30.18","30.19","30.20","30.21","30.22","30.23","30.24","30.25","30.26","30.27","30.28","30.29","30.30","30.31","30.32","30.33","30.34","30.35","30.36","30.37","30.38","30.39","30.40","30.41","30.42","30.43","30.44","30.45","30.46","30.47","30.48","41.1","41.2","41.3","41.4","41.5","41.6","41.7","41.8","41.9","41.10","41.11","41.12","41.13","41.14","41.15","41.16","41.17","41.18","41.19","41.20","41.21","41.22","41.23","41.24","41.25","41.26","41.27","41.28","41.29","41.30","41.31","41.32","41.33","41.34","41.35","41.36","41.37","41.38","41.39","41.40","41.41","41.42","41.43","41.44","41.45","41.46","41.47","41.48"],"内置视频翻转的列表":["3.29"],"normal":["3.29"],"horizontal":["3.29"],"vertical":["3.29"],"web":["3.30","13.30"],"in":["3.30","10.3","13.23","13.27","13.28","13.29","13.30","19.1","25.11","29.2","30.39"],"body":["3.30","13.30"],"网页全屏时":["3.30"],"version":["3.31","13.31"],"设置是否打印播放器版本":["3.31"],"raf":["3.32","13.32"],"设置是否使用":["3.32"],"requestanimationframe":["3.32"],"但你已经知道播放器的":["4.0"],"属性":["4.0","6.1","7.1","8.1","9.2","9.4","9.5","41.32","41.33","41.35","41.36"],"方法":["4.0"],"后":["4.0"],"再编写插件是非常简单的事":["4.0"],"可以在实例化的时候加载插件的函数":["4.0"],"function":["4.0","5.1","5.2","5.3","5.4","5.11","5.12","5.16","5.17","5.18","5.25","5.30","5.31","5.34","5.37","5.38","5.40","9.2","14.0","15.1","15.2","15.3","15.4","15.11","15.12","15.16","15.17","15.18","15.25","15.30","15.31","15.34","15.37","15.38","15.40","19.2","28.7","30.4","41.4"],"myplugin":["4.0"],"art":["4.0","5.11","7.2","15.11","17.2","24.4","25.15","36.15"],"console":["4.0"],"info":["4.0"],"return":["4.0"],"something":["4.0"],"type":["5.1","5.2","5.3","5.4","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.14","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.23","5.24","5.25","5.26","5.27","5.28","5.29","5.30","5.31","5.33","5.34","5.35","5.36","5.37","5.38","5.39","5.40","5.41","15.1","15.2","15.3","15.4","15.5","15.6","15.7","15.8","15.9","15.10","15.11","15.12","15.13","15.14","15.15","15.16","15.17","15.18","15.19","15.20","15.21","15.22","15.23","15.24","15.25","15.26","15.27","15.28","15.29","15.30","15.31","15.33","15.34","15.35","15.36","15.37","15.38","15.39","15.40","15.41","16.1","17.1","18.1","19.2","19.4","19.5","20.10","30.1","30.2","30.3","30.4","30.5","30.6","30.7","30.8","30.9","30.10","30.11","30.12","30.13","30.14","30.15","30.16","30.17","30.18","30.19","30.20","30.21","30.22","30.23","30.24","30.25","30.26","30.27","30.28","30.29","30.30","30.31","30.32","30.33","30.34","30.35","30.36","30.37","30.38","30.40","30.41","30.42","30.43","30.44","30.45","30.46","30.47","30.48","41.1","41.2","41.3","41.4","41.5","41.6","41.7","41.8","41.9","41.10","41.11","41.12","41.13","41.14","41.15","41.16","41.17","41.18","41.19","41.20","41.21","41.22","41.23","41.24","41.25","41.26","41.27","41.28","41.29","41.30","41.31","41.32","41.33","41.34","41.35","41.36","41.37","41.38","41.40","41.41","41.42","41.43","41.44","41.45","41.46","41.47","41.48"],"播放视频":["5.1"],"暂停视频":["5.2"],"切换视频的播放和暂停":["5.3"],"parameter":["5.4","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.14","5.19","5.20","5.21","5.22","5.23","5.24","5.27","5.28","5.29","5.31","5.32","5.33","5.41","15.4","15.5","15.6","15.7","15.8","15.9","15.10","15.11","15.12","15.13","15.14","15.19","15.20","15.21","15.22","15.23","15.24","15.27","15.28","15.29","15.31","15.32","15.33","15.41"],"boolean":["5.4","5.13","5.19","5.20","5.21","5.24","7.1","15.4","15.13","15.19","15.20","15.21","15.23","15.24","16.1","17.1","18.1","30.8","30.9","30.10","30.11","30.12","30.13","30.14","30.15","30.16","30.17","30.18","30.19","30.20","30.21","30.22","30.23","30.24","30.25","30.26","30.27","30.43","30.44","30.45","30.46","30.47","41.8","41.9","41.10","41.11","41.12","41.13","41.14","41.15","41.16","41.17","41.18","41.19","41.20","41.21","41.22","41.23","41.24","41.25","41.26","41.27","41.43","41.44","41.45","41.46","41.47"],"setter":["5.5","5.6","5.7","5.8","5.9","5.10","5.13","5.14","5.19","5.20","5.21","5.22","5.23","5.27","5.28","5.29","5.32","5.33","5.41","15.5","15.6","15.7","15.8","15.9","15.10","15.13","15.14","15.19","15.20","15.21","15.22","15.23","15.27","15.28","15.29","15.32","15.33","15.41"],"number":["5.5","5.6","5.7","5.8","5.14","5.28","13.10","13.13","15.5","15.6","15.7","15.8","15.14","15.28","29.0","30.7","41.7"],"getter":["5.8","5.9","5.13","5.14","5.15","5.19","5.20","5.21","5.22","5.23","5.24","5.26","5.27","5.28","5.29","5.32","5.33","5.35","5.36","15.8","15.9","15.13","15.14","15.15","15.19","15.20","15.21","15.22","15.23","15.24","15.26","15.27","15.28","15.29","15.32","15.33","15.35","15.36"],"string":["5.10","5.11","5.12","5.22","5.27","5.29","5.31","5.32","5.33","9.2","9.4","9.5","15.9","15.10","15.11","15.12","15.22","15.27","15.29","15.31","15.32","15.33","17.1","19.2","19.4","19.5","30.1","30.2","30.3","30.5","30.6","30.39","30.41","41.1","41.2","41.3","41.5","41.6","41.39","41.41"],"设置视频地址":["5.10","5.11"],"设置时和":["5.10","5.11"],"设置视频画质地址":["5.12"],"获取视频时长":["5.15"],"下载当前视频帧的截图":["5.16"],"获取当前视频帧的截图的":["5.17","5.18"],"base64":["5.17","15.17"],"地址":["5.17","5.18","25.4","36.4"],"blob":["5.18","15.18"],"设置和获取视频海报":["5.22"],"设置视频是否自适应尺寸":["5.25"],"获取播放器的尺寸和坐标信息":["5.26"],"当容器只有宽度":["5.30"],"该属性可以自动计算出并设置视频的高度":["5.30"],"动态获取和设置":["5.31"],"开启隔空播放":["5.34"],"视频缓存的比例":["5.35"],"范围是":["5.35","5.36"],"视频播放的比例":["5.36"],"事件的代理函数":["5.37"],"实质上代理了":["5.37"],"的查询函数":["5.38"],"element":["5.39","9.2","9.4","9.5","15.39","19.2","19.4","19.5","30.1","41.1"],"快捷返回播放器的":["5.39"],"动态获取或设置":["5.40"],"css":["5.40"],"变量":["5.40","31.10"],"array":["5.41","9.2","11.1","15.41","19.2","25.5","30.28","30.29","30.30","30.31","30.32","30.33","30.34","41.28","41.29","41.30","41.31","41.32","41.33","41.34"],"动态设置画质列表":["5.41"],"类型":["6.1","7.1","8.1","9.2","9.4","9.5","41.33","41.35","41.36"],"描述":["6.1","7.1","8.1","9.2","9.4","9.5"],"disable":["6.1","7.1","8.1","16.1","17.1","18.1"],"var":["7.2","9.3","17.2","24.4","25.15","36.15"],"new":["7.2","17.2","24.4","25.15","36.15"],"artplayer":["7.2","17.2","20.3","20.4","20.5","20.11","24.4","25.5","25.15","29.2","30.1","31.3","31.5","31.11","35.4","36.5","36.15","40.2","40.4","41.1"],"container":["7.2","15.30","17.2","24.4","25.15","36.15"],"须先打开设置面板":["9.1"],"然后自带四个内置项":["9.1"],"flip":["9.1"],"playbackrate":["9.1"],"选择列表":["9.2"],"html":["9.2","9.4","9.5","19.2","19.4","19.5","28.5","28.6","28.7","28.10","28.13","39.5","39.6","39.7","39.10","39.13","41.38"],"元素的":["9.2","9.4","9.5"],"icon":["9.2","9.4","9.5","19.2","19.5"],"元素的图标":["9.2","19.2"],"selector":["9.2","19.2"],"元素列表":["9.2","19.2"],"onselect":["9.2","19.2"],"元素点击事件":["9.2"],"列表嵌套":["9.3"],"切换按钮":["9.4"],"范围滑块":["9.5"],"properties":["10.0","11.0","14.0","15.0"],"the":["10.0","10.1","10.2","10.3","10.4","10.5","10.6","10.7","10.8","10.9","10.10","10.11","10.12","10.13","10.14","10.15","10.16","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","12.0","12.1","12.2","12.3","12.4","12.6","12.7","12.8","12.9","12.10","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.31","12.35","12.36","12.37","12.38","12.39","12.40","12.41","12.44","12.56","13.2","13.3","13.4","13.5","13.6","13.7","13.8","13.9","13.10","13.11","13.12","13.13","13.14","13.22","13.23","13.24","13.25","13.26","13.27","14.0","15.3","15.4","15.10","15.11","15.15","15.17","15.18","15.19","15.26","15.30","15.35","15.36","15.41","17.1","19.1","19.5","20.9","20.10","20.11","25.8","25.9","25.10","25.11","25.12","25.13","25.14","29.0","29.1","30.1","30.2","30.3","30.4","30.5","30.7","30.11","30.17","30.32","30.33","30.35","30.36","30.39","30.40","30.45"],"options":["10.1","30.0"],"for":["10.1","10.3","10.8","13.7","13.8","15.37"],"player":["10.1","10.2","10.3","10.4","10.6","10.7","10.8","10.9","10.10","10.11","10.12","10.13","10.14","10.15","10.16","11.1","12.0","12.1","12.2","12.3","12.4","12.6","12.7","12.8","12.9","12.10","12.12","12.14","12.15","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","14.0"],"manages":["10.2","10.3","10.4"],"all":["10.2","10.3","10.5","11.1"],"of":["10.2","10.4","10.8","10.10","10.11","10.12","10.13","11.1","11.6","13.4","13.27","13.28","13.29","15.35","15.36","15.41","20.11","29.0","30.5","30.11","30.39"],"elements":["10.2"],"which":["10.3","13.26","15.37","30.4","30.39","30.42"],"is":["10.3","10.4","10.6","10.8","10.9","10.10","10.13","10.15","12.0","12.1","12.12","14.0","20.11","25.9","30.39"],"essentially":["10.3","15.37"],"a":["10.3","10.15","11.6","12.5","12.32","12.33","12.34","15.16","15.37","15.39","25.10","30.4"],"and":["10.3","14.0","15.14","15.19","15.21","15.22","15.26","20.0"],"when":["10.3","12.1","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.30","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.30","14.0","15.30"],"using":["10.3"],"following":["10.3"],"local":["10.4"],"attribute":["10.4","15.30","19.5"],"used":["10.4","10.6","10.8","10.9","10.10","10.15","25.12","25.13","25.14","30.38","30.39","30.48"],"to":["10.4","10.6","10.9","10.15","13.1","13.2","13.19","13.23","13.31","13.32","15.11","15.38","16.1","17.1","18.1","25.12","25.13","25.14","28.7","30.10","30.15","30.17","30.19","30.26","30.32","30.38","30.39","30.45","30.46","30.48"],"cache":["10.4"],"method":["10.4","10.6","10.8","10.9","10.10","10.13","10.15","25.10","25.11","25.12"],"manage":["10.5","10.6","10.7","10.8","10.9","10.10","10.11","10.12","10.13","10.14","10.15","10.16"],"s":["10.6","10.7","10.9","10.14","10.15","10.16","12.0","14.0","19.2","19.4","19.5","30.40"],"notices":["10.7"],"there":["10.7"],"dynamically":["10.8","10.9","10.15","15.31","15.32","15.33","15.40","15.41"],"controllers":["10.9"],"right":["10.10","12.36"],"context":["10.10","30.30"],"menu":["10.10","16.0","30.30"],"features":["10.11","10.16"],"layer":["10.12","10.14"],"functionality":["10.13"],"property":["10.14","16.1","17.1","18.1","19.2","19.4"],"settings":["10.15","12.38","19.1","29.0"],"panel":["10.15","12.38","13.21","19.0","19.1","30.29"],"plugin":["10.16","14.0","24.4","25.5","28.1","35.4","36.5"],"with":["10.16","20.11","25.8","25.9","25.11","28.1"],"here":["11.0","13.0","15.0"],"returns":["11.1","11.2","11.3","11.4","11.5","11.6","11.7","11.8","11.9","11.10","11.11","11.12"],"an":["11.1","12.11","12.46"],"collection":["11.6"],"utility":["11.6"],"events":["12.0","14.0","15.37"],"are":["12.0","29.2"],"divided":["12.0"],"into":["12.0"],"two":["12.0"],"types":["12.0"],"one":["12.0"],"native":["12.0"],"prefix":["12.0"],"other":["12.0"],"custom":["12.0","12.32","30.28","30.29","30.30","30.31","30.34","30.42"],"triggered":["12.1","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.30","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39"],"switches":["12.2"],"occurs":["12.11","12.27"],"mouse":["12.13"],"on":["12.16","13.17","13.18","13.19","13.20","13.22","13.24","30.33","30.35"],"mobile":["12.16","13.20","13.22","13.24"],"aspect":["12.17"],"automatically":["12.18","30.10","30.12"],"goes":["12.21"],"enters":["12.23","12.24"],"subtitle":["12.27","12.28","12.29","30.24"],"offset":["12.27"],"updates":["12.28"],"loads":["12.29"],"subtitles":["12.30","30.36"],"switch":["12.30"],"information":["12.31","30.33"],"loader":["12.33"],"controller":["12.37"],"browser":["12.40"],"media":["12.44"],"content":["12.44"],"attributes":["13.0","25.11"],"whether":["13.1","13.2","13.17","13.18","13.19","13.31","13.32","15.25","16.1","17.1","18.1","25.9","30.10","30.14","30.15","30.17","30.19","30.26","30.32","30.43","30.44","30.45","30.46","30.47"],"start":["13.1"],"mode":["13.1","36.11"],"enable":["13.2"],"display":["13.3","30.18","30.22","30.23"],"duration":["13.3","13.11","13.12"],"throttle":["13.7","13.8"],"boundary":["13.9"],"tolerance":["13.9"],"distance":["13.9"],"maximum":["13.10","13.13"],"minimum":["13.11"],"delay":["13.12","13.14","13.15","13.16"],"auto":["13.15"],"double":["13.16"],"event":["13.16"],"desktop":["13.17"],"devices":["13.20"],"refresh":["13.21"],"milliseconds":["13.23"],"increment":["13.26"],"by":["13.26"],"list":["13.27","13.28","13.29","15.41","19.2"],"built":["13.27","13.28","13.29"],"flips":["13.29"],"setting":["13.31","13.32","15.11","15.40","15.41"],"plugins":["14.0"],"once":["14.0"],"you":["14.0","20.9","28.1","29.2"],"know":["14.0"],"methods":["14.0"],"very":["14.0"],"simple":["14.0"],"can":["14.0","15.30","20.9","25.12","28.1"],"load":["14.0"],"functions":["14.0"],"instantiated":["14.0"],"jump":["15.5"],"sets":["15.8","15.25"],"address":["15.11","15.17","15.18","30.2"],"similar":["15.11","15.38"],"quality":["15.12","27.0"],"download":["15.16"],"gets":["15.17","15.18","15.26"],"size":["15.26","30.11"],"has":["15.30"],"only":["15.30","20.11"],"this":["15.30","28.1","28.7"],"activate":["15.34"],"proportion":["15.35","15.36"],"proxies":["15.37"],"shortcut":["15.39"],"getting":["15.40"],"or":["15.40","25.8","25.9"],"description":["16.1","17.1","18.1","19.2","19.4","19.5"],"component":["17.1"],"first":["19.1"],"open":["19.1"],"selection":["19.2","30.32"],"nested":["19.3"],"lists":["19.3"],"button":["19.4"],"range":["19.5"],"slider":["19.5"],"group":["20.1","20.2","20.3","20.4","20.5","24.2","24.3","25.2","25.3","26.2","26.3","27.2","27.3","28.3","28.4","28.5","31.1","31.2","31.3","31.4","31.5","35.2","35.3","36.2","36.3","37.2","37.3","38.2","38.3","39.3","39.4","39.5"],"bash":["20.2","24.2","24.3","25.2","25.3","26.2","26.3","27.2","27.3","28.3","28.4","31.2","35.2","35.3","36.2","36.3","37.2","37.3","38.2","38.3","39.3","39.4"],"index":["20.3","24.4","28.5","28.7","28.13","31.3","35.4","39.5","39.7","39.12","39.13"],"import":["20.3","20.5","20.9","29.4","31.3","31.5","31.9","40.4"],"from":["20.3","20.5","28.7","29.4","31.5","40.4"],"const":["20.3"],"jsx":["20.5","20.8","31.5","31.8"],"useeffect":["20.5","31.5"],"useref":["20.5","31.5"],"importing":["20.6"],"also":["20.9"],"separately":["20.9"],"sometimes":["20.10"],"your":["20.10"],"file":["20.10"],"may":["20.10"],"lose":["20.10"],"typescript":["20.10","31.10"],"hints":["20.10"],"browsers":["20.11"],"production":["20.11"],"build":["20.11"],"compatible":["20.11"],"https":["21.0","22.0","23.0","32.0","33.0","34.0"],"github":["21.0","22.0","23.0","32.0","33.0","34.0"],"com":["21.0","22.0","23.0","32.0","33.0","34.0"],"industry":["21.0","32.0"],"forum":["21.0","32.0"],"bilibili":["22.0","33.0"],"data":["22.0","23.0","24.4","25.5","25.7","33.0","34.0","35.4","36.5","36.7","36.9","36.10","36.14"],"dev":["23.0","34.0"],"libs":["23.0","24.4","25.5","34.0","35.4","36.5","36.7","36.10"],"ads":["24.0","24.4","35.4"],"jsdelivr":["24.3","25.3","26.3","27.3","28.4","35.3","36.3","37.3","38.3","39.4"],"uncompiled":["24.4","25.5","35.4","36.5"],"app":["24.4","25.15","36.15"],"danmuku":["25.4","25.5","25.6","36.4","36.11"],"弹幕库":["25.4","36.4"],"支持数组":["25.4","36.4"],"xml":["25.4","25.6","36.4","36.6"],"promise返回数组":["25.4","36.4"],"speed":["25.4","36.4","36.11"],"弹幕持续时间":["25.4","36.4"],"单位秒":["25.4","36.4"],"范围在":["25.4","36.4"],"opacity":["25.4","36.4","36.11"],"asynchronous":["25.7"],"call":["25.7"],"bullet":["25.8"],"comments":["25.8"],"judge":["25.9"],"current":["25.9","25.13","25.14"],"barrage":["25.9","25.11","25.14"],"hidden":["25.9"],"displayed":["25.9","25.13"],"send":["25.10"],"real":["25.10","25.11"],"danmaku":["25.10"],"message":["25.10"],"through":["25.10"],"change":["25.11"],"configuration":["25.11","30.42"],"supported":["25.11"],"be":["25.12","30.42"],"reload":["25.12"],"danmu":["25.12"],"assets":["25.15","36.15"],"sample":["25.15","36.15"],"control":["28.0","30.31"],"doctype":["28.5","39.5"],"push":["28.7","28.12"],"messages":["28.7","28.8","28.12"],"iframe":["28.7","28.13","39.7","39.13"],"receive":["28.8"],"after":["28.9"],"最常遇到的问题是":["28.13","39.13"],"播放器在":["28.13","39.13"],"里进行网页全屏":["28.13","39.13"],"但在":["28.13","39.13"],"danger":["29.0","40.0"],"given":["29.0"],"increasing":["29.0"],"bundled":["29.0"],"languages":["29.1","29.2"],"language":["29.2","29.3","29.4","30.41","41.41"],"files":["29.2"],"before":["29.2"],"packaging":["29.2"],"located":["29.2"],"src":["29.2","40.2"],"i18n":["29.2","40.2"],"zhtw":["29.4","40.4"],"where":["30.1"],"source":["30.2"],"unique":["30.3"],"undefined":["30.4","41.4"],"constructor":["30.4"],"accepts":["30.4"],"as":["30.4"],"second":["30.4"],"argument":["30.4"],"f00":["30.6","41.6"],"false":["30.8","30.9","30.10","30.11","30.12","30.13","30.14","30.15","30.16","30.17","30.18","30.20","30.22","30.23","30.24","30.25","30.26","30.37","30.43","30.44","30.45","30.46","30.47","41.10","41.11","41.12","41.14","41.15","41.16","41.17","41.24","41.26","41.43","41.45","41.47"],"use":["30.8","30.19","30.26","30.45"],"displays":["30.16"],"true":["30.19","30.21","30.27","41.19"],"hotkeys":["30.19"],"if":["30.21"],"mini":["30.25"],"ssr":["30.26","41.26"],"server":["30.26"],"initializes":["30.28","30.29","30.31"],"initialize":["30.30","30.34"],"bottom":["30.31"],"object":["30.35","30.36","30.37","30.38","30.40","30.42","30.48","41.35","41.36","41.37","41.38","41.40","41.42","41.48"],"bar":["30.35"],"supporting":["30.36"],"formats":["30.36"],"vtt":["30.36","41.36"],"srt":["30.36","41.36"],"controls":["30.37","41.37"],"preload":["30.37"],"replace":["30.38"],"specify":["30.39"],"format":["30.39"],"conjunction":["30.39"],"matches":["30.40"],"navigator":["30.41","41.41"],"will":["30.42"],"deeply":["30.42"],"merged":["30.42"],"automatic":["30.45"],"导入":["31.6"],"你也可以单独导入选项的类型":["31.9"],"ts":["31.9"],"有时你的":["31.10"],"文件会丢失":["31.10"],"的类型提示":["31.10"],"这时候你可以手动导入类型":["31.10"],"生产构建的":["31.11"],"只兼容最新一个主版本的":["31.11"],"chrome":["31.11"],"last":["31.11"],"查看完整演示":["35.1","36.1","37.1","38.1","39.2"],"通过方法":["36.8","36.10","36.11"],"进行隐藏或者显示弹幕":["36.8"],"通过属性":["36.9"],"判断当前弹幕是隐藏或者显示":["36.9"],"发送一条实时弹幕":["36.10"],"实时改变弹幕配置":["36.11"],"支持属性有":["36.11"],"fontsize":["36.11"],"color":["36.11"],"margin":["36.11"],"通过":["36.12"],"方法可以重载弹幕源":["36.12"],"或者切换新弹幕":["36.12"],"用于清空当前显示的弹幕":["36.13"],"用于获取当前弹幕配置":["36.14"],"画质":["37.0","38.0"],"控制":["39.0"],"通过该插件":["39.1"],"你可以轻松在":["39.1"],"从":["39.7","40.0"],"将消息推送到":["39.7","39.12"],"该函数将在":["39.7"],"在":["39.8"],"销毁后":["39.9"],"注入脚本":["39.11"],"鉴于捆绑的多国语言越来越多":["40.0"],"默认语言有":["40.1"],"en":["40.1"],"zh":["40.1"],"打包前的语言文件存放于":["40.2"],"欢迎来添加你的语言":["40.2"],"打包后的语言文件存放于":["40.2"],"dist":["40.2"],"播放器挂载的":["41.1"],"视频源地址":["41.2"],"播放器的唯一标识":["41.3"],"构造函数接受一个函数作为第二个参数":["41.4"],"播放器初始化成功且视频可以播放时触发":["41.4"],"ready":["41.4"],"视频的海报":["41.5"],"是否自动播放":["41.10"],"是否使用快捷键":["41.19"],"字幕时间偏移":["41.24"],"是否使用":["41.26"],"初始化自定义的":["41.28","41.29","41.30","41.34"],"层":["41.28"],"设置面板":["41.29"],"右键菜单":["41.30"],"初始化自定义的底部":["41.31"],"控制栏":["41.31"],"是否在底部控制栏里显示":["41.32"],"画质选择":["41.32"],"列表":["41.32"],"在进度条上显示":["41.33"],"高亮信息":["41.33"],"插件":["41.34"],"在进度条上设置":["41.35"],"预览图":["41.35"],"设置视频的字幕":["41.36"],"支持字幕格式":["41.36"],"ass":["41.36"],"用于替换默认图标":["41.38"],"支持":["41.38"],"用于指明视频的格式":["41.39"],"需要配合":["41.39"],"customtype":["41.39"],"通过视频的":["41.40"],"自定义":["41.42"],"配置":["41.42"],"该配置会和自带的":["41.42"],"进行深度合并":["41.42"],"新增你的语言":["41.42"],"是否使用自动":["41.45"],"回放功能":["41.45"],"用于改变内置的css变量":["41.48"]},{"0":["3.24","3.25","5.8","13.27","23.0","25.4","29.0","34.0","36.4","40.0"],"1":["3.25","3.27","5.8","5.35","5.36","13.27","20.11","22.0","29.0","31.10","33.0","40.0"],"2":["3.27","20.8","20.9","21.0","22.0","31.8","32.0","33.0"],"3":["3.22","13.28","23.0","30.2","31.10","34.0","41.2"],"4":["6.2","13.28","16.2","20.9","21.0","30.45","32.0","41.42"],"5":["3.11","3.13","3.24","3.26","13.27","21.0","29.0","30.28","30.29","32.0","40.0","41.28","41.29"],"6":["2.0","6.3","7.3","12.0","16.3","17.3","22.0","33.0"],"7":["15.15","41.7"],"8":["23.0","34.0"],"9":["3.28","9.6","13.28","19.6","29.3","41.42"],"10":["2.2","3.10","7.2","17.2"],"11":["2.27"],"13":["2.30","6.2","6.3","16.2","16.3"],"14":["9.6","19.6"],"16":["3.28","13.28"],"19":["5.41"],"21":["6.4","6.5","7.3","7.4","8.4","16.4","16.5","17.3","17.4","18.4"],"22":["8.2","8.3","9.7","18.2","18.3","19.7"],"23":["30.28","41.28"],"24":["6.5","16.5"],"25":["3.27","25.4","36.4"],"29":["5.41","8.5","18.5"],"34":["30.29","41.29"],"35":["3.6"],"40":["7.5","17.5"],"50":["3.9"],"75":["13.27"],"200":["3.5","3.7","3.8","3.20"],"300":["3.16"],"1000":["3.14","3.21","3.23"],"2000":["3.3"],"3000":["3.12","3.15"],"code":["0.1","0.2","0.4","0.5","0.6","0.7","0.12","0.13","0.14","0.15","0.16","1.1","1.6","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.28","2.29","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.2","3.4","3.5","3.6","3.16","3.28","3.29","5.1","5.2","5.3","5.11","5.13","5.15","5.16","5.19","5.20","5.21","5.22","5.24","5.25","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.40","5.41","9.2","10.1","10.2","12.0","12.20","12.28","12.29","12.30","13.19","15.1","15.2","15.11","15.15","15.19","15.34","15.40","15.41","19.2","25.8","25.9","25.10","25.12","25.13","25.14","30.1","30.7","30.10","30.19","30.29","30.30","30.31","30.34","30.42","30.45","36.8","36.11","40.2","41.1","41.4","41.10","41.19","41.29","41.30","41.31","41.34","41.38","41.42","41.45","41.48"],"js":["0.2","0.4","0.13","0.16","2.2","2.18","2.23","2.27","2.28","2.29","2.30","5.41","6.2","6.3","6.4","7.4","8.4","9.2","9.6","10.2","12.0","12.30","15.15","15.41","16.2","16.3","16.4","17.4","18.4","19.2","19.6","25.5","25.7","25.10","30.1","30.2","30.19","30.28","30.29","30.45","36.5","36.7","36.9","36.10","36.12","39.7","39.12","40.1","41.2","41.4","41.28","41.29","41.31","41.42"],"var":["0.2","0.4","2.0","2.30","4.0","5.41","6.2","6.3","6.4","6.5","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.2","9.6","9.7","9.8","10.2","12.0","14.0","15.15","16.2","16.3","16.4","16.5","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.2","19.3","19.6","19.7","19.8","25.5","29.3","30.2","30.28","30.29","35.4","36.5","39.7","40.3","40.4","41.2","41.28","41.29"],"hover":["0.3"],"方法用于代理自定义的":["0.3"],"loadimg":["0.3"],"方法用于监听图片的":["0.3"],"load":["0.3"],"加载事件":["0.3"],"div":["0.3","0.6","0.8","0.9","0.10","0.11","0.12","0.14","0.15","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.11","1.12","3.1","3.3","3.4","3.5","3.6","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","3.16","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.28","3.29","3.31","3.32","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.14","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.23","5.24","5.25","5.27","5.28","5.29","5.31","5.32","5.33","5.37","5.39","5.40","9.1","9.2","10.2","10.5","11.6","12.0","12.3","12.4","12.6","12.7","12.8","12.9","12.10","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.33","12.37","12.38","12.39","13.19","13.29","15.1","15.2","15.7","15.11","15.19","15.21","15.26","15.30","15.34","15.40","15.41","19.2","20.4","25.8","25.9","25.12","25.13","25.14","30.1","30.7","30.10","30.19","30.30","30.31","30.34","30.38","30.42","30.45","31.4","36.11","41.1","41.3","41.4","41.5","41.7","41.8","41.9","41.10","41.13","41.17","41.19","41.21","41.25","41.34","41.38","41.42","41.44","41.45","41.48"],"classname":["0.4","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.13","0.14","0.15","1.1","1.2","1.3","1.4","1.5","1.6","1.7","1.8","1.9","1.10","1.12","3.1","3.2","3.3","3.4","3.5","3.6","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.15","3.16","3.17","3.18","3.19","3.21","3.22","3.25","3.26","3.28","3.29","3.31","3.32","5.1","5.2","5.3","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.23","5.24","5.25","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.39","5.40","9.1","9.2","10.1","10.2","10.5","12.0","12.3","12.4","12.6","12.7","12.8","12.9","12.10","12.14","12.16","12.18","12.20","12.21","12.22","12.23","12.25","12.26","12.27","12.28","12.29","12.39","13.19","15.1","15.2","15.11","15.19","15.21","15.26","15.30","15.34","15.40","15.41","19.2","25.8","25.9","25.10","25.12","25.13","25.14","30.1","30.7","30.10","30.19","30.30","30.31","30.34","30.38","30.42","30.45","36.8","36.11","41.1","41.3","41.4","41.5","41.7","41.9","41.10","41.13","41.17","41.19","41.30","41.31","41.34","41.38","41.42","41.44","41.45","41.48"],"run":["0.4","0.5","0.6","0.7","0.10","0.11","0.12","0.13","0.14","0.15","0.16","1.1","1.6","2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.13","2.14","2.15","2.16","2.19","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.39","3.2","3.4","3.5","3.6","3.7","3.8","3.9","3.10","3.16","3.21","3.28","3.29","3.31","5.1","5.2","5.3","5.7","5.9","5.11","5.13","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.24","5.25","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.40","9.1","9.2","10.1","10.2","10.5","12.0","12.6","12.7","12.8","12.10","12.20","12.23","12.27","12.28","12.29","12.30","13.19","15.1","15.2","15.11","15.15","15.19","15.21","15.30","15.34","15.40","15.41","19.2","25.8","25.9","25.10","25.12","25.13","25.14","28.7","30.1","30.7","30.10","30.19","30.29","30.30","30.31","30.34","30.42","30.45","36.8","36.11","41.1","41.4","41.5","41.7","41.10","41.19","41.30","41.31","41.34","41.38","41.42","41.45","41.48"],"art":["0.4","2.0","5.10","5.12","5.41","6.2","6.3","6.4","6.5","7.3","7.4","7.5","8.2","8.3","8.5","9.2","9.3","9.6","9.7","9.8","12.0","14.0","15.10","15.12","15.15","16.2","16.3","16.4","16.5","17.3","17.4","17.5","18.2","18.3","18.5","19.2","19.3","19.6","19.7","19.8","20.3","20.5","25.5","29.3","30.2","31.3","31.10","35.4","36.5","40.3","41.2"],"new":["0.4","2.0","4.0","6.2","6.3","6.4","6.5","7.3","7.4","7.5","8.3","9.2","9.3","9.6","9.7","9.8","12.0","14.0","16.2","16.3","16.4","16.5","17.3","17.4","17.5","18.3","19.2","19.3","19.6","19.7","19.8","20.3","20.5","25.5","25.12","30.2","31.3","35.4","40.3","41.2"],"artplayer":["0.4","2.0","4.0","6.2","6.3","6.4","6.5","7.3","7.4","7.5","9.2","9.3","9.7","9.8","12.0","14.0","16.2","16.3","16.4","16.5","17.3","17.4","17.5","19.2","19.3","19.7","19.8","20.6","25.6","25.7","25.10","26.2","27.2","28.5","29.4","30.2","31.4","31.6","31.9","31.10","36.6","36.7","36.8","36.9","36.10","36.12","36.13","36.14","37.2","38.2","39.5","41.2"],"container":["0.4","2.0","4.0","6.4","6.5","7.3","7.5","9.2","9.3","9.7","9.8","12.0","14.0","16.4","16.5","17.3","17.5","19.2","19.3","19.7","19.8","20.3","30.2","30.11","31.3","35.4","41.11"],"方法用于更新":["0.6"],"对象":["0.6"],"方法用于动态更新层":["0.8"],"show":["0.8","0.9","0.10","0.15","10.7","30.14","30.15"],"属性用于设置是否显示全部层":["0.8"],"toggle":["0.8","0.9","0.10","0.15","13.18","30.18"],"方法用于切换是否显示全部层":["0.8"],"方法用于动态更新控制器":["0.9"],"属性用于设置是否显示全部控制器":["0.9"],"方法用于切换是否显示全部控制器":["0.9"],"属性用于设置是否显示全部菜单":["0.10"],"方法用于切换是否显示全部菜单":["0.10"],"switch":["0.11","9.4","13.17","19.4","25.12","30.20"],"方法设置当前字幕地址和选项":["0.11"],"属性用于切换是否显示加载层":["0.12"],"属性用于切换是否显示遮罩层":["0.14"],"属性用于设置是否显示全部设置项":["0.15"],"方法用于切换是否显示全部设置项":["0.15"],"字符串":["1.11"],"app":["2.0","4.0","7.2","7.5","9.2","9.3","9.7","9.8","12.0","14.0","17.2","17.5","19.3","19.7","19.8","20.3","30.2","35.4"],"url":["2.0","4.0","5.10","7.2","7.5","9.3","9.8","12.0","14.0","15.10","15.11","17.2","17.5","19.3","19.8","20.3","24.4","30.35","30.36","35.4","41.35","41.36"],"assets":["2.0","4.0","7.2","8.2","8.3","8.4","8.5","9.3","9.8","12.0","14.0","17.2","18.2","18.3","18.4","18.5","19.3","19.8","24.4","30.2","30.28","35.4","41.28"],"sample":["2.0","4.0","7.2","8.2","8.3","8.4","8.5","9.3","9.8","14.0","17.2","18.2","18.3","18.4","18.5","19.3","19.8","24.4","30.2","30.28","35.4","41.28"],"mp4":["2.0","4.0","7.2","14.0","17.2","24.4","25.15","36.15"],"on":["2.0","4.0","12.5","14.0","30.21","30.22","30.23","30.46"],"canplay":["2.0"],"浏览器可以播放媒体文件了":["2.40"],"浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束":["2.41"],"offlineaudiocontext":["2.42","12.42"],"duration":["2.43"],"媒体内容变为空":["2.44"],"例如":["2.44"],"视频停止播放":["2.45"],"获取媒体数据时出错":["2.46"],"media":["2.47","12.40","12.57"],"已加载元数据":["2.48"],"播放已暂停":["2.49"],"播放已开始":["2.50"],"由于缺乏数据而暂停或延迟后":["2.51"],"在浏览器加载资源时周期性触发":["2.52"],"播放速率发生变化":["2.53"],"跳帧":["2.54","2.55"],"用户代理":["2.56"],"媒体数据加载已暂停":["2.57"],"currenttime":["2.58"],"音量发生变化":["2.59"],"由于暂时缺少数据":["2.60"],"可以打印出视频全部的内置事件":["3.1"],"默认关闭":["3.1"],"默认为":["3.3","3.7","3.8","3.9","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.26","3.30","5.4"],"单位为毫秒":["3.14","3.20","3.23"],"true":["3.17","3.18","3.31","5.4","24.4","25.15","36.15","41.21","41.27"],"false":["3.19","3.30","3.32","13.19","13.32","41.8","41.9","41.13","41.18","41.20","41.22","41.23","41.25","41.37","41.44","41.46"],"是否把播放器挂在在":["3.30"],"元素下":["3.30"],"目前主要用于进度条的平滑效果":["3.32"],"dosomething":["4.0","14.0"],"video":["4.0","5.31","5.35","5.36","7.2","9.3","9.8","14.0","15.3","15.6","15.8","15.9","15.13","15.14","15.16","15.17","15.18","15.22","15.24","15.25","15.30","15.31","15.32","15.35","15.36","17.2","19.3","19.8","20.3","24.4","25.15","30.4","30.5","30.14","30.16","30.37","36.15","41.40"],"plugins":["4.0","24.4","25.15","36.15"],"ready":["4.0","12.51","14.0","30.4"],"可以在实例化之后再加载插件的函数":["4.0"],"销毁播放器":["5.4"],"接受一个参数表示是否销毁后同时移除播放器的":["5.4"],"html":["5.4","24.4","28.12","30.38","39.1","39.8","39.12","41.26","41.32"],"视频时间跳转":["5.5"],"单位秒":["5.5","5.6","5.7","41.33"],"视频时间快进":["5.6"],"视频时间快退":["5.7"],"设置和获取视频音量":["5.8"],"范围在":["5.8","41.24"],"string":["5.9","6.1","7.1","8.1","11.11","16.1","18.1","30.35","30.36","41.32","41.33","41.35","41.36"],"设置和获取视频地址":["5.9"],"类似":["5.10","5.11","5.12","5.14","5.38"],"但会执行一些优化操作":["5.10","5.11"],"switchurl":["5.12","15.12"],"但会带上之前的播放进度":["5.12"],"设置和获取视频是否静音":["5.13"],"设置和获取视频当前时间":["5.14"],"设置时间时和":["5.14"],"seek":["5.14"],"但它不会触发额外的事件":["5.14"],"返回的是一个":["5.17","5.18"],"promise":["5.17","5.18"],"设置和获取播放器窗口全屏":["5.19"],"设置和获取播放器网页全屏":["5.20"],"设置和获取播放器画中画模式":["5.21"],"只有在视频播放前才能看到海报效果":["5.22"],"boolean":["5.23","6.1","8.1","9.4","19.4","41.32"],"设置和获取播放器迷你模式":["5.23"],"获取视频是否正在播放中":["5.24"],"设置和获取播放器翻转":["5.27"],"支持":["5.27"],"normal":["5.27","13.29"],"horizontal":["5.27","13.29"],"vertical":["5.27","13.29"],"设置和获取播放器播放速度":["5.28"],"设置和获取播放器长宽比":["5.29"],"元素的属性":["5.31"],"动态获取和设置视频类型":["5.32"],"动态获取和设置播放器主题颜色":["5.33"],"常配合":["5.35","5.36"],"timeupdate":["5.35","5.36"],"事件使用":["5.35","5.36"],"和":["5.37","41.6","41.14","41.15","41.16"],"removeeventlistener":["5.37","15.37"],"当使用":["5.37"],"来处理事件":["5.37"],"播放器销毁时也会自动销毁该事件":["5.37"],"document":["5.38","15.38"],"queryselector":["5.38","15.38"],"但被查询的对象局限于当前播放器内":["5.38"],"可以避免同类名的错误":["5.38"],"元素":["5.39"],"是否禁用组件":["6.1","7.1","8.1"],"name":["6.1","7.1","7.2","8.1","14.0","16.1","17.2","18.1","30.36","41.36"],"组件唯一名称":["7.1"],"用于标记类名":["7.1"],"index":["7.1","7.2","17.1","17.2","25.5","25.7","25.10","28.9","28.12","36.5","36.7","36.9","36.10","36.12","36.14","39.1","39.8","39.9"],"controls":["7.2","17.2"],"your":["7.2","17.2","29.2","30.42"],"button":["7.2","17.2","30.17","30.18","30.22","30.23","30.43","30.47"],"img":["8.2","8.3","8.4","8.5","18.2","18.3","18.4","18.5","30.28","41.28"],"layer":["8.2","8.3","8.4","8.5","12.34","12.35","18.2","18.3","18.4","18.5","30.28"],"png":["8.2","8.3","8.5","18.2","18.3","18.5"],"aspectratio":["9.1"],"subtitleoffset":["9.1"],"number":["9.2","17.1","19.2","30.33","30.35","41.33","41.35"],"列表宽度":["9.2","19.2"],"tooltip":["9.2","9.4","9.5","19.2"],"提示文本":["9.2","9.5","19.2"],"元素的图标":["9.4","9.5"],"按钮默认状态":["9.4"],"onswitch":["9.4"],"function":["9.4","9.5","11.9","11.10","19.5","20.5","30.44","31.5"],"按钮切换事件":["9.4"],"range":["9.5","30.24"],"array":["9.5","19.5"],"默认状态数组":["9.5"],"onrange":["9.5","19.5"],"完成时触发的事件":["9.5"],"onchange":["9.5"],"变化时触发的事件":["9.5"],"here":["10.0"],"methods":["10.3","25.8"],"to":["10.3","10.7","10.10","10.12","10.13","10.14","10.16","12.0","12.1","12.2","13.0","13.4","13.17","13.18","13.29","13.30","15.5","15.10","15.12","15.37","15.39","20.3","28.12","29.2","30.4","30.9","30.13","30.14","30.27","30.40","30.43","30.44","30.47"],"handle":["10.3","15.37"],"event":["10.3","13.7","13.8","13.9","15.37","19.5"],"will":["10.3","15.11","15.37","28.7","30.8","30.11","30.17"],"also":["10.3","28.7"],"be":["10.3","15.11","28.7"],"automatically":["10.3","12.19","15.30","15.37"],"destroyed":["10.3","12.6"],"method":["10.3","10.16"],"get":["10.4","15.13","15.20","15.23","15.27","15.28","15.29","15.32","15.33"],"del":["10.4"],"of":["10.5","10.6","11.2","11.3","11.4","11.5","12.17","13.3","13.5","13.6","13.10","13.13","13.22","13.24","13.25","15.3","15.14","15.16","15.17","15.18","15.26","15.28","15.29","15.30","15.31","16.1","17.1","18.1","30.3","30.7","30.15"],"player":["10.5","11.6","11.12","12.5","12.11","12.13","12.17","12.27","13.30","13.31","15.4","15.19","15.20","15.21","15.23","15.26","15.27","15.33","20.5","28.1","30.1","30.3","30.4","30.6","30.7","30.11","30.46","31.5"],"retrieve":["10.6","15.9"],"value":["10.6"],"update":["10.6","10.8","10.9","10.15"],"only":["10.7","10.16","15.22","30.5","30.25"],"one":["10.7","10.16"],"property":["10.7","10.11","10.12","11.1","25.9","30.32","30.33","30.35","30.36"],"used":["10.7","10.12","10.13","10.14","28.7","30.6"],"display":["10.7","10.12","10.14","30.41","30.43","30.47"],"adding":["10.8"],"remove":["10.8","10.9","10.10","10.13","10.15"],"removing":["10.8"],"dynamically":["10.10","10.16"],"items":["10.10","13.5","13.6"],"sets":["10.11","12.18","12.19"],"and":["10.11","12.2","15.3","15.8","15.9","15.13","15.20","15.23","15.27","15.28","15.29","15.30","15.31","15.32","15.33","15.37","19.1","25.8","28.7","30.4","30.17","30.38"],"returns":["10.11"],"current":["10.11","15.14","15.16","15.17","15.18"],"address":["10.11","12.2","15.9","15.10","15.12"],"style":["10.11"],"is":["10.12","10.14","12.2","12.3","12.5","12.6","12.9","12.10","12.11","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.51","13.19","13.23","13.26","13.28","13.32","15.10","15.13","15.22","15.24","15.35","30.4","30.24"],"set":["10.12","10.14","15.9","15.23","15.30","15.31","15.32","15.33"],"whether":["10.12","10.14","13.30","15.4","15.13","15.24","30.9","30.13","30.27"],"a":["10.13","12.25","12.54","12.55","15.4","15.5","24.4","28.11","30.40","30.43"],"item":["10.15"],"add":["10.16","29.2","30.42","30.44"],"refer":["11.0","13.0"],"you":["11.1","20.10","20.11","30.26"],"can":["11.1","12.40","13.1","20.10","28.7"],"use":["11.1","30.27"],"this":["11.1","20.10"],"when":["11.1","13.13","13.14","13.22","13.23","15.37","30.4","30.5","30.12","30.25"],"information":["11.2","15.26"],"environment":["11.3"],"variables":["11.3","15.40","20.10","30.48"],"time":["11.4","12.26","15.5","15.6","15.7","15.14","30.33","41.33"],"default":["11.5","13.16","13.19","13.21","13.23","13.27","13.28","13.32","19.4","19.5","20.5","31.5"],"configuration":["11.5","25.14"],"functions":["11.6"],"for":["11.6","11.7","11.8","11.10","12.1","12.44","13.9","13.10","13.11","13.12","13.14","13.15","13.20","17.1","20.9","20.11","30.18"],"the":["11.6","12.5","12.11","12.45","12.47","12.53","12.58","13.0","13.15","13.20","13.30","13.31","13.32","15.6","15.8","15.9","15.13","15.14","15.16","15.20","15.21","15.22","15.23","15.24","15.25","15.27","15.28","15.29","15.31","15.32","15.33","15.37","15.38","15.39","16.1","18.1","26.1","27.1","28.1","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.24","30.42","30.46","30.47"],"validation":["11.7","11.9"],"constructor":["11.8"],"tool":["11.10"],"required":["11.11"],"s":["11.12","15.33","24.4"],"listening":["12.0"],"able":["12.1","12.2"],"play":["12.1","12.2","12.40","30.4"],"paused":["12.3"],"starts":["12.4"],"playing":["12.4"],"pressed":["12.5"],"gains":["12.7"],"loses":["12.8"],"focus":["12.8"],"double":["12.9","13.23"],"clicked":["12.9","12.10"],"while":["12.11"],"loading":["12.11"],"hovered":["12.12"],"or":["12.12","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","25.12"],"unhovered":["12.12"],"by":["12.12","13.27","30.9","30.11","30.39"],"moves":["12.13"],"over":["12.13"],"size":["12.14","12.19"],"changes":["12.14","12.16","12.17","12.39"],"appears":["12.15","30.5","30.25"],"in":["12.15","12.24","12.26","12.27","13.3","13.4","13.5","13.6","13.7","13.8","13.9","13.11","13.16","13.21","15.5","15.7","15.21","20.10","30.17","30.20","30.32","30.42","30.48"],"viewport":["12.15"],"locked":["12.16"],"state":["12.16","12.39","15.3","19.4","19.5"],"height":["12.18","15.30"],"flips":["12.20"],"into":["12.21"],"full":["12.21","24.1","25.1","28.2"],"screen":["12.21"],"enters":["12.22"],"web":["12.22","15.20","30.23","30.46"],"fullscreen":["12.22","24.4","30.23"],"mode":["12.23","12.24","15.21","25.4","25.11","30.8","30.12","30.26","30.27","36.4"],"picture":["12.24","15.21","30.20"],"takes":["12.25"],"jumps":["12.26"],"panel":["12.31","13.4","13.5","13.6"],"shown":["12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38"],"hidden":["12.31","12.32","12.33","12.34","12.35","12.37","12.38"],"click":["12.36","13.2"],"menu":["12.36","13.2"],"browser":["12.41"],"estimates":["12.41"],"triggered":["12.43","19.5","30.4"],"becomes":["12.44"],"empty":["12.44"],"example":["12.44"],"occurred":["12.46"],"metadata":["12.48","30.37","41.37"],"playback":["12.49","12.50","12.60","13.26","15.28","30.15"],"periodically":["12.52"],"user":["12.56"],"agent":["12.56"],"volume":["12.59"],"which":["13.1","15.8","15.10","30.5","30.8"],"print":["13.1","13.31"],"out":["13.1"],"all":["13.1","21.0","32.0"],"built":["13.1","30.42","30.48"],"right":["13.2"],"context":["13.2","30.17"],"notification":["13.3"],"message":["13.3"],"settings":["13.4","13.5","13.6"],"pixels":["13.4","13.9"],"defaults":["13.4","13.7","13.8","13.29"],"milliseconds":["13.7","13.8","13.16","13.21"],"view":["13.9"],"records":["13.10"],"automatic":["13.10","13.13","13.14"],"feature":["13.11","13.12","30.14","30.15","30.16","30.45"],"hiding":["13.12"],"reconnection":["13.13","13.14"],"attempts":["13.13"],"attempt":["13.14"],"bottom":["13.15","30.32"],"measured":["13.16"],"pause":["13.18","15.3"],"single":["13.19"],"delay":["13.20"],"rotation":["13.20"],"unit":["13.21"],"multiplier":["13.22"],"rate":["13.22"],"speed":["13.22","13.24","15.28","25.11","30.15"],"tapped":["13.23"],"sliding":["13.24"],"adjusting":["13.25"],"with":["13.25","19.1","30.39","30.42"],"shortcuts":["13.25"],"progress":["13.26","30.25","30.33"],"adjusted":["13.26"],"via":["13.26"],"speeds":["13.27"],"ratios":["13.28"],"mount":["13.30","30.26"],"requestanimationframe":["13.32"],"currently":["13.32","15.24","30.3","30.6","30.41"],"myplugin":["14.0"],"console":["14.0"],"info":["14.0"],"return":["14.0","15.39"],"something":["14.0"],"accepts":["15.4"],"indicating":["15.4"],"specific":["15.5"],"fast":["15.6","30.44"],"rewind":["15.7"],"seconds":["15.7"],"gets":["15.8"],"ranges":["15.8"],"similar":["15.10","15.12"],"but":["15.11","15.12","15.38"],"some":["15.11"],"optimization":["15.11"],"operations":["15.11"],"executed":["15.11"],"it":["15.12","19.1","24.4","30.16","30.17"],"setting":["15.14","25.15","36.15"],"screenshot":["15.17","15.18"],"window":["15.19","30.22"],"page":["15.20"],"effect":["15.22"],"visible":["15.22"],"should":["15.25"],"auto":["15.25"],"adjust":["15.25"],"position":["15.26"],"supports":["15.27","30.38","30.41"],"aspect":["15.29","30.16"],"ratio":["15.29","30.16"],"calculate":["15.30"],"attributes":["15.31","30.37"],"that":["15.35","15.36"],"cached":["15.35"],"ranging":["15.35","15.36"],"from":["15.35","15.36","28.8","29.0","31.3","31.9"],"has":["15.36"],"been":["15.36"],"using":["15.37"],"object":["15.38"],"being":["15.38"],"queried":["15.38"],"css":["15.40","30.48"],"qualities":["15.41"],"component":["16.1","18.1"],"unique":["16.1","17.1","18.1"],"class":["17.1"],"identification":["17.1"],"then":["19.1"],"comes":["19.1"],"four":["19.1"],"元素点击事件":["19.2"],"width":["19.2"],"icon":["19.4"],"upon":["19.5"],"usage":["20.0"],"bash":["20.1","31.1"],"npm":["20.1","24.2","25.2","26.2","27.2","28.3","31.1","35.2","36.2","37.2","38.2","39.3"],"jsdelivr":["20.2","31.2"],"net":["20.2","24.3","25.3","26.3","27.3","28.4","31.2","35.3","36.3","37.3","38.3","39.4"],"https":["20.2","24.3","25.3","26.3","27.3","28.4","31.2","35.3","36.3","37.3","38.3","39.4"],"path":["20.3"],"template":["20.4","31.4"],"ref":["20.4"],"artref":["20.4","20.5","31.5"],"export":["20.5","31.5"],"option":["20.5","31.5"],"getinstance":["20.5","31.5"],"rest":["20.5","31.5"],"const":["20.5","31.3","31.5"],"import":["20.8","20.10","31.8","31.10"],"type":["20.9","31.9","31.10"],"options":["20.9"],"ts":["20.9","41.39"],"case":["20.10"],"manually":["20.10"],"types":["20.10"],"latest":["20.11"],"major":["20.11"],"version":["20.11","29.0","31.11"],"chrome":["20.11"],"last":["20.11"],"data":["21.0","25.6","25.8","25.9","25.10","25.12","25.13","25.14","32.0","36.6","36.8","36.11","36.12","36.13"],"libs":["21.0","22.0","25.6","25.7","25.9","25.10","25.13","25.14","32.0","33.0","36.6","36.8","36.9","36.11","36.12","36.13","36.14"],"cdnjs":["21.0","22.0","23.0","32.0","33.0","34.0"],"cloudflare":["21.0","22.0","23.0","32.0","33.0","34.0"],"ajax":["21.0","22.0","23.0","32.0","33.0","34.0"],"dashjs":["21.0","32.0"],"beta":["23.0","34.0"],"min":["23.0","34.0"],"install":["24.2","25.2","26.2","27.2","28.3","35.2","36.2","37.2","38.2","39.3"],"autosize":["24.4"],"fullscreenweb":["24.4","28.13","39.13"],"artplayerpluginads":["24.4"],"ad":["24.4"],"ignored":["24.4"],"if":["24.4","30.26"],"弹幕透明度":["25.4","36.4"],"fontsize":["25.4","25.11","36.4"],"字体大小":["25.4","36.4"],"支持数字和百分比":["25.4","36.4"],"color":["25.4","25.11","30.6","36.4"],"ffffff":["25.4","36.4"],"默认字体颜色":["25.4","36.4"],"默认模式":["25.4","36.4"],"uncompiled":["25.6","25.7","25.9","25.10","36.6","36.7","36.8","36.9","36.10","36.11","36.12","36.13","36.14"],"plugin":["25.6","25.7","25.10","36.6","36.7","36.8","36.9","36.10","36.12","36.13","36.14"],"danmuku":["25.7","25.10","25.11","25.15","36.5","36.7","36.9","36.10","36.12","36.13","36.14","36.15"],"include":["25.11"],"opacity":["25.11"],"margin":["25.11"],"antioverlap":["25.11","36.11"],"synchronousplayback":["25.11","36.11"],"filter":["25.11","36.11"],"locktime":["25.11","36.11"],"beforeemit":["25.11","36.11"],"source":["25.12"],"barrages":["25.13"],"artplayerplugindanmuku":["25.15","36.15"],"xml":["25.15","36.15"],"quality":["26.0"],"easily":["28.1"],"control":["28.1","30.32"],"inside":["28.1","28.7"],"head":["28.5","39.5"],"title":["28.5","39.5"],"meta":["28.5","39.5"],"interface":["28.6","28.10"],"iframe":["28.8","39.12"],"destruction":["28.9"],"warning":["28.10","39.10"],"script":["28.11"],"是不生效的":["28.13","39.13"],"这时候只要监听":["28.13","39.13"],"里的":["28.13","39.13"],"事件并通知到":["28.13","39.13"],"multilingual":["29.0"],"packs":["29.0"],"starting":["29.0"],"are":["29.1","30.21"],"en":["29.1","41.41"],"zh":["29.1","29.4","40.2","40.4","41.41"],"cn":["29.1","40.1"],"welcome":["29.2"],"packaged":["29.2"],"at":["29.2"],"dist":["29.2"],"i18n":["29.4","40.4"],"tw":["29.4","40.2","40.4"],"mounts":["30.1"],"identifier":["30.3"],"successfully":["30.4"],"initialized":["30.4"],"live":["30.8"],"hide":["30.8"],"mute":["30.9"],"fill":["30.11"],"entire":["30.11"],"enter":["30.12"],"mini":["30.12"],"appear":["30.17"],"toolbar":["30.17"],"there":["30.21"],"multiple":["30.21"],"players":["30.21"],"offset":["30.24"],"5s":["30.24","41.24"],"bar":["30.25","30.31","30.32","30.33"],"side":["30.26"],"rendering":["30.26"],"useful":["30.26"],"want":["30.26"],"list":["30.32"],"description":["30.32","30.33","30.35","30.36"],"thumbnail":["30.35"],"ass":["30.36"],"additional":["30.37"],"these":["30.37"],"strings":["30.38"],"htmlelement":["30.38","41.38"],"customtype":["30.39"],"same":["30.39"],"as":["30.39"],"file":["30.39"],"extension":["30.39"],"delegate":["30.40"],"decoding":["30.40"],"third":["30.40"],"tolowercase":["30.41","41.41"],"language":["30.42"],"forward":["30.44"],"rotate":["30.46"],"mobile":["30.46"],"change":["30.48"],"let":["31.10"],"null":["31.10"],"参数":["31.10"],"对于古老的浏览器":["31.11"],"可以使用":["31.11"],"legacy":["31.11"],"文件":["31.11"],"里控制跨域":["39.1"],"接口":["39.6","39.10"],"内部运行":["39.7"],"同时它也能用于异步获取":["39.7"],"里的值":["39.7"],"接收来自":["39.11"],"无需手动导入":["40.1"],"手动导入的语言有":["40.2"],"cs":["40.2"],"es":["40.2"],"fa":["40.2"],"fr":["40.2"],"id":["40.2"],"pl":["40.2"],"ru":["40.2"],"group":["40.2"],"容器":["41.1"],"目前只用于记忆播放":["41.3"],"autoplayback":["41.3"],"事件一样":["41.4"],"只会出现在播放器初始化且未播放的状态下":["41.5"],"播放器主题颜色":["41.6"],"目前用于":["41.6"],"进度条":["41.6"],"播放器的默认音量":["41.7"],"使用直播模式":["41.8"],"会隐藏进度条和播放时间":["41.8"],"是否默认静音":["41.9"],"播放器的尺寸默认会填充整个":["41.11"],"容器尺寸":["41.11"],"所以经常出现黑边":["41.11"],"该值能自动调整播放器尺寸以隐藏黑边":["41.11"],"当播放器滚动到浏览器视口以外时":["41.12"],"自动进入":["41.12"],"迷你播放":["41.12"],"模式":["41.12","41.27"],"是否循环播放":["41.13"],"是否显示视频翻转功能":["41.14"],"目前只出现在":["41.14"],"设置面板":["41.14","41.15","41.16","41.18","41.24"],"右键菜单":["41.14","41.15","41.16"],"是否显示视频播放速度功能":["41.15"],"会出现在":["41.15","41.16"],"是否显示视频长宽比功能":["41.16"],"是否在底部控制栏里显示":["41.17","41.18","41.20"],"视频截图":["41.17"],"功能":["41.17"],"的开关按钮":["41.18","41.20"],"画中画":["41.20"],"假如页面里同时存在多个播放器":["41.21"],"是否只能让一个播放器播放":["41.21"],"是否在底部控制栏里显示播放器":["41.22","41.23"],"窗口全屏":["41.22"],"按钮":["41.22","41.23","41.47"],"网页全屏":["41.23"],"出现在":["41.24"],"迷你进度条":["41.25"],"只在播放器失去焦点后且正在播放时出现":["41.25"],"挂载模式":["41.26"],"假如你希望在播放器挂载前":["41.26"],"就提前渲染好播放器所需的":["41.26"],"时有用":["41.26"],"你可以通过":["41.26"],"在移动端是否使用":["41.27"],"类型":["41.32"],"描述":["41.32","41.33","41.35","41.36"],"默认画质":["41.32"],"画质名字":["41.32"],"高亮时间":["41.33"],"text":["41.33"],"高亮文本":["41.33"],"预览图地址":["41.35"],"预览图数量":["41.35"],"column":["41.35"],"字幕名字":["41.36"],"字幕地址":["41.36"],"字幕类型":["41.36"],"可选":["41.36"],"preload":["41.37"],"更多视频属性":["41.37"],"这些属性将直接写入视频元素里":["41.37"],"字符串和":["41.38"],"一起使用":["41.39"],"默认视频的格式就是视频地址的后缀":["41.39"],"如":["41.39"],"m3u8":["41.39"],"mkv":["41.39"],"但有时候视频地地址没有正确的后缀":["41.39"],"进行匹配":["41.40"],"把视频解码权交给第三方程序进行处理":["41.40"],"处理的函数能接收三个参数":["41.40"],"视频":["41.40"],"dom":["41.40"],"默认显示语言":["41.41"],"目前支持":["41.41"],"是否在移动端显示一个":["41.43"],"锁定按钮":["41.43"],"用于隐藏底部":["41.43"],"控制栏":["41.43"],"是否在移动端添加长按视频快进功能":["41.44"],"是否在移动端的网页全屏时":["41.46"],"根据视频尺寸和视口尺寸":["41.46"],"旋转播放器":["41.46"],"是否显示":["41.47"],"当前只有部分浏览器支持该功能":["41.47"]},{"0":["9.5","13.25","15.8","15.35","15.36"],"1":["9.5","13.25","15.8","15.35","15.36","19.5","20.10"],"2":["13.27","30.1","41.1"],"3":["20.7","20.10","31.7"],"4":["30.7","30.10","30.19","30.30","30.31","30.38","30.42","40.1","41.10","41.19","41.30","41.31","41.38","41.45","41.48"],"5":["9.5","13.11","19.5","30.45","41.45"],"6":["2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39"],"7":["2.19","2.21","2.22","2.24","2.25","5.15","5.26","5.30","15.30","30.4","30.38","41.4","41.38"],"8":["2.17","2.20","5.1","5.13","5.20","5.28","5.29","5.31","5.32","5.33","5.40","12.20","15.40","28.5","39.5"],"9":["2.28","2.29","5.11","5.19","5.21","5.22","5.34","12.28","12.29","15.11","15.19","15.21","15.34","30.4","30.42","41.4"],"10":["2.6","2.18","2.23","7.5","9.5","12.23","13.10","13.23","17.5"],"11":["5.2","5.3","5.20","5.30","12.27","15.2","15.30","31.11"],"12":["30.30","41.30"],"13":["12.30"],"15":["30.34","41.34"],"16":["30.31","41.31"],"17":["4.0"],"18":["21.0","32.0"],"19":["15.41","22.0","33.0"],"21":["23.0","34.0"],"23":["21.0","32.0"],"24":["22.0","33.0"],"25":["13.27"],"26":["23.0","34.0"],"29":["15.41"],"35":["13.6"],"50":["13.9"],"200":["13.5","13.7","13.8","13.20"],"250":["9.2","13.4","19.2"],"300":["13.16"],"1000":["13.21"],"2000":["13.3"],"是指挂载在":["0.0","1.0","5.0"],"js":["0.1","0.3","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.14","0.15","1.1","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.19","2.20","2.21","2.22","2.24","2.25","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.2","3.4","3.5","3.6","3.7","3.8","3.9","3.16","3.27","3.28","3.29","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.24","5.25","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.37","5.40","9.1","9.4","9.5","10.1","10.4","10.5","10.6","10.13","12.6","12.18","12.20","12.23","12.27","12.28","12.29","13.19","15.1","15.2","15.11","15.19","15.21","15.26","15.30","15.34","15.40","19.5","25.6","25.8","25.9","25.11","25.12","25.13","25.14","28.7","28.12","29.0","30.4","30.7","30.10","30.30","30.31","30.34","30.38","30.42","36.6","36.8","36.11","36.13","36.14","40.0","41.1","41.7","41.10","41.19","41.30","41.33","41.34","41.38","41.45","41.48"],"var":["0.1","0.3","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.13","0.14","0.15","0.16","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","5.2","5.3","5.11","5.13","5.15","5.19","5.21","5.22","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.40","9.4","10.1","10.5","12.28","12.29","12.30","13.19","15.2","15.11","15.19","15.21","15.30","15.40","15.41","25.6","25.7","25.9","25.10","28.7","29.4","30.1","30.7","30.10","30.19","30.30","30.31","30.42","30.45","36.7","36.8","36.9","36.10","36.11","36.12","36.14","40.1","41.1","41.4","41.10","41.19","41.30","41.31","41.38","41.42","41.45"],"art":["0.1","0.2","0.5","0.6","0.7","0.10","0.13","0.15","0.16","2.2","2.6","2.11","2.12","2.16","2.17","2.18","2.20","2.21","2.22","2.23","2.24","2.25","2.27","2.28","2.29","2.30","2.38","5.15","5.19","5.21","5.22","5.26","5.30","5.40","8.4","9.4","10.1","10.2","12.30","13.19","15.19","15.21","15.30","15.40","15.41","18.4","20.10","21.0","23.0","25.7","25.9","25.10","29.4","30.1","30.7","30.10","30.19","30.28","30.29","30.30","30.31","30.42","30.45","31.5","32.0","34.0","36.7","36.9","36.10","36.11","36.12","39.7","40.1","40.4","41.1","41.4","41.19","41.28","41.29","41.30","41.31","41.34","41.38","41.40","41.42","41.45"],"new":["0.1","0.2","0.6","0.7","0.13","0.15","0.16","2.2","2.6","2.17","2.18","2.20","2.23","2.27","2.28","2.29","2.30","5.11","5.22","5.40","5.41","8.2","8.4","8.5","10.1","10.2","12.30","15.11","15.15","15.19","15.21","15.30","15.41","18.2","18.4","18.5","25.7","25.10","29.3","29.4","30.1","30.7","30.10","30.19","30.28","30.29","30.30","30.31","30.42","30.45","31.5","36.5","36.7","36.9","36.10","36.11","36.12","39.7","40.4","41.1","41.4","41.28","41.29","41.30","41.31","41.42"],"artplayer":["0.2","0.3","0.7","0.13","0.15","0.16","2.2","2.23","2.27","2.28","2.29","2.30","3.4","3.5","3.6","3.28","3.29","5.11","5.22","5.41","8.2","8.3","8.4","8.5","9.6","10.1","10.2","12.30","13.19","15.11","15.15","15.19","15.30","15.41","18.2","18.3","18.4","18.5","19.6","20.1","20.8","20.9","20.10","24.2","24.3","25.2","25.3","25.8","25.9","25.11","25.12","25.13","25.14","26.3","27.3","28.3","28.4","29.0","29.3","30.7","30.10","30.19","30.28","30.29","30.30","30.31","30.42","30.45","31.1","31.8","35.2","35.3","36.2","36.3","36.11","37.3","38.3","39.3","39.4","39.7","40.0","40.3","41.4","41.26","41.28","41.29","41.30","41.31","41.42"],"container":["0.2","0.3","0.13","0.16","2.2","2.27","2.30","5.11","5.41","6.2","6.3","7.4","8.2","8.3","8.4","8.5","9.6","10.2","12.30","15.11","15.15","15.19","15.41","16.2","16.3","17.4","18.2","18.3","18.4","18.5","19.6","20.5","25.5","25.10","29.3","29.4","30.7","30.10","30.19","30.28","30.29","30.30","30.31","30.42","30.45","31.5","36.5","36.9","36.10","36.12","39.7","40.3","40.4","41.2","41.4","41.28","41.29","41.31","41.42"],"app":["0.2","0.4","0.13","2.30","5.41","6.2","6.3","6.4","6.5","7.3","7.4","8.2","8.3","8.4","8.5","9.6","10.2","15.11","15.15","15.41","16.2","16.3","16.4","16.5","17.3","17.4","18.2","18.3","18.4","18.5","19.2","19.6","20.4","25.5","25.10","30.1","30.19","30.28","30.29","30.45","31.3","36.5","36.9","36.10","39.7","40.4","41.2","41.4","41.28","41.29","41.42"],"url":["0.2","0.4","5.41","6.2","6.3","6.4","6.5","7.3","7.4","8.2","8.3","8.5","9.2","9.6","9.7","10.2","15.15","15.41","16.2","16.3","16.4","16.5","17.3","17.4","18.2","18.3","18.5","19.2","19.6","19.7","21.0","22.0","23.0","25.5","30.19","30.28","30.29","30.32","30.39","30.45","31.3","32.0","33.0","34.0","36.5","36.10","39.7","41.28","41.29","41.32","41.40","41.42"],"classname":["0.3","1.11","3.14","3.20","3.23","3.24","3.27","3.30","5.4","5.14","5.27","5.35","5.36","5.37","5.38","9.4","10.4","10.6","10.7","10.13","10.16","11.6","12.1","12.2","12.5","12.11","12.12","12.13","12.15","12.17","12.19","12.24","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","13.2","13.4","13.7","13.8","13.9","13.16","13.21","13.27","13.28","13.29","13.31","15.3","15.5","15.6","15.7","15.8","15.9","15.10","15.13","15.16","15.20","15.22","15.23","15.24","15.25","15.27","15.28","15.29","15.31","15.32","15.33","15.37","15.39","19.4","25.11","30.4","30.9","30.13","30.33","30.41","30.48","41.6","41.8","41.12","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.24","41.25","41.26","41.27","41.32","41.33","41.37","41.39","41.41","41.43","41.46","41.47"],"run":["0.3","0.8","0.9","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.11","1.12","3.1","3.3","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.22","3.23","3.24","3.25","3.26","3.27","3.30","3.32","5.4","5.5","5.6","5.8","5.10","5.12","5.14","5.23","5.27","5.35","5.36","5.37","5.38","5.39","9.4","10.4","10.6","10.7","10.13","10.16","11.6","12.1","12.2","12.3","12.4","12.5","12.9","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.7","13.8","13.9","13.16","13.21","13.27","13.28","13.29","15.3","15.6","15.7","15.8","15.9","15.13","15.16","15.20","15.22","15.24","15.25","15.26","15.27","15.28","15.29","15.31","15.32","15.33","15.37","19.4","25.11","30.4","30.9","30.13","30.33","30.38","30.41","30.48","41.3","41.6","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.17","41.18","41.20","41.21","41.22","41.23","41.24","41.25","41.27","41.32","41.33","41.37","41.39","41.41","41.43","41.44","41.46","41.47"],"code":["0.3","0.8","0.9","0.10","0.11","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.12","3.1","3.3","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.30","3.31","3.32","5.4","5.5","5.6","5.7","5.8","5.9","5.10","5.12","5.14","5.17","5.18","5.23","5.27","5.35","5.36","5.37","5.38","5.39","9.1","9.4","10.4","10.5","10.6","10.7","10.13","10.16","11.6","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.7","13.8","13.16","13.21","13.28","13.29","15.3","15.7","15.8","15.9","15.13","15.16","15.20","15.21","15.24","15.26","15.27","15.28","15.29","15.30","15.31","15.32","15.33","15.37","19.4","25.11","28.13","29.0","29.2","30.4","30.38","30.48","39.13","41.3","41.5","41.7","41.8","41.9","41.12","41.13","41.17","41.18","41.20","41.21","41.22","41.23","41.24","41.25","41.27","41.32","41.33","41.37","41.39","41.41","41.43","41.44","41.46","41.47"],"document":["0.3","30.1"],"queryselector":["0.3"],"assets":["0.4","5.41","6.2","6.3","6.4","6.5","7.3","7.4","7.5","9.2","9.6","9.7","10.2","15.11","15.15","16.2","16.3","16.4","16.5","17.3","17.4","17.5","19.2","19.6","19.7","25.5","30.29","30.45","36.5","36.10","41.2","41.29","41.42"],"sample":["0.4","5.41","6.2","6.3","6.4","6.5","7.3","7.4","7.5","9.2","9.7","10.2","12.0","15.15","16.2","16.3","16.4","16.5","17.3","17.4","17.5","19.2","19.7","25.5","30.29","36.5","41.2","41.29","41.42"],"video":["0.4","5.41","6.2","6.3","6.4","6.5","7.3","7.5","8.2","8.3","8.5","9.2","9.7","10.2","11.5","12.11","13.1","15.5","16.2","16.3","16.4","16.5","17.3","17.5","18.2","18.3","18.5","19.2","19.7","21.0","22.0","25.5","30.13","30.15","30.29","30.44","31.3","32.0","33.0","35.4","36.5","41.2"],"mp4":["0.4","6.3","6.4","6.5","7.3","7.5","8.2","8.3","8.5","9.2","9.3","9.7","9.8","12.0","16.3","16.4","16.5","17.3","17.5","18.2","18.3","18.5","19.2","19.3","19.7","19.8","20.3","25.5","30.2","31.3","35.4","41.2"],"test":["0.4"],"foo":["0.4"],"bar":["0.4","13.15","13.32","30.6","30.8","30.17","30.22","30.23"],"const":["0.4","9.5","19.5","31.9"],"console":["1.1","2.0","12.0","25.15","36.15"],"info":["2.0","12.0","25.15","36.15"],"只监听一次事件":["2.0"],"但估计没有足够的数据来支撑播放到结束":["2.40"],"渲染完成":["2.42"],"属性的值改变时触发":["2.43"],"当这个":["2.44"],"因为":["2.45"],"或者资源类型不是受支持的媒体格式":["2.46"],"中的首帧已经完成加载":["2.47"],"播放准备开始":["2.51"],"seek":["2.54","2.55","12.54","12.55","13.24","15.14"],"user":["2.56"],"属性指定的时间发生变化":["2.58"],"播放已停止":["2.60"],"也是指挂载在":["3.0"],"构造函数":["3.0"],"div":["3.30","5.4","5.35","5.36","5.38","9.4","10.4","10.6","10.7","10.13","10.16","11.9","11.12","12.1","12.2","12.5","12.11","12.12","12.31","12.32","12.34","12.35","12.36","13.2","13.3","13.4","13.5","13.6","13.7","13.8","13.9","13.10","13.16","13.21","13.25","13.27","13.28","13.31","15.3","15.5","15.6","15.8","15.9","15.10","15.12","15.13","15.16","15.17","15.18","15.20","15.22","15.23","15.24","15.25","15.27","15.28","15.29","15.31","15.32","15.33","15.37","15.39","19.4","25.11","30.4","30.9","30.13","30.24","30.27","30.33","30.41","30.48","41.6","41.12","41.14","41.15","41.16","41.18","41.20","41.22","41.23","41.24","41.26","41.27","41.32","41.33","41.37","41.39","41.40","41.41","41.43","41.46","41.47"],"组件唯一名称":["6.1","8.1"],"用于标记类名":["6.1","8.1"],"index":["6.1","7.5","8.1","16.1","17.5","18.1","25.6","25.8","25.9","25.11","25.12","25.13","25.14","36.6","36.8","36.11","36.13","39.11"],"number":["6.1","7.1","8.1","16.1","18.1"],"contextmenu":["6.4","6.5","16.4","16.5"],"name":["6.5","7.5","9.8","16.5","17.5","19.8","30.32"],"组件索引":["7.1"],"用于显示的优先级":["7.1"],"html":["7.1","7.2","9.3","9.8","15.4","17.1","17.2","19.3","19.8","20.3","28.1","28.8","28.9","30.26","30.32","35.4","39.9"],"element":["7.1","13.30","15.31","17.1"],"position":["7.2","7.5","17.2","17.5"],"left":["7.2","13.24","17.2"],"tooltip":["7.2","9.8","17.2","19.4","19.5","19.8"],"style":["7.2","9.2","17.2","30.36","41.36"],"color":["7.2","15.33","17.2"],"red":["7.2","17.2"],"click":["7.2","13.17","13.18","17.2"],"function":["7.2","17.2","19.4","21.0","22.0","23.0","30.17","30.34","30.40","31.10","32.0","33.0","34.0","41.34"],"args":["7.2","17.2"],"controls":["7.3","7.5","17.3","17.5"],"add":["7.3","17.3"],"button1":["7.5","17.5"],"png":["8.4","18.4","30.28","41.28"],"setting":["9.2","9.3","9.7","9.8","19.2","19.3","19.7","19.8","25.5"],"true":["9.2","9.3","9.7","9.8","13.17","13.18","13.19","13.31","19.2","19.3","19.7","19.8","25.4","25.5","35.4","36.4"],"settings":["9.2","9.3","9.8","19.2","19.3","19.8","30.14","30.16","30.18","30.24"],"subtitle":["9.2","19.2"],"01":["9.2","9.3","19.2"],"default":["9.2","11.12","13.2","13.9","13.10","13.11","13.12","13.13","13.15","13.17","13.18","13.22","13.24","13.25","13.31","19.2"],"span":["9.2"],"multi":["9.3","19.3"],"level":["9.3","13.0","19.3"],"selector":["9.3","19.3"],"提示文本":["9.4"],"value":["9.5","30.11"],"min":["9.5","21.0","22.0","32.0","33.0"],"flip":["9.7","19.1","19.7"],"slider":["9.8","19.8"],"5x":["9.8","19.8"],"icon":["9.8","19.8"],"refer":["10.0","15.0"],"to":["10.0","10.8","11.0","11.1","12.51","12.56","13.3","13.7","13.8","13.20","13.24","15.0","15.4","15.14","20.11","31.3","39.7"],"used":["10.3","13.32","15.35","15.36","16.1","17.1","18.1","30.3"],"hover":["10.3"],"custom":["10.3"],"loadimg":["10.3"],"delete":["10.4"],"clear":["10.4"],"object":["10.6","41.11"],"updating":["10.8"],"show":["10.8","10.9","10.10","10.15"],"property":["10.8","10.9","10.15"],"set":["10.8","10.9","10.15"],"whether":["10.9","10.15"],"display":["10.9","17.1","30.17"],"update":["10.10"],"attribute":["10.10","10.12"],"method":["10.11"],"switch":["10.11"],"toggle":["10.12","10.14"],"the":["11.0","12.43","13.1","15.0","15.5","15.12","24.4","28.10","30.8","30.25","30.26","30.37","30.43","30.44"],"want":["11.1"],"manage":["11.1"],"multiple":["11.1"],"players":["11.1"],"player":["11.2","11.3","11.4","11.7","11.11","15.28","15.29","15.37","15.38","15.39","30.5","30.12","30.21","30.25","30.26"],"options":["11.7","11.9","11.12","30.36"],"event":["11.8","12.0","19.4","30.4","39.12"],"dispatcher":["11.8"],"for":["11.9","11.11","13.22","13.32","16.1","18.1","30.3","30.6","30.40"],"type":["11.10"],"checking":["11.10"],"on":["12.0","13.23","19.5","25.15","30.20","30.27","30.43","30.44","36.15"],"canplay":["12.0"],"listen":["12.0"],"an":["12.0"],"only":["12.0","30.3","30.14","30.21","30.47"],"once":["12.0"],"first":["12.1","12.47","13.0"],"time":["12.1","12.58"],"mouse":["12.12"],"hidden":["12.36"],"file":["12.40","20.11"],"but":["12.40","15.10","15.14"],"estimates":["12.40"],"there":["12.40"],"it":["12.41","15.14","30.15"],"can":["12.41","15.38","20.11","28.9","30.11","30.40"],"play":["12.41"],"rendering":["12.42"],"when":["12.43","12.44"],"this":["12.44","30.11"],"has":["12.44","12.45","12.48","12.49","12.50","12.60"],"stopped":["12.45"],"while":["12.46","12.52","14.0"],"fetching":["12.46"],"media":["12.46"],"frame":["12.47","15.16","15.17","15.18"],"start":["12.51"],"triggered":["12.52"],"playback":["12.53","15.12","30.3","30.8"],"is":["12.56","13.5","13.6","13.9","13.10","13.13","13.15","13.16","13.17","13.18","13.21","13.25","13.31","15.14","15.37","15.38","30.2","30.5"],"trying":["12.56"],"data":["12.57","25.11"],"specified":["12.58"],"changed":["12.59"],"properties":["13.0"],"mounted":["13.0"],"in":["13.1","13.12","13.14","13.15","13.20","13.26","15.6","28.8","30.2","30.11","30.14","30.15","30.16","30.18","30.24","30.33","30.46"],"events":["13.1"],"of":["13.1","13.11","13.12","13.23","14.0","15.39","24.4","30.12","30.35"],"by":["13.1","13.2","30.44"],"enabled":["13.2"],"milliseconds":["13.3","13.12","13.14","13.15","13.20"],"defaults":["13.3","13.20","13.30"],"pixels":["13.5","13.6"],"feature":["13.10"],"seconds":["13.11","13.26","15.5","15.6","30.33"],"with":["13.11","13.12","15.35","15.36","30.3"],"a":["13.11","13.12","13.13","13.14","14.0","15.17","15.18"],"connection":["13.13","13.14"],"error":["13.13","13.14"],"occurs":["13.13","13.14"],"measured":["13.15"],"double":["13.17","13.18"],"long":["13.22","30.44"],"pressing":["13.22","30.44"],"mobile":["13.23","30.27","30.43"],"delay":["13.23"],"and":["13.24","30.5","30.6","30.8","30.25"],"right":["13.24"],"keyboard":["13.26"],"shortcuts":["13.26"],"under":["13.30"],"mainly":["13.32"],"smooth":["13.32"],"progress":["13.32","15.12","30.6","30.8"],"here":["14.0"],"translation":["14.0"],"provided":["14.0"],"text":["14.0","19.4","19.5","30.33"],"into":["14.0","30.37"],"english":["14.0"],"preserving":["14.0"],"markdown":["14.0"],"formatting":["14.0"],"that":["14.0"],"allows":["14.0"],"loading":["14.0"],"after":["14.0","15.4"],"instantiation":["14.0"],"remove":["15.4"],"s":["15.4","15.23","17.1","30.26"],"from":["15.8","20.8","20.9","28.1","31.8","31.11","40.2"],"performs":["15.10"],"some":["15.10","30.47"],"optimization":["15.10"],"operations":["15.10"],"will":["15.12","20.6","29.0","30.15","30.16","30.37"],"carry":["15.12"],"over":["15.12"],"previous":["15.12"],"similar":["15.14","30.4"],"does":["15.14","30.39"],"which":["15.17","15.18","15.38","20.11","29.1","30.2","30.11"],"returns":["15.17","15.18"],"promise":["15.17","15.18"],"full":["15.20","26.1","27.1","30.46"],"screen":["15.20","30.46"],"before":["15.22","30.5","30.26"],"starts":["15.22"],"playing":["15.22"],"mode":["15.23"],"its":["15.25"],"size":["15.25"],"normal":["15.27"],"horizontal":["15.27"],"vertical":["15.27"],"commonly":["15.35","15.36"],"be":["15.37","30.21","30.37"],"destroyed":["15.37"],"limited":["15.38"],"within":["15.38","28.7"],"current":["15.38","20.5","31.5"],"marking":["16.1","18.1"],"class":["16.1","18.1"],"priority":["17.1"],"items":["19.1"],"playbackrate":["19.1"],"aspectratio":["19.1"],"subtitleoffset":["19.1"],"onswitch":["19.4"],"completion":["19.5"],"onchange":["19.5"],"change":["19.5"],"install":["20.1","31.1"],"head":["20.3"],"title":["20.3"],"demo":["20.3"],"if":["20.5","23.0","31.5","34.0"],"typeof":["20.5","31.5"],"return":["20.5"],"let":["20.10"],"null":["20.10"],"parameters":["20.10"],"use":["20.11"],"legacy":["20.11"],"up":["20.11"],"ie":["20.11","31.11"],"plaympd":["21.0","32.0"],"playflv":["22.0","33.0"],"playm3u8":["23.0","34.0"],"plugin":["24.2","24.3","25.2","25.3","25.8","25.9","25.11","25.12","25.13","25.14","26.2","26.3","27.2","27.3","28.3","28.4","35.2","35.3","36.2","36.3","36.11","37.2","37.3","38.2","38.3","39.3","39.4"],"ads":["24.2","35.2"],"npm":["24.3","25.3","26.3","27.3","28.4","35.3","36.3","37.3","38.3","39.4"],"img":["24.4"],"src":["24.4"],"poster":["24.4"],"jpg":["24.4"],"test1":["24.4"],"redirect":["24.4"],"no":["24.4","29.0"],"redirection":["24.4"],"empty":["24.4"],"danmuku":["25.2","25.8","25.9","25.12","25.13","25.14","36.2","36.6","36.8"],"滚动":["25.4","36.4"],"静止":["25.4","36.4"],"margin":["25.4","36.4"],"弹幕上下边距":["25.4","36.4"],"antioverlap":["25.4","36.4"],"是否防重叠":["25.4","36.4"],"useworker":["25.4","36.4"],"是否使用":["25.4","36.4"],"web":["25.4","36.4"],"worker":["25.4","36.4"],"plugins":["25.5","35.4"],"libs":["25.8","25.11","25.12"],"uncompiled":["25.8","25.11","25.12","25.13","25.14"],"emit":["25.15","36.15"],"danmu":["25.15","36.15"],"新增弹幕":["25.15","36.15"],"loaded":["25.15","36.15"],"dash":["26.2","26.3","37.2","37.3"],"quality":["26.2","26.3","27.2","27.3","37.2","37.3","38.2","38.3"],"hls":["27.2","27.3","38.2","38.3"],"cross":["28.1"],"domain":["28.1"],"iframe":["28.1","28.3","28.5","28.12","39.1","39.3","39.5","39.8"],"page":["28.1","30.21"],"charset":["28.5","39.5"],"utf":["28.5","39.5","41.36"],"body":["28.5","39.5"],"id":["28.5","29.2","39.5"],"asynchronously":["28.7"],"retrieve":["28.7"],"values":["28.7"],"receive":["28.11","30.40"],"message":["28.12","39.12"],"即可":["28.13","39.13"],"group":["28.13","39.13"],"doctype":["28.13","39.13"],"core":["29.0"],"longer":["29.0"],"do":["29.1"],"not":["29.1","30.2","30.39"],"require":["29.1"],"manual":["29.1"],"manually":["29.2"],"imported":["29.2"],"include":["29.2"],"cs":["29.2"],"es":["29.2"],"fa":["29.2"],"fr":["29.2"],"pl":["29.2"],"ru":["29.2"],"zh":["29.2","30.41"],"tw":["29.2"],"sometimes":["30.2","30.39"],"known":["30.2"],"so":["30.2"],"quickly":["30.2"],"case":["30.2"],"you":["30.2"],"remembering":["30.3"],"initialized":["30.5"],"highlight":["30.6"],"often":["30.11"],"results":["30.11"],"black":["30.11"],"bars":["30.11"],"scrolls":["30.12"],"out":["30.12"],"currently":["30.14","30.47"],"available":["30.14"],"panel":["30.14","30.16","30.18","30.24"],"appear":["30.15","30.16"],"menu":["30.17"],"bottom":["30.17","30.18","30.20","30.43"],"control":["30.17","30.20","30.22","30.23"],"button":["30.20"],"should":["30.21"],"one":["30.21"],"at":["30.22","30.23"],"appearing":["30.24"],"loses":["30.25"],"focus":["30.25"],"pre":["30.26"],"render":["30.26"],"required":["30.26"],"devices":["30.27"],"boolean":["30.32"],"string":["30.32","30.33"],"myplugin":["30.34","41.34"],"column":["30.35"],"columns":["30.35"],"width":["30.35","41.35"],"encoding":["30.36","41.36"],"directly":["30.37"],"written":["30.37"],"such":["30.39"],"m3u8":["30.39"],"mkv":["30.39"],"ts":["30.39"],"however":["30.39"],"have":["30.39"],"party":["30.40"],"program":["30.40"],"processing":["30.40"],"en":["30.41"],"cn":["30.41","41.41"],"hide":["30.43"],"pages":["30.46"],"according":["30.46"],"browsers":["30.47"],"support":["30.47"],"path":["31.3","39.7"],"ref":["31.4"],"artref":["31.4"],"时会自动导入的":["31.6"],"types":["31.9"],"param":["31.10"],"getinstance":["31.10"],"可以兼容到":["31.11"],"import":["31.11","40.2"],"autosize":["35.4"],"fullscreen":["35.4"],"fullscreenweb":["35.4"],"artplayerpluginads":["35.4"],"html广告":["35.4"],"假如是视频广告则忽略该值":["35.4"],"接收来自":["39.8"],"无法与":["39.9"],"提示":["39.10"],"版本开始":["40.0"],"核心代码除了包含":["40.0"],"zhtw":["40.2"],"高亮元素":["41.6"],"上":["41.6"],"类似":["41.11"],"css":["41.11"],"的":["41.11"],"fit":["41.11"],"里":["41.14","41.15","41.16","41.24"],"访问到播放器所需的":["41.26"],"layer":["41.28"],"画质地址":["41.32"],"预览图列数":["41.35"],"预览图宽度":["41.35"],"height":["41.35"],"预览图高度":["41.35"],"字幕样式":["41.36"],"字幕编码":["41.36"],"默认":["41.36"],"所以需要特别指明":["41.39"],"元素":["41.40"],"视频地址":["41.40"],"当前实例":["41.40"]},{"0":["13.24","19.5"],"1":["3.28","9.2","13.28","19.2","25.5"],"2":["3.28","9.5","13.28","19.5","41.3"],"3":["9.5","13.22"],"4":["9.1","29.1","30.17","30.33","30.48","31.10","41.5","41.7","41.8","41.9","41.13","41.17","41.21","41.24","41.25","41.32","41.33","41.37","41.39","41.41","41.44"],"5":["13.13","13.24","13.26","39.7"],"6":["5.38","5.39","12.3","12.4","12.5","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","31.10"],"7":["5.4","5.5","5.6","5.9","5.16","5.17","5.18","5.23","5.35","5.36","12.19","12.21","12.22","12.24","12.25","15.9","15.26","41.37"],"8":["5.8","5.14","5.24","5.25","5.27","5.37","12.17","15.1","15.8","15.13","15.20","15.24","15.27","15.28","15.29","15.31","15.32","15.33","15.37","20.3","28.13","30.36","39.13","41.36"],"9":["5.10","5.12","15.10","15.22"],"10":["5.7","5.37","7.3","7.4","12.2","12.6","12.18","15.7","15.11","15.37","17.3","17.4","19.5"],"11":["15.3","15.20","20.11"],"14":["41.32"],"17":["14.0"],"22":["9.8","19.8"],"25":["30.33","41.33"],"40":["3.6"],"50":["25.4","36.4"],"100":["3.9"],"111":["25.5","36.5"],"150":["9.3","19.3"],"300":["3.4","3.5"],"500":["3.7","3.8","3.16"],"1000":["13.14"],"3000":["13.12","13.15"],"实例":["0.0","5.0"],"artplayer":["0.1","0.5","0.6","0.8","0.9","0.10","0.11","0.12","0.14","1.1","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.24","2.25","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.1","3.2","3.3","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","3.16","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.30","3.31","3.32","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.19","5.20","5.21","5.24","5.26","5.27","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.37","5.40","9.1","9.4","10.4","10.5","10.6","10.7","10.13","10.16","11.6","12.2","12.6","12.18","12.20","12.23","12.27","12.28","12.29","13.4","13.7","13.8","13.16","13.21","13.27","13.28","13.29","15.2","15.21","15.26","15.34","15.37","15.40","19.4","20.2","28.7","28.13","30.4","30.38","31.2","39.13","40.1","41.10","41.19","41.33","41.38","41.39","41.45","41.48"],"container":["0.1","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.14","0.15","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.28","2.29","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","5.2","5.3","5.8","5.10","5.12","5.13","5.15","5.19","5.20","5.21","5.22","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.37","5.40","9.4","10.1","10.3","10.4","10.5","10.6","10.7","10.13","10.16","12.20","12.23","12.27","12.28","12.29","13.19","15.2","15.21","15.26","15.37","15.40","19.4","25.6","25.7","25.8","25.9","25.11","25.12","28.7","30.4","30.38","31.9","36.7","36.8","36.11","36.13","36.14","40.1","40.2","41.10","41.19","41.30","41.33","41.38","41.45","41.48"],"app":["0.1","0.3","0.5","0.6","0.7","0.8","0.9","0.10","0.15","0.16","2.2","2.6","2.17","2.18","2.20","2.23","2.27","2.28","2.29","5.11","5.15","5.19","5.21","5.22","5.26","5.30","5.31","5.40","9.4","10.1","10.4","10.5","10.6","10.13","12.30","13.19","15.19","15.21","15.30","15.37","15.40","19.4","20.5","25.6","25.7","25.8","25.9","25.11","25.12","28.7","29.3","29.4","30.4","30.7","30.10","30.30","30.31","30.38","30.42","31.4","31.9","36.7","36.8","36.11","36.12","36.14","40.3","41.1","41.19","41.30","41.31","41.38","41.45"],"assets":["0.2","0.3","0.6","0.7","0.10","0.13","0.15","0.16","2.2","2.27","2.30","5.11","5.22","5.40","9.4","10.1","10.4","10.6","10.13","12.30","13.19","15.19","15.21","15.30","15.41","25.7","25.9","25.10","25.11","25.12","29.3","29.4","30.1","30.4","30.7","30.10","30.19","30.30","30.31","30.42","36.7","36.8","36.9","36.11","36.12","40.3","40.4","41.1","41.4","41.30","41.31"],"sample":["0.2","0.3","0.6","0.13","0.15","0.16","2.2","2.27","2.30","5.11","5.22","9.4","9.6","10.1","10.4","10.6","10.13","12.30","13.19","15.11","15.19","15.21","15.30","15.41","19.6","25.7","25.9","25.10","25.11","25.12","29.4","30.1","30.4","30.7","30.10","30.19","30.30","30.31","30.42","30.45","36.7","36.9","36.10","36.11","36.12","40.4","41.4","41.30","41.31"],"video":["0.2","0.3","0.13","0.15","0.16","2.30","5.11","7.4","8.4","9.4","9.6","10.4","10.6","10.13","12.30","13.19","15.19","15.21","15.41","17.4","18.4","19.6","25.7","25.9","25.10","28.7","29.4","30.1","30.7","30.10","30.19","30.28","30.30","30.31","30.42","30.45","30.46","36.7","36.9","36.10","36.11","36.12","39.7","40.4","41.4","41.28","41.29","41.31","41.42"],"mp4":["0.2","0.13","0.16","2.30","5.11","5.41","6.2","7.4","8.4","9.4","9.6","10.2","10.4","12.30","15.11","15.15","15.19","15.21","15.30","15.41","16.2","17.4","18.4","19.6","25.9","25.10","28.7","30.1","30.4","30.7","30.10","30.19","30.28","30.29","30.30","30.31","30.42","30.45","36.5","36.9","36.10","36.11","36.12","39.7","40.4","41.4","41.28","41.29","41.42"],"console":["0.2","0.4","1.6","7.2","10.2","11.6","15.15","17.2","28.12","30.34","39.12","41.34"],"info":["0.2","0.4","1.1","7.2","10.2","11.6","15.15","17.2","28.12","30.34","39.12","41.34"],"art":["0.3","0.8","0.9","0.11","0.12","0.14","2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.13","2.14","2.15","2.19","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.39","3.4","3.5","3.6","3.29","5.1","5.2","5.3","5.5","5.6","5.7","5.8","5.9","5.13","5.14","5.16","5.17","5.18","5.20","5.23","5.24","5.25","5.27","5.28","5.29","5.31","5.32","5.33","5.34","9.1","10.4","10.5","10.6","10.7","10.13","10.16","12.2","12.3","12.4","12.6","12.7","12.8","12.9","12.10","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.38","12.39","15.1","15.2","15.3","15.7","15.9","15.13","15.22","15.26","15.28","15.29","15.31","15.32","15.33","15.34","19.4","22.0","25.6","25.8","25.11","25.12","25.13","25.14","28.7","30.4","30.34","30.38","30.48","33.0","36.6","36.8","36.13","36.14","40.2","41.5","41.7","41.10","41.17","41.32","41.33","41.39","41.48"],"new":["0.3","0.5","0.8","0.9","0.10","0.11","0.12","0.14","2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.19","2.21","2.22","2.24","2.25","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.4","3.29","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.24","5.25","5.26","5.27","5.28","5.29","5.30","5.31","5.32","5.33","5.34","9.1","9.4","10.4","10.5","10.6","10.7","10.13","10.16","12.2","12.6","12.7","12.8","12.10","12.16","12.17","12.18","12.20","12.21","12.22","12.23","12.25","12.27","12.28","12.29","13.19","15.1","15.2","15.7","15.22","15.26","15.31","15.32","15.34","15.40","19.4","23.0","25.6","25.8","25.9","25.11","25.13","25.14","28.7","30.4","30.38","34.0","36.6","36.8","36.13","36.14","40.1","40.2","41.7","41.10","41.19","41.33","41.38","41.39","41.45","41.48"],"url":["0.3","0.6","0.7","0.9","0.10","0.13","0.15","0.16","2.2","2.18","2.23","2.27","2.28","2.29","2.30","5.19","5.22","5.30","5.40","8.4","9.4","10.1","10.4","10.6","10.13","12.30","13.19","15.19","15.21","15.30","15.40","18.4","19.4","25.7","25.9","25.10","25.11","25.12","28.7","29.3","29.4","30.1","30.4","30.7","30.10","30.30","30.31","30.40","30.42","36.7","36.8","36.9","36.11","36.12","40.3","40.4","41.1","41.4","41.30","41.31","41.38","41.45"],"function":["0.13","6.5","16.5","17.1","20.10","41.36"],"构造函数":["1.0"],"var":["1.1","3.4","3.5","3.6","3.16","3.29","5.1","5.5","5.6","5.7","5.8","5.9","5.10","5.12","5.14","5.16","5.17","5.18","5.20","5.23","5.24","5.25","5.27","5.35","5.36","5.37","5.39","9.1","10.3","10.4","10.6","10.7","10.13","10.16","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.31","12.32","12.33","12.34","12.35","12.37","12.38","12.39","13.29","15.1","15.3","15.7","15.8","15.9","15.13","15.20","15.22","15.24","15.26","15.27","15.28","15.29","15.31","15.32","15.33","15.34","15.37","19.4","25.8","25.11","25.12","25.13","25.14","29.1","30.4","30.33","30.38","30.48","36.6","36.13","40.2","41.3","41.5","41.7","41.17","41.24","41.32","41.33","41.39","41.48"],"js":["1.6","3.1","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.30","3.31","3.32","5.4","5.5","5.6","5.14","5.23","5.27","5.35","5.36","5.38","5.39","10.3","10.7","10.16","11.6","12.1","12.2","12.3","12.4","12.5","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.19","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.21","13.27","13.28","13.29","15.3","15.6","15.7","15.8","15.9","15.10","15.12","15.13","15.16","15.17","15.18","15.20","15.22","15.24","15.25","15.27","15.28","15.29","15.31","15.32","15.33","15.37","19.4","29.1","30.17","30.33","30.41","30.48","41.3","41.5","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.17","41.18","41.20","41.21","41.22","41.23","41.24","41.25","41.26","41.27","41.32","41.37","41.39","41.41","41.43","41.44","41.46","41.47"],"code":["1.11","9.5","10.3","12.1","13.2","13.3","13.5","13.6","13.9","13.10","13.11","13.12","13.13","13.15","13.17","13.18","13.20","13.22","13.25","13.27","13.30","13.31","13.32","15.5","15.6","15.10","15.12","15.14","15.17","15.18","15.22","15.23","15.25","15.35","15.36","15.39","19.1","20.11","30.3","30.6","30.8","30.9","30.13","30.17","30.20","30.22","30.23","30.24","30.27","30.32","30.33","30.37","30.39","30.41","31.11","41.6","41.11","41.14","41.15","41.16","41.26","41.35","41.40"],"once":["2.0"],"subtitle":["2.30","7.2","7.5","17.2","17.5"],"不必停下来进一步缓冲内容":["2.40"],"media":["2.44","2.45","12.41","12.56"],"已经加载完成":["2.44"],"操作完成":["2.54"],"操作开始":["2.55"],"agent":["2.56"],"的":["3.0"],"false":["3.2","13.30","20.5","25.4","31.5","36.4"],"add":["4.0","6.3","8.3","14.0","24.2","25.2","26.2","27.2","28.3","35.2","36.2","37.2","38.2","39.3"],"例如我想写一个在视频暂停后":["4.0"],"显示一个图片广告的插件":["4.0"],"on":["5.11","13.0","15.11","15.15","15.30"],"document":["5.37","10.3","15.37","41.1"],"queryselector":["5.37","10.3","15.37","30.1","41.1"],"default":["5.41","7.5","13.1","13.14","13.26","15.41","17.5","31.10"],"true":["5.41","7.5","9.6","15.4","15.41","17.5","19.6","30.4","30.29","30.45","36.5","41.4","41.29","41.36"],"html":["5.41","6.1","6.2","6.3","6.4","6.5","7.3","7.5","8.1","8.2","8.3","8.5","9.7","15.41","16.1","16.2","16.3","16.4","16.5","17.3","17.5","18.1","18.2","18.3","18.5","19.7","30.28","30.29","30.36","31.3","39.11","41.28","41.29","41.36"],"sd":["5.41","15.41"],"480p":["5.41"],"组件索引":["6.1","8.1"],"用于显示的优先级":["6.1","8.1"],"contextmenu":["6.2","6.3","16.2","16.3"],"name":["6.2","6.3","6.4","7.3","7.4","8.2","8.3","8.4","8.5","9.7","16.2","16.3","16.4","17.3","17.4","18.2","18.3","18.4","18.5","19.7","30.28","30.34","41.28","41.34"],"your":["6.2","6.3","6.4","6.5","7.3","16.2","16.3","16.4","16.5","17.3","30.45","41.42"],"menu":["6.2","6.3","6.4","6.5","16.2","16.3","16.4","16.5","30.14","30.15","30.16"],"click":["6.4","6.5","16.4","16.5","17.1"],"args":["6.5","16.5"],"组件的":["7.1"],"dom":["7.1","17.1","30.40"],"元素":["7.1"],"style":["7.1","8.2","8.3","8.5","17.1","18.2","18.3","18.5","19.2","30.28"],"object":["7.1","17.1"],"mounted":["7.2","17.2"],"button1":["7.3","7.4","17.3","17.4"],"index":["7.3","7.4","17.3","17.4","28.1","28.8"],"position":["7.3","15.19","17.3"],"left":["7.3","17.3"],"controls":["7.4","15.19","17.4"],"right":["7.5","15.19","17.5"],"selector":["7.5","17.5","30.29","41.29"],"01":["7.5","17.5","19.3"],"layers":["8.2","8.3","8.4","8.5","18.2","18.3","18.4","18.5"],"potser":["8.2","8.3","8.5","41.28"],"width":["8.2","8.3","8.5","9.3","9.8","18.2","18.3","18.5","19.3","19.8","30.28"],"100px":["8.2","8.3","8.5","18.2","18.3","18.5","30.28"],"src":["8.2","8.5","9.8","18.2","18.5","19.8","35.4"],"color":["9.2","19.2"],"red":["9.2","19.2"],"srt":["9.2","19.2"],"id":["9.2","19.2","30.45"],"yellow":["9.2","19.2"],"02":["9.2","19.2"],"setting":["9.4","9.6","19.6","30.29","36.5","41.29"],"max":["9.5","19.5"],"step":["9.5"],"div":["9.5","10.3","10.11","10.12","10.14","11.1","11.2","11.3","11.4","11.5","11.7","11.8","11.10","11.11","13.1","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.24","13.26","13.30","13.32","15.4","15.14","15.35","15.36","19.1","20.3","20.5","30.3","30.5","30.6","30.8","30.12","30.14","30.15","30.16","30.17","30.18","30.20","30.22","30.23","30.25","30.32","30.35","30.37","30.39","30.43","30.44","30.47","31.5","41.11","41.35"],"classname":["9.5","10.3","10.14","11.1","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","13.3","13.5","13.6","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.24","13.25","13.26","13.30","13.32","15.12","15.14","15.17","15.18","15.35","15.36","19.1","30.3","30.5","30.6","30.8","30.12","30.14","30.16","30.17","30.18","30.20","30.22","30.23","30.24","30.25","30.27","30.32","30.35","30.37","30.39","30.43","30.44","30.47","41.11","41.35","41.40"],"run":["9.5","10.3","11.1","11.2","11.3","11.4","11.5","11.8","11.9","11.10","11.12","13.2","13.3","13.5","13.6","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.24","13.25","13.26","13.30","13.31","13.32","15.5","15.10","15.12","15.14","15.17","15.18","15.23","15.35","15.36","15.39","19.1","30.3","30.5","30.6","30.8","30.12","30.14","30.16","30.17","30.18","30.20","30.22","30.23","30.24","30.25","30.27","30.32","30.35","30.37","30.39","30.43","30.47","41.11","41.26","41.35","41.40"],"settings":["9.7","19.7","30.15"],"slider":["9.7","19.7"],"tooltip":["9.7","19.7"],"5x":["9.7","19.7"],"icon":["9.7","19.7"],"img":["9.8","19.8","35.4"],"heigth":["9.8","19.8"],"state":["9.8","19.8"],"svg":["9.8","19.8"],"secondary":["10.0"],"attributes":["10.0"],"listen":["10.3"],"load":["10.3"],"of":["10.3","10.9","10.14","12.47"],"images":["10.3"],"test":["10.4"],"foo":["10.4"],"bar":["10.4","30.18","30.20","30.43"],"const":["10.4","20.8","20.9","21.0","22.0","23.0","31.8","32.0","33.0","34.0"],"whether":["10.8","10.10","30.36"],"display":["10.8","10.15","16.1","18.1"],"all":["10.8","10.9","10.10","10.15"],"or":["10.8","12.44","12.46","24.4"],"not":["10.8","12.40","15.14"],"toggle":["10.8","10.9","10.10","10.15"],"set":["10.10","30.2"],"options":["10.11"],"items":["10.15"],"first":["11.0"],"level":["11.0"],"at":["11.1","30.21"],"the":["11.1","12.52","39.7"],"same":["11.1","15.38"],"time":["11.1","25.5","30.8","30.21"],"is":["12.40","12.42","13.1","13.14","13.22","13.24","24.4","30.25"],"enough":["12.40"],"value":["12.43","19.5","24.4"],"been":["12.44","12.48","12.49"],"completely":["12.44"],"loaded":["12.44"],"because":["12.45"],"data":["12.46","31.10"],"started":["12.50"],"following":["12.51"],"a":["12.51","30.21"],"rate":["12.53"],"frame":["12.54","12.55"],"fetch":["12.56"],"loading":["12.57"],"by":["12.58"],"stopped":["12.60"],"constructor":["13.0"],"property":["13.0"],"turned":["13.1"],"off":["13.1"],"long":["13.23"],"press":["13.23"],"acceleration":["13.23"],"effects":["13.32"],"primary":["15.0"],"destruction":["15.4"],"which":["15.4","24.4"],"defaults":["15.4"],"ready":["15.11","15.15","15.30"],"seek":["15.11","39.7"],"settimeout":["15.11"],"trigger":["15.14"],"additional":["15.14"],"events":["15.14"],"timeupdate":["15.35","15.36"],"event":["15.35","15.36","28.12"],"prevent":["15.38"],"errors":["15.38"],"due":["15.38"],"having":["15.38"],"priority":["16.1","18.1"],"element":["16.1","18.1","30.37","30.40"],"poster":["18.2","18.3","18.5","30.28","35.4"],"span":["19.2"],"min":["19.5"],"yarn":["20.1","24.2","25.2","26.2","27.2","28.3","31.1","35.2","36.2","37.2","38.2","39.3"],"npm":["20.2","31.2"],"dist":["20.2","20.11","24.3","25.3","26.3","27.3","28.4","31.2","31.11","35.3","36.3","37.3","38.3","39.4"],"meta":["20.3","28.13","39.13"],"charset":["20.3","28.13","39.13"],"utf":["20.3","28.13","30.36","39.13"],"body":["20.3"],"class":["20.3"],"get":["20.4","39.7"],"instance":["20.4"],"getinstance":["20.4","20.10"],"destroy":["20.5","21.0","22.0","23.0","31.5","32.0","33.0","34.0"],"ref":["20.5","31.5"],"automatically":["20.6","30.11"],"types":["20.9"],"param":["20.10"],"properties":["20.10"],"import":["20.11","29.1","29.2"],"from":["20.11","28.11","29.2"],"group":["20.11","29.2","31.11"],"bash":["20.11","31.11"],"if":["21.0","22.0","32.0","33.0"],"supportsmediasource":["21.0","32.0"],"mediaplayer":["21.0","32.0"],"create":["21.0","32.0"],"flvjs":["22.0","33.0"],"issupported":["22.0","23.0","33.0","34.0"],"loadsource":["23.0","34.0"],"ads":["24.3","35.3"],"http":["24.4"],"org":["24.4"],"duration":["24.4"],"that":["24.4"],"must":["24.4"],"be":["24.4","30.39"],"watched":["24.4"],"can":["24.4","30.2","30.26"],"t":["24.4"],"skipped":["24.4"],"in":["24.4"],"seconds":["24.4"],"this":["24.4","30.47"],"greater":["24.4"],"than":["24.4"],"danmuku":["25.3","36.3"],"synchronousplayback":["25.4","36.4"],"是否同步到播放速度":["25.4","36.4"],"filter":["25.4","36.4"],"danmu":["25.4","36.4"],"text":["25.4","25.5","36.4","36.5"],"length":["25.4","25.15","36.4","36.15"],"弹幕过滤函数":["25.4","36.4"],"返回":["25.4","36.4"],"则可以发送":["25.4","36.4"],"locktime":["25.4","36.4"],"artplayerplugindanmuku":["25.5","25.10","36.5","36.9","36.10","36.11","36.12"],"send":["25.5"],"plugins":["25.10","36.5","36.9","36.10","36.11","36.12"],"danmus":["25.15","36.15"],"加载弹幕":["25.15","36.15"],"error":["25.15","36.15"],"demo":["27.1"],"within":["28.1"],"for":["28.1"],"example":["28.1"],"iframe":["28.4","39.4","39.9"],"path":["28.7"],"no":["28.9"],"longer":["28.9"],"messages":["28.11"],"head":["28.13","31.3","39.13"],"title":["28.13","31.3","39.13"],"include":["29.0"],"other":["29.0"],"languages":["29.0"],"besides":["29.0"],"simplified":["29.0"],"chinese":["29.0"],"and":["29.0","30.14","30.15","30.16","30.46"],"english":["29.0"],"zhtw":["29.2"],"you":["30.1"],"may":["30.1"],"asynchronously":["30.2"],"autoplayback":["30.3"],"muted":["30.4","41.4"],"it":["30.5","30.39"],"starts":["30.5"],"playing":["30.5","30.25"],"elements":["30.6"],"adjust":["30.11"],"to":["30.11","30.21","30.36"],"hide":["30.11"],"browser":["30.12"],"viewport":["30.12","30.46"],"context":["30.14","30.15","30.16"],"panel":["30.15"],"control":["30.18","30.43"],"description":["30.19"],"allowed":["30.21"],"play":["30.21","41.42"],"bottom":["30.22","30.23"],"mounts":["30.26"],"access":["30.26"],"setting01":["30.29","41.29"],"return":["30.34","31.5","31.10","41.34"],"height":["30.35"],"escape":["30.36","41.36"],"boolean":["30.36","41.36"],"tags":["30.36"],"correct":["30.39"],"so":["30.39"],"needs":["30.39"],"specifically":["30.39"],"stated":["30.39"],"three":["30.40"],"parameters":["30.40"],"lang":["30.42","41.42"],"mobile":["30.44"],"devices":["30.44"],"warning":["30.45"],"size":["30.46"],"feature":["30.47"],"属性":["31.10"],"export":["31.10"],"jsdelivr":["31.11"],"jpg":["35.4"],"视频广告的地址":["35.4"],"test1":["35.4"],"广告跳转网址":["35.4"],"弹幕数组":["36.5"],"页面里的播放器":["39.1"],"如在":["39.1"],"的消息":["39.8"],"简体中文":["40.0"],"和":["40.0"],"英文":["40.0"],"有时候":["41.2"],"地址没那么快知道":["41.2"],"这时候你可以异步设置":["41.2"],"cover":["41.11"],"是否转义":["41.36"],"标签":["41.36"],"默认为":["41.36"],"onvttload":["41.36"],"用于修改":["41.36"]},{"0":["15.11","24.4"],"1":["3.24","9.8","19.8","36.5"],"2":["3.25","9.2","19.2","30.3"],"3":["3.27","13.27","19.5","41.1"],"4":["3.27","13.27","19.1","20.10","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.16","30.18","30.20","30.22","30.23","30.24","30.25","30.27","30.32","30.35","30.37","30.39","30.41","30.47","41.6","41.11","41.12","41.14","41.15","41.16","41.18","41.20","41.22","41.23","41.27","41.35","41.36","41.40","41.43","41.46","41.47"],"5":["3.22","3.28","9.8","13.28","19.8","28.7","30.7","35.4"],"6":["3.28","12.1","13.28","15.39","20.10","30.2","41.2"],"7":["15.5","15.6","15.16","15.17","15.18","15.23","15.35","15.36","30.37","41.26"],"8":["15.14","15.25","30.35","31.3","41.35","41.40"],"9":["15.12","30.28"],"10":["3.11","3.13","3.26","5.11","9.8","19.8"],"14":["30.32"],"20":["3.10"],"22":["9.4"],"40":["13.6"],"60":["25.4","36.4"],"100":["13.9","25.4","36.4"],"200":["25.4","36.4"],"300":["13.4","13.5"],"500":["3.20","13.7","13.8","13.16","25.4","36.4"],"1000":["13.23"],"2000":["3.21","3.23","13.21"],"3000":["3.14","15.11"],"5000":["3.3","3.12","3.15"],"的":["0.0","0.4","1.0","5.0"],"url":["0.1","0.5","0.8","0.12","0.14","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.19","2.20","2.21","2.22","2.24","2.25","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.4","3.29","5.1","5.2","5.3","5.7","5.8","5.12","5.13","5.14","5.15","5.17","5.18","5.20","5.21","5.24","5.26","5.27","5.28","5.29","5.31","5.32","5.33","5.34","9.1","9.5","10.3","10.5","10.7","10.16","12.2","12.6","12.7","12.8","12.10","12.16","12.17","12.18","12.20","12.21","12.22","12.23","12.24","12.25","12.27","12.28","12.29","15.1","15.2","15.3","15.7","15.8","15.13","15.22","15.26","15.27","15.28","15.29","15.31","15.32","15.33","15.34","15.37","20.9","25.6","25.8","25.13","25.14","29.2","30.17","30.33","30.38","30.48","31.9","36.6","36.13","36.14","40.1","40.2","41.7","41.10","41.19","41.33","41.39","41.48"],"assets":["0.1","0.5","0.8","0.9","0.11","0.12","0.14","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.28","2.29","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.29","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.19","5.20","5.21","5.24","5.26","5.27","5.28","5.29","5.30","5.31","5.32","5.33","5.34","9.1","9.5","10.3","10.5","10.7","10.16","12.2","12.6","12.17","12.18","12.20","12.23","12.27","12.28","12.29","15.2","15.13","15.22","15.26","15.29","15.31","15.32","15.34","15.37","15.40","19.4","20.9","25.6","25.8","25.13","25.14","29.2","30.17","30.33","30.38","30.39","31.9","36.6","36.13","36.14","40.1","40.2","41.10","41.19","41.32","41.33","41.38","41.39","41.45","41.48"],"sample":["0.1","0.5","0.7","0.8","0.9","0.10","0.11","0.12","0.14","2.6","2.11","2.12","2.16","2.17","2.18","2.20","2.21","2.22","2.23","2.24","2.25","2.28","2.29","2.38","5.2","5.3","5.8","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.19","5.20","5.21","5.26","5.27","5.28","5.29","5.30","5.31","5.32","5.33","5.40","9.5","10.3","10.5","10.7","10.16","12.2","12.18","12.20","12.23","12.27","12.28","12.29","15.2","15.22","15.26","15.31","15.37","15.40","19.4","20.9","25.6","25.8","25.13","25.14","29.3","30.17","30.33","30.38","30.39","31.9","36.6","36.8","36.13","36.14","40.2","40.3","41.1","41.10","41.19","41.32","41.33","41.38","41.39","41.45","41.48"],"video":["0.1","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.14","2.2","2.6","2.12","2.17","2.18","2.20","2.21","2.22","2.23","2.24","2.25","2.27","2.28","2.29","5.2","5.3","5.8","5.10","5.12","5.13","5.15","5.19","5.21","5.22","5.26","5.28","5.29","5.30","5.32","5.33","5.40","10.1","10.3","10.5","10.7","10.16","12.2","12.23","12.27","12.28","12.29","15.26","15.37","15.40","19.4","25.6","25.8","25.11","25.12","25.14","29.3","30.38","31.9","36.8","36.13","36.14","40.2","40.3","41.1","41.10","41.19","41.30","41.33","41.38","41.39","41.45"],"mp4":["0.3","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.15","2.2","2.17","2.18","2.20","2.23","2.27","2.28","2.29","5.15","5.19","5.21","5.22","5.26","5.29","5.30","5.31","5.40","10.1","10.3","10.5","10.6","10.7","10.13","10.16","12.27","12.28","12.29","13.19","15.22","15.26","15.37","15.40","19.4","25.6","25.7","25.8","25.11","25.12","29.3","29.4","30.38","31.9","36.7","36.8","36.13","36.14","40.2","40.3","41.1","41.10","41.19","41.30","41.31","41.33","41.38","41.45"],"click":["0.3","0.13","6.2","6.3","7.1","7.3","10.3","10.13","15.19","15.21","16.2","16.3","17.3","25.10","30.30","36.10"],"event":["0.3","0.13","9.2","9.3","10.13","12.44","17.1","19.2","19.3"],"console":["0.3","0.6","0.13","0.16","6.2","6.3","6.4","6.5","9.2","9.3","10.1","10.3","10.4","10.5","10.6","10.13","11.1","16.2","16.3","16.4","16.5","19.2","19.3","30.29"],"info":["0.3","0.6","0.13","0.16","1.6","6.2","6.3","6.4","6.5","9.2","9.3","10.1","10.3","10.4","10.6","10.13","11.1","16.2","16.3","16.4","16.5","19.2","19.3","30.29"],"warning":["0.4","10.2","10.4","11.6","15.11","15.15","15.19","15.30","20.3","20.4","30.7","30.10","40.0"],"提示":["0.4"],"默认所有播放器实例都是共享同一个":["0.4"],"localstorage":["0.4"],"而且默认的":["0.4"],"是":["0.4"],"settings":["0.4","9.4","19.4"],"如果你想不同的播放器使用不同的":["0.4"],"play":["0.6","10.6","30.42","41.4"],"on":["0.7","0.8","0.9","0.10","2.2","5.30","5.40","7.5","8.5","9.8","10.0","10.13","11.0","15.0","15.40","17.5","18.5","19.8","20.3","21.0","23.0","29.0","32.0","34.0"],"ready":["0.9","0.10","2.2","5.11","5.40","7.5","10.13","17.5"],"app":["0.11","0.12","0.14","2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.19","2.21","2.22","2.24","2.25","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.4","3.5","3.6","3.29","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.16","5.17","5.18","5.20","5.24","5.25","5.27","5.28","5.29","5.32","5.33","5.34","5.37","9.1","9.5","10.3","10.7","10.16","12.2","12.6","12.7","12.8","12.9","12.10","12.12","12.13","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.38","12.39","13.29","15.1","15.2","15.3","15.7","15.8","15.9","15.10","15.12","15.13","15.20","15.22","15.26","15.27","15.28","15.29","15.31","15.32","15.33","15.34","20.9","25.13","25.14","29.2","30.17","30.33","30.39","30.48","31.5","36.6","36.13","40.1","40.2","41.7","41.10","41.17","41.24","41.26","41.32","41.33","41.39","41.48"],"hotkeyevent":["0.13","10.13"],"true":["0.15","2.27","3.1","3.19","3.30","3.32","7.2","9.4","17.2","19.4","30.10","30.36"],"flip":["0.15"],"playbackrate":["0.15"],"aspectratio":["0.15"],"function":["0.16","6.2","6.3","6.4","7.1","7.3","9.3","10.13","10.16","15.19","15.21","16.2","16.3","16.4","17.3","19.3","25.10","30.29","30.30","30.36","36.10","39.7","41.29"],"myplugin":["0.16","10.16"],"art":["1.1","3.1","3.2","3.3","3.7","3.8","3.9","3.10","3.11","3.12","3.16","3.17","3.20","3.21","3.22","3.23","3.26","3.27","3.28","3.31","3.32","5.4","5.35","5.36","5.37","5.38","5.39","9.5","10.3","10.9","10.11","10.14","10.15","12.1","12.5","12.11","12.12","12.31","12.32","12.33","12.34","12.35","12.36","12.37","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.28","13.29","15.5","15.6","15.8","15.14","15.16","15.17","15.18","15.20","15.23","15.24","15.25","15.27","15.35","15.36","15.37","15.39","19.1","19.5","20.8","29.1","29.2","30.9","30.13","30.17","30.24","30.27","30.32","30.33","30.35","30.39","30.40","30.41","31.8","41.3","41.6","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.24","41.25","41.27","41.35","41.37","41.41","41.43","41.44","41.46","41.47"],"new":["1.1","3.2","3.5","3.6","3.7","3.8","3.9","3.10","3.16","3.21","3.27","3.28","3.32","5.4","5.5","5.6","5.23","5.35","5.36","5.37","5.38","5.39","9.5","10.3","10.9","10.15","12.1","12.3","12.4","12.5","12.9","12.11","12.12","12.13","12.14","12.15","12.19","12.24","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.7","13.8","13.16","13.28","13.29","15.3","15.5","15.6","15.8","15.9","15.10","15.12","15.13","15.14","15.16","15.17","15.18","15.20","15.23","15.24","15.25","15.27","15.28","15.29","15.33","15.37","15.39","19.1","19.5","29.1","29.2","30.9","30.13","30.17","30.24","30.32","30.33","30.39","30.41","30.48","41.3","41.5","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.17","41.18","41.20","41.21","41.22","41.23","41.24","41.25","41.27","41.32","41.35","41.37","41.41","41.43","41.44","41.46","41.47"],"container":["1.1","2.1","2.3","2.4","2.14","3.4","3.5","3.6","3.7","3.8","3.9","3.16","3.28","3.29","5.1","5.4","5.5","5.6","5.7","5.9","5.14","5.16","5.17","5.18","5.23","5.24","5.25","5.27","5.35","5.36","5.38","5.39","9.1","9.5","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.29","15.1","15.3","15.7","15.8","15.9","15.10","15.12","15.13","15.17","15.18","15.20","15.22","15.24","15.27","15.28","15.29","15.31","15.32","15.33","15.34","20.9","25.13","25.14","29.1","29.2","30.17","30.24","30.32","30.33","30.39","30.41","30.48","36.6","41.5","41.7","41.17","41.24","41.26","41.32","41.35","41.37","41.39","41.41"],"js":["1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.12","10.8","10.9","10.10","10.11","10.12","10.14","10.15","11.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.24","13.25","13.26","13.30","13.31","13.32","15.4","15.5","15.14","15.23","15.35","15.36","15.39","19.1","20.2","24.3","25.3","26.3","27.3","28.4","28.8","30.3","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.24","30.25","30.27","30.32","30.35","30.37","30.39","30.43","30.44","30.47","31.2","35.3","36.3","37.3","38.3","39.4","39.8","39.11","41.6","41.11","41.35","41.36","41.40"],"artplayer":["1.6","5.4","5.5","5.6","5.16","5.23","5.25","5.35","5.36","5.38","5.39","9.5","10.3","10.9","10.15","12.1","12.3","12.4","12.5","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.19","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.2","13.3","13.5","13.6","13.9","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.24","13.25","13.26","13.30","13.31","13.32","15.1","15.3","15.6","15.7","15.8","15.9","15.10","15.12","15.13","15.16","15.17","15.18","15.20","15.22","15.23","15.24","15.25","15.27","15.28","15.29","15.31","15.32","15.33","19.1","19.5","29.1","30.17","30.24","30.26","30.32","30.33","30.39","30.41","30.48","41.3","41.5","41.7","41.8","41.9","41.13","41.14","41.15","41.16","41.17","41.21","41.24","41.25","41.32","41.35","41.37","41.41","41.44"],"手动触发事件":["2.0"],"subtitle":["2.27","2.28","2.29","12.30"],"srt":["2.30","12.30"],"或者部分加载完成":["2.44"],"则发送此事件":["2.44"],"已经到达结束点":["2.45"],"正在尝试获取媒体数据":["2.56"],"一级属性":["3.0"],"var":["3.1","3.2","3.3","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.28","3.30","3.31","3.32","5.4","5.38","9.5","10.9","10.11","10.12","10.14","10.15","12.1","12.11","12.36","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.21","13.27","13.28","15.5","15.6","15.10","15.12","15.14","15.16","15.17","15.18","15.23","15.25","15.35","15.36","15.39","19.1","19.5","29.2","30.3","30.9","30.13","30.17","30.24","30.27","30.32","30.35","30.37","30.39","30.41","41.6","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.25","41.26","41.27","41.35","41.37","41.40","41.41","41.43","41.44","41.46","41.47"],"false":["3.17","3.18","3.31","6.5","13.2","16.5","25.5","36.5"],"adsplugin":["4.0","14.0"],"option":["4.0","14.0","20.4","21.0","25.15","31.4","32.0","36.15"],"layers":["4.0","14.0"],"ads":["4.0"],"html":["4.0","7.4","8.4","9.6","15.19","15.21","17.4","18.4","19.6","25.10","25.11","28.11","30.30","30.31","36.9","36.10","36.11","36.12","41.30","41.31"],"img":["4.0","9.4","9.7","19.7","30.38","41.38"],"style":["4.0","6.1","7.3","8.1","8.4","16.1","17.3","18.1","18.4","20.4","41.28"],"width":["4.0","8.4","9.4","9.7","18.4","19.7","41.28"],"100px":["4.0","8.4","18.4","41.28"],"src":["4.0","8.3","8.4","9.7","18.3","18.4","19.7","30.28","41.28"],"display":["4.0"],"none":["4.0"],"position":["4.0","5.19","7.4","8.2","8.3","8.5","15.21","17.4","18.2","18.3","18.5","25.9","25.10","25.11","25.12","30.28","30.31","36.9","36.10","36.11","36.12","41.28","41.31"],"absolute":["4.0","8.2","8.3","8.5","18.2","18.3","18.5","30.28","41.28"],"top":["4.0","8.2","8.3","8.5","18.2","18.3","18.5","30.28","41.28"],"20px":["4.0","30.28","41.28"],"right":["4.0","7.2","7.4","8.2","8.5","15.21","17.2","17.4","18.2","18.5","25.9","25.10","25.11","30.28","36.9","36.10","36.11","36.12"],"seek":["5.11","28.7"],"settimeout":["5.11","7.5","17.5","30.2"],"controls":["5.19","5.21","15.21","25.9","25.10","25.11","25.12","36.9","36.10","36.11","36.12"],"jpg":["5.22"],"hd":["5.41","15.41"],"720p":["5.41","15.41"],"element":["6.1","8.1"],"组件的":["6.1","8.1"],"dom":["6.1","8.1","9.3","16.1","18.1","19.3"],"元素":["6.1","8.1"],"args":["6.2","6.3","6.4","16.2","16.3","16.4","30.29","30.30","41.29"],"show":["6.5","9.6","9.8","16.4","16.5","19.6","19.8"],"组件样式对象":["7.1"],"组件点击事件":["7.1"],"mounted":["7.1","10.0","11.0","15.0","17.1"],"selector":["7.2","17.2"],"default":["7.2","10.4","17.2","20.10","29.4","40.4"],"span":["7.2","17.2"],"01":["7.2","17.2","30.29","41.29"],"button":["7.3","7.4","17.3","17.4"],"tooltip":["7.3","7.4","8.2","8.3","17.1","17.3","17.4","18.2","18.3","30.31"],"color":["7.3","17.3","25.5","36.5"],"red":["7.3","17.3"],"your":["7.4","15.30","17.4","29.0","30.30","30.31","41.30","41.31","41.45"],"02":["7.5","9.3","17.5","19.3","30.29","41.29"],"update":["7.5"],"the":["7.5","12.46","17.5","20.3","28.7","29.4","40.4"],"tip":["8.2","8.3","18.2","18.3"],"50px":["8.2","8.3","8.5","18.2","18.3","18.5"],"potser":["8.4"],"item":["9.2","9.3","19.2","19.3"],"onselect":["9.3","19.3","30.29","41.29"],"pip":["9.4","19.4"],"mode":["9.4","19.4"],"close":["9.4","19.4"],"heigth":["9.4","9.7","19.7"],"add":["9.6","20.1","31.1"],"slider":["9.6","19.6"],"state":["9.7","19.7"],"range":["9.8","19.8","36.11"],"to":["10.2","12.40","12.41","12.60","14.0","24.4","25.5","25.7","29.0","30.1"],"easily":["10.2"],"distinguish":["10.2"],"between":["10.2"],"by":["10.4","30.45"],"all":["10.4","13.0"],"zh":["10.6"],"cn":["10.6"],"div":["10.8","10.9","10.10","10.15","13.23","15.38","19.5","30.21","30.26","30.36","30.40","30.46","41.36"],"classname":["10.8","10.9","10.10","10.11","10.12","10.15","13.1","13.23","15.4","15.38","19.5","30.15","30.21","30.26","30.36","30.40","30.46","41.36"],"run":["10.8","10.9","10.10","10.11","10.12","10.14","10.15","11.7","11.11","13.1","13.23","15.4","15.38","19.5","30.15","30.21","30.26","30.36","30.40","30.44","30.46","41.36"],"code":["10.8","10.9","10.10","10.11","10.12","10.14","10.15","11.1","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","13.1","13.14","13.23","13.24","13.26","15.4","15.38","19.5","30.5","30.12","30.14","30.15","30.16","30.18","30.21","30.25","30.26","30.35","30.36","30.40","30.43","30.44","30.46","30.47","41.36"],"switch":["10.10","15.11","15.19"],"visibility":["10.10"],"full":["11.6"],"list":["11.6"],"manually":["12.0"],"trigger":["12.0"],"data":["12.40","12.56","20.10"],"through":["12.40","12.41","30.26"],"of":["12.43","28.1","30.1"],"partially":["12.44"],"media":["12.45","12.47"],"resource":["12.46"],"type":["12.46","22.0","33.0","36.11"],"loaded":["12.48"],"paused":["12.49","14.0"],"pause":["12.51"],"or":["12.51"],"delay":["12.51"],"browser":["12.52"],"has":["12.53","12.57"],"skipping":["12.54","12.55"],"operation":["12.54","12.55"],"but":["12.56"],"currenttime":["12.58"],"due":["12.60"],"names":["13.0"],"are":["13.0"],"in":["13.0","25.5"],"devices":["13.19"],"a":["13.19","15.15"],"tap":["13.19"],"toggles":["13.19"],"for":["14.0"],"example":["14.0"],"i":["14.0"],"want":["14.0","30.10"],"write":["14.0"],"displays":["14.0"],"an":["14.0"],"image":["14.0"],"advertisement":["14.0"],"t":["15.11"],"and":["15.11"],"note":["15.15"],"some":["15.15"],"videos":["15.15"],"do":["15.15"],"not":["15.15"],"have":["15.15"],"resize":["15.30"],"class":["15.38"],"name":["15.38"],"480p":["15.41"],"object":["16.1","18.1","30.11"],"triggered":["17.1"],"after":["17.1"],"is":["17.1"],"poster":["18.4"],"setting":["19.4","36.14"],"step":["19.5"],"unpkg":["20.2","24.3","25.3","26.3","27.3","28.4","31.2","35.3","36.3","37.3","38.3","39.4"],"player":["20.3","30.45"],"s":["20.3","30.11"],"size":["20.3","30.1"],"depends":["20.3"],"import":["20.6","29.0"],"useref":["20.8","31.8"],"export":["20.10"],"return":["20.10","25.7"],"jsdelivr":["20.11"],"net":["20.11","31.11"],"https":["20.11","31.11"],"cdn":["20.11","31.11"],"npm":["20.11","31.11"],"initialize":["21.0","30.1","32.0"],"autoplay":["21.0","32.0"],"createplayer":["22.0","33.0"],"attachmediaelement":["22.0","33.0"],"load":["22.0","33.0"],"attachmedia":["23.0","34.0"],"else":["23.0","34.0"],"canplaytype":["23.0","34.0"],"application":["23.0","34.0"],"com":["24.3","25.3","26.3","27.3","28.4","35.3","36.3","37.3","38.3","39.4"],"equal":["24.4"],"totalduration":["24.4"],"closed":["24.4"],"early":["24.4"],"less":["24.4"],"then":["24.4"],"输入框锁定时间":["25.4","36.4"],"maxlength":["25.4","36.4"],"输入框最大可输入的字数":["25.4","36.4"],"minwidth":["25.4","36.4"],"输入框最小宽度":["25.4","36.4"],"seconds":["25.5"],"fff":["25.5","36.5"],"local":["25.5"],"border":["25.5","36.5"],"whether":["25.5"],"plugins":["25.6","25.7","25.8","25.9","25.11","25.12","36.7","36.8"],"artplayerplugindanmuku":["25.7","25.8","25.9","25.11","25.12","36.7","36.8"],"use":["25.7","39.7"],"promise":["25.7","36.7"],"xml":["25.9","25.10","25.11","25.12","36.9","36.10","36.11","36.12"],"text":["25.10","30.36","36.10"],"prompt":["25.10"],"danmaku":["25.11"],"加载错误":["25.15","36.15"],"config":["25.15","36.15"],"配置变化":["25.15","36.15"],"functionalities":["28.1"],"get":["28.7","31.4"],"value":["28.7","39.7"],"communicate":["28.9"],"with":["28.9"],"can":["28.10"],"index":["28.11"],"commit":["28.12","39.12"],"body":["28.13","31.3","39.13"],"id":["28.13","39.13","41.45"],"you":["29.0","30.10"],"need":["29.0","30.1"],"required":["29.0"],"change":["29.4","40.4"],"like":["30.1"],"css":["30.1","30.11","41.1"],"this":["30.4","41.4"],"equivalent":["30.4"],"will":["30.7"],"cache":["30.7"],"muted":["30.10"],"if":["30.10"],"similar":["30.11"],"fit":["30.11"],"increase":["30.19"],"volume":["30.19"],"decrease":["30.19"],"fast":["30.19"],"forward":["30.19"],"rewind":["30.19"],"opacity":["30.28"],"left":["30.31","41.31"],"something":["30.34","41.34"],"dosomething":["30.34","41.34"],"onvttload":["30.36"],"modify":["30.36"],"loading":["30.38","41.38"],"address":["30.40"],"current":["30.40"],"instance":["30.40","31.4"],"modifying":["30.42"],"existing":["30.42"],"because":["30.45"],"uses":["30.45"],"as":["30.45"],"key":["30.45"],"dimensions":["30.46"],"demo":["31.3"],"meta":["31.3"],"charset":["31.3"],"utf":["31.3"],"getinstance":["31.4"],"d":["31.6"],"选项":["31.10"],"为空则不跳转":["35.4"],"http":["35.4"],"org":["35.4"],"必须观看的时长":["35.4"],"期间不能被跳过":["35.4"],"单位为秒":["35.4"],"当该值大于或等于totalduration时":["35.4"],"不能提前关闭广告":["35.4"],"当该值等于或小于0时":["35.4"],"则随时都可以关闭广告":["35.4"],"playduration":["35.4"],"弹幕文本":["36.5"],"time":["36.5"],"发送时间":["36.5"],"单位秒":["36.5"],"弹幕局部颜色":["36.5"],"使用":["36.7"],"异步返回":["36.7"],"隐藏弹幕":["36.9"],"发送弹幕":["36.10"],"弹幕大小":["36.11"],"input":["36.11"],"重载弹幕":["36.12"],"里通过代码控制":["39.1"],"from":["39.7"],"async":["39.7"],"通信":["39.9"],"只能运行在":["39.10"],"的消息":["39.11"],"artplayerpluginiframe":["39.12"],"外":["40.0"],"不再捆绑其它多国语言":["40.0"],"需要自行导入需要的语言":["40.0"],"lang":["40.3"],"language":["40.4"],"您可能需要初始化容器元素的大小":["41.1"],"如":["41.1"],"等同于":["41.4"],"document":["41.26"],"queryselector":["41.26"],"menu":["41.30"],"control":["41.31"],"文本的函数":["41.36"],"修改现有的语言":["41.42"]},{"0":["5.11","20.9","25.5","31.9","36.5"],"1":["9.7","13.24","19.7","25.11","36.11"],"2":["13.25"],"3":["30.1"],"4":["30.15","30.21","30.36","30.40","30.43","30.44","30.46"],"5":["9.7","13.22","19.7","20.9","24.4","31.9"],"6":["15.38"],"7":["15.4","30.26"],"8":["12.0","30.40"],"9":["41.28"],"10":["9.7","13.11","13.13","13.26","19.7","24.4","35.4"],"11":["30.42","41.42"],"12":["25.11","30.36","36.11","41.36"],"20":["13.10"],"22":["9.5","9.6","19.4","19.6"],"25":["25.11","36.11"],"32":["0.13","10.13"],"50":["25.11","36.11"],"60":["30.33","41.33"],"120":["41.33"],"150":["9.2","19.2"],"222":["36.5"],"400":["25.4","36.4"],"404":["2.11","12.11"],"500":["13.20"],"1000":["30.2"],"2000":["13.23"],"3000":["5.11","13.14"],"5000":["13.3","13.12","13.15"],"二级属性":["0.0"],"mp4":["0.1","0.12","0.14","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.19","2.21","2.22","2.24","2.25","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.4","3.5","3.6","3.28","3.29","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.17","5.18","5.20","5.24","5.27","5.28","5.32","5.33","5.34","5.37","9.1","9.5","10.8","10.9","10.10","10.15","12.2","12.6","12.7","12.8","12.9","12.10","12.12","12.13","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.38","13.29","15.1","15.2","15.3","15.7","15.8","15.9","15.10","15.12","15.13","15.17","15.18","15.20","15.24","15.27","15.28","15.29","15.31","15.32","15.33","15.34","19.5","20.5","20.9","25.13","25.14","29.2","30.17","30.32","30.33","30.35","30.48","31.5","36.6","40.1","41.7","41.24","41.32","41.35","41.48"],"console":["0.1","0.5","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.11","1.12","5.8","5.13","5.14","5.15","5.22","5.26","5.27","5.28","5.29","5.31","5.32","5.33","5.40","7.3","8.2","8.3","10.16","15.26","15.31","15.37","15.40","17.3","18.2","18.3","30.28","30.30","30.31","41.28","41.29","41.30"],"info":["0.1","0.5","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.12","5.8","5.13","5.15","5.22","5.26","5.28","5.29","5.31","5.32","5.33","7.3","8.2","8.3","10.5","10.16","15.26","15.31","15.37","17.3","18.2","18.3","30.28","30.30","41.28","41.29","41.30"],"warning":["0.2","1.6","5.11","10.1","10.5","10.6","15.21","15.37","29.0","30.2","30.4","30.17","30.19","30.39","31.4","41.10","41.39","41.45","41.48"],"提示":["0.2","5.11","41.45"],"为了方便区别":["0.2"],"元素和普通对象":["0.2"],"播放器里的所有":["0.2"],"mouseenter":["0.3","10.3"],"你可以修改":["0.4"],"即可":["0.4"],"zh":["0.6"],"cn":["0.6","29.4","40.4"],"your":["0.6","10.6","20.3","29.3","29.4","30.3","40.3","40.4","41.3"],"ready":["0.7","0.8","0.11","0.12","0.13","0.14","0.15","2.6","2.18","2.23","2.30","5.8","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.22","5.26","5.27","5.28","5.29","5.30","5.31","5.32","5.33","5.41","6.5","8.5","9.8","10.7","10.9","10.10","12.2","12.18","12.23","12.30","15.8","15.10","15.13","15.22","15.26","15.28","15.29","15.31","15.32","15.33","15.40","15.41","16.5","18.5","19.8"],"html":["0.8","0.9","0.10","5.19","5.21","14.0","25.8","25.9","25.12","36.8"],"some":["0.8","0.9","0.10","15.37"],"text":["0.8","0.9","0.10","17.1"],"position":["0.9","5.21","5.34","7.1","8.4","14.0","17.1","18.4","25.8","36.8"],"on":["0.11","0.12","0.13","0.14","0.15","2.6","2.11","2.12","2.18","2.23","2.30","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.20","5.22","5.26","5.27","5.28","5.29","5.31","5.32","5.33","5.41","6.4","6.5","7.4","10.7","10.9","10.10","12.2","12.6","12.18","12.23","12.30","15.7","15.8","15.10","15.12","15.13","15.22","15.26","15.27","15.28","15.29","15.31","15.32","15.33","15.41","16.4","16.5","17.4","22.0","30.4","33.0"],"subtitleoffset":["0.15"],"return":["0.16","9.2","9.3","10.16","15.11","19.2","19.3","28.7","36.7","36.10","39.7"],"name":["0.16","10.16"],"something":["0.16"],"dosomething":["0.16"],"一级属性":["1.0","5.0"],"app":["1.1","3.2","3.7","3.8","3.9","3.10","3.11","3.12","3.16","3.21","3.22","3.27","3.28","3.32","5.4","5.5","5.6","5.23","5.35","5.36","5.38","5.39","10.8","10.9","10.10","10.11","10.12","10.14","10.15","12.1","12.3","12.4","12.5","12.11","12.14","12.31","12.32","12.33","12.34","12.35","12.36","12.37","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.21","13.27","13.28","15.5","15.6","15.14","15.16","15.17","15.18","15.23","15.24","15.25","15.35","15.36","15.39","19.1","19.5","29.1","30.9","30.13","30.24","30.26","30.32","30.35","30.36","30.37","30.41","41.5","41.6","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.25","41.27","41.35","41.36","41.37","41.40","41.41","41.43","41.44","41.46","41.47"],"url":["1.1","3.5","3.6","3.7","3.8","3.9","3.16","3.21","3.27","3.28","5.4","5.5","5.6","5.16","5.23","5.25","5.35","5.36","5.37","5.38","5.39","10.8","10.9","10.10","10.12","10.14","10.15","12.1","12.3","12.4","12.5","12.9","12.11","12.12","12.13","12.14","12.15","12.19","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.27","13.28","13.29","15.5","15.6","15.12","15.14","15.16","15.17","15.18","15.20","15.23","15.24","15.25","15.35","15.36","15.39","19.1","19.5","20.5","29.1","30.24","30.41","31.5","41.3","41.5","41.8","41.9","41.13","41.14","41.15","41.16","41.17","41.21","41.24","41.25","41.37","41.41","41.44"],"assets":["1.1","2.1","2.3","2.4","2.14","3.4","3.5","3.6","3.7","3.8","3.9","3.16","3.27","3.28","5.1","5.4","5.5","5.6","5.16","5.23","5.25","5.35","5.36","5.37","5.38","5.39","10.8","10.9","10.10","10.11","10.12","10.14","10.15","12.1","12.3","12.4","12.5","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.19","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.5","13.6","13.27","13.28","13.29","15.1","15.3","15.5","15.6","15.7","15.8","15.9","15.10","15.12","15.14","15.16","15.17","15.18","15.20","15.23","15.24","15.25","15.27","15.28","15.33","19.1","19.5","20.5","29.1","30.24","30.32","30.35","30.41","30.48","31.5","41.5","41.7","41.17","41.24","41.35","41.36","41.37","41.41"],"全部工具函数请参考以下地址":["1.6"],"js":["1.11","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","13.1","13.23","15.38","28.11","30.11","30.21","30.26","30.36","30.40","30.46","39.9"],"emit":["2.0","12.0"],"focus":["2.0","12.0"],"移除事件":["2.0"],"sample":["2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.13","2.14","2.15","2.19","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.39","3.4","3.5","3.6","3.7","3.8","3.9","3.16","3.27","3.28","3.29","5.1","5.5","5.6","5.7","5.9","5.16","5.23","5.24","5.25","5.34","5.35","5.36","5.37","5.38","9.1","10.8","10.9","10.10","10.11","10.12","10.14","10.15","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.19","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.28","13.29","15.1","15.3","15.7","15.8","15.9","15.10","15.12","15.13","15.14","15.17","15.18","15.20","15.24","15.27","15.28","15.29","15.32","15.33","15.34","19.1","19.5","20.5","29.1","29.2","30.24","30.32","30.35","30.41","30.48","31.5","40.1","41.5","41.7","41.17","41.24","41.35","41.36","41.37","41.41"],"video":["2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.13","2.14","2.15","2.16","2.19","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.4","3.5","3.6","3.27","3.28","3.29","5.1","5.5","5.6","5.7","5.9","5.14","5.16","5.17","5.18","5.20","5.23","5.24","5.25","5.27","5.34","5.37","9.1","9.5","10.8","10.9","10.10","10.11","10.15","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.37","12.38","12.39","13.4","15.20","15.27","15.28","15.29","15.33","15.34","19.5","20.5","20.9","25.13","29.2","30.17","30.24","30.32","30.33","30.35","30.41","30.48","31.5","36.6","40.1","41.7","41.17","41.24","41.32","41.35","41.48"],"true":["2.16","2.17","2.20","2.21","2.22","2.23","2.24","2.25","2.38","3.29","5.2","5.3","5.20","6.2","6.4","6.5","9.1","9.5","10.15","12.17","12.20","12.27","13.1","13.30","13.32","15.2","15.20","16.2","16.4","16.5","19.5","25.13","25.14","30.17","36.13","36.14","41.10","41.32","41.45"],"setting":["2.17","2.20","2.27","3.29","9.1","9.5","12.20","13.29","19.5","25.13","25.14","36.13"],"srt":["2.27","2.28","2.29"],"并调用":["2.44"],"但数据意外未出现":["2.56"],"属性名字全部都是大写的形式":["3.0"],"未来容易发生变动":["3.0"],"new":["3.1","3.3","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.22","3.23","3.24","3.25","3.26","3.30","3.31","10.8","10.10","10.11","10.12","10.14","11.1","13.2","13.3","13.5","13.6","13.9","13.10","13.11","13.12","13.17","13.18","13.20","13.21","13.22","13.25","13.27","13.30","13.31","13.32","15.4","15.35","15.36","15.38","21.0","30.3","30.5","30.6","30.8","30.12","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.27","30.34","30.35","30.36","30.37","30.40","30.43","30.44","30.46","30.47","32.0","41.6","41.11","41.34","41.36","41.40"],"container":["3.1","3.2","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.30","3.31","3.32","10.8","10.9","10.10","10.11","10.12","10.14","10.15","12.1","13.5","13.6","13.7","13.8","13.9","13.16","13.21","13.27","13.28","15.4","15.5","15.6","15.14","15.16","15.23","15.25","15.35","15.36","15.39","19.1","19.5","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.25","30.26","30.27","30.35","30.36","30.37","30.43","30.47","31.10","41.3","41.6","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.25","41.27","41.36","41.40","41.43","41.44","41.46","41.47"],"art":["3.13","3.14","3.15","3.18","3.19","3.24","3.25","3.30","10.8","10.10","10.12","11.1","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.21","13.22","13.24","13.25","13.26","13.27","13.30","13.31","13.32","15.4","15.38","30.3","30.5","30.6","30.8","30.12","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.36","30.37","30.43","30.44","30.46","30.47","31.9","41.11","41.26","41.36"],"show":["4.0","6.2","6.3","6.4","14.0","16.2","16.3","21.0","22.0","23.0","30.28","30.30","32.0","33.0","34.0"],"block":["4.0","14.0"],"hide":["4.0","14.0","25.9"],"controls":["4.0","5.34","15.34","25.8","36.8"],"tooltip":["4.0","7.1","9.6","19.6","41.31"],"muted":["5.2","5.3","5.24","15.2","15.3","24.4","35.4","41.10"],"seek":["5.10","5.12"],"t":["5.11"],"right":["5.19","5.21","8.3","8.4","14.0","17.1","18.3","18.4","25.8","25.12","36.8","41.28"],"switch":["5.19"],"click":["5.19","5.21","6.1","8.1","8.2","8.3","15.37","16.1","18.1","18.2","18.3","25.9","25.12","30.28","30.31","36.8","36.9","36.12","41.28","41.30","41.31"],"function":["5.19","5.21","6.1","8.1","8.2","8.3","16.1","18.1","18.2","18.3","25.7","25.9","25.12","30.28","30.31","36.7","36.9","36.12","41.28","41.30"],"log":["5.40","15.40"],"theme":["5.40","15.40","25.4","36.4"],"settimeout":["5.41","6.5","8.5","9.8","10.13","15.41","16.5","18.5","19.8","41.2"],"object":["6.1","8.1"],"组件样式对象":["6.1","8.1"],"false":["6.2","6.3","6.4","9.4","13.17","13.18","13.31","16.2","16.3","16.4","19.4","30.30","35.4"],"update":["6.5","8.5","9.8","16.5","19.8"],"组件挂载后触发":["7.1"],"组件的提示文本":["7.1"],"yellow":["7.2","17.2"],"02":["7.2","17.2"],"onselect":["7.2","17.2"],"item":["7.2","9.4","17.2"],"dom":["7.2","17.2"],"args":["7.3","8.2","8.3","17.3","18.2","18.3","30.28","30.31","41.28","41.30"],"mounted":["7.3","8.2","8.3","17.3","18.2","18.3"],"style":["7.4","14.0","17.4","20.5","25.11","30.31","31.4","31.5","36.11","41.31"],"color":["7.4","17.4","30.31","41.31"],"red":["7.4","17.4"],"control":["7.5","17.1","17.5"],"by":["7.5","8.5","9.8","17.5","18.5","19.8","24.4","30.10"],"absolute":["8.4","14.0","18.4"],"top":["8.4","14.0","18.4"],"50px":["8.4","18.4"],"the":["8.5","9.8","18.5","19.8","25.6","30.10"],"quality":["9.2","19.2"],"1080p":["9.2","19.2"],"src":["9.4","14.0","19.4","23.0","30.38","34.0","41.38"],"state":["9.4","30.38","41.38"],"svg":["9.4","9.7","19.4","19.7"],"settings":["9.5","10.4","19.5"],"slider":["9.5"],"5x":["9.5","9.6","19.5","19.6"],"img":["9.5","9.6","14.0","19.4","19.6"],"width":["9.5","9.6","14.0","19.4","19.6","20.5","30.1","41.1"],"icon":["9.6","19.6"],"range":["9.7","19.7","25.11"],"instance":["10.0"],"which":["10.0","11.0","15.0"],"reminder":["10.1"],"if":["10.1","10.4","15.37","20.11","25.9","25.10","30.45","36.9","36.10"],"you":["10.1","10.4","15.30","15.37"],"directly":["10.1"],"and":["10.2","10.4","12.44","17.1"],"plain":["10.2"],"objects":["10.2"],"in":["10.2"],"are":["10.2","15.15"],"mouseleave":["10.3"],"instances":["10.4"],"share":["10.4"],"same":["10.4","15.11"],"localstorage":["10.4"],"want":["10.4"],"different":["10.4"],"players":["10.4"],"use":["10.4","28.7","30.1"],"loading":["10.5","12.52"],"this":["10.5","30.39"],"using":["10.6"],"can":["10.6","30.39"],"only":["10.6","28.10","30.39"],"var":["10.8","10.10","11.1","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","15.4","15.38","21.0","30.5","30.6","30.8","30.12","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.26","30.34","30.36","30.40","30.43","30.44","30.46","30.47","32.0","41.11","41.34","41.36"],"artplayer":["10.8","10.10","10.11","10.12","10.14","11.1","13.1","13.23","15.4","15.5","15.14","15.35","15.36","15.38","15.39","21.0","30.3","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.25","30.27","30.34","30.35","30.36","30.37","30.43","30.44","30.47","32.0","41.6","41.11","41.12","41.18","41.20","41.22","41.23","41.27","41.34","41.36","41.40","41.43","41.46","41.47"],"flip":["10.15"],"playbackrate":["10.15"],"aspectratio":["10.15"],"constructor":["11.0"],"please":["11.6","25.10"],"refer":["11.6"],"remove":["12.0"],"end":["12.40","12.41"],"without":["12.40","12.41"],"duration":["12.43"],"is":["12.44","12.46","12.52","15.30"],"sent":["12.44"],"reached":["12.45"],"not":["12.46","15.30","20.4"],"has":["12.47","12.54","12.55"],"due":["12.51","15.19","15.21","30.17"],"changed":["12.53"],"unexpectedly":["12.56"],"been":["12.57"],"attribute":["12.58"],"temporarily":["12.60"],"uppercase":["13.0"],"subject":["13.0"],"change":["13.0"],"defaults":["13.19"],"ads":["14.0"],"100px":["14.0"],"display":["14.0","25.5","36.11"],"none":["14.0"],"20px":["14.0"],"have":["15.11"],"functionality":["15.11"],"however":["15.11"],"method":["15.11"],"a":["15.11","29.0"],"promise":["15.11"],"such":["15.15"],"as":["15.15"],"that":["15.15"],"being":["15.15"],"live":["15.15"],"streamed":["15.15"],"or":["15.15","30.1"],"note":["15.19","30.2"],"to":["15.19","15.21"],"browser":["15.19","15.21","30.17"],"security":["15.19","15.21"],"mechanisms":["15.19","15.21"],"before":["15.19"],"triggering":["15.19"],"jpg":["15.22"],"json":["15.26"],"stringify":["15.26"],"but":["15.30","30.45"],"do":["15.30"],"know":["15.30"],"exact":["15.30"],"property":["15.30"],"tip":["15.37","20.11","30.19"],"need":["15.37"],"event":["16.1","18.1","25.9","28.8","36.9","39.8"],"left":["17.1"],"heigth":["19.4"],"pnpm":["20.1","24.2","25.2","26.2","27.2","28.3","31.1","35.2","36.2","37.2","38.2","39.3"],"com":["20.2","20.11","31.2","31.11"],"of":["20.3","30.45"],"so":["20.3"],"responsive":["20.4"],"modifying":["20.4"],"https":["20.5","31.5"],"org":["20.5","31.5"],"600px":["20.5"],"height":["20.5","30.1","41.1"],"400px":["20.5","30.1","41.1"],"margin":["20.5"],"d":["20.6"],"null":["20.8","31.8"],"volume":["20.9","31.9"],"options":["20.10"],"option":["20.10","31.10"],"unpkg":["20.11","31.11"],"else":["21.0","22.0","32.0","33.0"],"notice":["21.0","22.0","23.0","32.0","33.0","34.0"],"unsupported":["21.0","22.0","23.0","32.0","33.0","34.0"],"playback":["21.0","22.0","23.0","32.0","33.0","34.0"],"format":["21.0","22.0","23.0","32.0","33.0","34.0"],"mpd":["21.0","32.0"],"vnd":["23.0","34.0"],"apple":["23.0","34.0"],"mpegurl":["23.0","34.0"],"m3u8":["23.0","34.0"],"at":["24.4"],"any":["24.4"],"time":["24.4"],"playduration":["24.4"],"total":["24.4"],"whether":["24.4"],"填":["25.4","36.4"],"则为无限制":["25.4","36.4"],"maxwidth":["25.4","36.4"],"输入框最大宽度":["25.4","36.4"],"infinity":["25.4","36.4"],"则为":["25.4","36.4"],"宽度":["25.4","36.4"],"outline":["25.5"],"mode":["25.5","36.5"],"for":["25.5","30.2"],"scrolling":["25.5"],"artplayerplugindanmuku":["25.6","25.13","25.14","36.6","36.13","36.14"],"file":["25.6","30.2"],"consistent":["25.6"],"with":["25.6"],"asynchronously":["25.7"],"resolve":["25.7"],"xml":["25.8","36.8"],"enter":["25.10"],"test":["25.10"],"size":["25.11","30.7"],"input":["25.11"],"type":["25.11","28.12","39.12"],"min":["25.11","36.11"],"max":["25.11","36.11"],"step":["25.11","36.11"],"value":["25.11","36.11"],"plugins":["25.13","25.14","36.6","36.13","36.14"],"stop":["25.15","36.15"],"弹幕停止":["25.15","36.15"],"start":["25.15","36.15"],"async":["28.7"],"keyword":["28.7","39.7"],"currenttime":["28.7","39.7"],"await":["28.7","39.7"],"iframe":["28.9"],"run":["28.10","30.11"],"artplayerpluginiframe":["28.12","39.11"],"own":["29.0"],"when":["29.0","30.7"],"cannot":["29.0"],"be":["29.0"],"matched":["29.0"],"lang":["29.2","29.3","40.2"],"script":["29.2","40.2"],"i18n":["29.3","35.4","40.0","40.3"],"play":["29.4","30.19","40.4"],"300px":["30.1","41.1"],"support":["30.2"],"three":["30.2"],"formats":["30.2"],"last":["30.7"],"upon":["30.10"],"entering":["30.10"],"cover":["30.11"],"div":["30.11","31.3"],"classname":["30.11"],"code":["30.11"],"space":["30.19"],"toggle":["30.19"],"pause":["30.19"],"these":["30.19"],"document":["30.26"],"queryselector":["30.26"],"setting02":["30.29","41.29"],"green":["30.31","41.31"],"one":["30.33","41.33"],"more":["30.33","41.33"],"chance":["30.33","41.33"],"gif":["30.38","41.38"],"recognition":["30.39"],"extensions":["30.39"],"player":["30.39"],"parse":["30.39"],"cache":["30.45"],"progress":["30.45"],"class":["31.3"],"ts":["31.6"],"types":["31.10"],"const":["31.10"],"广告总时长":["35.4"],"totalduration":["35.4"],"视频广告是否默认静音":["35.4"],"多语言支持":["35.4"],"close":["35.4"],"关闭广告":["35.4"],"countdown":["35.4"],"s秒":["35.4"],"是否显示描边":["36.5"],"弹幕模式":["36.5"],"0表示滚动":["36.5"],"1静止":["36.5"],"弹幕":["36.6"],"resovle":["36.7"],"隐藏弹幕":["36.8"],"prompt":["36.10"],"请输入弹幕文本":["36.10"],"弹幕测试文本":["36.10"],"trim":["36.10"],"flex":["36.11"],"alignitems":["36.11"],"播放器的功能":["39.1"],"当无法匹配到语言时":["40.0"],"会默认显示英文":["40.0"],"或者使用":["41.1"],"aspect":["41.1"],"热键":["41.19"],"描述":["41.19"],"增加音量":["41.19"],"降低音量":["41.19"],"innerhtml":["41.26"],"opacity":["41.28"],"sd":["41.32"],"ploading":["41.38"],"后缀的识别":["41.39"],"播放器只能解析这种后缀":["41.39"],"因为播放器默认使用":["41.45"]},{"0":["20.5","31.5"],"1":["25.7","36.7"],"2":["5.28","25.5","36.5"],"4":["30.11"],"5":["5.7","5.8","5.14","15.7","41.7"],"8":["2.0"],"9":["5.29","30.1"],"10":["5.10","5.12","15.10","15.12"],"16":["5.29","15.29","25.10","30.1","36.10","41.1"],"22":["19.5"],"60":["30.35","41.35"],"100":["28.5","39.5"],"111":["25.7","36.7"],"120":["30.33"],"180":["30.33","41.33"],"222":["25.5","25.7","36.7"],"240":["41.33"],"333":["36.5"],"360":["9.2","19.2"],"720":["9.2","19.2"],"1000":["0.8","0.9","0.10","0.15","10.8","10.9","41.2"],"1080":["9.2","19.2"],"5000":["0.13","10.13"],"比较少用":["0.0"],"warning":["0.1","0.5","0.6","0.7","0.8","5.15","5.19","5.21","5.26","5.30","5.37","10.3","10.7","10.9","10.13","15.26","20.5","30.28","30.29","30.30","30.31","30.38","30.41","30.48","31.3","41.2","41.4","41.7","41.17","41.19","41.30","41.31","41.38","41.41"],"提示":["0.1","5.15","5.19","5.21","5.30","31.3","41.2","41.7","41.10","41.17"],"假如直接修改这个":["0.1"],"元素都是以":["0.2"],"开头命名的":["0.2"],"这是所有":["0.2"],"元素的定义":["0.2"],"mouseleave":["0.3"],"poster":["0.3","10.3"],"jpg":["0.3","10.3"],"then":["0.3","10.3","20.11","30.45"],"img":["0.3","10.3","19.5"],"loading":["0.5","12.47"],"这是所有图标的定义":["0.5"],"types":["0.5","1.6","40.0","41.48"],"使用":["0.6"],"只能更新实例化之后的":["0.6"],"to":["0.7","11.6","30.2","30.30","30.31"],"play":["0.7","4.0","5.2","10.7","15.2","29.3","30.2","40.3"],"如果想马上隐藏":["0.7"],"settimeout":["0.8","0.9","0.10","0.12","0.13","0.14","0.15","5.2","5.3","5.7","5.10","5.12","5.20","6.4","7.4","8.4","9.7","10.8","10.9","10.10","10.15","15.2","15.7","15.10","15.12","16.4","17.4","18.4","19.7"],"false":["0.8","0.9","0.10","0.14","0.15","10.8","10.9","10.10","10.15","24.4","30.28","41.28","41.30"],"left":["0.9","7.1","10.9"],"true":["0.10","0.12","2.19","3.4","3.5","3.6","3.27","3.28","5.1","5.13","5.24","5.31","6.3","10.10","12.16","12.19","12.21","12.22","12.23","12.24","12.25","12.38","13.4","13.5","13.6","13.27","13.28","13.29","15.1","15.3","15.24","15.31","16.3","19.1","30.24","30.32","41.17","41.24"],"srt":["0.11","12.27","12.28","12.29"],"on":["0.16","2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.13","2.14","2.15","2.16","2.17","2.19","2.20","2.21","2.22","2.24","2.25","2.26","2.27","2.28","2.29","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.7","3.8","3.9","3.16","5.1","5.2","5.3","5.4","5.5","5.6","5.16","5.23","5.24","5.25","5.35","5.36","8.4","9.7","10.8","10.11","10.12","10.14","10.15","12.1","12.3","12.4","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.17","12.19","12.20","12.21","12.22","12.24","12.25","12.26","12.27","12.28","12.29","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.7","13.8","13.9","13.16","15.1","15.2","15.3","15.5","15.6","15.9","15.14","15.16","15.17","15.18","15.20","15.21","15.23","15.24","15.25","15.35","15.36","18.4","19.7","25.13","25.14","35.4","36.13","36.14","41.4"],"非常少使用":["1.0"],"sample":["1.1","3.1","3.2","3.3","3.10","3.11","3.12","3.17","3.20","3.21","3.22","3.23","3.26","3.30","3.31","3.32","5.4","5.39","11.1","12.1","13.5","13.6","13.7","13.8","13.9","13.10","13.11","13.12","13.16","13.20","13.21","13.27","13.32","15.4","15.5","15.6","15.16","15.23","15.25","15.35","15.36","15.38","15.39","20.10","22.0","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.25","30.27","30.34","30.36","30.37","30.40","30.43","30.44","30.47","31.10","33.0","41.6","41.8","41.9","41.11","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.25","41.27","41.34","41.40","41.43","41.44","41.46","41.47"],"video":["1.1","3.7","3.8","3.9","3.10","3.11","3.12","3.16","3.20","3.21","3.22","3.23","3.30","3.32","5.4","5.38","10.12","10.14","11.1","12.1","12.36","13.5","13.6","13.7","13.8","13.9","13.16","13.21","13.27","15.4","15.23","15.38","19.1","20.10","29.1","30.9","30.27","31.10","41.5","41.6","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.25","41.27","41.36","41.37","41.41","41.43","41.44","41.46","41.47"],"mp4":["1.1","3.7","3.8","3.9","3.16","3.21","3.27","5.4","5.5","5.6","5.16","5.23","5.25","5.35","5.36","5.38","5.39","10.11","10.12","10.14","12.1","12.3","12.4","12.5","12.11","12.14","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.39","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.21","13.27","13.28","15.4","15.5","15.6","15.14","15.16","15.23","15.25","15.35","15.36","15.38","15.39","19.1","20.10","29.1","30.5","30.14","30.16","30.24","30.36","30.37","30.41","31.10","41.5","41.8","41.9","41.13","41.14","41.15","41.16","41.17","41.21","41.25","41.36","41.37","41.41","41.44"],"artplayer":["1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.11","1.12","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","22.0","23.0","30.11","30.21","30.40","30.46","33.0","34.0"],"d":["1.6"],"info":["1.11","2.12","5.14","5.27","5.37","5.38","9.4","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","15.8","15.13","15.14","15.22","15.27","15.28","15.29","15.32","15.33","19.4","20.5","28.8","30.31","31.5","39.8","41.31"],"const":["2.0","5.17","5.18","9.4","12.0","15.17","15.18","19.4","20.10","25.11","36.11"],"onready":["2.0","12.0"],"console":["2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.28","2.29","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.39","5.24","5.37","5.38","5.39","9.4","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","12.7","12.8","12.9","12.10","12.12","12.13","12.15","12.26","15.8","15.13","15.14","15.22","15.27","15.28","15.29","15.32","15.33","15.39","19.4","20.5","25.14","28.8","31.5","35.4","36.14","39.8","41.31"],"event":["2.5","2.7","2.8","2.9","2.10","2.12","2.13","5.37","9.4","12.5","12.7","12.8","12.9","12.10","12.12","12.13"],"reconnecttime":["2.11","12.11"],"state":["2.12","2.15","2.16","2.21","2.22","2.23","2.24","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","9.5","9.6","12.12","12.15","12.21","12.22","12.23","12.24","12.31","12.32","12.33","12.34","12.35","12.37","19.6"],"height":["2.18","19.5","31.5"],"datauri":["2.25","12.25"],"currenttime":["2.26","12.26","28.12","39.12"],"offset":["2.27"],"text":["2.28","10.8","10.9","10.10","12.28","25.7","36.7"],"ass":["2.30","12.30"],"load":["2.44","12.44"],"方法重新加载它":["2.44"],"基本上用不到":["3.0"],"app":["3.1","3.3","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.23","3.24","3.25","3.26","3.30","3.31","11.1","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","15.4","15.38","20.10","21.0","22.0","23.0","28.5","28.13","30.3","30.5","30.6","30.8","30.11","30.12","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.27","30.34","30.40","30.43","30.44","30.46","30.47","31.10","32.0","33.0","34.0","39.5","39.13","41.3","41.11","41.34"],"url":["3.1","3.2","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.22","3.23","3.24","3.25","3.26","3.30","3.31","3.32","11.1","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.21","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","15.4","15.38","20.10","30.3","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.27","30.34","30.37","30.43","30.44","30.46","30.47","31.10","41.6","41.11","41.12","41.18","41.20","41.22","41.23","41.26","41.27","41.34","41.43","41.46","41.47"],"assets":["3.1","3.2","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.30","3.31","3.32","11.1","13.2","13.3","13.7","13.8","13.9","13.10","13.11","13.12","13.16","13.20","13.21","13.22","13.30","13.31","13.32","15.4","15.35","15.36","15.38","15.39","20.10","22.0","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.27","30.34","30.36","30.37","30.40","30.43","30.44","30.46","30.47","31.10","33.0","41.3","41.6","41.8","41.9","41.11","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.25","41.26","41.27","41.34","41.40","41.43","41.44","41.46","41.47"],"loop":["3.4","3.5","3.6","13.4","13.5","13.6"],"flip":["3.4","3.5","3.6","13.4"],"dblclick":["3.16"],"setting":["3.27","3.28","12.17","12.27","13.27","13.28","19.1","25.11","36.11"],"playbackrate":["3.27","13.27"],"contextmenu":["3.27","3.28","3.29","13.28","13.29"],"aspectratio":["3.28","13.28"],"show":["3.28","3.29","9.7","13.29","19.7","25.9","36.9","41.28","41.30"],"click":["4.0","5.34","5.37","14.0","15.34","25.8","35.4"],"marginright":["4.0","14.0"],"比较常用":["5.0"],"muted":["5.1","15.1","15.24"],"ready":["5.2","5.3","5.5","5.6","5.7","5.9","5.16","5.20","5.23","5.24","5.25","6.4","7.4","8.4","9.7","10.8","10.11","10.12","10.14","10.15","12.0","12.6","15.2","15.3","15.7","15.9","15.12","15.14","15.17","15.18","15.20","15.24","15.27","16.4","17.4","18.4","19.7","25.14","36.14"],"seek":["5.7","15.7","15.10","15.12"],"switch":["5.11"],"和":["5.11","7.1","36.6"],"的功能是一样的":["5.11"],"只是":["5.11"],"有的视频是没有时长的":["5.15"],"async":["5.17","5.18","15.17","15.18"],"await":["5.17","5.18","15.17","15.18"],"t":["5.22"],"json":["5.26"],"stringify":["5.26"],"resize":["5.30","36.13"],"当你的容器只有宽度":["5.30"],"playsinline":["5.31","15.31","41.37"],"m3u8":["5.32","30.2","41.40"],"000":["5.33"],"right":["5.34","7.1","15.34"],"html":["5.34","10.8","10.9","10.10","15.34","20.1","31.1"],"green":["5.40","15.40"],"1080p":["5.41","15.41"],"组件点击事件":["6.1","8.1"],"mounted":["6.1","8.1","16.1","18.1","25.11","30.28","36.11","41.28"],"组件挂载后触发":["6.1","8.1"],"get":["6.2","6.3","7.2","7.3","8.2","8.3","16.2","16.3","17.2","17.3","18.2","18.3"],"the":["6.2","6.3","6.4","6.5","7.2","7.3","7.4","8.2","8.3","8.4","9.7","16.2","16.3","16.4","16.5","17.2","17.3","17.4","18.2","18.3","18.4","19.7","30.19","30.30"],"element":["6.2","6.3","7.2","7.3","8.2","8.3","16.2","16.3","17.2","17.3","18.2","18.3"],"of":["6.2","6.3","7.2","7.3","8.2","8.3","12.51","15.37","16.2","16.3","17.2","17.3","18.2","18.3","25.6","30.38"],"by":["6.2","6.3","6.4","6.5","7.2","7.4","8.4","16.2","16.3","16.4","16.5","17.2","17.4","18.4","29.0"],"delete":["6.4","7.4","8.4","9.7"],"控制控制器出现的左右位置":["7.1"],"selector":["7.1","17.1"],"array":["7.1","17.1"],"return":["7.2","17.2","25.10"],"control":["7.2","7.3","7.4","17.2","17.3","17.4"],"200px":["8.5","18.5"],"720p":["9.2","19.2"],"360p":["9.2","19.2"],"nextstate":["9.4","19.4"],"heigth":["9.5","9.6","19.6"],"src":["9.5","9.6","19.5","19.6"],"svg":["9.5","9.6","19.5","19.6"],"pip":["9.8","19.8"],"mode":["9.8","19.8"],"close":["9.8","19.8","24.4"],"are":["10.0","11.0","15.0"],"less":["10.0"],"commonly":["10.0","15.0"],"modify":["10.1","10.4","20.11"],"this":["10.1"],"object":["10.1"],"named":["10.2"],"starting":["10.2"],"with":["10.2"],"a":["10.2","12.46","15.21","20.3"],"here":["10.2"],"is":["10.2","10.5","16.1","18.1","30.7","30.45","35.4"],"definition":["10.2","10.5","30.38"],"if":["10.3","10.6","30.2","30.4","30.17"],"you":["10.3","10.6","20.3","30.45"],"need":["10.3","20.11","30.2","30.45"],"some":["10.3","10.8","10.9","10.10"],"only":["10.3","10.13","15.37","30.19"],"exist":["10.3","15.37"],"can":["10.4","15.11","20.3"],"accordingly":["10.4"],"after":["10.6","10.13","16.1","18.1","30.19"],"instantiation":["10.6"],"want":["10.6"],"before":["10.6"],"please":["10.6","20.11","30.29","30.30"],"immediately":["10.7"],"hide":["10.7","25.15","36.15"],"position":["10.9","15.34"],"shortcut":["10.13"],"keys":["10.13"],"will":["10.13","20.4","30.19"],"work":["10.13","30.19"],"subtitleoffset":["10.15"],"something":["10.16"],"dosomething":["10.16"],"very":["11.0","15.30"],"rarely":["11.0"],"container":["11.1","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","15.38","20.10","21.0","22.0","23.0","30.3","30.21","30.34","30.40","30.44","30.46","32.0","33.0","34.0","41.34"],"following":["11.6","20.11"],"address":["11.6","30.17"],"off":["12.0"],"having":["12.40"],"stop":["12.40"],"for":["12.40","12.41","29.0","30.10","30.48"],"stopping":["12.41"],"content":["12.41"],"property":["12.43"],"changes":["12.43"],"method":["12.44","28.7","39.7"],"called":["12.44"],"end":["12.45"],"point":["12.45"],"supported":["12.46"],"finished":["12.47"],"lack":["12.51"],"resources":["12.52"],"completed":["12.54"],"started":["12.55"],"has":["12.56","12.58"],"not":["12.56"],"suspended":["12.57"],"changed":["12.58"],"missing":["12.60"],"future":["13.0"],"and":["13.0","20.11"],"new":["13.1","13.13","13.14","13.15","13.23","13.24","13.26","20.8","20.9","22.0","30.11","30.26","31.8","31.9","33.0","41.26"],"art":["13.23","20.9","28.12","30.11","30.26","39.12"],"controls":["14.0"],"tooltip":["14.0"],"quite":["15.0"],"when":["15.11"],"it":["15.11","15.30","15.37"],"resolves":["15.11"],"indicates":["15.11"],"that":["15.11"],"played":["15.11"],"been":["15.15"],"fully":["15.15"],"decoded":["15.15"],"in":["15.15","20.4"],"which":["15.15"],"page":["15.19","30.10"],"must":["15.19","20.3","30.10"],"have":["15.19","20.3"],"had":["15.19"],"an":["15.19","17.1","30.4"],"user":["15.21"],"interaction":["15.21"],"e":["15.21"],"g":["15.21"],"useful":["15.30"],"as":["15.30","30.2","30.7"],"s":["15.30"],"during":["15.37"],"lifespan":["15.37"],"triggered":["16.1","18.1"],"context":["16.4"],"controller":["17.1"],"objects":["17.1"],"selection":["17.1"],"list":["17.1"],"onselect":["17.1"],"item":["19.4"],"width":["19.5","28.5","31.5","39.5"],"tip":["20.3","20.9","31.9","31.11"],"see":["20.3","24.4"],"more":["20.3","30.41"],"examples":["20.3"],"directly":["20.4"],"60px":["20.5","31.5"],"auto":["20.5","31.5"],"non":["20.5"],"responsive":["20.5"],"ts":["20.6"],"current":["20.8","31.8"],"complete":["20.9"],"support":["20.11","24.4"],"even":["20.11"],"older":["20.11"],"configuration":["20.11","30.28","30.30","30.31"],"akamaized":["21.0","32.0"],"net":["21.0","32.0"],"akamai":["21.0","32.0"],"bbb":["21.0","32.0"],"30fps":["21.0","32.0"],"var":["22.0","23.0","30.11","33.0","34.0"],"test":["23.0","34.0"],"streams":["23.0","34.0"],"mux":["23.0","34.0"],"x36xhzz":["23.0","34.0"],"default":["24.4","29.0"],"multilingual":["24.4"],"i18n":["24.4","29.0"],"countdown":["24.4"],"detail":["24.4","35.4"],"details":["24.4"],"canbeclosed":["24.4","35.4"],"until":["24.4"],"dark":["25.4","36.4"],"输入框自定义挂载时的主题色":["25.4","36.4"],"默认为":["25.4","36.4"],"可以选填亮色":["25.4","36.4"],"light":["25.4","36.4"],"heatmap":["25.4","36.4"],"是否开启弹幕热度图":["25.4","36.4"],"beforeemit":["25.4","36.4"],"trim":["25.4","25.10","36.4"],"stationary":["25.5"],"red":["25.5","36.5"],"format":["25.6"],"bilibili":["25.6","36.6"],"website":["25.6"],"time":["25.7","30.7","36.7"],"function":["25.8","25.11","36.8","36.11","41.31"],"target":["25.9","36.9"],"innertext":["25.9","36.9"],"else":["25.9","36.9"],"color":["25.10","36.10"],"math":["25.10","36.10"],"floor":["25.10","36.10"],"random":["25.10","36.10"],"0xffffff":["25.10","36.10"],"tostring":["25.10","36.10"],"display":["25.11"],"flex":["25.11"],"alignitems":["25.11"],"center":["25.11","36.11"],"queryselector":["25.11","36.11"],"config":["25.12","36.12"],"xml":["25.13","25.14","36.13","36.14"],"弹幕开始":["25.15","36.15"],"弹幕隐藏":["25.15","36.15"],"or":["28.1","28.7","30.2","39.7"],"retrieve":["28.1"],"values":["28.1"],"div":["28.5","28.13","39.5","39.13"],"class":["28.5","28.13","39.5","39.13"],"style":["28.5","39.5"],"resolve":["28.7","39.7"],"currenttime2":["28.7","39.7"],"js":["28.9"],"inside":["28.10","30.4"],"artplayerpluginiframe":["28.11"],"data":["28.12","39.12"],"displayed":["29.0"],"usage":["29.0"],"lang":["29.1","40.1"],"window":["29.2","40.2"],"imported":["29.4","40.4"],"aspect":["30.1"],"ratio":["30.1","41.1"],"ogg":["30.2","41.2"],"webm":["30.2","41.2"],"other":["30.2"],"such":["30.2","30.7"],"callback":["30.4"],"refers":["30.4"],"instance":["30.4"],"but":["30.4","30.39"],"arrow":["30.4"],"initialized":["30.7"],"next":["30.7"],"refreshing":["30.7"],"be":["30.10"],"set":["30.10"],"security":["30.17"],"mechanisms":["30.17"],"source":["30.17"],"player":["30.19"],"gains":["30.19"],"focus":["30.19"],"innerhtml":["30.26"],"component":["30.28","30.30","30.31"],"refer":["30.30","30.31"],"sd":["30.32"],"480p":["30.32","41.32"],"谁でもいいはずなのに":["30.33","41.33"],"夏の想い出がまわる":["30.33","41.33"],"png":["30.35","30.38","41.35","41.38"],"all":["30.38"],"cannot":["30.39"],"zh":["30.42","41.42"],"cn":["30.42","41.42"],"same":["30.45"],"different":["30.45"],"reference":["30.48"],"syntax":["30.48"],"播放器的尺寸依赖于容器":["31.3"],"的尺寸":["31.3"],"所以你的容器":["31.3"],"非响应式":["31.4"],"在":["31.4"],"600px":["31.5"],"400px":["31.5"],"margin":["31.5"],"全部":["31.9"],"typescript":["31.9"],"volume":["31.10"],"假如你要兼容更古老的浏览器时":["31.11"],"查看详情":["35.4"],"s秒后可关闭广告":["35.4"],"ad":["35.4"],"clicked":["35.4"],"文件":["36.6"],"网站的弹幕格式一致":["36.6"],"切换弹幕":["36.12"],"或者获取":["39.1"],"里":["39.10"],"写法参考":["40.0","41.48"],"默认支持三种视频文件格式":["41.2"],"播放器会缓存最后一次音量的大小":["41.7"],"假如希望默认进入页面就能自动播放视频":["41.10"],"必需为":["41.10"],"视频快进":["41.19"],"视频快退":["41.19"],"space":["41.19"],"切换播放":["41.19"],"暂停":["41.19"],"subtitle":["41.24"],"组件配置":["41.30"],"args":["41.31"],"hd":["41.32"],"webkit":["41.37"],"全部图标的定义":["41.38"],"但无法解析这种后缀":["41.39"],"作为":["41.45"],"key":["41.45"],"来缓存播放进度的":["41.45"],"但假如你的同一个视频的":["41.45"]},{"0":["5.9","5.10","5.12","5.15","5.22","15.9","15.10","15.12","15.15","15.22","20.10","31.10"],"1":["9.6","19.6"],"2":["5.7","15.7","15.28","25.7","36.7"],"3":["25.5","25.7","36.5","36.7"],"5":["5.5","5.6","9.6","15.5","15.6","15.8","15.14","19.6","20.10","31.10"],"9":["15.29","41.1"],"10":["9.6","19.6","30.35","41.35"],"100":["28.13","39.13"],"240":["30.33"],"300":["30.33","41.33"],"333":["25.5","25.7","36.7"],"404":["3.13","3.14","13.13","13.14"],"1000":["0.12","0.14","10.10","10.12","10.14","10.15","28.7","39.7"],"3000":["5.2","5.3","5.7","5.10","5.12","5.20","5.41","6.4","6.5","7.4","7.5","8.4","8.5","9.7","9.8","15.2","15.3","15.7","15.10","15.12","15.20","15.41","16.4","16.5","17.4","17.5","18.4","18.5","19.7","19.8"],"对象":["0.1"],"播放器不会马上做出响应":["0.1"],"types":["0.2","2.0","10.2","10.5","11.6","29.0","30.38","30.48","41.38"],"d":["0.2","0.5","2.0","10.2","10.5","11.6","12.0","29.0","30.38","30.48","40.0","41.38","41.48"],"ts":["0.2","0.5","1.6","2.0","10.2","10.5","11.6","12.0","29.0","30.38","30.48","40.0","41.38","41.48"],"warning":["0.3","0.9","0.10","0.13","0.15","2.0","10.8","10.10","10.15","12.0","30.1","30.35","30.42","31.5","41.1","41.28","41.29","41.35","41.42"],"提示":["0.3","0.13","5.26","5.37","41.1","41.4","41.19"],"假如你需要一些":["0.3","5.37"],"事件只存在于播放器的生命周期上时":["0.3","5.37"],"强烈建议使用这些函数":["0.3"],"以避免造成内存泄漏":["0.3","5.37"],"your":["0.4","10.4"],"假如想在实例化之前更新":["0.6"],"请使用基础选项的":["0.6"],"来更新":["0.6"],"的显示":["0.7"],"组件配置":["0.8","0.9","0.10","41.28","41.31"],"请参考以下地址":["0.8","0.9","0.10","0.15","41.28","41.29","41.30","41.31"],"component":["0.8","0.9","0.10","0.15","10.8","10.9","10.10","10.15","30.29","41.28","41.29","41.30","41.31"],"color":["0.11","10.11","30.36","41.36"],"red":["0.11","10.11"],"false":["0.12","5.20","9.8","10.12","10.14","15.20","19.8"],"只在播放器获得焦点后":["0.13","41.19"],"如点击了播放器后":["0.13","41.19"],"这些快捷键才会生效":["0.13","41.19"],"true":["0.14","3.10","3.11","3.12","3.20","3.21","3.22","3.23","5.23","10.12","10.14","13.10","13.11","13.12","13.20","13.21","13.22","13.23","15.13","15.23","25.10","30.8","30.9","30.11","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.25","30.26","30.37","30.43","30.44","30.46","30.47","36.10","41.8","41.9","41.11","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.22","41.23","41.25","41.26","41.37","41.43","41.44","41.46","41.47"],"设置面板":["0.15"],"html":["0.15","10.15","24.2","25.2","26.2","27.2","28.3","30.41","30.42","35.2","36.2","37.2","38.2","39.3","41.41","41.42"],"ready":["0.16","2.0","5.1","5.4","10.16","15.1","15.4","15.5","15.6","15.16","15.23","15.25","21.0","22.0","23.0","32.0","33.0","34.0"],"off":["2.0"],"全部事件请参考以下地址":["2.0"],"events":["2.0"],"info":["2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.30","5.17","5.18","5.24","5.35","5.36","5.39","9.5","12.1","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.30","15.17","15.18","15.24","15.35","15.36","15.38","15.39","19.5","21.0","22.0","23.0","24.4","25.14","32.0","33.0","34.0","35.4","36.14"],"console":["2.2","2.6","2.19","2.27","2.30","2.38","3.7","3.8","3.9","3.16","5.17","5.18","5.35","5.36","9.5","12.1","12.2","12.3","12.4","12.5","12.6","12.11","12.14","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.27","12.28","12.29","12.30","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.7","13.8","13.9","13.16","15.17","15.18","15.24","15.35","15.36","15.38","19.5","21.0","22.0","23.0","24.4","32.0","33.0","34.0"],"log":["2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.7","3.8","3.9","3.16","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.7","13.8","13.9","13.16"],"video":["3.1","3.2","3.3","3.15","3.17","3.18","3.19","3.24","3.25","3.26","3.31","13.2","13.3","13.10","13.11","13.12","13.15","13.17","13.18","13.20","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","30.3","30.6","30.8","30.11","30.12","30.18","30.20","30.21","30.22","30.23","30.25","30.26","30.34","30.43","30.47","41.3","41.11","41.26","41.34"],"mp4":["3.1","3.2","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.22","3.23","3.24","3.25","3.26","3.30","3.31","3.32","11.1","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","30.3","30.6","30.8","30.9","30.11","30.12","30.13","30.15","30.18","30.20","30.21","30.22","30.23","30.25","30.26","30.27","30.34","30.43","30.44","30.46","30.47","41.3","41.6","41.11","41.12","41.18","41.20","41.22","41.23","41.26","41.27","41.34","41.43","41.46","41.47"],"playbackrate":["3.4","3.5","3.6","13.4","13.5","13.6"],"aspectratio":["3.4","3.5","3.6","13.4","13.5","13.6"],"autoplayback":["3.10","3.11","3.12","13.10","13.11","13.12"],"sample":["3.13","3.14","3.15","3.18","3.19","3.24","3.25","13.1","13.2","13.3","13.13","13.14","13.15","13.17","13.18","13.22","13.23","13.24","13.25","13.26","13.30","13.31","30.3","30.11","30.21","30.26","30.46","41.3","41.26"],"autoorientation":["3.20","13.20"],"show":["3.21","3.27","13.21","13.27","13.28","25.15","36.15"],"fastforward":["3.22","3.23","13.22","13.23"],"fullscreenweb":["3.30","13.30"],"miniprogressbar":["3.32","13.32"],"pause":["4.0","14.0"],"layer":["4.0","14.0"],"png":["4.0","14.0"],"t":["5.9","5.10","5.12","15.9","15.10","15.12","15.22"],"方法会返回":["5.11"],"promise":["5.11"],"当":["5.11"],"resolve":["5.11"],"时表示新地址是可以播放":["5.11"],"reject":["5.11"],"时表示新地址加载错误":["5.11"],"例如直播中的视频或者没被解码完成的视频":["5.15"],"这个时候获取的时长会是":["5.15"],"由于浏览器安全机制":["5.19","5.21","41.17"],"触发窗口全屏前":["5.19"],"页面必须先存在交互":["5.19","5.21"],"例如用户点击过页面":["5.19","5.21"],"触发画中画前":["5.21"],"尺寸和坐标信息是通过":["5.26"],"getboundingclientrect":["5.26","15.26"],"获取的":["5.26"],"但不知道具体高度时":["5.30"],"这个属性很有用":["5.30"],"它能自动计算出视频的高度":["5.30"],"但你需要确定设置这个属性的时机":["5.30"],"强烈建议使用该函数":["5.37"],"4k":["5.41","15.41"],"tooltip":["6.1","8.1","16.1","18.1"],"组件的提示文本":["6.1","8.1"],"remove":["6.4","7.4","8.4","9.7","16.4","17.4","18.4","19.7"],"选择列表的对象数组":["7.1"],"onselect":["7.1"],"选择列表的元素被点击时触发的函数":["7.1"],"by":["7.3","8.2","8.3","9.7","17.3","18.2","18.3","19.7"],"left":["8.5","18.5","30.2"],"switchquality":["9.2","19.2"],"open":["9.4","19.4"],"return":["9.4","9.5","19.4","19.5"],"item":["9.5","17.1","19.5"],"event":["9.5"],"x":["9.5","19.5"],"range":["9.6","19.6"],"switch":["9.8","19.8"],"used":["10.0","11.0","15.0","30.4"],"will":["10.1","15.15","20.5","30.4"],"not":["10.1","13.0","20.5","30.4"],"respond":["10.1"],"immediately":["10.1"],"during":["10.3"],"lifecycle":["10.3"],"it":["10.3","12.44","20.11","30.7"],"strongly":["10.3"],"recommended":["10.3","15.37"],"use":["10.3","10.6","15.37","20.3","30.39"],"these":["10.3"],"functions":["10.3"],"avoid":["10.3","15.37"],"causing":["10.3","15.37"],"memory":["10.3","15.37"],"leaks":["10.3","15.37"],"from":["10.6","17.1"],"basic":["10.6"],"options":["10.6","30.1"],"for":["10.6","12.0","30.4"],"of":["10.7","12.0"],"configuration":["10.8","10.9","10.10"],"please":["10.8","10.9","10.10","10.15","12.0","30.2","30.10","30.28"],"refer":["10.8","10.9","10.10","10.15","12.0","20.11","29.0","30.2","30.28","30.29"],"following":["10.8","10.9","10.10","10.15","12.0","20.3","30.28","30.29","30.30","30.31"],"address":["10.8","10.9","10.10","12.0","30.28","30.29","30.30","30.31"],"srt":["10.11","30.24","41.24"],"settimeout":["10.12","10.14","15.3","15.20","28.7","39.7"],"has":["10.13"],"gained":["10.13"],"focus":["10.13"],"e":["10.13","15.19"],"g":["10.13","15.19"],"clicking":["10.13","30.19"],"link":["10.15","20.3"],"on":["10.16","15.4","15.19","24.4","30.2","30.19"],"a":["12.0"],"full":["12.0"],"list":["12.0"],"state":["12.36","12.38"],"further":["12.40"],"buffering":["12.40","12.41"],"to":["12.44","15.30","30.28","30.29"],"reload":["12.44"],"format":["12.46"],"data":["12.51","12.60"],"appeared":["12.56"],"basically":["13.0"],"needed":["13.0"],"assets":["13.1","13.13","13.14","13.15","13.17","13.18","13.23","13.24","13.25","13.26","30.3","30.11","30.26"],"flip":["13.5","13.6"],"dblclick":["13.16"],"contextmenu":["13.27"],"play":["14.0"],"rejects":["15.11"],"there":["15.11"],"was":["15.11"],"an":["15.11"],"error":["15.11"],"loading":["15.11"],"case":["15.15"],"obtained":["15.15","15.26"],"be":["15.15"],"interaction":["15.19"],"user":["15.19"],"clicked":["15.19","17.1","24.4"],"page":["15.21","30.7"],"must":["15.21"],"occur":["15.21","30.17"],"before":["15.21"],"triggering":["15.21"],"coordinates":["15.26"],"are":["15.26","30.17"],"via":["15.26"],"need":["15.30"],"make":["15.30"],"sure":["15.30"],"m3u8":["15.32","30.40","41.2"],"000":["15.33"],"highly":["15.37"],"this":["15.37","30.7"],"text":["16.1","18.1"],"when":["17.1"],"script":["20.1","24.2","25.2","26.2","27.2","28.3","31.1","35.2","36.2","37.2","38.2","39.3"],"at":["20.3"],"packages":["20.3","20.9","31.3","31.9"],"template":["20.3","31.3"],"change":["20.4","20.5","36.11"],"the":["20.4","20.5","30.28","30.29","30.31"],"player":["20.4"],"in":["20.5"],"directly":["20.5"],"modifying":["20.5"],"typescript":["20.9"],"definitions":["20.9"],"volume":["20.10"],"art8":["20.10","31.10"],"new":["20.10","31.10"],"yourself":["20.11"],"scripts":["20.11","31.11"],"documentation":["20.11"],"browserslist":["20.11","31.11"],"type":["21.0","23.0","32.0","34.0"],"customtype":["21.0","22.0","23.0","32.0","33.0","34.0"],"click":["24.4"],"skip":["24.4","35.4"],"发送弹幕前的自定义校验":["25.4","36.4"],"通过":["25.4","36.4"],"mount":["25.4","36.4"],"选项可以自定义输入框挂载的位置":["25.4","36.4"],"默认挂载于播放器底部":["25.4","36.4"],"仅在当宽度小于最小值时生效":["25.4","36.4"],"document":["25.4","36.4"],"queryselector":["25.4","36.4"],"artplayer":["25.4","36.4"],"green":["25.5","36.5"],"border":["25.10","36.10"],"addeventlistener":["25.11","36.11"],"number":["25.11","36.11"],"v2":["25.12","36.12"],"resize":["25.13"],"弹幕显示":["25.15","36.15"],"destroy":["25.15","36.15"],"弹幕销毁":["25.15","36.15"],"height":["28.5","28.13","39.5","39.13"],"style":["28.13","39.13"],"width":["28.13","39.13"],"or":["29.1","40.1"],"tip":["30.1","31.3"],"among":["30.1"],"all":["30.1"],"only":["30.1"],"is":["30.1"],"mandatory":["30.1"],"flv":["30.2","41.2"],"third":["30.2"],"party":["30.2"],"libraries":["30.2"],"side":["30.2"],"point":["30.4"],"jpg":["30.5","41.5"],"ffad00":["30.6","41.6"],"read":["30.7","30.10"],"cached":["30.7"],"value":["30.7"],"more":["30.10","30.42"],"information":["30.10"],"policy":["30.10","41.10"],"changes":["30.10","41.10"],"url":["30.11","30.26"],"setting":["30.14","30.15","30.16","30.24","41.14","41.15","41.16","41.24"],"website":["30.17"],"cross":["30.17"],"origin":["30.17"],"failure":["30.17"],"may":["30.17"],"such":["30.19"],"as":["30.19"],"hd":["30.32"],"720p":["30.32","41.32"],"こんなとこにあるはずもないのに":["30.33","41.33"],"终わり":["30.33","41.33"],"online":["30.35"],"generation":["30.35"],"tool":["30.35","41.35"],"03a9f4":["30.36","41.36"],"font":["30.36","41.36"],"size":["30.36","41.36"],"30px":["30.36","41.36"],"webkit":["30.37"],"playsinline":["30.37"],"therefore":["30.39"],"if":["30.39"],"you":["30.39"],"best":["30.39"],"well":["30.39"],"settings":["30.41","30.42"],"start":["30.41","30.42","41.41","41.42"],"i18n":["30.41","41.41"],"tw":["30.42","41.42"],"identify":["30.45"],"unique":["30.45"],"必须是有尺寸的":["31.3"],"以下链接可以看到更多的使用例子":["31.3"],"里直接修改":["31.4","31.5"],"是不会改变播放器的":["31.4","31.5"],"非响应式":["31.5"],"在":["31.5"],"定义":["31.9"],"请修改以下配置然后自行构建":["31.11"],"构建配置":["31.11"],"build":["31.11"],"参考文档":["31.11"],"skipped":["35.4"],"显示弹幕":["36.8","36.9"],"hide":["36.9"],"播放器的值":["39.1"],"全部选项里":["41.1"],"只有":["41.1"],"是必填的":["41.1"],"如需要播放":["41.2"],"或者":["41.2"],"等其它格式":["41.2"],"请参考左侧的":["41.2"],"第三方库":["41.2"],"回调函数里的":["41.4"],"就是播放器实例":["41.4"],"但回调函数假如使用了箭头函数":["41.4"],"则不会指向播放器实例":["41.4"],"下次初始化时":["41.7"],"如刷新页面":["41.7"],"播放器会读取该缓存值":["41.7"],"更多信息请阅读":["41.10"],"假如视频源地址和网站是跨域的":["41.17"],"可能会出现截图失败":["41.17"],"在线生成预览图":["41.35"],"thumbnail":["41.35"],"所以假如你使用了":["41.39"],"最好同时要指明":["41.39"],"function":["41.40"],"更多的语言设置":["41.41","41.42"],"是不同的话":["41.45"],"那么你需要使用":["41.45"],"来标识视频的唯一":["41.45"]}]'},t={"0.0":{t:"# 高级属性\r",p:`这里的 高级属性 是指挂载在 实例 的 二级属性，比较少用 +`,l:"advanced/built-in.html",a:"高级属性"},"0.1":{t:"`option`\r",p:`播放器的选项 +<div className="run-code">▶ Run Code< ...`,l:"advanced/built-in.html#option",a:"option"},"0.2":{t:"`template`\r",p:`管理播放器所有的 DOM 元素 +<div className="run-code">▶ Ru ...`,l:"advanced/built-in.html#template",a:"template"},"0.3":{t:"`events`\r",p:"管理播放器所有的 DOM 事件，实质上是代理了 addEventListener 和 removeEventListener ...",l:"advanced/built-in.html#events",a:"events"},"0.4":{t:"`storage`\r",p:`管理播放器的本地存储 name 属性用于设置缓存的 key set 方法用于设置缓存 get 方法用于获取缓存 -del 方 ...`,l:"advanced/built-in.html#storage",a:"storage"},"0.5":{t:"`icons`",p:`管理播放器所有的 svg 图标 -<div className="run-code">▶ Ru ...`,l:"advanced/built-in.html#icons",a:"icons"},"0.6":{t:"`i18n`",p:`管理播放器的 i18n +del 方 ...`,l:"advanced/built-in.html#storage",a:"storage"},"0.5":{t:"`icons`\r",p:`管理播放器所有的 svg 图标 +<div className="run-code">▶ Ru ...`,l:"advanced/built-in.html#icons",a:"icons"},"0.6":{t:"`i18n`\r",p:`管理播放器的 i18n get 方法用于获取 i18n 的值 update 方法用于更新 i18n 对象 -<div ...`,l:"advanced/built-in.html#i18n",a:"i18n"},"0.7":{t:"`notice`",p:`管理播放器的提示语，只有一个 show 属性用于显示提示语 -<div className="run-code ...`,l:"advanced/built-in.html#notice",a:"notice"},"0.8":{t:"`layers`",p:`管理播放器的层 +<div ...`,l:"advanced/built-in.html#i18n",a:"i18n"},"0.7":{t:"`notice`\r",p:`管理播放器的提示语，只有一个 show 属性用于显示提示语 +<div className="run-code ...`,l:"advanced/built-in.html#notice",a:"notice"},"0.8":{t:"`layers`\r",p:`管理播放器的层 add 方法用于动态添加层 remove 方法用于动态删除层 update 方法用于动态更新层 -show ...`,l:"advanced/built-in.html#layers",a:"layers"},"0.9":{t:"`controls`",p:`管理播放器的控制器 +show ...`,l:"advanced/built-in.html#layers",a:"layers"},"0.9":{t:"`controls`\r",p:`管理播放器的控制器 add 方法用于动态添加控制器 remove 方法用于动态删除控制器 -update 方法用于动态更新控 ...`,l:"advanced/built-in.html#controls",a:"controls"},"0.10":{t:"`contextmenu`",p:`管理播放器的右键菜单 +update 方法用于动态更新控 ...`,l:"advanced/built-in.html#controls",a:"controls"},"0.10":{t:"`contextmenu`\r",p:`管理播放器的右键菜单 add 方法用于动态添加菜单 remove 方法用于动态删除菜单 -update 方法用于动态更新菜单 ...`,l:"advanced/built-in.html#contextmenu",a:"contextmenu"},"0.11":{t:"`subtitle`",p:`管理播放器的字幕功能 +update 方法用于动态更新菜单 ...`,l:"advanced/built-in.html#contextmenu",a:"contextmenu"},"0.11":{t:"`subtitle`\r",p:`管理播放器的字幕功能 url 属性设置和返回当前字幕地址 style 方法设置当前字幕的样式 -switch 方法设置当前字 ...`,l:"advanced/built-in.html#subtitle",a:"subtitle"},"0.12":{t:"`loading`",p:`管理播放器的加载层 +switch 方法设置当前字 ...`,l:"advanced/built-in.html#subtitle",a:"subtitle"},"0.12":{t:"`loading`\r",p:`管理播放器的加载层 show 属性用于设置是否显示加载层 toggle 属性用于切换是否显示加载层 -<div cl ...`,l:"advanced/built-in.html#loading",a:"loading"},"0.13":{t:"`hotkey`",p:`管理播放器的快捷键功能 +<div cl ...`,l:"advanced/built-in.html#loading",a:"loading"},"0.13":{t:"`hotkey`\r",p:`管理播放器的快捷键功能 add 方法用于添加快捷键 remove 方法用于删除快捷键 -<div className ...`,l:"advanced/built-in.html#hotkey",a:"hotkey"},"0.14":{t:"`mask`",p:`管理播放器的遮罩层 +<div className ...`,l:"advanced/built-in.html#hotkey",a:"hotkey"},"0.14":{t:"`mask`\r",p:`管理播放器的遮罩层 show 属性用于设置是否显示遮罩层 toggle 属性用于切换是否显示遮罩层 -<div cl ...`,l:"advanced/built-in.html#mask",a:"mask"},"0.15":{t:"`setting`",p:`管理播放器的设置面板 +<div cl ...`,l:"advanced/built-in.html#mask",a:"mask"},"0.15":{t:"`setting`\r",p:`管理播放器的设置面板 add 方法用于动态添加设置项 remove 方法用于动态删除设置项 -update 方法用于动态更新 ...`,l:"advanced/built-in.html#setting",a:"setting"},"0.16":{t:"`plugins`",p:`管理播放器的插件功能，只有一个方法 add 用于动态添加插件 -<div className="run-cod ...`,l:"advanced/built-in.html#plugins",a:"plugins"},"1.0":{t:"# 静态属性",p:`这里的 静态属性 是指挂载在 构造函数 的 一级属性，非常少使用 -`,l:"advanced/class.html",a:"静态属性"},"1.1":{t:"`instances`",p:`返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性 -<div className=" ...`,l:"advanced/class.html#instances",a:"instances"},"1.2":{t:"`version`",p:`返回播放器的版本信息 -<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#version",a:"version"},"1.3":{t:"`env`",p:`返回播放器的环境变量 -<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#env",a:"env"},"1.4":{t:"`build`",p:`返回播放器的打包时间 -<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#build",a:"build"},"1.5":{t:"`config`",p:`返回视频的默认配置 -<div className="run-code">▶ Run Code ...`,l:"advanced/class.html#config",a:"config"},"1.6":{t:"`utils`",p:`返回播放器的工具函数集合 -<div className="run-code">▶ Run C ...`,l:"advanced/class.html#utils",a:"utils"},"1.7":{t:"`scheme`",p:`返回播放器选项的校验方案 -<div className="run-code">▶ Run C ...`,l:"advanced/class.html#scheme",a:"scheme"},"1.8":{t:"`Emitter`",p:`返回事件分发器的构造函数 -<div className="run-code">▶ Run C ...`,l:"advanced/class.html#emitter",a:"emitter"},"1.9":{t:"`validator`",p:`返回选项的校验函数 -<div className="run-code">▶ Run Code ...`,l:"advanced/class.html#validator",a:"validator"},"1.10":{t:"`kindOf`",p:`返回类型检测的函数工具 -<div className="run-code">▶ Run Co ...`,l:"advanced/class.html#kindof",a:"kindof"},"1.11":{t:"`html`",p:`返回播放器所需的 html 字符串 -<div className="run-code">▶ ...`,l:"advanced/class.html#html",a:"html"},"1.12":{t:"`option`",p:`返回播放器的默认选项 -<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#option",a:"option"},"2.0":{t:"# 实例事件",p:`播放器的事件分为两种，一种视频的 原生事件 (前缀 video:)，另外一种是 自定义事件 +update 方法用于动态更新 ...`,l:"advanced/built-in.html#setting",a:"setting"},"0.16":{t:"`plugins`\r",p:`管理播放器的插件功能，只有一个方法 add 用于动态添加插件 +<div className="run-cod ...`,l:"advanced/built-in.html#plugins",a:"plugins"},"1.0":{t:"# 静态属性\r",p:`这里的 静态属性 是指挂载在 构造函数 的 一级属性，非常少使用 +`,l:"advanced/class.html",a:"静态属性"},"1.1":{t:"`instances`\r",p:`返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性 +<div className=" ...`,l:"advanced/class.html#instances",a:"instances"},"1.2":{t:"`version`\r",p:`返回播放器的版本信息 +<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#version",a:"version"},"1.3":{t:"`env`\r",p:`返回播放器的环境变量 +<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#env",a:"env"},"1.4":{t:"`build`\r",p:`返回播放器的打包时间 +<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#build",a:"build"},"1.5":{t:"`config`\r",p:`返回视频的默认配置 +<div className="run-code">▶ Run Code ...`,l:"advanced/class.html#config",a:"config"},"1.6":{t:"`utils`\r",p:`返回播放器的工具函数集合 +<div className="run-code">▶ Run C ...`,l:"advanced/class.html#utils",a:"utils"},"1.7":{t:"`scheme`\r",p:`返回播放器选项的校验方案 +<div className="run-code">▶ Run C ...`,l:"advanced/class.html#scheme",a:"scheme"},"1.8":{t:"`Emitter`\r",p:`返回事件分发器的构造函数 +<div className="run-code">▶ Run C ...`,l:"advanced/class.html#emitter",a:"emitter"},"1.9":{t:"`validator`\r",p:`返回选项的校验函数 +<div className="run-code">▶ Run Code ...`,l:"advanced/class.html#validator",a:"validator"},"1.10":{t:"`kindOf`\r",p:`返回类型检测的函数工具 +<div className="run-code">▶ Run Co ...`,l:"advanced/class.html#kindof",a:"kindof"},"1.11":{t:"`html`\r",p:`返回播放器所需的 html 字符串 +<div className="run-code">▶ ...`,l:"advanced/class.html#html",a:"html"},"1.12":{t:"`option`\r",p:`返回播放器的默认选项 +<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#option",a:"option"},"2.0":{t:"# 实例事件\r",p:`播放器的事件分为两种，一种视频的 原生事件 (前缀 video:)，另外一种是 自定义事件 监听事件： -<div cl ...`,l:"advanced/event.html",a:"实例事件"},"2.1":{t:"`ready`",p:`当播放器首次可以播放器时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#ready",a:"ready"},"2.2":{t:"`restart`",p:`当播放器切换地址后并可以播放时触发 -<div className="run-code">▶ ...`,l:"advanced/event.html#restart",a:"restart"},"2.3":{t:"`pause`",p:`当播放器暂停时触发 -<div className="run-code">▶ Run Code ...`,l:"advanced/event.html#pause",a:"pause"},"2.4":{t:"`play`",p:`当播放器播放时触发 -<div className="run-code">▶ Run Code ...`,l:"advanced/event.html#play",a:"play"},"2.5":{t:"`hotkey`",p:`当播放器热键被按下时触发 -<div className="run-code">▶ Run C ...`,l:"advanced/event.html#hotkey",a:"hotkey"},"2.6":{t:"`destroy`",p:`当播放器销毁时触发 -<div className="run-code">▶ Run Code ...`,l:"advanced/event.html#destroy",a:"destroy"},"2.7":{t:"`focus`",p:`当播放器获得焦点时触发 -<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#focus",a:"focus"},"2.8":{t:"`blur`",p:`当播放器失去焦点时触发 -<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#blur",a:"blur"},"2.9":{t:"`dblclick`",p:`当播放器被双击时触发 -<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#dblclick",a:"dblclick"},"2.10":{t:"`click`",p:`当播放器被单击时触发 -<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#click",a:"click"},"2.11":{t:"`error`",p:`当播放器加载视频发生错误时触发 -<div className="run-code">▶ Ru ...`,l:"advanced/event.html#error",a:"error"},"2.12":{t:"`hover`",p:`当播放器被鼠标移出或者移入时触发 -<div className="run-code">▶ R ...`,l:"advanced/event.html#hover",a:"hover"},"2.13":{t:"`mousemove`",p:`当播放器被鼠标经过时触发 -<div className="run-code">▶ Run C ...`,l:"advanced/event.html#mousemove",a:"mousemove"},"2.14":{t:"`resize`",p:`当播放器尺寸变化时触发 -<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#resize",a:"resize"},"2.15":{t:"`view`",p:`当播放器出现在视口时触发 -<div className="run-code">▶ Run C ...`,l:"advanced/event.html#view",a:"view"},"2.16":{t:"`lock`",p:`在移动端，当锁定的状态发生变化时触发 -<div className="run-code">▶ ...`,l:"advanced/event.html#lock",a:"lock"},"2.17":{t:"`aspectRatio`",p:`当播放器长宽比变化时触发 -<div className="run-code">▶ Run C ...`,l:"advanced/event.html#aspectratio",a:"aspectratio"},"2.18":{t:"`autoHeight`",p:`当播放器自动设置高度时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#autoheight",a:"autoheight"},"2.19":{t:"`autoSize`",p:`当播放器自动设置尺寸时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#autosize",a:"autosize"},"2.20":{t:"`flip`",p:`当播放器发生翻转时触发 -<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#flip",a:"flip"},"2.21":{t:"`fullscreen`",p:`当播放器发生窗口全屏时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#fullscreen",a:"fullscreen"},"2.22":{t:"`fullscreenWeb`",p:`当播放器发生网页全屏时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#fullscreenweb",a:"fullscreenweb"},"2.23":{t:"`mini`",p:`当播放器进入迷你模式时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#mini",a:"mini"},"2.24":{t:"`pip`",p:`当播放器进入画中画时触发 -<div className="run-code">▶ Run C ...`,l:"advanced/event.html#pip",a:"pip"},"2.25":{t:"`screenshot`",p:`当播放器被截图时触发 -<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#screenshot",a:"screenshot"},"2.26":{t:"`seek`",p:`当播放器发生时间跳转时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#seek",a:"seek"},"2.27":{t:"`subtitleOffset`",p:`当播放器发生字幕偏移时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#subtitleoffset",a:"subtitleoffset"},"2.28":{t:"`subtitleUpdate`",p:`当字幕更新时触发 -<div className="run-code">▶ Run Code& ...`,l:"advanced/event.html#subtitleupdate",a:"subtitleupdate"},"2.29":{t:"`subtitleLoad`",p:`当字幕加载时触发 -<div className="run-code">▶ Run Code& ...`,l:"advanced/event.html#subtitleload",a:"subtitleload"},"2.30":{t:"`subtitleSwitch`",p:`当字幕切换时触发 -<div className="run-code">▶ Run Code& ...`,l:"advanced/event.html#subtitleswitch",a:"subtitleswitch"},"2.31":{t:"`info`",p:`当信息面板显示或隐藏时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#info",a:"info"},"2.32":{t:"`layer`",p:`当自定义层显示或隐藏时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#layer",a:"layer"},"2.33":{t:"`loading`",p:`当加载器显示或隐藏时触发 -<div className="run-code">▶ Run C ...`,l:"advanced/event.html#loading",a:"loading"},"2.34":{t:"`mask`",p:`当遮罩层显示或隐藏时触发 -<div className="run-code">▶ Run C ...`,l:"advanced/event.html#mask",a:"mask"},"2.35":{t:"`subtitle`",p:`当字幕层显示或隐藏时触发 -<div className="run-code">▶ Run C ...`,l:"advanced/event.html#subtitle",a:"subtitle"},"2.36":{t:"`contextmenu`",p:`当右键菜单显示或隐藏时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#contextmenu",a:"contextmenu"},"2.37":{t:"`control`",p:`当控制器显示或隐藏时触发 -<div className="run-code">▶ Run C ...`,l:"advanced/event.html#control",a:"control"},"2.38":{t:"`setting`",p:`当设置面板显示或隐藏时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#setting",a:"setting"},"2.39":{t:"`muted`",p:`当静音的状态变化时触发 -<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#muted",a:"muted"},"2.40":{t:"`video:canplay`",p:`浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容 -`,l:"advanced/event.html#video-canplay",a:"video-canplay"},"2.41":{t:"`video:canplaythrough`",p:`浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束 -`,l:"advanced/event.html#video-canplaythrough",a:"video-canplaythrough"},"2.42":{t:"`video:complete`",p:`OfflineAudioContext 渲染完成 -`,l:"advanced/event.html#video-complete",a:"video-complete"},"2.43":{t:"`video:durationchange`",p:`duration 属性的值改变时触发 -`,l:"advanced/event.html#video-durationchange",a:"video-durationchange"},"2.44":{t:"`video:emptied`",p:"媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载 ...",l:"advanced/event.html#video-emptied",a:"video-emptied"},"2.45":{t:"`video:ended`",p:`视频停止播放，因为 media 已经到达结束点 -`,l:"advanced/event.html#video-ended",a:"video-ended"},"2.46":{t:"`video:error`",p:`获取媒体数据时出错，或者资源类型不是受支持的媒体格式 -`,l:"advanced/event.html#video-error",a:"video-error"},"2.47":{t:"`video:loadeddata`",p:`media 中的首帧已经完成加载 -`,l:"advanced/event.html#video-loadeddata",a:"video-loadeddata"},"2.48":{t:"`video:loadedmetadata`",p:`已加载元数据 -`,l:"advanced/event.html#video-loadedmetadata",a:"video-loadedmetadata"},"2.49":{t:"`video:pause`",p:`播放已暂停 -`,l:"advanced/event.html#video-pause",a:"video-pause"},"2.50":{t:"`video:play`",p:`播放已开始 -`,l:"advanced/event.html#video-play",a:"video-play"},"2.51":{t:"`video:playing`",p:`由于缺乏数据而暂停或延迟后，播放准备开始 -`,l:"advanced/event.html#video-playing",a:"video-playing"},"2.52":{t:"`video:progress`",p:`在浏览器加载资源时周期性触发 -`,l:"advanced/event.html#video-progress",a:"video-progress"},"2.53":{t:"`video:ratechange`",p:`播放速率发生变化 -`,l:"advanced/event.html#video-ratechange",a:"video-ratechange"},"2.54":{t:"`video:seeked`",p:`跳帧（seek）操作完成 -`,l:"advanced/event.html#video-seeked",a:"video-seeked"},"2.55":{t:"`video:seeking`",p:`跳帧（seek）操作开始 -`,l:"advanced/event.html#video-seeking",a:"video-seeking"},"2.56":{t:"`video:stalled`",p:`用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现 -`,l:"advanced/event.html#video-stalled",a:"video-stalled"},"2.57":{t:"`video:suspend`",p:`媒体数据加载已暂停 -`,l:"advanced/event.html#video-suspend",a:"video-suspend"},"2.58":{t:"`video:timeupdate`",p:`currentTime 属性指定的时间发生变化 -`,l:"advanced/event.html#video-timeupdate",a:"video-timeupdate"},"2.59":{t:"`video:volumechange`",p:`音量发生变化 -`,l:"advanced/event.html#video-volumechange",a:"video-volumechange"},"2.60":{t:"`video:waiting`",p:`由于暂时缺少数据，播放已停止 -`,l:"advanced/event.html#video-waiting",a:"video-waiting"},"3.0":{t:"# 全局属性",p:`这里的 全局属性 也是指挂载在 构造函数 的 一级属性，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到 -`,l:"advanced/global.html",a:"全局属性"},"3.1":{t:"DEBUG",p:`是否开始 debug 模式，可以打印出视频全部的内置事件，默认关闭 -<div className="run- ...`,l:"advanced/global.html#debug",a:"debug"},"3.2":{t:"CONTEXTMENU",p:`是否开启右键菜单，默认开启 -<div className="run-code">▶ Run ...`,l:"advanced/global.html#contextmenu",a:"contextmenu"},"3.3":{t:"NOTICE_TIME",p:`提示信息的显示时长，单位为毫秒，默认为 2000 -<div className="run-code" ...`,l:"advanced/global.html#notice-time",a:"notice-time"},"3.4":{t:"SETTING_WIDTH",p:`设置面板的默认宽度，单位为像素，默认为 250 -<div className="run-code" ...`,l:"advanced/global.html#setting-width",a:"setting-width"},"3.5":{t:"SETTING_ITEM_WIDTH",p:`设置面板的设置项的默认宽度，单位为像素，默认为 200 -<div className="run-code&q ...`,l:"advanced/global.html#setting-item-width",a:"setting-item-width"},"3.6":{t:"SETTING_ITEM_HEIGHT",p:`设置面板的设置项的默认高度，单位为像素，默认为 35 -<div className="run-code&qu ...`,l:"advanced/global.html#setting-item-height",a:"setting-item-height"},"3.7":{t:"RESIZE_TIME",p:`resize 事件的节流时间，单位为毫秒，默认为 200 -<div className="run-code& ...`,l:"advanced/global.html#resize-time",a:"resize-time"},"3.8":{t:"SCROLL_TIME",p:`scroll 事件的节流时间，单位为毫秒，默认为 200 -<div className="run-code& ...`,l:"advanced/global.html#scroll-time",a:"scroll-time"},"3.9":{t:"SCROLL_GAP",p:`view 事件的边界容差距离，单位为像素，默认为 50 -<div className="run-code&q ...`,l:"advanced/global.html#scroll-gap",a:"scroll-gap"},"3.10":{t:"AUTO_PLAYBACK_MAX",p:`自动回放功能的最大记录数，默认为 10 -<div className="run-code"> ...`,l:"advanced/global.html#auto-playback-max",a:"auto-playback-max"},"3.11":{t:"AUTO_PLAYBACK_MIN",p:`自动回放功能的最小记录时长，单位为秒，默认为 5 -<div className="run-code" ...`,l:"advanced/global.html#auto-playback-min",a:"auto-playback-min"},"3.12":{t:"AUTO_PLAYBACK_TIMEOUT",p:`自动回放功能的隐藏延迟时长，单位为毫秒，默认为 3000 -<div className="run-code& ...`,l:"advanced/global.html#auto-playback-timeout",a:"auto-playback-timeout"},"3.13":{t:"RECONNECT_TIME_MAX",p:`发生连接错误时，自动连接的最大次数，默认为 5 -<div className="run-code" ...`,l:"advanced/global.html#reconnect-time-max",a:"reconnect-time-max"},"3.14":{t:"RECONNECT_SLEEP_TIME",p:`发生连接错误时，自动连接的延迟时间，单位为毫秒，默认为 1000 -<div className="run-c ...`,l:"advanced/global.html#reconnect-sleep-time",a:"reconnect-sleep-time"},"3.15":{t:"CONTROL_HIDE_TIME",p:`底部控制栏的自动隐藏的延迟时间，单位为毫秒，默认为 3000 -<div className="run-cod ...`,l:"advanced/global.html#control-hide-time",a:"control-hide-time"},"3.16":{t:"DBCLICK_TIME",p:`双击事件的延迟事件，单位为毫秒，默认为 300 -<div className="run-code" ...`,l:"advanced/global.html#dbclick-time",a:"dbclick-time"},"3.17":{t:"DBCLICK_FULLSCREEN",p:`在桌面端，是否双击切换全屏，默认为 true -<div className="run-code"& ...`,l:"advanced/global.html#dbclick-fullscreen",a:"dbclick-fullscreen"},"3.18":{t:"MOBILE_DBCLICK_PLAY",p:`在移动端，是否双击切换播放暂停，默认为 true -<div className="run-code" ...`,l:"advanced/global.html#mobile-dbclick-play",a:"mobile-dbclick-play"},"3.19":{t:"MOBILE_CLICK_PLAY",p:`在移动端，是否单击切换播放暂停，默认为 false -<div className="run-code&quo ...`,l:"advanced/global.html#mobile-click-play",a:"mobile-click-play"},"3.20":{t:"AUTO_ORIENTATION_TIME",p:`在移动端，自动旋屏的延迟时间，单位为毫秒，默认为 200 -<div className="run-code& ...`,l:"advanced/global.html#auto-orientation-time",a:"auto-orientation-time"},"3.21":{t:"INFO_LOOP_TIME",p:`信息面板的刷新时间，单位为毫秒，默认为 1000 -<div className="run-code" ...`,l:"advanced/global.html#info-loop-time",a:"info-loop-time"},"3.22":{t:"FAST_FORWARD_VALUE",p:`在移动端，长按加速的速率倍数，默认为 3 -<div className="run-code"> ...`,l:"advanced/global.html#fast-forward-value",a:"fast-forward-value"},"3.23":{t:"FAST_FORWARD_TIME",p:`在移动端，长按加速的延迟时间，单位为毫秒，默认为 1000 -<div className="run-code ...`,l:"advanced/global.html#fast-forward-time",a:"fast-forward-time"},"3.24":{t:"TOUCH_MOVE_RATIO",p:`在移动端，左右滑动进度的速率倍数，默认为 0.5 -<div className="run-code" ...`,l:"advanced/global.html#touch-move-ratio",a:"touch-move-ratio"},"3.25":{t:"VOLUME_STEP",p:`快捷键调节音量的幅度比例，默认为 0.1 -<div className="run-code"> ...`,l:"advanced/global.html#volume-step",a:"volume-step"},"3.26":{t:"SEEK_STEP",p:`快捷键调节播放进度的幅度，单位为秒，默认为 5 -<div className="run-code" ...`,l:"advanced/global.html#seek-step",a:"seek-step"},"3.27":{t:"PLAYBACK_RATE",p:`内置播放速率的列表，默认为 [0.5, 0.75, 1, 1.25, 1.5, 2] -<div className=& ...`,l:"advanced/global.html#playback-rate",a:"playback-rate"},"3.28":{t:"ASPECT_RATIO",p:`内置视频长宽比的列表，默认为 ['default', '4:3', '16:9'] -<div className=&q ...`,l:"advanced/global.html#aspect-ratio",a:"aspect-ratio"},"3.29":{t:"FLIP",p:`内置视频翻转的列表，默认为 ['normal', 'horizontal', 'vertical'] -<div cla ...`,l:"advanced/global.html#flip",a:"flip"},"3.30":{t:"FULLSCREEN_WEB_IN_BODY",p:`网页全屏时，是否把播放器挂在在 body 元素下，默认为 false -<div className="run ...`,l:"advanced/global.html#fullscreen-web-in-body",a:"fullscreen-web-in-body"},"3.31":{t:"LOG_VERSION",p:`设置是否打印播放器版本，默认为 true -<div className="run-code"> ...`,l:"advanced/global.html#log-version",a:"log-version"},"3.32":{t:"USE_RAF",p:`设置是否使用 requestAnimationFrame ，默认为 false，目前主要用于进度条的平滑效果 -<div ...`,l:"advanced/global.html#use-raf",a:"use-raf"},"4.0":{t:"# 编写插件",p:`但你已经知道播放器的属性, 方法和事件后，再编写插件是非常简单的事 +<div cl ...`,l:"advanced/event.html",a:"实例事件"},"2.1":{t:"`ready`\r",p:`当播放器首次可以播放器时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#ready",a:"ready"},"2.2":{t:"`restart`\r",p:`当播放器切换地址后并可以播放时触发 +<div className="run-code">▶ ...`,l:"advanced/event.html#restart",a:"restart"},"2.3":{t:"`pause`\r",p:`当播放器暂停时触发 +<div className="run-code">▶ Run Code ...`,l:"advanced/event.html#pause",a:"pause"},"2.4":{t:"`play`\r",p:`当播放器播放时触发 +<div className="run-code">▶ Run Code ...`,l:"advanced/event.html#play",a:"play"},"2.5":{t:"`hotkey`\r",p:`当播放器热键被按下时触发 +<div className="run-code">▶ Run C ...`,l:"advanced/event.html#hotkey",a:"hotkey"},"2.6":{t:"`destroy`\r",p:`当播放器销毁时触发 +<div className="run-code">▶ Run Code ...`,l:"advanced/event.html#destroy",a:"destroy"},"2.7":{t:"`focus`\r",p:`当播放器获得焦点时触发 +<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#focus",a:"focus"},"2.8":{t:"`blur`\r",p:`当播放器失去焦点时触发 +<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#blur",a:"blur"},"2.9":{t:"`dblclick`\r",p:`当播放器被双击时触发 +<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#dblclick",a:"dblclick"},"2.10":{t:"`click`\r",p:`当播放器被单击时触发 +<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#click",a:"click"},"2.11":{t:"`error`\r",p:`当播放器加载视频发生错误时触发 +<div className="run-code">▶ Ru ...`,l:"advanced/event.html#error",a:"error"},"2.12":{t:"`hover`\r",p:`当播放器被鼠标移出或者移入时触发 +<div className="run-code">▶ R ...`,l:"advanced/event.html#hover",a:"hover"},"2.13":{t:"`mousemove`\r",p:`当播放器被鼠标经过时触发 +<div className="run-code">▶ Run C ...`,l:"advanced/event.html#mousemove",a:"mousemove"},"2.14":{t:"`resize`\r",p:`当播放器尺寸变化时触发 +<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#resize",a:"resize"},"2.15":{t:"`view`\r",p:`当播放器出现在视口时触发 +<div className="run-code">▶ Run C ...`,l:"advanced/event.html#view",a:"view"},"2.16":{t:"`lock`\r",p:`在移动端，当锁定的状态发生变化时触发 +<div className="run-code">▶ ...`,l:"advanced/event.html#lock",a:"lock"},"2.17":{t:"`aspectRatio`\r",p:`当播放器长宽比变化时触发 +<div className="run-code">▶ Run C ...`,l:"advanced/event.html#aspectratio",a:"aspectratio"},"2.18":{t:"`autoHeight`\r",p:`当播放器自动设置高度时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#autoheight",a:"autoheight"},"2.19":{t:"`autoSize`\r",p:`当播放器自动设置尺寸时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#autosize",a:"autosize"},"2.20":{t:"`flip`\r",p:`当播放器发生翻转时触发 +<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#flip",a:"flip"},"2.21":{t:"`fullscreen`\r",p:`当播放器发生窗口全屏时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#fullscreen",a:"fullscreen"},"2.22":{t:"`fullscreenWeb`\r",p:`当播放器发生网页全屏时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#fullscreenweb",a:"fullscreenweb"},"2.23":{t:"`mini`\r",p:`当播放器进入迷你模式时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#mini",a:"mini"},"2.24":{t:"`pip`\r",p:`当播放器进入画中画时触发 +<div className="run-code">▶ Run C ...`,l:"advanced/event.html#pip",a:"pip"},"2.25":{t:"`screenshot`\r",p:`当播放器被截图时触发 +<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#screenshot",a:"screenshot"},"2.26":{t:"`seek`\r",p:`当播放器发生时间跳转时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#seek",a:"seek"},"2.27":{t:"`subtitleOffset`\r",p:`当播放器发生字幕偏移时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#subtitleoffset",a:"subtitleoffset"},"2.28":{t:"`subtitleUpdate`\r",p:`当字幕更新时触发 +<div className="run-code">▶ Run Code& ...`,l:"advanced/event.html#subtitleupdate",a:"subtitleupdate"},"2.29":{t:"`subtitleLoad`\r",p:`当字幕加载时触发 +<div className="run-code">▶ Run Code& ...`,l:"advanced/event.html#subtitleload",a:"subtitleload"},"2.30":{t:"`subtitleSwitch`\r",p:`当字幕切换时触发 +<div className="run-code">▶ Run Code& ...`,l:"advanced/event.html#subtitleswitch",a:"subtitleswitch"},"2.31":{t:"`info`\r",p:`当信息面板显示或隐藏时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#info",a:"info"},"2.32":{t:"`layer`\r",p:`当自定义层显示或隐藏时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#layer",a:"layer"},"2.33":{t:"`loading`\r",p:`当加载器显示或隐藏时触发 +<div className="run-code">▶ Run C ...`,l:"advanced/event.html#loading",a:"loading"},"2.34":{t:"`mask`\r",p:`当遮罩层显示或隐藏时触发 +<div className="run-code">▶ Run C ...`,l:"advanced/event.html#mask",a:"mask"},"2.35":{t:"`subtitle`\r",p:`当字幕层显示或隐藏时触发 +<div className="run-code">▶ Run C ...`,l:"advanced/event.html#subtitle",a:"subtitle"},"2.36":{t:"`contextmenu`\r",p:`当右键菜单显示或隐藏时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#contextmenu",a:"contextmenu"},"2.37":{t:"`control`\r",p:`当控制器显示或隐藏时触发 +<div className="run-code">▶ Run C ...`,l:"advanced/event.html#control",a:"control"},"2.38":{t:"`setting`\r",p:`当设置面板显示或隐藏时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#setting",a:"setting"},"2.39":{t:"`muted`\r",p:`当静音的状态变化时触发 +<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#muted",a:"muted"},"2.40":{t:"`video:canplay`\r",p:`浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容 +`,l:"advanced/event.html#video-canplay",a:"video-canplay"},"2.41":{t:"`video:canplaythrough`\r",p:`浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束 +`,l:"advanced/event.html#video-canplaythrough",a:"video-canplaythrough"},"2.42":{t:"`video:complete`\r",p:`OfflineAudioContext 渲染完成 +`,l:"advanced/event.html#video-complete",a:"video-complete"},"2.43":{t:"`video:durationchange`\r",p:`duration 属性的值改变时触发 +`,l:"advanced/event.html#video-durationchange",a:"video-durationchange"},"2.44":{t:"`video:emptied`\r",p:"媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载 ...",l:"advanced/event.html#video-emptied",a:"video-emptied"},"2.45":{t:"`video:ended`\r",p:`视频停止播放，因为 media 已经到达结束点 +`,l:"advanced/event.html#video-ended",a:"video-ended"},"2.46":{t:"`video:error`\r",p:`获取媒体数据时出错，或者资源类型不是受支持的媒体格式 +`,l:"advanced/event.html#video-error",a:"video-error"},"2.47":{t:"`video:loadeddata`\r",p:`media 中的首帧已经完成加载 +`,l:"advanced/event.html#video-loadeddata",a:"video-loadeddata"},"2.48":{t:"`video:loadedmetadata`\r",p:`已加载元数据 +`,l:"advanced/event.html#video-loadedmetadata",a:"video-loadedmetadata"},"2.49":{t:"`video:pause`\r",p:`播放已暂停 +`,l:"advanced/event.html#video-pause",a:"video-pause"},"2.50":{t:"`video:play`\r",p:`播放已开始 +`,l:"advanced/event.html#video-play",a:"video-play"},"2.51":{t:"`video:playing`\r",p:`由于缺乏数据而暂停或延迟后，播放准备开始 +`,l:"advanced/event.html#video-playing",a:"video-playing"},"2.52":{t:"`video:progress`\r",p:`在浏览器加载资源时周期性触发 +`,l:"advanced/event.html#video-progress",a:"video-progress"},"2.53":{t:"`video:ratechange`\r",p:`播放速率发生变化 +`,l:"advanced/event.html#video-ratechange",a:"video-ratechange"},"2.54":{t:"`video:seeked`\r",p:`跳帧（seek）操作完成 +`,l:"advanced/event.html#video-seeked",a:"video-seeked"},"2.55":{t:"`video:seeking`\r",p:`跳帧（seek）操作开始 +`,l:"advanced/event.html#video-seeking",a:"video-seeking"},"2.56":{t:"`video:stalled`\r",p:`用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现 +`,l:"advanced/event.html#video-stalled",a:"video-stalled"},"2.57":{t:"`video:suspend`\r",p:`媒体数据加载已暂停 +`,l:"advanced/event.html#video-suspend",a:"video-suspend"},"2.58":{t:"`video:timeupdate`\r",p:`currentTime 属性指定的时间发生变化 +`,l:"advanced/event.html#video-timeupdate",a:"video-timeupdate"},"2.59":{t:"`video:volumechange`\r",p:`音量发生变化 +`,l:"advanced/event.html#video-volumechange",a:"video-volumechange"},"2.60":{t:"`video:waiting`\r",p:`由于暂时缺少数据，播放已停止 +`,l:"advanced/event.html#video-waiting",a:"video-waiting"},"3.0":{t:"# 全局属性\r",p:`这里的 全局属性 也是指挂载在 构造函数 的 一级属性，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到 +`,l:"advanced/global.html",a:"全局属性"},"3.1":{t:"DEBUG\r",p:`是否开始 debug 模式，可以打印出视频全部的内置事件，默认关闭 +<div className="run- ...`,l:"advanced/global.html#debug",a:"debug"},"3.2":{t:"CONTEXTMENU\r",p:`是否开启右键菜单，默认开启 +<div className="run-code">▶ Run ...`,l:"advanced/global.html#contextmenu",a:"contextmenu"},"3.3":{t:"NOTICE_TIME\r",p:`提示信息的显示时长，单位为毫秒，默认为 2000 +<div className="run-code" ...`,l:"advanced/global.html#notice-time",a:"notice-time"},"3.4":{t:"SETTING_WIDTH\r",p:`设置面板的默认宽度，单位为像素，默认为 250 +<div className="run-code" ...`,l:"advanced/global.html#setting-width",a:"setting-width"},"3.5":{t:"SETTING_ITEM_WIDTH\r",p:`设置面板的设置项的默认宽度，单位为像素，默认为 200 +<div className="run-code&q ...`,l:"advanced/global.html#setting-item-width",a:"setting-item-width"},"3.6":{t:"SETTING_ITEM_HEIGHT\r",p:`设置面板的设置项的默认高度，单位为像素，默认为 35 +<div className="run-code&qu ...`,l:"advanced/global.html#setting-item-height",a:"setting-item-height"},"3.7":{t:"RESIZE_TIME\r",p:`resize 事件的节流时间，单位为毫秒，默认为 200 +<div className="run-code& ...`,l:"advanced/global.html#resize-time",a:"resize-time"},"3.8":{t:"SCROLL_TIME\r",p:`scroll 事件的节流时间，单位为毫秒，默认为 200 +<div className="run-code& ...`,l:"advanced/global.html#scroll-time",a:"scroll-time"},"3.9":{t:"SCROLL_GAP\r",p:`view 事件的边界容差距离，单位为像素，默认为 50 +<div className="run-code&q ...`,l:"advanced/global.html#scroll-gap",a:"scroll-gap"},"3.10":{t:"AUTO_PLAYBACK_MAX\r",p:`自动回放功能的最大记录数，默认为 10 +<div className="run-code"> ...`,l:"advanced/global.html#auto-playback-max",a:"auto-playback-max"},"3.11":{t:"AUTO_PLAYBACK_MIN\r",p:`自动回放功能的最小记录时长，单位为秒，默认为 5 +<div className="run-code" ...`,l:"advanced/global.html#auto-playback-min",a:"auto-playback-min"},"3.12":{t:"AUTO_PLAYBACK_TIMEOUT\r",p:`自动回放功能的隐藏延迟时长，单位为毫秒，默认为 3000 +<div className="run-code& ...`,l:"advanced/global.html#auto-playback-timeout",a:"auto-playback-timeout"},"3.13":{t:"RECONNECT_TIME_MAX\r",p:`发生连接错误时，自动连接的最大次数，默认为 5 +<div className="run-code" ...`,l:"advanced/global.html#reconnect-time-max",a:"reconnect-time-max"},"3.14":{t:"RECONNECT_SLEEP_TIME\r",p:`发生连接错误时，自动连接的延迟时间，单位为毫秒，默认为 1000 +<div className="run-c ...`,l:"advanced/global.html#reconnect-sleep-time",a:"reconnect-sleep-time"},"3.15":{t:"CONTROL_HIDE_TIME\r",p:`底部控制栏的自动隐藏的延迟时间，单位为毫秒，默认为 3000 +<div className="run-cod ...`,l:"advanced/global.html#control-hide-time",a:"control-hide-time"},"3.16":{t:"DBCLICK_TIME\r",p:`双击事件的延迟事件，单位为毫秒，默认为 300 +<div className="run-code" ...`,l:"advanced/global.html#dbclick-time",a:"dbclick-time"},"3.17":{t:"DBCLICK_FULLSCREEN\r",p:`在桌面端，是否双击切换全屏，默认为 true +<div className="run-code"& ...`,l:"advanced/global.html#dbclick-fullscreen",a:"dbclick-fullscreen"},"3.18":{t:"MOBILE_DBCLICK_PLAY\r",p:`在移动端，是否双击切换播放暂停，默认为 true +<div className="run-code" ...`,l:"advanced/global.html#mobile-dbclick-play",a:"mobile-dbclick-play"},"3.19":{t:"MOBILE_CLICK_PLAY\r",p:`在移动端，是否单击切换播放暂停，默认为 false +<div className="run-code&quo ...`,l:"advanced/global.html#mobile-click-play",a:"mobile-click-play"},"3.20":{t:"AUTO_ORIENTATION_TIME\r",p:`在移动端，自动旋屏的延迟时间，单位为毫秒，默认为 200 +<div className="run-code& ...`,l:"advanced/global.html#auto-orientation-time",a:"auto-orientation-time"},"3.21":{t:"INFO_LOOP_TIME\r",p:`信息面板的刷新时间，单位为毫秒，默认为 1000 +<div className="run-code" ...`,l:"advanced/global.html#info-loop-time",a:"info-loop-time"},"3.22":{t:"FAST_FORWARD_VALUE\r",p:`在移动端，长按加速的速率倍数，默认为 3 +<div className="run-code"> ...`,l:"advanced/global.html#fast-forward-value",a:"fast-forward-value"},"3.23":{t:"FAST_FORWARD_TIME\r",p:`在移动端，长按加速的延迟时间，单位为毫秒，默认为 1000 +<div className="run-code ...`,l:"advanced/global.html#fast-forward-time",a:"fast-forward-time"},"3.24":{t:"TOUCH_MOVE_RATIO\r",p:`在移动端，左右滑动进度的速率倍数，默认为 0.5 +<div className="run-code" ...`,l:"advanced/global.html#touch-move-ratio",a:"touch-move-ratio"},"3.25":{t:"VOLUME_STEP\r",p:`快捷键调节音量的幅度比例，默认为 0.1 +<div className="run-code"> ...`,l:"advanced/global.html#volume-step",a:"volume-step"},"3.26":{t:"SEEK_STEP\r",p:`快捷键调节播放进度的幅度，单位为秒，默认为 5 +<div className="run-code" ...`,l:"advanced/global.html#seek-step",a:"seek-step"},"3.27":{t:"PLAYBACK_RATE\r",p:`内置播放速率的列表，默认为 [0.5, 0.75, 1, 1.25, 1.5, 2] +<div className=& ...`,l:"advanced/global.html#playback-rate",a:"playback-rate"},"3.28":{t:"ASPECT_RATIO\r",p:`内置视频长宽比的列表，默认为 ['default', '4:3', '16:9'] +<div className=&q ...`,l:"advanced/global.html#aspect-ratio",a:"aspect-ratio"},"3.29":{t:"FLIP\r",p:`内置视频翻转的列表，默认为 ['normal', 'horizontal', 'vertical'] +<div cla ...`,l:"advanced/global.html#flip",a:"flip"},"3.30":{t:"FULLSCREEN_WEB_IN_BODY\r",p:`网页全屏时，是否把播放器挂在在 body 元素下，默认为 false +<div className="run ...`,l:"advanced/global.html#fullscreen-web-in-body",a:"fullscreen-web-in-body"},"3.31":{t:"LOG_VERSION\r",p:`设置是否打印播放器版本，默认为 true +<div className="run-code"> ...`,l:"advanced/global.html#log-version",a:"log-version"},"3.32":{t:"USE_RAF\r",p:`设置是否使用 requestAnimationFrame ，默认为 false，目前主要用于进度条的平滑效果 +<div ...`,l:"advanced/global.html#use-raf",a:"use-raf"},"4.0":{t:"# 编写插件\r",p:`但你已经知道播放器的属性, 方法和事件后，再编写插件是非常简单的事 可以在实例化的时候加载插件的函数 -<div cla ...`,l:"advanced/plugin.html",a:"编写插件"},"5.0":{t:"# 实例属性",p:`这里的 实例属性 是指挂载在 实例 的 一级属性，比较常用 -`,l:"advanced/property.html",a:"实例属性"},"5.1":{t:"`play`",p:` +<div cla ...`,l:"advanced/plugin.html",a:"编写插件"},"5.0":{t:"# 实例属性\r",p:`这里的 实例属性 是指挂载在 实例 的 一级属性，比较常用 +`,l:"advanced/property.html",a:"实例属性"},"5.1":{t:"`play`\r",p:` Type: Function 播放视频 -<div className="run-code"&g ...`,l:"advanced/property.html#play",a:"play"},"5.2":{t:"`pause`",p:` +<div className="run-code"&g ...`,l:"advanced/property.html#play",a:"play"},"5.2":{t:"`pause`\r",p:` Type: Function 暂停视频 -<div className="run-code"&g ...`,l:"advanced/property.html#pause",a:"pause"},"5.3":{t:"`toggle`",p:` +<div className="run-code"&g ...`,l:"advanced/property.html#pause",a:"pause"},"5.3":{t:"`toggle`\r",p:` Type: Function 切换视频的播放和暂停 -<div className="run-code&q ...`,l:"advanced/property.html#toggle",a:"toggle"},"5.4":{t:"`destroy`",p:` +<div className="run-code&q ...`,l:"advanced/property.html#toggle",a:"toggle"},"5.4":{t:"`destroy`\r",p:` Type: Function Parameter: Boolean -销毁播放器，接受一个参数表示是否销毁后同时移除播放器 ...`,l:"advanced/property.html#destroy",a:"destroy"},"5.5":{t:"`seek`",p:` +销毁播放器，接受一个参数表示是否销毁后同时移除播放器 ...`,l:"advanced/property.html#destroy",a:"destroy"},"5.5":{t:"`seek`\r",p:` Type: Setter Parameter: Number 视频时间跳转，单位秒 -<div className= ...`,l:"advanced/property.html#seek",a:"seek"},"5.6":{t:"`forward`",p:` +<div className= ...`,l:"advanced/property.html#seek",a:"seek"},"5.6":{t:"`forward`\r",p:` Type: Setter Parameter: Number 视频时间快进，单位秒 -<div className= ...`,l:"advanced/property.html#forward",a:"forward"},"5.7":{t:"`backward`",p:` +<div className= ...`,l:"advanced/property.html#forward",a:"forward"},"5.7":{t:"`backward`\r",p:` Type: Setter Parameter: Number 视频时间快退，单位秒 -<div className= ...`,l:"advanced/property.html#backward",a:"backward"},"5.8":{t:"`volume`",p:` +<div className= ...`,l:"advanced/property.html#backward",a:"backward"},"5.8":{t:"`volume`\r",p:` Type: Setter/Getter Parameter: Number 设置和获取视频音量，范围在：[0, 1] -& ...`,l:"advanced/property.html#volume",a:"volume"},"5.9":{t:"`url`",p:` +& ...`,l:"advanced/property.html#volume",a:"volume"},"5.9":{t:"`url`\r",p:` Type: Setter/Getter Parameter: String 设置和获取视频地址 -<div clas ...`,l:"advanced/property.html#url",a:"url"},"5.10":{t:"`switch`",p:` +<div clas ...`,l:"advanced/property.html#url",a:"url"},"5.10":{t:"`switch`\r",p:` Type: Setter Parameter: String -设置视频地址，设置时和 art.url 类似，但会执行一些 ...`,l:"advanced/property.html#switch",a:"switch"},"5.11":{t:"`switchUrl`",p:` +设置视频地址，设置时和 art.url 类似，但会执行一些 ...`,l:"advanced/property.html#switch",a:"switch"},"5.11":{t:"`switchUrl`\r",p:` Type: Function Parameter: String -设置视频地址，设置时和 art.url 类似，但会执行 ...`,l:"advanced/property.html#switchurl",a:"switchurl"},"5.12":{t:"`switchQuality`",p:` +设置视频地址，设置时和 art.url 类似，但会执行 ...`,l:"advanced/property.html#switchurl",a:"switchurl"},"5.12":{t:"`switchQuality`\r",p:` Type: Function Parameter: String -设置视频画质地址，和 art.switchUrl 类似 ...`,l:"advanced/property.html#switchquality",a:"switchquality"},"5.13":{t:"`muted`",p:` +设置视频画质地址，和 art.switchUrl 类似 ...`,l:"advanced/property.html#switchquality",a:"switchquality"},"5.13":{t:"`muted`\r",p:` Type: Setter/Getter Parameter: Boolean 设置和获取视频是否静音 -<div c ...`,l:"advanced/property.html#muted",a:"muted"},"5.14":{t:"`currentTime`",p:` +<div c ...`,l:"advanced/property.html#muted",a:"muted"},"5.14":{t:"`currentTime`\r",p:` Type: Setter/Getter Parameter: Number -设置和获取视频当前时间，设置时间时和 see ...`,l:"advanced/property.html#currenttime",a:"currenttime"},"5.15":{t:"`duration`",p:` +设置和获取视频当前时间，设置时间时和 see ...`,l:"advanced/property.html#currenttime",a:"currenttime"},"5.15":{t:"`duration`\r",p:` Type: Getter 获取视频时长 -<div className="run-code"&g ...`,l:"advanced/property.html#duration",a:"duration"},"5.16":{t:"`screenshot`",p:` +<div className="run-code"&g ...`,l:"advanced/property.html#duration",a:"duration"},"5.16":{t:"`screenshot`\r",p:` Type: Function 下载当前视频帧的截图 -<div className="run-code&q ...`,l:"advanced/property.html#screenshot",a:"screenshot"},"5.17":{t:"`getDataURL`",p:` +<div className="run-code&q ...`,l:"advanced/property.html#screenshot",a:"screenshot"},"5.17":{t:"`getDataURL`\r",p:` Type: Function 获取当前视频帧的截图的base64地址，返回的是一个 Promise -<div cl ...`,l:"advanced/property.html#getdataurl",a:"getdataurl"},"5.18":{t:"`getBlobUrl`",p:` +<div cl ...`,l:"advanced/property.html#getdataurl",a:"getdataurl"},"5.18":{t:"`getBlobUrl`\r",p:` Type: Function 获取当前视频帧的截图的blob地址，返回的是一个 Promise -<div clas ...`,l:"advanced/property.html#getbloburl",a:"getbloburl"},"5.19":{t:"`fullscreen`",p:` +<div clas ...`,l:"advanced/property.html#getbloburl",a:"getbloburl"},"5.19":{t:"`fullscreen`\r",p:` Type: Setter/Getter Parameter: Boolean 设置和获取播放器窗口全屏 -<div ...`,l:"advanced/property.html#fullscreen",a:"fullscreen"},"5.20":{t:"`fullscreenWeb`",p:` +<div ...`,l:"advanced/property.html#fullscreen",a:"fullscreen"},"5.20":{t:"`fullscreenWeb`\r",p:` Type: Setter/Getter Parameter: Boolean 设置和获取播放器网页全屏 -<div ...`,l:"advanced/property.html#fullscreenweb",a:"fullscreenweb"},"5.21":{t:"`pip`",p:` +<div ...`,l:"advanced/property.html#fullscreenweb",a:"fullscreenweb"},"5.21":{t:"`pip`\r",p:` Type: Setter/Getter Parameter: Boolean 设置和获取播放器画中画模式 -<div ...`,l:"advanced/property.html#pip",a:"pip"},"5.22":{t:"`poster`",p:` +<div ...`,l:"advanced/property.html#pip",a:"pip"},"5.22":{t:"`poster`\r",p:` Type: Setter/Getter Parameter: String -设置和获取视频海报，只有在视频播放前才能看到 ...`,l:"advanced/property.html#poster",a:"poster"},"5.23":{t:"`mini`",p:` +设置和获取视频海报，只有在视频播放前才能看到 ...`,l:"advanced/property.html#poster",a:"poster"},"5.23":{t:"`mini`\r",p:` Type: Setter/Getter Parameter: Boolean 设置和获取播放器迷你模式 -<div ...`,l:"advanced/property.html#mini",a:"mini"},"5.24":{t:"`playing`",p:` +<div ...`,l:"advanced/property.html#mini",a:"mini"},"5.24":{t:"`playing`\r",p:` Type: Getter Parameter: Boolean 获取视频是否正在播放中 -<div classNam ...`,l:"advanced/property.html#playing",a:"playing"},"5.25":{t:"`autoSize`",p:` +<div classNam ...`,l:"advanced/property.html#playing",a:"playing"},"5.25":{t:"`autoSize`\r",p:` Type: Function 设置视频是否自适应尺寸 -<div className="run-code& ...`,l:"advanced/property.html#autosize",a:"autosize"},"5.26":{t:"`rect`",p:` +<div className="run-code& ...`,l:"advanced/property.html#autosize",a:"autosize"},"5.26":{t:"`rect`\r",p:` Type: Getter 获取播放器的尺寸和坐标信息 -<div className="run-code& ...`,l:"advanced/property.html#rect",a:"rect"},"5.27":{t:"`flip`",p:` +<div className="run-code& ...`,l:"advanced/property.html#rect",a:"rect"},"5.27":{t:"`flip`\r",p:` Type: Setter/Getter Parameter: String -设置和获取播放器翻转，支持normal, ...`,l:"advanced/property.html#flip",a:"flip"},"5.28":{t:"`playbackRate`",p:` +设置和获取播放器翻转，支持normal, ...`,l:"advanced/property.html#flip",a:"flip"},"5.28":{t:"`playbackRate`\r",p:` Type: Setter/Getter Parameter: Number 设置和获取播放器播放速度 -<div c ...`,l:"advanced/property.html#playbackrate",a:"playbackrate"},"5.29":{t:"`aspectRatio`",p:` +<div c ...`,l:"advanced/property.html#playbackrate",a:"playbackrate"},"5.29":{t:"`aspectRatio`\r",p:` Type: Setter/Getter Parameter: String 设置和获取播放器长宽比 -<div cl ...`,l:"advanced/property.html#aspectratio",a:"aspectratio"},"5.30":{t:"`autoHeight`",p:` +<div cl ...`,l:"advanced/property.html#aspectratio",a:"aspectratio"},"5.30":{t:"`autoHeight`\r",p:` Type: Function 当容器只有宽度，该属性可以自动计算出并设置视频的高度 -<div className= ...`,l:"advanced/property.html#autoheight",a:"autoheight"},"5.31":{t:"`attr`",p:` +<div className= ...`,l:"advanced/property.html#autoheight",a:"autoheight"},"5.31":{t:"`attr`\r",p:` Type: Function Parameter: String 动态获取和设置 video 元素的属性 -<div ...`,l:"advanced/property.html#attr",a:"attr"},"5.32":{t:"`type`",p:` +<div ...`,l:"advanced/property.html#attr",a:"attr"},"5.32":{t:"`type`\r",p:` Type: Setter/Getter Parameter: String 动态获取和设置视频类型 -<div cl ...`,l:"advanced/property.html#type",a:"type"},"5.33":{t:"`theme`",p:` +<div cl ...`,l:"advanced/property.html#type",a:"type"},"5.33":{t:"`theme`\r",p:` Type: Setter/Getter Parameter: String 动态获取和设置播放器主题颜色 -<div ...`,l:"advanced/property.html#theme",a:"theme"},"5.34":{t:"`airplay`",p:` +<div ...`,l:"advanced/property.html#theme",a:"theme"},"5.34":{t:"`airplay`\r",p:` Type: Function 开启隔空播放 -<div className="run-code" ...`,l:"advanced/property.html#airplay",a:"airplay"},"5.35":{t:"`loaded`",p:` +<div className="run-code" ...`,l:"advanced/property.html#airplay",a:"airplay"},"5.35":{t:"`loaded`\r",p:` Type: Getter 视频缓存的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用 -&l ...`,l:"advanced/property.html#loaded",a:"loaded"},"5.36":{t:"`played`",p:` +&l ...`,l:"advanced/property.html#loaded",a:"loaded"},"5.36":{t:"`played`\r",p:` Type: Getter 视频播放的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用 -&l ...`,l:"advanced/property.html#played",a:"played"},"5.37":{t:"`proxy`",p:` +&l ...`,l:"advanced/property.html#played",a:"played"},"5.37":{t:"`proxy`\r",p:` Type: Function -DOM 事件的代理函数，实质上代理了 addEventListener 和 removeE ...`,l:"advanced/property.html#proxy",a:"proxy"},"5.38":{t:"`query`",p:` +DOM 事件的代理函数，实质上代理了 addEventListener 和 removeE ...`,l:"advanced/property.html#proxy",a:"proxy"},"5.38":{t:"`query`\r",p:` Type: Function -DOM 的查询函数，类似 document.querySelector，但被查询的对象局限 ...`,l:"advanced/property.html#query",a:"query"},"5.39":{t:"`video`",p:` +DOM 的查询函数，类似 document.querySelector，但被查询的对象局限 ...`,l:"advanced/property.html#query",a:"query"},"5.39":{t:"`video`\r",p:` Type: Element 快捷返回播放器的 video 元素 -<div className="run- ...`,l:"advanced/property.html#video",a:"video"},"5.40":{t:"`cssVar`",p:` +<div className="run- ...`,l:"advanced/property.html#video",a:"video"},"5.40":{t:"`cssVar`\r",p:` Type: Function 动态获取或设置 css 变量 -<div className="run-co ...`,l:"advanced/property.html#cssvar",a:"cssvar"},"5.41":{t:"`quality`",p:` +<div className="run-co ...`,l:"advanced/property.html#cssvar",a:"cssvar"},"5.41":{t:"`quality`\r",p:` Type: Setter Parameter: Array 动态设置画质列表 -<div className=&qu ...`,l:"advanced/property.html#quality",a:"quality"},"6.0":{t:"# 右键菜单",p:"",l:"component/contextmenu.html",a:"右键菜单"},"6.1":{t:"配置",p:` +<div className=&qu ...`,l:"advanced/property.html#quality",a:"quality"},"6.0":{t:"# 右键菜单\r",p:"\r",l:"component/contextmenu.html",a:"右键菜单"},"6.1":{t:"配置\r",p:` 属性 @@ -356,7 +356,7 @@ Boolean name String -组件唯一名称，用于 ...`,l:"component/contextmenu.html#配置",a:"配置"},"6.2":{t:"创建",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/contextmenu.html#创建",a:"创建"},"6.3":{t:"添加",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/contextmenu.html#添加",a:"添加"},"6.4":{t:"删除",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/contextmenu.html#删除",a:"删除"},"6.5":{t:"更新",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/contextmenu.html#更新",a:"更新"},"7.0":{t:"# 控制器",p:"",l:"component/controls.html",a:"控制器"},"7.1":{t:"配置",p:` +组件唯一名称，用于 ...`,l:"component/contextmenu.html#配置",a:"配置"},"6.2":{t:"创建\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/contextmenu.html#创建",a:"创建"},"6.3":{t:"添加\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/contextmenu.html#添加",a:"添加"},"6.4":{t:"删除\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/contextmenu.html#删除",a:"删除"},"6.5":{t:"更新\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/contextmenu.html#更新",a:"更新"},"7.0":{t:"# 控制器\r",p:"\r",l:"component/controls.html",a:"控制器"},"7.1":{t:"配置\r",p:` 属性 @@ -373,7 +373,7 @@ Boolean name String -组件唯一名称，用于 ...`,l:"component/controls.html#配置",a:"配置"},"7.2":{t:"创建",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/controls.html#创建",a:"创建"},"7.3":{t:"添加",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/controls.html#添加",a:"添加"},"7.4":{t:"删除",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/controls.html#删除",a:"删除"},"7.5":{t:"更新",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/controls.html#更新",a:"更新"},"8.0":{t:"# 业务层",p:"",l:"component/layers.html",a:"业务层"},"8.1":{t:"配置",p:` +组件唯一名称，用于 ...`,l:"component/controls.html#配置",a:"配置"},"7.2":{t:"创建\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/controls.html#创建",a:"创建"},"7.3":{t:"添加\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/controls.html#添加",a:"添加"},"7.4":{t:"删除\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/controls.html#删除",a:"删除"},"7.5":{t:"更新\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/controls.html#更新",a:"更新"},"8.0":{t:"# 业务层\r",p:"\r",l:"component/layers.html",a:"业务层"},"8.1":{t:"配置\r",p:` 属性 @@ -390,7 +390,7 @@ Boolean name String -组件唯一名称，用于 ...`,l:"component/layers.html#配置",a:"配置"},"8.2":{t:"创建",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/layers.html#创建",a:"创建"},"8.3":{t:"添加",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/layers.html#添加",a:"添加"},"8.4":{t:"删除",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/layers.html#删除",a:"删除"},"8.5":{t:"更新",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/layers.html#更新",a:"更新"},"9.0":{t:"# 设置面板",p:"",l:"component/setting.html",a:"设置面板"},"9.1":{t:"内置",p:"须先打开设置面板，然后自带四个内置项：flip, playbackRate, aspectRatio, subtitleOf ...",l:"component/setting.html#内置",a:"内置"},"9.2":{t:"创建 - 选择列表",p:` +组件唯一名称，用于 ...`,l:"component/layers.html#配置",a:"配置"},"8.2":{t:"创建\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/layers.html#创建",a:"创建"},"8.3":{t:"添加\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/layers.html#添加",a:"添加"},"8.4":{t:"删除\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/layers.html#删除",a:"删除"},"8.5":{t:"更新\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/layers.html#更新",a:"更新"},"9.0":{t:"# 设置面板\r",p:"\r",l:"component/setting.html",a:"设置面板"},"9.1":{t:"内置\r",p:"须先打开设置面板，然后自带四个内置项：flip, playbackRate, aspectRatio, subtitleOf ...",l:"component/setting.html#内置",a:"内置"},"9.2":{t:"创建 - 选择列表\r",p:` 属性 @@ -406,7 +406,7 @@ String, Element icon -String, El ...`,l:"component/setting.html#创建-选择列表",a:"创建-选择列表"},"9.3":{t:"创建 - 列表嵌套",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/setting.html#创建-列表嵌套",a:"创建-列表嵌套"},"9.4":{t:"创建 - 切换按钮",p:` +String, El ...`,l:"component/setting.html#创建-选择列表",a:"创建-选择列表"},"9.3":{t:"创建 - 列表嵌套\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/setting.html#创建-列表嵌套",a:"创建-列表嵌套"},"9.4":{t:"创建 - 切换按钮\r",p:` 属性 @@ -422,7 +422,7 @@ String, Element icon -String, ...`,l:"component/setting.html#创建-切换按钮",a:"创建-切换按钮"},"9.5":{t:"创建 - 范围滑块",p:` +String, ...`,l:"component/setting.html#创建-切换按钮",a:"创建-切换按钮"},"9.5":{t:"创建 - 范围滑块\r",p:` 属性 @@ -438,246 +438,246 @@ String, Element icon -String, ...`,l:"component/setting.html#创建-范围滑块",a:"创建-范围滑块"},"9.6":{t:"添加",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/setting.html#添加",a:"添加"},"9.7":{t:"删除",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/setting.html#删除",a:"删除"},"9.8":{t:"更新",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/setting.html#更新",a:"更新"},"10.0":{t:"# Advanced Properties",p:"The advanced properties here refer to the secondary attributes ...",l:"en/advanced/built-in.html",a:"advanced-properties"},"10.1":{t:"`option`",p:`Options for the player -<div className="run-code"& ...`,l:"en/advanced/built-in.html#option",a:"option"},"10.2":{t:"`template`",p:`Manages all of the DOM elements of the player -<div classNam ...`,l:"en/advanced/built-in.html#template",a:"template"},"10.3":{t:"`events`",p:"Manages all DOM events in the player, which is essentially a p ...",l:"en/advanced/built-in.html#events",a:"events"},"10.4":{t:"`storage`",p:`Manages the local storage of the player +String, ...`,l:"component/setting.html#创建-范围滑块",a:"创建-范围滑块"},"9.6":{t:"添加\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/setting.html#添加",a:"添加"},"9.7":{t:"删除\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/setting.html#删除",a:"删除"},"9.8":{t:"更新\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/setting.html#更新",a:"更新"},"10.0":{t:"# Advanced Properties\r",p:"The advanced properties here refer to the secondary attributes ...",l:"en/advanced/built-in.html",a:"advanced-properties"},"10.1":{t:"`option`\r",p:`Options for the player +<div className="run-code"& ...`,l:"en/advanced/built-in.html#option",a:"option"},"10.2":{t:"`template`\r",p:`Manages all of the DOM elements of the player +<div classNam ...`,l:"en/advanced/built-in.html#template",a:"template"},"10.3":{t:"`events`\r",p:"Manages all DOM events in the player, which is essentially a p ...",l:"en/advanced/built-in.html#events",a:"events"},"10.4":{t:"`storage`\r",p:`Manages the local storage of the player -The name attribute is ...`,l:"en/advanced/built-in.html#storage",a:"storage"},"10.5":{t:"`icons`",p:`Manage all the svg icons of the player -<div className=" ...`,l:"en/advanced/built-in.html#icons",a:"icons"},"10.6":{t:"`i18n`",p:`Manage the player's i18n +The name attribute is ...`,l:"en/advanced/built-in.html#storage",a:"storage"},"10.5":{t:"`icons`\r",p:`Manage all the svg icons of the player +<div className=" ...`,l:"en/advanced/built-in.html#icons",a:"icons"},"10.6":{t:"`i18n`\r",p:`Manage the player's i18n -The get method is used to retrieve t ...`,l:"en/advanced/built-in.html#i18n",a:"i18n"},"10.7":{t:"`notice`",p:"Manage the player's notices, there's only one show property us ...",l:"en/advanced/built-in.html#notice",a:"notice"},"10.8":{t:"`layers`",p:`Manage the layers of the player +The get method is used to retrieve t ...`,l:"en/advanced/built-in.html#i18n",a:"i18n"},"10.7":{t:"`notice`\r",p:"Manage the player's notices, there's only one show property us ...",l:"en/advanced/built-in.html#notice",a:"notice"},"10.8":{t:"`layers`\r",p:`Manage the layers of the player -The add method is used for dy ...`,l:"en/advanced/built-in.html#layers",a:"layers"},"10.9":{t:"`controls`",p:`Manage the player's controllers +The add method is used for dy ...`,l:"en/advanced/built-in.html#layers",a:"layers"},"10.9":{t:"`controls`\r",p:`Manage the player's controllers -add method is used to dynamic ...`,l:"en/advanced/built-in.html#controls",a:"controls"},"10.10":{t:"`contextmenu`",p:`Manage the right-click context menu of the player +add method is used to dynamic ...`,l:"en/advanced/built-in.html#controls",a:"controls"},"10.10":{t:"`contextmenu`\r",p:`Manage the right-click context menu of the player -The add met ...`,l:"en/advanced/built-in.html#contextmenu",a:"contextmenu"},"10.11":{t:"`subtitle`",p:`Manage the subtitle features of the player +The add met ...`,l:"en/advanced/built-in.html#contextmenu",a:"contextmenu"},"10.11":{t:"`subtitle`\r",p:`Manage the subtitle features of the player -url property sets ...`,l:"en/advanced/built-in.html#subtitle",a:"subtitle"},"10.12":{t:"`loading`",p:`Manage the loading layer of the player +url property sets ...`,l:"en/advanced/built-in.html#subtitle",a:"subtitle"},"10.12":{t:"`loading`\r",p:`Manage the loading layer of the player -show property is used ...`,l:"en/advanced/built-in.html#loading",a:"loading"},"10.13":{t:"`hotkey`",p:`Manage the hotkey functionality of the player +show property is used ...`,l:"en/advanced/built-in.html#loading",a:"loading"},"10.13":{t:"`hotkey`\r",p:`Manage the hotkey functionality of the player -The add method ...`,l:"en/advanced/built-in.html#hotkey",a:"hotkey"},"10.14":{t:"`mask`",p:`Manage the player's mask layer +The add method ...`,l:"en/advanced/built-in.html#hotkey",a:"hotkey"},"10.14":{t:"`mask`\r",p:`Manage the player's mask layer -show property is used to set w ...`,l:"en/advanced/built-in.html#mask",a:"mask"},"10.15":{t:"`setting`",p:`Manage the player's settings panel +show property is used to set w ...`,l:"en/advanced/built-in.html#mask",a:"mask"},"10.15":{t:"`setting`\r",p:`Manage the player's settings panel -add method is used to dyna ...`,l:"en/advanced/built-in.html#setting",a:"setting"},"10.16":{t:"`plugins`",p:"Manage the player's plugin features, with only one method add ...",l:"en/advanced/built-in.html#plugins",a:"plugins"},"11.0":{t:"# Static Properties",p:"Here, Static Properties refer to the first-level properties mo ...",l:"en/advanced/class.html",a:"static-properties"},"11.1":{t:"`instances`",p:"Returns an array of all player instances. You can use this pro ...",l:"en/advanced/class.html#instances",a:"instances"},"11.2":{t:"`version`",p:`Returns the version information of the player. -<div classNa ...`,l:"en/advanced/class.html#version",a:"version"},"11.3":{t:"`env`",p:`Returns the environment variables of the player. -<div class ...`,l:"en/advanced/class.html#env",a:"env"},"11.4":{t:"`build`",p:`Returns the build time of the player -<div className="r ...`,l:"en/advanced/class.html#build",a:"build"},"11.5":{t:"`config`",p:`Returns the default configuration of the video -<div classNa ...`,l:"en/advanced/class.html#config",a:"config"},"11.6":{t:"`utils`",p:`Returns a collection of utility functions for the player -<d ...`,l:"en/advanced/class.html#utils",a:"utils"},"11.7":{t:"`scheme`",p:`Returns the validation scheme for the player options -<div c ...`,l:"en/advanced/class.html#scheme",a:"scheme"},"11.8":{t:"`Emitter`",p:`Returns the constructor for the event dispatcher -<div class ...`,l:"en/advanced/class.html#emitter",a:"emitter"},"11.9":{t:"`validator`",p:`Returns the validation function for options -<div className= ...`,l:"en/advanced/class.html#validator",a:"validator"},"11.10":{t:"`kindOf`",p:`Returns the function tool for type checking -<div className= ...`,l:"en/advanced/class.html#kindof",a:"kindof"},"11.11":{t:"`html`",p:`Returns the html string required for the player -<div classN ...`,l:"en/advanced/class.html#html",a:"html"},"11.12":{t:"`option`",p:`Returns the player's default options -<div className="r ...`,l:"en/advanced/class.html#option",a:"option"},"12.0":{t:"# Example Events",p:"Player events are divided into two types, one is the video's n ...",l:"en/advanced/event.html",a:"example-events"},"12.1":{t:"`ready`",p:`Triggered when the player is able to play for the first time -& ...`,l:"en/advanced/event.html#ready",a:"ready"},"12.2":{t:"`restart`",p:"Triggered when the player switches the address and is able to ...",l:"en/advanced/event.html#restart",a:"restart"},"12.3":{t:"`pause`",p:`Triggered when the player is paused -<div className="ru ...`,l:"en/advanced/event.html#pause",a:"pause"},"12.4":{t:"`play`",p:`Triggered when the player starts playing -<div className=&qu ...`,l:"en/advanced/event.html#play",a:"play"},"12.5":{t:"`hotkey`",p:`Triggered when a hotkey on the player is pressed -<div class ...`,l:"en/advanced/event.html#hotkey",a:"hotkey"},"12.6":{t:"`destroy`",p:`Triggered when the player is destroyed -<div className=" ...`,l:"en/advanced/event.html#destroy",a:"destroy"},"12.7":{t:"`focus`",p:`Triggered when the player gains focus -<div className=" ...`,l:"en/advanced/event.html#focus",a:"focus"},"12.8":{t:"`blur`",p:`Triggered when the player loses focus -<div className=" ...`,l:"en/advanced/event.html#blur",a:"blur"},"12.9":{t:"`dblclick`",p:`Triggered when the player is double-clicked -<div className= ...`,l:"en/advanced/event.html#dblclick",a:"dblclick"},"12.10":{t:"`click`",p:`Triggered when the player is clicked -<div className="r ...`,l:"en/advanced/event.html#click",a:"click"},"12.11":{t:"`error`",p:"Triggered when an error occurs while the player is loading the ...",l:"en/advanced/event.html#error",a:"error"},"12.12":{t:"`hover`",p:"Triggered when the player is hovered or unhovered by the mouse ...",l:"en/advanced/event.html#hover",a:"hover"},"12.13":{t:"`mousemove`",p:`Triggered when the mouse moves over the player -<div classNa ...`,l:"en/advanced/event.html#mousemove",a:"mousemove"},"12.14":{t:"`resize`",p:`Triggered when the player size changes -<div className=" ...`,l:"en/advanced/event.html#resize",a:"resize"},"12.15":{t:"`view`",p:`Triggered when the player appears in the viewport -<div clas ...`,l:"en/advanced/event.html#view",a:"view"},"12.16":{t:"`lock`",p:`On mobile, triggered when the locked state changes -<div cla ...`,l:"en/advanced/event.html#lock",a:"lock"},"12.17":{t:"`aspectRatio`",p:`Triggered when the aspect ratio of the player changes -<div ...`,l:"en/advanced/event.html#aspectratio",a:"aspectratio"},"12.18":{t:"`autoHeight`",p:`Triggered when the player automatically sets the height -<di ...`,l:"en/advanced/event.html#autoheight",a:"autoheight"},"12.19":{t:"`autoSize`",p:`Triggered when the player automatically sets the size -<div ...`,l:"en/advanced/event.html#autosize",a:"autosize"},"12.20":{t:"`flip`",p:`Triggered when the player flips -<div className="run-co ...`,l:"en/advanced/event.html#flip",a:"flip"},"12.21":{t:"`fullscreen`",p:`Triggered when the player goes into full screen -<div classN ...`,l:"en/advanced/event.html#fullscreen",a:"fullscreen"},"12.22":{t:"`fullscreenWeb`",p:`Triggered when the player enters web fullscreen -<div classN ...`,l:"en/advanced/event.html#fullscreenweb",a:"fullscreenweb"},"12.23":{t:"`mini`",p:`Triggered when the player enters mini mode -<div className=& ...`,l:"en/advanced/event.html#mini",a:"mini"},"12.24":{t:"`pip`",p:`Triggered when the player enters Picture-in-Picture mode -<d ...`,l:"en/advanced/event.html#pip",a:"pip"},"12.25":{t:"`screenshot`",p:`Triggered when the player takes a screenshot -<div className ...`,l:"en/advanced/event.html#screenshot",a:"screenshot"},"12.26":{t:"`seek`",p:`Triggered when the player jumps in time -<div className=&quo ...`,l:"en/advanced/event.html#seek",a:"seek"},"12.27":{t:"`subtitleOffset`",p:`Triggered when the subtitle offset occurs in the player -<di ...`,l:"en/advanced/event.html#subtitleoffset",a:"subtitleoffset"},"12.28":{t:"`subtitleUpdate`",p:`Triggered when the subtitle updates -<div className="ru ...`,l:"en/advanced/event.html#subtitleupdate",a:"subtitleupdate"},"12.29":{t:"`subtitleLoad`",p:`Triggered when the subtitle loads -<div className="run- ...`,l:"en/advanced/event.html#subtitleload",a:"subtitleload"},"12.30":{t:"`subtitleSwitch`",p:`Triggered when subtitles switch -<div className="run-co ...`,l:"en/advanced/event.html#subtitleswitch",a:"subtitleswitch"},"12.31":{t:"`info`",p:`Triggered when the information panel is shown or hidden -<di ...`,l:"en/advanced/event.html#info",a:"info"},"12.32":{t:"`layer`",p:`Triggered when a custom layer is shown or hidden -<div class ...`,l:"en/advanced/event.html#layer",a:"layer"},"12.33":{t:"`loading`",p:`Triggered when a loader is shown or hidden -<div className=& ...`,l:"en/advanced/event.html#loading",a:"loading"},"12.34":{t:"`mask`",p:`Triggered when a mask layer is shown or hidden -<div classNa ...`,l:"en/advanced/event.html#mask",a:"mask"},"12.35":{t:"`subtitle`",p:`Triggered when the subtitle layer is shown or hidden -<div c ...`,l:"en/advanced/event.html#subtitle",a:"subtitle"},"12.36":{t:"`contextmenu`",p:`Triggered when the right-click menu is shown or hidden -<div ...`,l:"en/advanced/event.html#contextmenu",a:"contextmenu"},"12.37":{t:"`control`",p:`Triggered when the controller is shown or hidden -<div class ...`,l:"en/advanced/event.html#control",a:"control"},"12.38":{t:"`setting`",p:`Triggered when the settings panel is shown or hidden -<div c ...`,l:"en/advanced/event.html#setting",a:"setting"},"12.39":{t:"`muted`",p:`Triggered when the muted state changes -<div className=" ...`,l:"en/advanced/event.html#muted",a:"muted"},"12.40":{t:"`video:canplay`",p:"The browser can play the media file, but estimates there is no ...",l:"en/advanced/event.html#video-canplay",a:"video-canplay"},"12.41":{t:"`video:canplaythrough`",p:"The browser estimates it can play the media through to the end ...",l:"en/advanced/event.html#video-canplaythrough",a:"video-canplaythrough"},"12.42":{t:"`video:complete`",p:`OfflineAudioContext rendering is complete -`,l:"en/advanced/event.html#video-complete",a:"video-complete"},"12.43":{t:"`video:durationchange`",p:`Triggered when the value of the duration property changes -`,l:"en/advanced/event.html#video-durationchange",a:"video-durationchange"},"12.44":{t:"`video:emptied`",p:"The media content becomes empty; for example, when this media ...",l:"en/advanced/event.html#video-emptied",a:"video-emptied"},"12.45":{t:"`video:ended`",p:`The video has stopped because the media reached the end point -`,l:"en/advanced/event.html#video-ended",a:"video-ended"},"12.46":{t:"`video:error`",p:"An error occurred while fetching media data, or the resource t ...",l:"en/advanced/event.html#video-error",a:"video-error"},"12.47":{t:"`video:loadeddata`",p:`The first frame of the media has finished loading -`,l:"en/advanced/event.html#video-loadeddata",a:"video-loadeddata"},"12.48":{t:"`video:loadedmetadata`",p:`Metadata has been loaded -`,l:"en/advanced/event.html#video-loadedmetadata",a:"video-loadedmetadata"},"12.49":{t:"`video:pause`",p:`Playback has been paused -`,l:"en/advanced/event.html#video-pause",a:"video-pause"},"12.50":{t:"`video:play`",p:`Playback has started -`,l:"en/advanced/event.html#video-play",a:"video-play"},"12.51":{t:"`video:playing`",p:"Playback is ready to start following a pause or delay due to l ...",l:"en/advanced/event.html#video-playing",a:"video-playing"},"12.52":{t:"`video:progress`",p:`Periodically triggered while the browser is loading resources -`,l:"en/advanced/event.html#video-progress",a:"video-progress"},"12.53":{t:"`video:ratechange`",p:`The playback rate has changed -`,l:"en/advanced/event.html#video-ratechange",a:"video-ratechange"},"12.54":{t:"`video:seeked`",p:`A seek (frame skipping) operation has completed -`,l:"en/advanced/event.html#video-seeked",a:"video-seeked"},"12.55":{t:"`video:seeking`",p:`A seek (frame skipping) operation has started -`,l:"en/advanced/event.html#video-seeking",a:"video-seeking"},"12.56":{t:"`video:stalled`",p:"The user agent is trying to fetch media data, but the data une ...",l:"en/advanced/event.html#video-stalled",a:"video-stalled"},"12.57":{t:"`video:suspend`",p:`Media data loading has been suspended -`,l:"en/advanced/event.html#video-suspend",a:"video-suspend"},"12.58":{t:"`video:timeupdate`",p:`The time specified by the currentTime attribute has changed -`,l:"en/advanced/event.html#video-timeupdate",a:"video-timeupdate"},"12.59":{t:"`video:volumechange`",p:`Volume changed -`,l:"en/advanced/event.html#video-volumechange",a:"video-volumechange"},"12.60":{t:"`video:waiting`",p:`Playback has stopped due to temporarily missing data -`,l:"en/advanced/event.html#video-waiting",a:"video-waiting"},"13.0":{t:"# Global Attributes",p:"Here, Global Attributes refer to the first-level properties mo ...",l:"en/advanced/global.html",a:"global-attributes"},"13.1":{t:"DEBUG",p:"Whether to start debug mode, which can print out all built-in ...",l:"en/advanced/global.html#debug",a:"debug"},"13.2":{t:"CONTEXTMENU",p:"Whether to enable the right-click context menu, enabled by def ...",l:"en/advanced/global.html#contextmenu",a:"contextmenu"},"13.3":{t:"NOTICE_TIME",p:"The display duration of the notification message, in milliseco ...",l:"en/advanced/global.html#notice-time",a:"notice-time"},"13.4":{t:"SETTING_WIDTH",p:"The default width of the settings panel, in pixels, defaults t ...",l:"en/advanced/global.html#setting-width",a:"setting-width"},"13.5":{t:"SETTING_ITEM_WIDTH",p:"Set the default width of the settings items in the panel, in p ...",l:"en/advanced/global.html#setting-item-width",a:"setting-item-width"},"13.6":{t:"SETTING_ITEM_HEIGHT",p:"Set the default height of the settings items in the panel, in ...",l:"en/advanced/global.html#setting-item-height",a:"setting-item-height"},"13.7":{t:"RESIZE_TIME",p:"Throttle time for the resize event, in milliseconds, defaults ...",l:"en/advanced/global.html#resize-time",a:"resize-time"},"13.8":{t:"SCROLL_TIME",p:"Throttle time for the scroll event, in milliseconds, defaults ...",l:"en/advanced/global.html#scroll-time",a:"scroll-time"},"13.9":{t:"SCROLL_GAP",p:"The boundary tolerance distance for the view event, in pixels, ...",l:"en/advanced/global.html#scroll-gap",a:"scroll-gap"},"13.10":{t:"AUTO_PLAYBACK_MAX",p:"The maximum number of records for the automatic playback featu ...",l:"en/advanced/global.html#auto-playback-max",a:"auto-playback-max"},"13.11":{t:"AUTO_PLAYBACK_MIN",p:"The minimum duration for the auto playback feature, in seconds ...",l:"en/advanced/global.html#auto-playback-min",a:"auto-playback-min"},"13.12":{t:"AUTO_PLAYBACK_TIMEOUT",p:"The delay duration for hiding the auto playback feature, in mi ...",l:"en/advanced/global.html#auto-playback-timeout",a:"auto-playback-timeout"},"13.13":{t:"RECONNECT_TIME_MAX",p:"The maximum number of automatic reconnection attempts when a c ...",l:"en/advanced/global.html#reconnect-time-max",a:"reconnect-time-max"},"13.14":{t:"RECONNECT_SLEEP_TIME",p:"The delay time for the automatic reconnection attempt when a c ...",l:"en/advanced/global.html#reconnect-sleep-time",a:"reconnect-sleep-time"},"13.15":{t:"CONTROL_HIDE_TIME",p:`... -Auto-hide delay time for the bottom control bar, measured ...`,l:"en/advanced/global.html#control-hide-time",a:"control-hide-time"},"13.16":{t:"DBCLICK_TIME",p:"Double-click event delay time, measured in milliseconds, defau ...",l:"en/advanced/global.html#dbclick-time",a:"dbclick-time"},"13.17":{t:"DBCLICK_FULLSCREEN",p:"On desktop, whether to switch to fullscreen on double click, d ...",l:"en/advanced/global.html#dbclick-fullscreen",a:"dbclick-fullscreen"},"13.18":{t:"MOBILE_DBCLICK_PLAY",p:"On mobile, whether to toggle play/pause on double click, defau ...",l:"en/advanced/global.html#mobile-dbclick-play",a:"mobile-dbclick-play"},"13.19":{t:"MOBILE_CLICK_PLAY",p:"On mobile, whether to play/pause on single click, default is f ...",l:"en/advanced/global.html#mobile-click-play",a:"mobile-click-play"},"13.20":{t:"AUTO_ORIENTATION_TIME",p:"On mobile devices, the delay time for auto-rotation, in millis ...",l:"en/advanced/global.html#auto-orientation-time",a:"auto-orientation-time"},"13.21":{t:"INFO_LOOP_TIME",p:"Info panel refresh time, unit in milliseconds, default is 1000 ...",l:"en/advanced/global.html#info-loop-time",a:"info-loop-time"},"13.22":{t:"FAST_FORWARD_VALUE",p:"On mobile, the multiplier rate of the speed when long-pressing ...",l:"en/advanced/global.html#fast-forward-value",a:"fast-forward-value"},"13.23":{t:"FAST_FORWARD_TIME",p:"The time, in milliseconds, to fast-forward when double-tapped, ...",l:"en/advanced/global.html#fast-forward-time",a:"fast-forward-time"},"13.24":{t:"TOUCH_MOVE_RATIO",p:"On mobile, the ratio of the speed of sliding left and right to ...",l:"en/advanced/global.html#touch-move-ratio",a:"touch-move-ratio"},"13.25":{t:"VOLUME_STEP",p:"The step ratio of adjusting volume with shortcuts, default is ...",l:"en/advanced/global.html#volume-step",a:"volume-step"},"13.26":{t:"SEEK_STEP",p:"The increment by which the playback progress is adjusted via k ...",l:"en/advanced/global.html#seek-step",a:"seek-step"},"13.27":{t:"PLAYBACK_RATE",p:"The list of built-in playback speeds, by default [0.5, 0.75, 1 ...",l:"en/advanced/global.html#playback-rate",a:"playback-rate"},"13.28":{t:"ASPECT_RATIO",p:"Built-in list of video aspect ratios, default is ['default', ' ...",l:"en/advanced/global.html#aspect-ratio",a:"aspect-ratio"},"13.29":{t:"FLIP",p:"Built-in list of video flips, defaults to ['normal', 'horizont ...",l:"en/advanced/global.html#flip",a:"flip"},"13.30":{t:"FULLSCREEN_WEB_IN_BODY",p:"When in web fullscreen, whether to mount the player under the ...",l:"en/advanced/global.html#fullscreen-web-in-body",a:"fullscreen-web-in-body"},"13.31":{t:"LOG_VERSION",p:"Setting whether to print the player version, the default is tr ...",l:"en/advanced/global.html#log-version",a:"log-version"},"13.32":{t:"USE_RAF",p:"Setting whether to use requestAnimationFrame, the default is f ...",l:"en/advanced/global.html#use-raf",a:"use-raf"},"14.0":{t:"# Writing Plugins",p:"Once you know the player's properties, methods, and events, wr ...",l:"en/advanced/plugin.html",a:"writing-plugins"},"15.0":{t:"# Instance Properties",p:"Here, instance properties refer to the primary properties moun ...",l:"en/advanced/property.html",a:"instance-properties"},"15.1":{t:"`play`",p:` +add method is used to dyna ...`,l:"en/advanced/built-in.html#setting",a:"setting"},"10.16":{t:"`plugins`\r",p:"Manage the player's plugin features, with only one method add ...",l:"en/advanced/built-in.html#plugins",a:"plugins"},"11.0":{t:"# Static Properties\r",p:"Here, Static Properties refer to the first-level properties mo ...",l:"en/advanced/class.html",a:"static-properties"},"11.1":{t:"`instances`\r",p:"Returns an array of all player instances. You can use this pro ...",l:"en/advanced/class.html#instances",a:"instances"},"11.2":{t:"`version`\r",p:`Returns the version information of the player. +<div classNa ...`,l:"en/advanced/class.html#version",a:"version"},"11.3":{t:"`env`\r",p:`Returns the environment variables of the player. +<div class ...`,l:"en/advanced/class.html#env",a:"env"},"11.4":{t:"`build`\r",p:`Returns the build time of the player +<div className="r ...`,l:"en/advanced/class.html#build",a:"build"},"11.5":{t:"`config`\r",p:`Returns the default configuration of the video +<div classNa ...`,l:"en/advanced/class.html#config",a:"config"},"11.6":{t:"`utils`\r",p:`Returns a collection of utility functions for the player +<d ...`,l:"en/advanced/class.html#utils",a:"utils"},"11.7":{t:"`scheme`\r",p:`Returns the validation scheme for the player options +<div c ...`,l:"en/advanced/class.html#scheme",a:"scheme"},"11.8":{t:"`Emitter`\r",p:`Returns the constructor for the event dispatcher +<div class ...`,l:"en/advanced/class.html#emitter",a:"emitter"},"11.9":{t:"`validator`\r",p:`Returns the validation function for options +<div className= ...`,l:"en/advanced/class.html#validator",a:"validator"},"11.10":{t:"`kindOf`\r",p:`Returns the function tool for type checking +<div className= ...`,l:"en/advanced/class.html#kindof",a:"kindof"},"11.11":{t:"`html`\r",p:`Returns the html string required for the player +<div classN ...`,l:"en/advanced/class.html#html",a:"html"},"11.12":{t:"`option`\r",p:`Returns the player's default options +<div className="r ...`,l:"en/advanced/class.html#option",a:"option"},"12.0":{t:"# Example Events\r",p:"Player events are divided into two types, one is the video's n ...",l:"en/advanced/event.html",a:"example-events"},"12.1":{t:"`ready`\r",p:`Triggered when the player is able to play for the first time +& ...`,l:"en/advanced/event.html#ready",a:"ready"},"12.2":{t:"`restart`\r",p:"Triggered when the player switches the address and is able to ...",l:"en/advanced/event.html#restart",a:"restart"},"12.3":{t:"`pause`\r",p:`Triggered when the player is paused +<div className="ru ...`,l:"en/advanced/event.html#pause",a:"pause"},"12.4":{t:"`play`\r",p:`Triggered when the player starts playing +<div className=&qu ...`,l:"en/advanced/event.html#play",a:"play"},"12.5":{t:"`hotkey`\r",p:`Triggered when a hotkey on the player is pressed +<div class ...`,l:"en/advanced/event.html#hotkey",a:"hotkey"},"12.6":{t:"`destroy`\r",p:`Triggered when the player is destroyed +<div className=" ...`,l:"en/advanced/event.html#destroy",a:"destroy"},"12.7":{t:"`focus`\r",p:`Triggered when the player gains focus +<div className=" ...`,l:"en/advanced/event.html#focus",a:"focus"},"12.8":{t:"`blur`\r",p:`Triggered when the player loses focus +<div className=" ...`,l:"en/advanced/event.html#blur",a:"blur"},"12.9":{t:"`dblclick`\r",p:`Triggered when the player is double-clicked +<div className= ...`,l:"en/advanced/event.html#dblclick",a:"dblclick"},"12.10":{t:"`click`\r",p:`Triggered when the player is clicked +<div className="r ...`,l:"en/advanced/event.html#click",a:"click"},"12.11":{t:"`error`\r",p:"Triggered when an error occurs while the player is loading the ...",l:"en/advanced/event.html#error",a:"error"},"12.12":{t:"`hover`\r",p:"Triggered when the player is hovered or unhovered by the mouse ...",l:"en/advanced/event.html#hover",a:"hover"},"12.13":{t:"`mousemove`\r",p:`Triggered when the mouse moves over the player +<div classNa ...`,l:"en/advanced/event.html#mousemove",a:"mousemove"},"12.14":{t:"`resize`\r",p:`Triggered when the player size changes +<div className=" ...`,l:"en/advanced/event.html#resize",a:"resize"},"12.15":{t:"`view`\r",p:`Triggered when the player appears in the viewport +<div clas ...`,l:"en/advanced/event.html#view",a:"view"},"12.16":{t:"`lock`\r",p:`On mobile, triggered when the locked state changes +<div cla ...`,l:"en/advanced/event.html#lock",a:"lock"},"12.17":{t:"`aspectRatio`\r",p:`Triggered when the aspect ratio of the player changes +<div ...`,l:"en/advanced/event.html#aspectratio",a:"aspectratio"},"12.18":{t:"`autoHeight`\r",p:`Triggered when the player automatically sets the height +<di ...`,l:"en/advanced/event.html#autoheight",a:"autoheight"},"12.19":{t:"`autoSize`\r",p:`Triggered when the player automatically sets the size +<div ...`,l:"en/advanced/event.html#autosize",a:"autosize"},"12.20":{t:"`flip`\r",p:`Triggered when the player flips +<div className="run-co ...`,l:"en/advanced/event.html#flip",a:"flip"},"12.21":{t:"`fullscreen`\r",p:`Triggered when the player goes into full screen +<div classN ...`,l:"en/advanced/event.html#fullscreen",a:"fullscreen"},"12.22":{t:"`fullscreenWeb`\r",p:`Triggered when the player enters web fullscreen +<div classN ...`,l:"en/advanced/event.html#fullscreenweb",a:"fullscreenweb"},"12.23":{t:"`mini`\r",p:`Triggered when the player enters mini mode +<div className=& ...`,l:"en/advanced/event.html#mini",a:"mini"},"12.24":{t:"`pip`\r",p:`Triggered when the player enters Picture-in-Picture mode +<d ...`,l:"en/advanced/event.html#pip",a:"pip"},"12.25":{t:"`screenshot`\r",p:`Triggered when the player takes a screenshot +<div className ...`,l:"en/advanced/event.html#screenshot",a:"screenshot"},"12.26":{t:"`seek`\r",p:`Triggered when the player jumps in time +<div className=&quo ...`,l:"en/advanced/event.html#seek",a:"seek"},"12.27":{t:"`subtitleOffset`\r",p:`Triggered when the subtitle offset occurs in the player +<di ...`,l:"en/advanced/event.html#subtitleoffset",a:"subtitleoffset"},"12.28":{t:"`subtitleUpdate`\r",p:`Triggered when the subtitle updates +<div className="ru ...`,l:"en/advanced/event.html#subtitleupdate",a:"subtitleupdate"},"12.29":{t:"`subtitleLoad`\r",p:`Triggered when the subtitle loads +<div className="run- ...`,l:"en/advanced/event.html#subtitleload",a:"subtitleload"},"12.30":{t:"`subtitleSwitch`\r",p:`Triggered when subtitles switch +<div className="run-co ...`,l:"en/advanced/event.html#subtitleswitch",a:"subtitleswitch"},"12.31":{t:"`info`\r",p:`Triggered when the information panel is shown or hidden +<di ...`,l:"en/advanced/event.html#info",a:"info"},"12.32":{t:"`layer`\r",p:`Triggered when a custom layer is shown or hidden +<div class ...`,l:"en/advanced/event.html#layer",a:"layer"},"12.33":{t:"`loading`\r",p:`Triggered when a loader is shown or hidden +<div className=& ...`,l:"en/advanced/event.html#loading",a:"loading"},"12.34":{t:"`mask`\r",p:`Triggered when a mask layer is shown or hidden +<div classNa ...`,l:"en/advanced/event.html#mask",a:"mask"},"12.35":{t:"`subtitle`\r",p:`Triggered when the subtitle layer is shown or hidden +<div c ...`,l:"en/advanced/event.html#subtitle",a:"subtitle"},"12.36":{t:"`contextmenu`\r",p:`Triggered when the right-click menu is shown or hidden +<div ...`,l:"en/advanced/event.html#contextmenu",a:"contextmenu"},"12.37":{t:"`control`\r",p:`Triggered when the controller is shown or hidden +<div class ...`,l:"en/advanced/event.html#control",a:"control"},"12.38":{t:"`setting`\r",p:`Triggered when the settings panel is shown or hidden +<div c ...`,l:"en/advanced/event.html#setting",a:"setting"},"12.39":{t:"`muted`\r",p:`Triggered when the muted state changes +<div className=" ...`,l:"en/advanced/event.html#muted",a:"muted"},"12.40":{t:"`video:canplay`\r",p:"The browser can play the media file, but estimates there is no ...",l:"en/advanced/event.html#video-canplay",a:"video-canplay"},"12.41":{t:"`video:canplaythrough`\r",p:"The browser estimates it can play the media through to the end ...",l:"en/advanced/event.html#video-canplaythrough",a:"video-canplaythrough"},"12.42":{t:"`video:complete`\r",p:`OfflineAudioContext rendering is complete +`,l:"en/advanced/event.html#video-complete",a:"video-complete"},"12.43":{t:"`video:durationchange`\r",p:`Triggered when the value of the duration property changes +`,l:"en/advanced/event.html#video-durationchange",a:"video-durationchange"},"12.44":{t:"`video:emptied`\r",p:"The media content becomes empty; for example, when this media ...",l:"en/advanced/event.html#video-emptied",a:"video-emptied"},"12.45":{t:"`video:ended`\r",p:`The video has stopped because the media reached the end point +`,l:"en/advanced/event.html#video-ended",a:"video-ended"},"12.46":{t:"`video:error`\r",p:"An error occurred while fetching media data, or the resource t ...",l:"en/advanced/event.html#video-error",a:"video-error"},"12.47":{t:"`video:loadeddata`\r",p:`The first frame of the media has finished loading +`,l:"en/advanced/event.html#video-loadeddata",a:"video-loadeddata"},"12.48":{t:"`video:loadedmetadata`\r",p:`Metadata has been loaded +`,l:"en/advanced/event.html#video-loadedmetadata",a:"video-loadedmetadata"},"12.49":{t:"`video:pause`\r",p:`Playback has been paused +`,l:"en/advanced/event.html#video-pause",a:"video-pause"},"12.50":{t:"`video:play`\r",p:`Playback has started +`,l:"en/advanced/event.html#video-play",a:"video-play"},"12.51":{t:"`video:playing`\r",p:"Playback is ready to start following a pause or delay due to l ...",l:"en/advanced/event.html#video-playing",a:"video-playing"},"12.52":{t:"`video:progress`\r",p:`Periodically triggered while the browser is loading resources +`,l:"en/advanced/event.html#video-progress",a:"video-progress"},"12.53":{t:"`video:ratechange`\r",p:`The playback rate has changed +`,l:"en/advanced/event.html#video-ratechange",a:"video-ratechange"},"12.54":{t:"`video:seeked`\r",p:`A seek (frame skipping) operation has completed +`,l:"en/advanced/event.html#video-seeked",a:"video-seeked"},"12.55":{t:"`video:seeking`\r",p:`A seek (frame skipping) operation has started +`,l:"en/advanced/event.html#video-seeking",a:"video-seeking"},"12.56":{t:"`video:stalled`\r",p:"The user agent is trying to fetch media data, but the data une ...",l:"en/advanced/event.html#video-stalled",a:"video-stalled"},"12.57":{t:"`video:suspend`\r",p:`Media data loading has been suspended +`,l:"en/advanced/event.html#video-suspend",a:"video-suspend"},"12.58":{t:"`video:timeupdate`\r",p:`The time specified by the currentTime attribute has changed +`,l:"en/advanced/event.html#video-timeupdate",a:"video-timeupdate"},"12.59":{t:"`video:volumechange`\r",p:`Volume changed +`,l:"en/advanced/event.html#video-volumechange",a:"video-volumechange"},"12.60":{t:"`video:waiting`\r",p:`Playback has stopped due to temporarily missing data +`,l:"en/advanced/event.html#video-waiting",a:"video-waiting"},"13.0":{t:"# Global Attributes\r",p:"Here, Global Attributes refer to the first-level properties mo ...",l:"en/advanced/global.html",a:"global-attributes"},"13.1":{t:"DEBUG\r",p:"Whether to start debug mode, which can print out all built-in ...",l:"en/advanced/global.html#debug",a:"debug"},"13.2":{t:"CONTEXTMENU\r",p:"Whether to enable the right-click context menu, enabled by def ...",l:"en/advanced/global.html#contextmenu",a:"contextmenu"},"13.3":{t:"NOTICE_TIME\r",p:"The display duration of the notification message, in milliseco ...",l:"en/advanced/global.html#notice-time",a:"notice-time"},"13.4":{t:"SETTING_WIDTH\r",p:"The default width of the settings panel, in pixels, defaults t ...",l:"en/advanced/global.html#setting-width",a:"setting-width"},"13.5":{t:"SETTING_ITEM_WIDTH\r",p:"Set the default width of the settings items in the panel, in p ...",l:"en/advanced/global.html#setting-item-width",a:"setting-item-width"},"13.6":{t:"SETTING_ITEM_HEIGHT\r",p:"Set the default height of the settings items in the panel, in ...",l:"en/advanced/global.html#setting-item-height",a:"setting-item-height"},"13.7":{t:"RESIZE_TIME\r",p:"Throttle time for the resize event, in milliseconds, defaults ...",l:"en/advanced/global.html#resize-time",a:"resize-time"},"13.8":{t:"SCROLL_TIME\r",p:"Throttle time for the scroll event, in milliseconds, defaults ...",l:"en/advanced/global.html#scroll-time",a:"scroll-time"},"13.9":{t:"SCROLL_GAP\r",p:"The boundary tolerance distance for the view event, in pixels, ...",l:"en/advanced/global.html#scroll-gap",a:"scroll-gap"},"13.10":{t:"AUTO_PLAYBACK_MAX\r",p:"The maximum number of records for the automatic playback featu ...",l:"en/advanced/global.html#auto-playback-max",a:"auto-playback-max"},"13.11":{t:"AUTO_PLAYBACK_MIN\r",p:"The minimum duration for the auto playback feature, in seconds ...",l:"en/advanced/global.html#auto-playback-min",a:"auto-playback-min"},"13.12":{t:"AUTO_PLAYBACK_TIMEOUT\r",p:"The delay duration for hiding the auto playback feature, in mi ...",l:"en/advanced/global.html#auto-playback-timeout",a:"auto-playback-timeout"},"13.13":{t:"RECONNECT_TIME_MAX\r",p:"The maximum number of automatic reconnection attempts when a c ...",l:"en/advanced/global.html#reconnect-time-max",a:"reconnect-time-max"},"13.14":{t:"RECONNECT_SLEEP_TIME\r",p:"The delay time for the automatic reconnection attempt when a c ...",l:"en/advanced/global.html#reconnect-sleep-time",a:"reconnect-sleep-time"},"13.15":{t:"CONTROL_HIDE_TIME\r",p:`... +Auto-hide delay time for the bottom control bar, measured ...`,l:"en/advanced/global.html#control-hide-time",a:"control-hide-time"},"13.16":{t:"DBCLICK_TIME\r",p:"Double-click event delay time, measured in milliseconds, defau ...",l:"en/advanced/global.html#dbclick-time",a:"dbclick-time"},"13.17":{t:"DBCLICK_FULLSCREEN\r",p:"On desktop, whether to switch to fullscreen on double click, d ...",l:"en/advanced/global.html#dbclick-fullscreen",a:"dbclick-fullscreen"},"13.18":{t:"MOBILE_DBCLICK_PLAY\r",p:"On mobile, whether to toggle play/pause on double click, defau ...",l:"en/advanced/global.html#mobile-dbclick-play",a:"mobile-dbclick-play"},"13.19":{t:"MOBILE_CLICK_PLAY\r",p:"On mobile, whether to play/pause on single click, default is f ...",l:"en/advanced/global.html#mobile-click-play",a:"mobile-click-play"},"13.20":{t:"AUTO_ORIENTATION_TIME\r",p:"On mobile devices, the delay time for auto-rotation, in millis ...",l:"en/advanced/global.html#auto-orientation-time",a:"auto-orientation-time"},"13.21":{t:"INFO_LOOP_TIME\r",p:"Info panel refresh time, unit in milliseconds, default is 1000 ...",l:"en/advanced/global.html#info-loop-time",a:"info-loop-time"},"13.22":{t:"FAST_FORWARD_VALUE\r",p:"On mobile, the multiplier rate of the speed when long-pressing ...",l:"en/advanced/global.html#fast-forward-value",a:"fast-forward-value"},"13.23":{t:"FAST_FORWARD_TIME\r",p:"The time, in milliseconds, to fast-forward when double-tapped, ...",l:"en/advanced/global.html#fast-forward-time",a:"fast-forward-time"},"13.24":{t:"TOUCH_MOVE_RATIO\r",p:"On mobile, the ratio of the speed of sliding left and right to ...",l:"en/advanced/global.html#touch-move-ratio",a:"touch-move-ratio"},"13.25":{t:"VOLUME_STEP\r",p:"The step ratio of adjusting volume with shortcuts, default is ...",l:"en/advanced/global.html#volume-step",a:"volume-step"},"13.26":{t:"SEEK_STEP\r",p:"The increment by which the playback progress is adjusted via k ...",l:"en/advanced/global.html#seek-step",a:"seek-step"},"13.27":{t:"PLAYBACK_RATE\r",p:"The list of built-in playback speeds, by default [0.5, 0.75, 1 ...",l:"en/advanced/global.html#playback-rate",a:"playback-rate"},"13.28":{t:"ASPECT_RATIO\r",p:"Built-in list of video aspect ratios, default is ['default', ' ...",l:"en/advanced/global.html#aspect-ratio",a:"aspect-ratio"},"13.29":{t:"FLIP\r",p:"Built-in list of video flips, defaults to ['normal', 'horizont ...",l:"en/advanced/global.html#flip",a:"flip"},"13.30":{t:"FULLSCREEN_WEB_IN_BODY\r",p:"When in web fullscreen, whether to mount the player under the ...",l:"en/advanced/global.html#fullscreen-web-in-body",a:"fullscreen-web-in-body"},"13.31":{t:"LOG_VERSION\r",p:"Setting whether to print the player version, the default is tr ...",l:"en/advanced/global.html#log-version",a:"log-version"},"13.32":{t:"USE_RAF\r",p:"Setting whether to use requestAnimationFrame, the default is f ...",l:"en/advanced/global.html#use-raf",a:"use-raf"},"14.0":{t:"# Writing Plugins\r",p:"Once you know the player's properties, methods, and events, wr ...",l:"en/advanced/plugin.html",a:"writing-plugins"},"15.0":{t:"# Instance Properties\r",p:"Here, instance properties refer to the primary properties moun ...",l:"en/advanced/property.html",a:"instance-properties"},"15.1":{t:"`play`\r",p:` Type: Function Play video -<div className="run-code&q ...`,l:"en/advanced/property.html#play",a:"play"},"15.2":{t:"`pause`",p:` +<div className="run-code&q ...`,l:"en/advanced/property.html#play",a:"play"},"15.2":{t:"`pause`\r",p:` Type: Function Pause video -<div className="run-code& ...`,l:"en/advanced/property.html#pause",a:"pause"},"15.3":{t:"`toggle`",p:` +<div className="run-code& ...`,l:"en/advanced/property.html#pause",a:"pause"},"15.3":{t:"`toggle`\r",p:` Type: Function Toggle the play and pause state of the video - ...`,l:"en/advanced/property.html#toggle",a:"toggle"},"15.4":{t:"`destroy`",p:` + ...`,l:"en/advanced/property.html#toggle",a:"toggle"},"15.4":{t:"`destroy`\r",p:` Type: Function Parameter: Boolean -Destroy the player. Accept ...`,l:"en/advanced/property.html#destroy",a:"destroy"},"15.5":{t:"`seek`",p:` +Destroy the player. Accept ...`,l:"en/advanced/property.html#destroy",a:"destroy"},"15.5":{t:"`seek`\r",p:` Type: Setter Parameter: Number -Jump to a specific time in th ...`,l:"en/advanced/property.html#seek",a:"seek"},"15.6":{t:"`forward`",p:` +Jump to a specific time in th ...`,l:"en/advanced/property.html#seek",a:"seek"},"15.6":{t:"`forward`\r",p:` Type: Setter Parameter: Number -Fast forward the video time, ...`,l:"en/advanced/property.html#forward",a:"forward"},"15.7":{t:"`backward`",p:` +Fast forward the video time, ...`,l:"en/advanced/property.html#forward",a:"forward"},"15.7":{t:"`backward`\r",p:` Type: Setter Parameter: Number Video rewind time in seconds - ...`,l:"en/advanced/property.html#backward",a:"backward"},"15.8":{t:"`volume`",p:` + ...`,l:"en/advanced/property.html#backward",a:"backward"},"15.8":{t:"`volume`\r",p:` Type: Setter/Getter Parameter: Number -Sets and gets the vide ...`,l:"en/advanced/property.html#volume",a:"volume"},"15.9":{t:"`url`",p:` +Sets and gets the vide ...`,l:"en/advanced/property.html#volume",a:"volume"},"15.9":{t:"`url`\r",p:` Type: Setter/Getter Parameter: String -Set and retrieve the v ...`,l:"en/advanced/property.html#url",a:"url"},"15.10":{t:"`switch`",p:` +Set and retrieve the v ...`,l:"en/advanced/property.html#url",a:"url"},"15.10":{t:"`switch`\r",p:` Type: Setter Parameter: String -Set the video address, which ...`,l:"en/advanced/property.html#switch",a:"switch"},"15.11":{t:"`switchUrl`",p:` +Set the video address, which ...`,l:"en/advanced/property.html#switch",a:"switch"},"15.11":{t:"`switchUrl`\r",p:` Type: Function Parameter: String -Set the video address, simi ...`,l:"en/advanced/property.html#switchurl",a:"switchurl"},"15.12":{t:"`switchQuality`",p:` +Set the video address, simi ...`,l:"en/advanced/property.html#switchurl",a:"switchurl"},"15.12":{t:"`switchQuality`\r",p:` Type: Function Parameter: String -Set video quality address, ...`,l:"en/advanced/property.html#switchquality",a:"switchquality"},"15.13":{t:"`muted`",p:` +Set video quality address, ...`,l:"en/advanced/property.html#switchquality",a:"switchquality"},"15.13":{t:"`muted`\r",p:` Type: Setter/Getter Parameter: Boolean -Set and get whether t ...`,l:"en/advanced/property.html#muted",a:"muted"},"15.14":{t:"`currentTime`",p:` +Set and get whether t ...`,l:"en/advanced/property.html#muted",a:"muted"},"15.14":{t:"`currentTime`\r",p:` Type: Setter/Getter Parameter: Number -Set and get the curren ...`,l:"en/advanced/property.html#currenttime",a:"currenttime"},"15.15":{t:"`duration`",p:` +Set and get the curren ...`,l:"en/advanced/property.html#currenttime",a:"currenttime"},"15.15":{t:"`duration`\r",p:` Type: Getter Get the video duration -<div className=" ...`,l:"en/advanced/property.html#duration",a:"duration"},"15.16":{t:"`screenshot`",p:` +<div className=" ...`,l:"en/advanced/property.html#duration",a:"duration"},"15.16":{t:"`screenshot`\r",p:` Type: Function -Download a screenshot of the current video fr ...`,l:"en/advanced/property.html#screenshot",a:"screenshot"},"15.17":{t:"`getDataURL`",p:` +Download a screenshot of the current video fr ...`,l:"en/advanced/property.html#screenshot",a:"screenshot"},"15.17":{t:"`getDataURL`\r",p:` Type: Function -Gets the base64 address of the screenshot of ...`,l:"en/advanced/property.html#getdataurl",a:"getdataurl"},"15.18":{t:"`getBlobUrl`",p:` +Gets the base64 address of the screenshot of ...`,l:"en/advanced/property.html#getdataurl",a:"getdataurl"},"15.18":{t:"`getBlobUrl`\r",p:` Type: Function -Gets the blob address of the screenshot of th ...`,l:"en/advanced/property.html#getbloburl",a:"getbloburl"},"15.19":{t:"`fullscreen`",p:` +Gets the blob address of the screenshot of th ...`,l:"en/advanced/property.html#getbloburl",a:"getbloburl"},"15.19":{t:"`fullscreen`\r",p:` Type: Setter/Getter Parameter: Boolean -Set and get the playe ...`,l:"en/advanced/property.html#fullscreen",a:"fullscreen"},"15.20":{t:"`fullscreenWeb`",p:` +Set and get the playe ...`,l:"en/advanced/property.html#fullscreen",a:"fullscreen"},"15.20":{t:"`fullscreenWeb`\r",p:` Type: Setter/Getter Parameter: Boolean -Set and get the playe ...`,l:"en/advanced/property.html#fullscreenweb",a:"fullscreenweb"},"15.21":{t:"`pip`",p:` +Set and get the playe ...`,l:"en/advanced/property.html#fullscreenweb",a:"fullscreenweb"},"15.21":{t:"`pip`\r",p:` Type: Setter/Getter Parameter: Boolean -Set and get the playe ...`,l:"en/advanced/property.html#pip",a:"pip"},"15.22":{t:"`poster`",p:` +Set and get the playe ...`,l:"en/advanced/property.html#pip",a:"pip"},"15.22":{t:"`poster`\r",p:` Type: Setter/Getter Parameter: String -Set and get the video ...`,l:"en/advanced/property.html#poster",a:"poster"},"15.23":{t:"`mini`",p:` +Set and get the video ...`,l:"en/advanced/property.html#poster",a:"poster"},"15.23":{t:"`mini`\r",p:` Type: Setter/Getter Parameter: Boolean -Set and get the playe ...`,l:"en/advanced/property.html#mini",a:"mini"},"15.24":{t:"`playing`",p:` +Set and get the playe ...`,l:"en/advanced/property.html#mini",a:"mini"},"15.24":{t:"`playing`\r",p:` Type: Getter Parameter: Boolean -Get whether the video is cur ...`,l:"en/advanced/property.html#playing",a:"playing"},"15.25":{t:"`autoSize`",p:` +Get whether the video is cur ...`,l:"en/advanced/property.html#playing",a:"playing"},"15.25":{t:"`autoSize`\r",p:` Type: Function -Sets whether the video should auto adjust its ...`,l:"en/advanced/property.html#autosize",a:"autosize"},"15.26":{t:"`rect`",p:` +Sets whether the video should auto adjust its ...`,l:"en/advanced/property.html#autosize",a:"autosize"},"15.26":{t:"`rect`\r",p:` Type: Getter -Gets the size and position information of the p ...`,l:"en/advanced/property.html#rect",a:"rect"},"15.27":{t:"`flip`",p:` +Gets the size and position information of the p ...`,l:"en/advanced/property.html#rect",a:"rect"},"15.27":{t:"`flip`\r",p:` Type: Setter/Getter Parameter: String -Set and get the player ...`,l:"en/advanced/property.html#flip",a:"flip"},"15.28":{t:"`playbackRate`",p:` +Set and get the player ...`,l:"en/advanced/property.html#flip",a:"flip"},"15.28":{t:"`playbackRate`\r",p:` Type: Setter/Getter Parameter: Number -Set and get the playbac ...`,l:"en/advanced/property.html#playbackrate",a:"playbackrate"},"15.29":{t:"`aspectRatio`",p:` +Set and get the playbac ...`,l:"en/advanced/property.html#playbackrate",a:"playbackrate"},"15.29":{t:"`aspectRatio`\r",p:` Type: Setter/Getter Parameter: String -Set and get the aspect ...`,l:"en/advanced/property.html#aspectratio",a:"aspectratio"},"15.30":{t:"`autoHeight`",p:` +Set and get the aspect ...`,l:"en/advanced/property.html#aspectratio",a:"aspectratio"},"15.30":{t:"`autoHeight`\r",p:` Type: Function -When the container has only width, this attri ...`,l:"en/advanced/property.html#autoheight",a:"autoheight"},"15.31":{t:"`attr`",p:` +When the container has only width, this attri ...`,l:"en/advanced/property.html#autoheight",a:"autoheight"},"15.31":{t:"`attr`\r",p:` Type: Function Parameter: String -Dynamically get and set the ...`,l:"en/advanced/property.html#attr",a:"attr"},"15.32":{t:"`type`",p:` +Dynamically get and set the ...`,l:"en/advanced/property.html#attr",a:"attr"},"15.32":{t:"`type`\r",p:` Type: Setter/Getter Parameter: String -Dynamically get and se ...`,l:"en/advanced/property.html#type",a:"type"},"15.33":{t:"`theme`",p:` +Dynamically get and se ...`,l:"en/advanced/property.html#type",a:"type"},"15.33":{t:"`theme`\r",p:` Type: Setter/Getter Parameter: String -Dynamically get and se ...`,l:"en/advanced/property.html#theme",a:"theme"},"15.34":{t:"`airplay`",p:` +Dynamically get and se ...`,l:"en/advanced/property.html#theme",a:"theme"},"15.34":{t:"`airplay`\r",p:` Type: Function Activate airplay -<div className="run- ...`,l:"en/advanced/property.html#airplay",a:"airplay"},"15.35":{t:"`loaded`",p:` +<div className="run- ...`,l:"en/advanced/property.html#airplay",a:"airplay"},"15.35":{t:"`loaded`\r",p:` Type: Getter -The proportion of the video that is cached, ran ...`,l:"en/advanced/property.html#loaded",a:"loaded"},"15.36":{t:"`played`",p:` +The proportion of the video that is cached, ran ...`,l:"en/advanced/property.html#loaded",a:"loaded"},"15.36":{t:"`played`\r",p:` Type: Getter -The proportion of the video that has been playe ...`,l:"en/advanced/property.html#played",a:"played"},"15.37":{t:"`proxy`",p:` +The proportion of the video that has been playe ...`,l:"en/advanced/property.html#played",a:"played"},"15.37":{t:"`proxy`\r",p:` Type: Function -A proxy function for DOM events, which essent ...`,l:"en/advanced/property.html#proxy",a:"proxy"},"15.38":{t:"`query`",p:` +A proxy function for DOM events, which essent ...`,l:"en/advanced/property.html#proxy",a:"proxy"},"15.38":{t:"`query`\r",p:` Type: Function -DOM query function, similar to document.query ...`,l:"en/advanced/property.html#query",a:"query"},"15.39":{t:"`video`",p:` +DOM query function, similar to document.query ...`,l:"en/advanced/property.html#query",a:"query"},"15.39":{t:"`video`\r",p:` Type: Element -A shortcut to return the video element of the ...`,l:"en/advanced/property.html#video",a:"video"},"15.40":{t:"`cssVar`",p:` +A shortcut to return the video element of the ...`,l:"en/advanced/property.html#video",a:"video"},"15.40":{t:"`cssVar`\r",p:` Type: Function Dynamically getting or setting css variables - ...`,l:"en/advanced/property.html#cssvar",a:"cssvar"},"15.41":{t:"`quality`",p:` + ...`,l:"en/advanced/property.html#cssvar",a:"cssvar"},"15.41":{t:"`quality`\r",p:` Type: Setter Parameter: Array -Dynamically setting the list o ...`,l:"en/advanced/property.html#quality",a:"quality"},"16.0":{t:"# Context Menu",p:"",l:"en/component/contextmenu.html",a:"context-menu"},"16.1":{t:"Configuration",p:` +Dynamically setting the list o ...`,l:"en/advanced/property.html#quality",a:"quality"},"16.0":{t:"# Context Menu\r",p:"\r",l:"en/component/contextmenu.html",a:"context-menu"},"16.1":{t:"Configuration\r",p:` Property @@ -689,7 +689,7 @@ Description disable Boolean -Whether to di ...`,l:"en/component/contextmenu.html#configuration",a:"configuration"},"16.2":{t:"Creation",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/contextmenu.html#creation",a:"creation"},"16.3":{t:"Add",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/contextmenu.html#add",a:"add"},"16.4":{t:"Delete",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/contextmenu.html#delete",a:"delete"},"16.5":{t:"Updates",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/contextmenu.html#updates",a:"updates"},"17.0":{t:"# Controller",p:"",l:"en/component/controls.html",a:"controller"},"17.1":{t:"Configuration",p:` +Whether to di ...`,l:"en/component/contextmenu.html#configuration",a:"configuration"},"16.2":{t:"Creation\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/contextmenu.html#creation",a:"creation"},"16.3":{t:"Add\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/contextmenu.html#add",a:"add"},"16.4":{t:"Delete\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/contextmenu.html#delete",a:"delete"},"16.5":{t:"Updates\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/contextmenu.html#updates",a:"updates"},"17.0":{t:"# Controller\r",p:"\r",l:"en/component/controls.html",a:"controller"},"17.1":{t:"Configuration\r",p:` Property @@ -701,7 +701,7 @@ Description disable Boolean -Whether to di ...`,l:"en/component/controls.html#configuration",a:"configuration"},"17.2":{t:"Creation",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/controls.html#creation",a:"creation"},"17.3":{t:"Adding",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/controls.html#adding",a:"adding"},"17.4":{t:"Delete",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/controls.html#delete",a:"delete"},"17.5":{t:"Update",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/controls.html#update",a:"update"},"18.0":{t:"# Layer",p:"",l:"en/component/layers.html",a:"layer"},"18.1":{t:"Configuration",p:` +Whether to di ...`,l:"en/component/controls.html#configuration",a:"configuration"},"17.2":{t:"Creation\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/controls.html#creation",a:"creation"},"17.3":{t:"Adding\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/controls.html#adding",a:"adding"},"17.4":{t:"Delete\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/controls.html#delete",a:"delete"},"17.5":{t:"Update\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/controls.html#update",a:"update"},"18.0":{t:"# Layer\r",p:"\r",l:"en/component/layers.html",a:"layer"},"18.1":{t:"Configuration\r",p:` Property @@ -713,7 +713,7 @@ Description disable Boolean -Whether to di ...`,l:"en/component/layers.html#configuration",a:"configuration"},"18.2":{t:"Creation",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/layers.html#creation",a:"creation"},"18.3":{t:"Add",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/layers.html#add",a:"add"},"18.4":{t:"Delete",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/layers.html#delete",a:"delete"},"18.5":{t:"Update",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/layers.html#update",a:"update"},"19.0":{t:"# Settings Panel",p:"",l:"en/component/setting.html",a:"settings-panel"},"19.1":{t:"Built-in",p:"First, open the settings panel, and then it comes with four bu ...",l:"en/component/setting.html#built-in",a:"built-in"},"19.2":{t:"Create - Selection List",p:` +Whether to di ...`,l:"en/component/layers.html#configuration",a:"configuration"},"18.2":{t:"Creation\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/layers.html#creation",a:"creation"},"18.3":{t:"Add\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/layers.html#add",a:"add"},"18.4":{t:"Delete\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/layers.html#delete",a:"delete"},"18.5":{t:"Update\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/layers.html#update",a:"update"},"19.0":{t:"# Settings Panel\r",p:"\r",l:"en/component/setting.html",a:"settings-panel"},"19.1":{t:"Built-in\r",p:"First, open the settings panel, and then it comes with four bu ...",l:"en/component/setting.html#built-in",a:"built-in"},"19.2":{t:"Create - Selection List\r",p:` Property @@ -725,7 +725,7 @@ Description html String, Element -Element' ...`,l:"en/component/setting.html#create-selection-list",a:"create-selection-list"},"19.3":{t:"Creating - Nested Lists",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/setting.html#creating-nested-lists",a:"creating-nested-lists"},"19.4":{t:"Create - Toggle Button",p:` +Element' ...`,l:"en/component/setting.html#create-selection-list",a:"create-selection-list"},"19.3":{t:"Creating - Nested Lists\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/setting.html#creating-nested-lists",a:"creating-nested-lists"},"19.4":{t:"Create - Toggle Button\r",p:` Property @@ -737,7 +737,7 @@ Description html String, Element -Element' ...`,l:"en/component/setting.html#create-toggle-button",a:"create-toggle-button"},"19.5":{t:"Create - Range Slider",p:` +Element' ...`,l:"en/component/setting.html#create-toggle-button",a:"create-toggle-button"},"19.5":{t:"Create - Range Slider\r",p:` Attribute @@ -749,170 +749,170 @@ Description html String, Element -The ele ...`,l:"en/component/setting.html#create-range-slider",a:"create-range-slider"},"19.6":{t:"Add",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/setting.html#add",a:"add"},"19.7":{t:"Delete",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/setting.html#delete",a:"delete"},"19.8":{t:"Updates",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/setting.html#updates",a:"updates"},"20.0":{t:"# Installation and Usage",p:"",l:"en/index.html",a:"installation-and-usage"},"20.1":{t:"Installation",p:`::: code-group +The ele ...`,l:"en/component/setting.html#create-range-slider",a:"create-range-slider"},"19.6":{t:"Add\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/setting.html#add",a:"add"},"19.7":{t:"Delete\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/setting.html#delete",a:"delete"},"19.8":{t:"Updates\r",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/setting.html#updates",a:"updates"},"20.0":{t:"# Installation and Usage\r",p:"\r",l:"en/index.html",a:"installation-and-usage"},"20.1":{t:"Installation\r",p:`::: code-group npm install artplayer yarn add artplayer -pnpm ...`,l:"en/index.html#installation",a:"installation"},"20.2":{t:"`CDN`",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer/dist/art ...`,l:"en/index.html#cdn",a:"cdn"},"20.3":{t:"Usage",p:`::: code-group +pnpm ...`,l:"en/index.html#installation",a:"installation"},"20.2":{t:"`CDN`\r",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer/dist/art ...`,l:"en/index.html#cdn",a:"cdn"},"20.3":{t:"Usage\r",p:`::: code-group import Artplayer from 'artplayer'; -const art = ...`,l:"en/index.html#usage",a:"usage"},"20.4":{t:"`Vue.js`",p:`::: code-group +const art = ...`,l:"en/index.html#usage",a:"usage"},"20.4":{t:"`Vue.js`\r",p:`::: code-group <template> - <div ref="artRef&quo ...`,l:"en/index.html#vue-js",a:"vue-js"},"20.5":{t:"`React.js`",p:`::: code-group + <div ref="artRef&quo ...`,l:"en/index.html#vue-js",a:"vue-js"},"20.5":{t:"`React.js`\r",p:`::: code-group import { useEffect, useRef } from 'react'; -impo ...`,l:"en/index.html#react-js",a:"react-js"},"20.6":{t:"TypeScript",p:`Importing Artplayer will automatically import artplayer.d.ts -`,l:"en/index.html#typescript",a:"typescript"},"20.7":{t:"Vue.js",p:` +impo ...`,l:"en/index.html#react-js",a:"react-js"},"20.6":{t:"TypeScript\r",p:`Importing Artplayer will automatically import artplayer.d.ts +`,l:"en/index.html#typescript",a:"typescript"},"20.7":{t:"Vue.js\r",p:` -`,l:"en/index.html#vue-js",a:"vue-js"},"20.8":{t:"React.js",p:`import Artplayer from 'artplayer'; -const art = useRef<Artpl ...`,l:"en/index.html#react-js",a:"react-js"},"20.9":{t:"Option",p:`you can also separately import the type for options -import Art ...`,l:"en/index.html#option",a:"option"},"20.10":{t:"JavaScript",p:"Sometimes your js file may lose the TypeScript type hints, in ...",l:"en/index.html#javascript",a:"javascript"},"20.11":{t:"Ancient Browsers",p:"The production build of artplayer.js is only compatible with t ...",l:"en/index.html#ancient-browsers",a:"ancient-browsers"},"21.0":{t:"# dash.js",p:`👉 https://github.com/Dash-Industry-Forum/dash.js -<div clas ...`,l:"en/library/dash.html",a:"dash-js"},"22.0":{t:"# flv.js",p:`👉 https://github.com/Bilibili/flv.js -<div className=" ...`,l:"en/library/flv.html",a:"flv-js"},"23.0":{t:"# hls.js",p:`👉 https://github.com/video-dev/hls.js -<div className=" ...`,l:"en/library/hls.html",a:"hls-js"},"24.0":{t:"# Video Ads",p:"",l:"en/plugin/ads.html",a:"video-ads"},"24.1":{t:"Demo",p:`👉 View Full Demo -`,l:"en/plugin/ads.html#demo",a:"demo"},"24.2":{t:"Installation",p:`::: code-group +`,l:"en/index.html#vue-js",a:"vue-js"},"20.8":{t:"React.js\r",p:`import Artplayer from 'artplayer'; +const art = useRef<Artpl ...`,l:"en/index.html#react-js",a:"react-js"},"20.9":{t:"Option\r",p:`you can also separately import the type for options +import Art ...`,l:"en/index.html#option",a:"option"},"20.10":{t:"JavaScript\r",p:"Sometimes your js file may lose the TypeScript type hints, in ...",l:"en/index.html#javascript",a:"javascript"},"20.11":{t:"Ancient Browsers\r",p:"The production build of artplayer.js is only compatible with t ...",l:"en/index.html#ancient-browsers",a:"ancient-browsers"},"21.0":{t:"# dash.js\r",p:`👉 https://github.com/Dash-Industry-Forum/dash.js +<div clas ...`,l:"en/library/dash.html",a:"dash-js"},"22.0":{t:"# flv.js\r",p:`👉 https://github.com/Bilibili/flv.js +<div className=" ...`,l:"en/library/flv.html",a:"flv-js"},"23.0":{t:"# hls.js\r",p:`👉 https://github.com/video-dev/hls.js +<div className=" ...`,l:"en/library/hls.html",a:"hls-js"},"24.0":{t:"# Video Ads\r",p:"\r",l:"en/plugin/ads.html",a:"video-ads"},"24.1":{t:"Demo\r",p:`👉 View Full Demo +`,l:"en/plugin/ads.html#demo",a:"demo"},"24.2":{t:"Installation\r",p:`::: code-group npm install artplayer-plugin-ads -yarn add artp ...`,l:"en/plugin/ads.html#installation",a:"installation"},"24.3":{t:"CDN",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-a ...`,l:"en/plugin/ads.html#cdn",a:"cdn"},"24.4":{t:"Usage",p:"<div className="run-code" data-libs="./uncom ...",l:"en/plugin/ads.html#usage",a:"usage"},"25.0":{t:"# Danmuku",p:"",l:"en/plugin/danmuku.html",a:"danmuku"},"25.1":{t:"Demo",p:`👉 View Full Demo -`,l:"en/plugin/danmuku.html#demo",a:"demo"},"25.2":{t:"Installation",p:`::: code-group +yarn add artp ...`,l:"en/plugin/ads.html#installation",a:"installation"},"24.3":{t:"CDN\r",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-a ...`,l:"en/plugin/ads.html#cdn",a:"cdn"},"24.4":{t:"Usage\r",p:"<div className="run-code" data-libs="./uncom ...",l:"en/plugin/ads.html#usage",a:"usage"},"25.0":{t:"# Danmuku\r",p:"\r",l:"en/plugin/danmuku.html",a:"danmuku"},"25.1":{t:"Demo\r",p:`👉 View Full Demo +`,l:"en/plugin/danmuku.html#demo",a:"demo"},"25.2":{t:"Installation\r",p:`::: code-group npm install artplayer-plugin-danmuku -yarn add ...`,l:"en/plugin/danmuku.html#installation",a:"installation"},"25.3":{t:"CDN",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-d ...`,l:"en/plugin/danmuku.html#cdn",a:"cdn"},"25.4":{t:"Option",p:`{ +yarn add ...`,l:"en/plugin/danmuku.html#installation",a:"installation"},"25.3":{t:"CDN\r",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-d ...`,l:"en/plugin/danmuku.html#cdn",a:"cdn"},"25.4":{t:"Option\r",p:`{ danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组 - speed: ...`,l:"en/plugin/danmuku.html#option",a:"option"},"25.5":{t:"Using Danmuku Array",p:"<div className="run-code" data-libs="./uncom ...",l:"en/plugin/danmuku.html#using-danmuku-array",a:"using-danmuku-array"},"25.6":{t:"Using Danmuku XML",p:"<div className="run-code" data-libs="./uncom ...",l:"en/plugin/danmuku.html#using-danmuku-xml",a:"using-danmuku-xml"},"25.7":{t:"Using Asynchronous Call",p:"<div className="run-code" data-libs="./uncom ...",l:"en/plugin/danmuku.html#using-asynchronous-call",a:"using-asynchronous-call"},"25.8":{t:"`hide/show`",p:"Hide or show the bullet comments with the methods hide and sho ...",l:"en/plugin/danmuku.html#hide-show",a:"hide-show"},"25.9":{t:"`isHide`",p:"Judge whether the current barrage is hidden or displayed with ...",l:"en/plugin/danmuku.html#ishide",a:"ishide"},"25.10":{t:"`emit`",p:`Send a real-time danmaku message through the emit method -<d ...`,l:"en/plugin/danmuku.html#emit",a:"emit"},"25.11":{t:"`config`",p:"Change the barrage configuration in real-time with the config ...",l:"en/plugin/danmuku.html#config",a:"config"},"25.12":{t:"`load`",p:"The load method can be used to reload the danmu data source or ...",l:"en/plugin/danmuku.html#load",a:"load"},"25.13":{t:"`reset`",p:`Used to clear the current displayed barrages -<div className ...`,l:"en/plugin/danmuku.html#reset",a:"reset"},"25.14":{t:"`option`",p:`Used to get the current barrage configuration -<div classNam ...`,l:"en/plugin/danmuku.html#option",a:"option"},"25.15":{t:"Event",p:`var art = new Artplayer({ + speed: ...`,l:"en/plugin/danmuku.html#option",a:"option"},"25.5":{t:"Using Danmuku Array\r",p:"<div className="run-code" data-libs="./uncom ...",l:"en/plugin/danmuku.html#using-danmuku-array",a:"using-danmuku-array"},"25.6":{t:"Using Danmuku XML\r",p:"<div className="run-code" data-libs="./uncom ...",l:"en/plugin/danmuku.html#using-danmuku-xml",a:"using-danmuku-xml"},"25.7":{t:"Using Asynchronous Call\r",p:"<div className="run-code" data-libs="./uncom ...",l:"en/plugin/danmuku.html#using-asynchronous-call",a:"using-asynchronous-call"},"25.8":{t:"`hide/show`\r",p:"Hide or show the bullet comments with the methods hide and sho ...",l:"en/plugin/danmuku.html#hide-show",a:"hide-show"},"25.9":{t:"`isHide`\r",p:"Judge whether the current barrage is hidden or displayed with ...",l:"en/plugin/danmuku.html#ishide",a:"ishide"},"25.10":{t:"`emit`\r",p:`Send a real-time danmaku message through the emit method +<d ...`,l:"en/plugin/danmuku.html#emit",a:"emit"},"25.11":{t:"`config`\r",p:"Change the barrage configuration in real-time with the config ...",l:"en/plugin/danmuku.html#config",a:"config"},"25.12":{t:"`load`\r",p:"The load method can be used to reload the danmu data source or ...",l:"en/plugin/danmuku.html#load",a:"load"},"25.13":{t:"`reset`\r",p:`Used to clear the current displayed barrages +<div className ...`,l:"en/plugin/danmuku.html#reset",a:"reset"},"25.14":{t:"`option`\r",p:`Used to get the current barrage configuration +<div classNam ...`,l:"en/plugin/danmuku.html#option",a:"option"},"25.15":{t:"Event\r",p:`var art = new Artplayer({ container: '.artplayer-app', - ...`,l:"en/plugin/danmuku.html#event",a:"event"},"26.0":{t:"# Dash Video Quality",p:"",l:"en/plugin/dash-quality.html",a:"dash-video-quality"},"26.1":{t:"Demo",p:`👉 View the full demo -`,l:"en/plugin/dash-quality.html#demo",a:"demo"},"26.2":{t:"Installation",p:`::: code-group + ...`,l:"en/plugin/danmuku.html#event",a:"event"},"26.0":{t:"# Dash Video Quality\r",p:"\r",l:"en/plugin/dash-quality.html",a:"dash-video-quality"},"26.1":{t:"Demo\r",p:`👉 View the full demo +`,l:"en/plugin/dash-quality.html#demo",a:"demo"},"26.2":{t:"Installation\r",p:`::: code-group npm install artplayer-plugin-dash-quality -yarn ...`,l:"en/plugin/dash-quality.html#installation",a:"installation"},"26.3":{t:"CDN",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-d ...`,l:"en/plugin/dash-quality.html#cdn",a:"cdn"},"27.0":{t:"# HLS Quality",p:"",l:"en/plugin/hls-quality.html",a:"hls-quality"},"27.1":{t:"Demonstration",p:`👉 View the full demo -`,l:"en/plugin/hls-quality.html#demonstration",a:"demonstration"},"27.2":{t:"Installation",p:`::: code-group +yarn ...`,l:"en/plugin/dash-quality.html#installation",a:"installation"},"26.3":{t:"CDN\r",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-d ...`,l:"en/plugin/dash-quality.html#cdn",a:"cdn"},"27.0":{t:"# HLS Quality\r",p:"\r",l:"en/plugin/hls-quality.html",a:"hls-quality"},"27.1":{t:"Demonstration\r",p:`👉 View the full demo +`,l:"en/plugin/hls-quality.html#demonstration",a:"demonstration"},"27.2":{t:"Installation\r",p:`::: code-group npm install artplayer-plugin-hls-quality -yarn ...`,l:"en/plugin/hls-quality.html#installation",a:"installation"},"27.3":{t:"CDN",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-h ...`,l:"en/plugin/hls-quality.html#cdn",a:"cdn"},"28.0":{t:"# Iframe Control",p:"",l:"en/plugin/iframe.html",a:"iframe-control"},"28.1":{t:"Description",p:"With this plugin, you can easily control the player inside the ...",l:"en/plugin/iframe.html#description",a:"description"},"28.2":{t:"Demonstration",p:`👉 View full demonstration -`,l:"en/plugin/iframe.html#demonstration",a:"demonstration"},"28.3":{t:"Installation",p:`::: code-group +yarn ...`,l:"en/plugin/hls-quality.html#installation",a:"installation"},"27.3":{t:"CDN\r",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-h ...`,l:"en/plugin/hls-quality.html#cdn",a:"cdn"},"28.0":{t:"# Iframe Control\r",p:"\r",l:"en/plugin/iframe.html",a:"iframe-control"},"28.1":{t:"Description\r",p:"With this plugin, you can easily control the player inside the ...",l:"en/plugin/iframe.html#description",a:"description"},"28.2":{t:"Demonstration\r",p:`👉 View full demonstration +`,l:"en/plugin/iframe.html#demonstration",a:"demonstration"},"28.3":{t:"Installation\r",p:`::: code-group npm install artplayer-plugin-iframe -yarn add a ...`,l:"en/plugin/iframe.html#installation",a:"installation"},"28.4":{t:"`CDN`",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-i ...`,l:"en/plugin/iframe.html#cdn",a:"cdn"},"28.5":{t:"Usage",p:`::: code-group +yarn add a ...`,l:"en/plugin/iframe.html#installation",a:"installation"},"28.4":{t:"`CDN`\r",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-i ...`,l:"en/plugin/iframe.html#cdn",a:"cdn"},"28.5":{t:"Usage\r",p:`::: code-group <!DOCTYPE html> <html> - <head ...`,l:"en/plugin/iframe.html#usage",a:"usage"},"28.6":{t:"`index.html` Interface",p:"",l:"en/plugin/iframe.html#index-html-interface",a:"index-html-interface"},"28.7":{t:"`commit`",p:"Push messages from index.html to iframe.html. This function wi ...",l:"en/plugin/iframe.html#commit",a:"commit"},"28.8":{t:"`message`",p:`Receive messages from iframe.html in index.html -iframe.message ...`,l:"en/plugin/iframe.html#message",a:"message"},"28.9":{t:"`destroy`",p:"After destruction, index.html can no longer communicate with i ...",l:"en/plugin/iframe.html#destroy",a:"destroy"},"28.10":{t:"`iframe.html` Interface",p:`:::warning Warning -The iframe.html interface can only run insi ...`,l:"en/plugin/iframe.html#iframe-html-interface",a:"iframe-html-interface"},"28.11":{t:"`inject`",p:`Inject a script, receive messages from index.html -ArtplayerPlu ...`,l:"en/plugin/iframe.html#inject",a:"inject"},"28.12":{t:"`postMessage`",p:`Push messages to index.html + <head ...`,l:"en/plugin/iframe.html#usage",a:"usage"},"28.6":{t:"`index.html` Interface\r",p:"\r",l:"en/plugin/iframe.html#index-html-interface",a:"index-html-interface"},"28.7":{t:"`commit`\r",p:"Push messages from index.html to iframe.html. This function wi ...",l:"en/plugin/iframe.html#commit",a:"commit"},"28.8":{t:"`message`\r",p:`Receive messages from iframe.html in index.html +iframe.message ...`,l:"en/plugin/iframe.html#message",a:"message"},"28.9":{t:"`destroy`\r",p:"After destruction, index.html can no longer communicate with i ...",l:"en/plugin/iframe.html#destroy",a:"destroy"},"28.10":{t:"`iframe.html` Interface\r",p:`:::warning Warning +The iframe.html interface can only run insi ...`,l:"en/plugin/iframe.html#iframe-html-interface",a:"iframe-html-interface"},"28.11":{t:"`inject`\r",p:`Inject a script, receive messages from index.html +ArtplayerPlu ...`,l:"en/plugin/iframe.html#inject",a:"inject"},"28.12":{t:"`postMessage`\r",p:`Push messages to index.html iframe.message((event) => { - ...`,l:"en/plugin/iframe.html#postmessage",a:"postmessage"},"28.13":{t:"例子",p:"最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 ...",l:"en/plugin/iframe.html#例子",a:"例子"},"29.0":{t:"# Language Settings",p:`::: danger -Given the increasing number of bundled multilingual ...`,l:"en/start/i18n.html",a:"language-settings"},"29.1":{t:"Default Languages",p:"The default languages are: en, zh-cn, which do not require man ...",l:"en/start/i18n.html#default-languages",a:"default-languages"},"29.2":{t:"Importing Languages",p:"Language files before packaging are located in: artplayer/src/ ...",l:"en/start/i18n.html#importing-languages",a:"importing-languages"},"29.3":{t:"Add Language",p:`var art = new Artplayer({ + ...`,l:"en/plugin/iframe.html#postmessage",a:"postmessage"},"28.13":{t:"例子\r",p:"最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 ...",l:"en/plugin/iframe.html#例子",a:"例子"},"29.0":{t:"# Language Settings\r",p:`::: danger +Given the increasing number of bundled multilingual ...`,l:"en/start/i18n.html",a:"language-settings"},"29.1":{t:"Default Languages\r",p:"The default languages are: en, zh-cn, which do not require man ...",l:"en/start/i18n.html#default-languages",a:"default-languages"},"29.2":{t:"Importing Languages\r",p:"Language files before packaging are located in: artplayer/src/ ...",l:"en/start/i18n.html#importing-languages",a:"importing-languages"},"29.3":{t:"Add Language\r",p:`var art = new Artplayer({ container: '.artplayer-app', - ...`,l:"en/start/i18n.html#add-language",a:"add-language"},"29.4":{t:"Modify Language",p:`import zhTw from 'artplayer/i18n/zh-tw.js'; + ...`,l:"en/start/i18n.html#add-language",a:"add-language"},"29.4":{t:"Modify Language\r",p:`import zhTw from 'artplayer/i18n/zh-tw.js'; -var art = new Art ...`,l:"en/start/i18n.html#modify-language",a:"modify-language"},"30.0":{t:"# Basic Options",p:"",l:"en/start/option.html",a:"basic-options"},"30.1":{t:"`container`",p:` +var art = new Art ...`,l:"en/start/i18n.html#modify-language",a:"modify-language"},"30.0":{t:"# Basic Options\r",p:"\r",l:"en/start/option.html",a:"basic-options"},"30.1":{t:"`container`\r",p:` Type: String, Element Default: #artplayer -The DOM container ...`,l:"en/start/option.html#container",a:"container"},"30.2":{t:"`url`",p:` +The DOM container ...`,l:"en/start/option.html#container",a:"container"},"30.2":{t:"`url`\r",p:` Type: String Default: '' The video source address -<div cl ...`,l:"en/start/option.html#url",a:"url"},"30.3":{t:"`id`",p:` +<div cl ...`,l:"en/start/option.html#url",a:"url"},"30.3":{t:"`id`\r",p:` Type: String Default: '' -The unique identifier of the player ...`,l:"en/start/option.html#id",a:"id"},"30.4":{t:"`onReady`",p:` +The unique identifier of the player ...`,l:"en/start/option.html#id",a:"id"},"30.4":{t:"`onReady`\r",p:` Type: Function Default: undefined -The constructor accepts a ...`,l:"en/start/option.html#onready",a:"onready"},"30.5":{t:"`poster`",p:` +The constructor accepts a ...`,l:"en/start/option.html#onready",a:"onready"},"30.5":{t:"`poster`\r",p:` Type: String Default: '' -The poster of the video, which only ...`,l:"en/start/option.html#poster",a:"poster"},"30.6":{t:"`theme`",p:` +The poster of the video, which only ...`,l:"en/start/option.html#poster",a:"poster"},"30.6":{t:"`theme`\r",p:` Type: String Default: #f00 -Player theme color, currently use ...`,l:"en/start/option.html#theme",a:"theme"},"30.7":{t:"`volume`",p:` +Player theme color, currently use ...`,l:"en/start/option.html#theme",a:"theme"},"30.7":{t:"`volume`\r",p:` Type: Number Default: 0.7 The default volume of the player -& ...`,l:"en/start/option.html#volume",a:"volume"},"30.8":{t:"`isLive`",p:` +& ...`,l:"en/start/option.html#volume",a:"volume"},"30.8":{t:"`isLive`\r",p:` Type: Boolean Default: false -Use live mode, which will hide ...`,l:"en/start/option.html#islive",a:"islive"},"30.9":{t:"`muted`",p:` +Use live mode, which will hide ...`,l:"en/start/option.html#islive",a:"islive"},"30.9":{t:"`muted`\r",p:` Type: Boolean Default: false Whether to mute by default -< ...`,l:"en/start/option.html#muted",a:"muted"},"30.10":{t:"`autoplay`",p:` +< ...`,l:"en/start/option.html#muted",a:"muted"},"30.10":{t:"`autoplay`\r",p:` Type: Boolean Default: false Whether to play automatically - ...`,l:"en/start/option.html#autoplay",a:"autoplay"},"30.11":{t:"`autoSize`",p:` + ...`,l:"en/start/option.html#autoplay",a:"autoplay"},"30.11":{t:"`autoSize`\r",p:` Type: Boolean Default: false -The size of the player will by ...`,l:"en/start/option.html#autosize",a:"autosize"},"30.12":{t:"`autoMini`",p:` +The size of the player will by ...`,l:"en/start/option.html#autosize",a:"autosize"},"30.12":{t:"`autoMini`\r",p:` Type: Boolean Default: false -Automatically enter mini mode w ...`,l:"en/start/option.html#automini",a:"automini"},"30.13":{t:"`loop`",p:` +Automatically enter mini mode w ...`,l:"en/start/option.html#automini",a:"automini"},"30.13":{t:"`loop`\r",p:` Type: Boolean Default: false Whether to loop the video -<d ...`,l:"en/start/option.html#loop",a:"loop"},"30.14":{t:"`flip`",p:` +<d ...`,l:"en/start/option.html#loop",a:"loop"},"30.14":{t:"`flip`\r",p:` Type: Boolean Default: false -Whether to show the video flip ...`,l:"en/start/option.html#flip",a:"flip"},"30.15":{t:"`playbackRate`",p:` +Whether to show the video flip ...`,l:"en/start/option.html#flip",a:"flip"},"30.15":{t:"`playbackRate`\r",p:` Type: Boolean Default: false -Whether to show the playback sp ...`,l:"en/start/option.html#playbackrate",a:"playbackrate"},"30.16":{t:"`aspectRatio`",p:` +Whether to show the playback sp ...`,l:"en/start/option.html#playbackrate",a:"playbackrate"},"30.16":{t:"`aspectRatio`\r",p:` Type: Boolean Default: false -Displays the video aspect ratio ...`,l:"en/start/option.html#aspectratio",a:"aspectratio"},"30.17":{t:"`screenshot`",p:` +Displays the video aspect ratio ...`,l:"en/start/option.html#aspectratio",a:"aspectratio"},"30.17":{t:"`screenshot`\r",p:` Type: Boolean Default: false -Whether to show the screenshot ...`,l:"en/start/option.html#screenshot",a:"screenshot"},"30.18":{t:"`setting`",p:` +Whether to show the screenshot ...`,l:"en/start/option.html#screenshot",a:"screenshot"},"30.18":{t:"`setting`\r",p:` Type: Boolean Default: false -Display the toggle button for t ...`,l:"en/start/option.html#setting",a:"setting"},"30.19":{t:"`hotkey`",p:` +Display the toggle button for t ...`,l:"en/start/option.html#setting",a:"setting"},"30.19":{t:"`hotkey`\r",p:` Type: Boolean Default: true Whether to use hotkeys -<div c ...`,l:"en/start/option.html#hotkey",a:"hotkey"},"30.20":{t:"`pip`",p:` +<div c ...`,l:"en/start/option.html#hotkey",a:"hotkey"},"30.20":{t:"`pip`\r",p:` Type: Boolean Default: false -Show the Picture in Picture swit ...`,l:"en/start/option.html#pip",a:"pip"},"30.21":{t:"`mutex`",p:` +Show the Picture in Picture swit ...`,l:"en/start/option.html#pip",a:"pip"},"30.21":{t:"`mutex`\r",p:` Type: Boolean Default: true -If there are multiple players on ...`,l:"en/start/option.html#mutex",a:"mutex"},"30.22":{t:"`fullscreen`",p:` +If there are multiple players on ...`,l:"en/start/option.html#mutex",a:"mutex"},"30.22":{t:"`fullscreen`\r",p:` Type: Boolean Default: false -Display the Window Fullscreen bu ...`,l:"en/start/option.html#fullscreen",a:"fullscreen"},"30.23":{t:"`fullscreenWeb`",p:` +Display the Window Fullscreen bu ...`,l:"en/start/option.html#fullscreen",a:"fullscreen"},"30.23":{t:"`fullscreenWeb`\r",p:` Type: Boolean Default: false -Display the Web Fullscreen butt ...`,l:"en/start/option.html#fullscreenweb",a:"fullscreenweb"},"30.24":{t:"`subtitleOffset`",p:` +Display the Web Fullscreen butt ...`,l:"en/start/option.html#fullscreenweb",a:"fullscreenweb"},"30.24":{t:"`subtitleOffset`\r",p:` Type: Boolean @@ -920,345 +920,345 @@ Type: Boolean Default: false -Subtitle time offset, the r ...`,l:"en/start/option.html#subtitleoffset",a:"subtitleoffset"},"30.25":{t:"`miniProgressBar`",p:` +Subtitle time offset, the r ...`,l:"en/start/option.html#subtitleoffset",a:"subtitleoffset"},"30.25":{t:"`miniProgressBar`\r",p:` Type: Boolean Default: false -Mini progress bar, only appears ...`,l:"en/start/option.html#miniprogressbar",a:"miniprogressbar"},"30.26":{t:"`useSSR`",p:` +Mini progress bar, only appears ...`,l:"en/start/option.html#miniprogressbar",a:"miniprogressbar"},"30.26":{t:"`useSSR`\r",p:` Type: Boolean Default: false -Whether to use SSR (Server-Side ...`,l:"en/start/option.html#usessr",a:"usessr"},"30.27":{t:"`playsInline`",p:` +Whether to use SSR (Server-Side ...`,l:"en/start/option.html#usessr",a:"usessr"},"30.27":{t:"`playsInline`\r",p:` Type: Boolean Default: true -Whether to use playsInline mode ...`,l:"en/start/option.html#playsinline",a:"playsinline"},"30.28":{t:"`layers`",p:` +Whether to use playsInline mode ...`,l:"en/start/option.html#playsinline",a:"playsinline"},"30.28":{t:"`layers`\r",p:` Type: Array Default: [] Initializes custom layers -<div cl ...`,l:"en/start/option.html#layers",a:"layers"},"30.29":{t:"`settings`",p:` +<div cl ...`,l:"en/start/option.html#layers",a:"layers"},"30.29":{t:"`settings`\r",p:` Type: Array Default: [] Initializes custom settings panel -&l ...`,l:"en/start/option.html#settings",a:"settings"},"30.30":{t:"`contextmenu`",p:` +&l ...`,l:"en/start/option.html#settings",a:"settings"},"30.30":{t:"`contextmenu`\r",p:` Type: Array Default: [] Initialize custom context menu -<d ...`,l:"en/start/option.html#contextmenu",a:"contextmenu"},"30.31":{t:"`controls`",p:` +<d ...`,l:"en/start/option.html#contextmenu",a:"contextmenu"},"30.31":{t:"`controls`\r",p:` Type: Array Default: [] -Initializes custom bottom control ba ...`,l:"en/start/option.html#controls",a:"controls"},"30.32":{t:"`quality`",p:` +Initializes custom bottom control ba ...`,l:"en/start/option.html#controls",a:"controls"},"30.32":{t:"`quality`\r",p:` Type: Array Default: [] -Whether to show the quality selectio ...`,l:"en/start/option.html#quality",a:"quality"},"30.33":{t:"`highlight`",p:` +Whether to show the quality selectio ...`,l:"en/start/option.html#quality",a:"quality"},"30.33":{t:"`highlight`\r",p:` Type: Array Default: [] -Show highlight information on the pr ...`,l:"en/start/option.html#highlight",a:"highlight"},"30.34":{t:"`plugins`",p:` +Show highlight information on the pr ...`,l:"en/start/option.html#highlight",a:"highlight"},"30.34":{t:"`plugins`\r",p:` Type: Array Default: [] Initialize custom plugins -<div cl ...`,l:"en/start/option.html#plugins",a:"plugins"},"30.35":{t:"`thumbnails`",p:` +<div cl ...`,l:"en/start/option.html#plugins",a:"plugins"},"30.35":{t:"`thumbnails`\r",p:` Type: Object Default: {} Set thumbnails on the progress bar - ...`,l:"en/start/option.html#thumbnails",a:"thumbnails"},"30.36":{t:"`subtitle`",p:` + ...`,l:"en/start/option.html#thumbnails",a:"thumbnails"},"30.36":{t:"`subtitle`\r",p:` Type: Object Default: {} -Set the video subtitles, supporting ...`,l:"en/start/option.html#subtitle",a:"subtitle"},"30.37":{t:"`moreVideoAttr`",p:` +Set the video subtitles, supporting ...`,l:"en/start/option.html#subtitle",a:"subtitle"},"30.37":{t:"`moreVideoAttr`\r",p:` Type: Object -Default: {'controls': false, 'preload': 'metadat ...`,l:"en/start/option.html#morevideoattr",a:"morevideoattr"},"30.38":{t:"`icons`",p:` +Default: {'controls': false, 'preload': 'metadat ...`,l:"en/start/option.html#morevideoattr",a:"morevideoattr"},"30.38":{t:"`icons`\r",p:` Type: Object Default: {} -Used to replace default icons, supp ...`,l:"en/start/option.html#icons",a:"icons"},"30.39":{t:"`type`",p:` +Used to replace default icons, supp ...`,l:"en/start/option.html#icons",a:"icons"},"30.39":{t:"`type`\r",p:` Type: String Default: '' -Used to specify the format of the v ...`,l:"en/start/option.html#type",a:"type"},"30.40":{t:"`customType`",p:` +Used to specify the format of the v ...`,l:"en/start/option.html#type",a:"type"},"30.40":{t:"`customType`\r",p:` Type: Object Default: {} -Matches the video's type to delegat ...`,l:"en/start/option.html#customtype",a:"customtype"},"30.41":{t:"`lang`",p:` +Matches the video's type to delegat ...`,l:"en/start/option.html#customtype",a:"customtype"},"30.41":{t:"`lang`\r",p:` Type: String Default: navigator.language.toLowerCase() -Defau ...`,l:"en/start/option.html#lang",a:"lang"},"30.42":{t:"`i18n`",p:` +Defau ...`,l:"en/start/option.html#lang",a:"lang"},"30.42":{t:"`i18n`\r",p:` Type: Object Default: {} -Custom i18n configuration, which wi ...`,l:"en/start/option.html#i18n",a:"i18n"},"30.43":{t:"`lock`",p:` +Custom i18n configuration, which wi ...`,l:"en/start/option.html#i18n",a:"i18n"},"30.43":{t:"`lock`\r",p:` Type: Boolean Default: false -Whether to display a lock butto ...`,l:"en/start/option.html#lock",a:"lock"},"30.44":{t:"`fastForward`",p:` +Whether to display a lock butto ...`,l:"en/start/option.html#lock",a:"lock"},"30.44":{t:"`fastForward`\r",p:` Type: Boolean Default: false -Whether to add fast forward fun ...`,l:"en/start/option.html#fastforward",a:"fastforward"},"30.45":{t:"`autoPlayback`",p:` +Whether to add fast forward fun ...`,l:"en/start/option.html#fastforward",a:"fastforward"},"30.45":{t:"`autoPlayback`\r",p:` Type: Boolean Default: false -Whether to use the automatic pl ...`,l:"en/start/option.html#autoplayback",a:"autoplayback"},"30.46":{t:"`autoOrientation`",p:` +Whether to use the automatic pl ...`,l:"en/start/option.html#autoplayback",a:"autoplayback"},"30.46":{t:"`autoOrientation`\r",p:` Type: Boolean Default: false -Whether to rotate the player on ...`,l:"en/start/option.html#autoorientation",a:"autoorientation"},"30.47":{t:"`airplay`",p:` +Whether to rotate the player on ...`,l:"en/start/option.html#autoorientation",a:"autoorientation"},"30.47":{t:"`airplay`\r",p:` Type: Boolean Default: false -Whether to display the airplay ...`,l:"en/start/option.html#airplay",a:"airplay"},"30.48":{t:"`cssVar`",p:` +Whether to display the airplay ...`,l:"en/start/option.html#airplay",a:"airplay"},"30.48":{t:"`cssVar`\r",p:` Type: Object Default: {} -Used to change built-in CSS variabl ...`,l:"en/start/option.html#cssvar",a:"cssvar"},"31.0":{t:"# 安装使用",p:"",l:"index.html",a:"安装使用"},"31.1":{t:"安装",p:`::: code-group +Used to change built-in CSS variabl ...`,l:"en/start/option.html#cssvar",a:"cssvar"},"31.0":{t:"# 安装使用\r",p:"\r",l:"index.html",a:"安装使用"},"31.1":{t:"安装\r",p:`::: code-group npm install artplayer yarn add artplayer -pnpm ...`,l:"index.html#安装",a:"安装"},"31.2":{t:"`CDN`",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer/dist/art ...`,l:"index.html#cdn",a:"cdn"},"31.3":{t:"使用",p:`::: code-group +pnpm ...`,l:"index.html#安装",a:"安装"},"31.2":{t:"`CDN`\r",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer/dist/art ...`,l:"index.html#cdn",a:"cdn"},"31.3":{t:"使用\r",p:`::: code-group import Artplayer from 'artplayer'; -const art = ...`,l:"index.html#使用",a:"使用"},"31.4":{t:"`Vue.js`",p:`::: code-group +const art = ...`,l:"index.html#使用",a:"使用"},"31.4":{t:"`Vue.js`\r",p:`::: code-group <template> - <div ref="artRef&quo ...`,l:"index.html#vue-js",a:"vue-js"},"31.5":{t:"`React.js`",p:`::: code-group + <div ref="artRef&quo ...`,l:"index.html#vue-js",a:"vue-js"},"31.5":{t:"`React.js`\r",p:`::: code-group import { useEffect, useRef } from 'react'; -impo ...`,l:"index.html#react-js",a:"react-js"},"31.6":{t:"TypeScript",p:`导入 Artplayer 时会自动导入的 artplayer.d.ts -`,l:"index.html#typescript",a:"typescript"},"31.7":{t:"Vue.js",p:` +impo ...`,l:"index.html#react-js",a:"react-js"},"31.6":{t:"TypeScript\r",p:`导入 Artplayer 时会自动导入的 artplayer.d.ts +`,l:"index.html#typescript",a:"typescript"},"31.7":{t:"Vue.js\r",p:` -`,l:"index.html#vue-js",a:"vue-js"},"31.8":{t:"React.js",p:`import Artplayer from 'artplayer'; -const art = useRef<Artpl ...`,l:"index.html#react-js",a:"react-js"},"31.9":{t:"Option",p:`你也可以单独导入选项的类型 +`,l:"index.html#vue-js",a:"vue-js"},"31.8":{t:"React.js\r",p:`import Artplayer from 'artplayer'; +const art = useRef<Artpl ...`,l:"index.html#react-js",a:"react-js"},"31.9":{t:"Option\r",p:`你也可以单独导入选项的类型 import Artplayer from 'artplayer'; -import { type ...`,l:"index.html#option",a:"option"},"31.10":{t:"JavaScript",p:`有时你的 js 文件会丢失 TypeScript 的类型提示，这时候你可以手动导入类型 +import { type ...`,l:"index.html#option",a:"option"},"31.10":{t:"JavaScript\r",p:`有时你的 js 文件会丢失 TypeScript 的类型提示，这时候你可以手动导入类型 变量： /** - * @type { ...`,l:"index.html#javascript",a:"javascript"},"31.11":{t:"古老的浏览器",p:`生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome：last 1 Chrome version -对于 ...`,l:"index.html#古老的浏览器",a:"古老的浏览器"},"32.0":{t:"# dash.js",p:`👉 https://github.com/Dash-Industry-Forum/dash.js -<div clas ...`,l:"library/dash.html",a:"dash-js"},"33.0":{t:"# flv.js",p:`👉 https://github.com/Bilibili/flv.js -<div className=" ...`,l:"library/flv.html",a:"flv-js"},"34.0":{t:"# hls.js",p:`👉 https://github.com/video-dev/hls.js -<div className=" ...`,l:"library/hls.html",a:"hls-js"},"35.0":{t:"# 视频广告",p:"",l:"plugin/ads.html",a:"视频广告"},"35.1":{t:"演示",p:`👉 查看完整演示 -`,l:"plugin/ads.html#演示",a:"演示"},"35.2":{t:"安装",p:`::: code-group + * @type { ...`,l:"index.html#javascript",a:"javascript"},"31.11":{t:"古老的浏览器\r",p:`生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome：last 1 Chrome version +对于 ...`,l:"index.html#古老的浏览器",a:"古老的浏览器"},"32.0":{t:"# dash.js\r",p:`👉 https://github.com/Dash-Industry-Forum/dash.js +<div clas ...`,l:"library/dash.html",a:"dash-js"},"33.0":{t:"# flv.js\r",p:`👉 https://github.com/Bilibili/flv.js +<div className=" ...`,l:"library/flv.html",a:"flv-js"},"34.0":{t:"# hls.js\r",p:`👉 https://github.com/video-dev/hls.js +<div className=" ...`,l:"library/hls.html",a:"hls-js"},"35.0":{t:"# 视频广告\r",p:"\r",l:"plugin/ads.html",a:"视频广告"},"35.1":{t:"演示\r",p:`👉 查看完整演示 +`,l:"plugin/ads.html#演示",a:"演示"},"35.2":{t:"安装\r",p:`::: code-group npm install artplayer-plugin-ads -yarn add artp ...`,l:"plugin/ads.html#安装",a:"安装"},"35.3":{t:"CDN",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-a ...`,l:"plugin/ads.html#cdn",a:"cdn"},"35.4":{t:"使用",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/ads.html#使用",a:"使用"},"36.0":{t:"# 弹幕库",p:"",l:"plugin/danmuku.html",a:"弹幕库"},"36.1":{t:"演示",p:`👉 查看完整演示 -`,l:"plugin/danmuku.html#演示",a:"演示"},"36.2":{t:"安装",p:`::: code-group +yarn add artp ...`,l:"plugin/ads.html#安装",a:"安装"},"35.3":{t:"CDN\r",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-a ...`,l:"plugin/ads.html#cdn",a:"cdn"},"35.4":{t:"使用\r",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/ads.html#使用",a:"使用"},"36.0":{t:"# 弹幕库\r",p:"\r",l:"plugin/danmuku.html",a:"弹幕库"},"36.1":{t:"演示\r",p:`👉 查看完整演示 +`,l:"plugin/danmuku.html#演示",a:"演示"},"36.2":{t:"安装\r",p:`::: code-group npm install artplayer-plugin-danmuku -yarn add ...`,l:"plugin/danmuku.html#安装",a:"安装"},"36.3":{t:"CDN",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-d ...`,l:"plugin/danmuku.html#cdn",a:"cdn"},"36.4":{t:"选项",p:`{ +yarn add ...`,l:"plugin/danmuku.html#安装",a:"安装"},"36.3":{t:"CDN\r",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-d ...`,l:"plugin/danmuku.html#cdn",a:"cdn"},"36.4":{t:"选项\r",p:`{ danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组 - speed: ...`,l:"plugin/danmuku.html#选项",a:"选项"},"36.5":{t:"使用弹幕数组",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/danmuku.html#使用弹幕数组",a:"使用弹幕数组"},"36.6":{t:"使用弹幕 XML",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/danmuku.html#使用弹幕-xml",a:"使用弹幕-xml"},"36.7":{t:"使用异步调用",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/danmuku.html#使用异步调用",a:"使用异步调用"},"36.8":{t:"`hide/show`",p:`通过方法 hide 和 show 进行隐藏或者显示弹幕 -<div className="run-code&q ...`,l:"plugin/danmuku.html#hide-show",a:"hide-show"},"36.9":{t:"`isHide`",p:`通过属性 isHide 判断当前弹幕是隐藏或者显示 -<div className="run-code&quo ...`,l:"plugin/danmuku.html#ishide",a:"ishide"},"36.10":{t:"`emit`",p:`通过方法 emit 发送一条实时弹幕 -<div className="run-code" data ...`,l:"plugin/danmuku.html#emit",a:"emit"},"36.11":{t:"`config`",p:`通过方法 config 实时改变弹幕配置，支持属性有： + speed: ...`,l:"plugin/danmuku.html#选项",a:"选项"},"36.5":{t:"使用弹幕数组\r",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/danmuku.html#使用弹幕数组",a:"使用弹幕数组"},"36.6":{t:"使用弹幕 XML\r",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/danmuku.html#使用弹幕-xml",a:"使用弹幕-xml"},"36.7":{t:"使用异步调用\r",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/danmuku.html#使用异步调用",a:"使用异步调用"},"36.8":{t:"`hide/show`\r",p:`通过方法 hide 和 show 进行隐藏或者显示弹幕 +<div className="run-code&q ...`,l:"plugin/danmuku.html#hide-show",a:"hide-show"},"36.9":{t:"`isHide`\r",p:`通过属性 isHide 判断当前弹幕是隐藏或者显示 +<div className="run-code&quo ...`,l:"plugin/danmuku.html#ishide",a:"ishide"},"36.10":{t:"`emit`\r",p:`通过方法 emit 发送一条实时弹幕 +<div className="run-code" data ...`,l:"plugin/danmuku.html#emit",a:"emit"},"36.11":{t:"`config`\r",p:`通过方法 config 实时改变弹幕配置，支持属性有： danmuku speed opacity fontSize -co ...`,l:"plugin/danmuku.html#config",a:"config"},"36.12":{t:"`load`",p:`通过 load 方法可以重载弹幕源，或者切换新弹幕 -<div className="run-code&quo ...`,l:"plugin/danmuku.html#load",a:"load"},"36.13":{t:"`reset`",p:`用于清空当前显示的弹幕 -<div className="run-code" data-libs=& ...`,l:"plugin/danmuku.html#reset",a:"reset"},"36.14":{t:"`option`",p:`用于获取当前弹幕配置 -<div className="run-code" data-libs=&q ...`,l:"plugin/danmuku.html#option",a:"option"},"36.15":{t:"事件",p:`var art = new Artplayer({ +co ...`,l:"plugin/danmuku.html#config",a:"config"},"36.12":{t:"`load`\r",p:`通过 load 方法可以重载弹幕源，或者切换新弹幕 +<div className="run-code&quo ...`,l:"plugin/danmuku.html#load",a:"load"},"36.13":{t:"`reset`\r",p:`用于清空当前显示的弹幕 +<div className="run-code" data-libs=& ...`,l:"plugin/danmuku.html#reset",a:"reset"},"36.14":{t:"`option`\r",p:`用于获取当前弹幕配置 +<div className="run-code" data-libs=&q ...`,l:"plugin/danmuku.html#option",a:"option"},"36.15":{t:"事件\r",p:`var art = new Artplayer({ container: '.artplayer-app', - ...`,l:"plugin/danmuku.html#事件",a:"事件"},"37.0":{t:"# Dash 画质",p:"",l:"plugin/dash-quality.html",a:"dash-画质"},"37.1":{t:"演示",p:`👉 查看完整演示 -`,l:"plugin/dash-quality.html#演示",a:"演示"},"37.2":{t:"安装",p:`::: code-group + ...`,l:"plugin/danmuku.html#事件",a:"事件"},"37.0":{t:"# Dash 画质\r",p:"\r",l:"plugin/dash-quality.html",a:"dash-画质"},"37.1":{t:"演示\r",p:`👉 查看完整演示 +`,l:"plugin/dash-quality.html#演示",a:"演示"},"37.2":{t:"安装\r",p:`::: code-group npm install artplayer-plugin-dash-quality -yarn ...`,l:"plugin/dash-quality.html#安装",a:"安装"},"37.3":{t:"CDN",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-d ...`,l:"plugin/dash-quality.html#cdn",a:"cdn"},"38.0":{t:"# HLS 画质",p:"",l:"plugin/hls-quality.html",a:"hls-画质"},"38.1":{t:"演示",p:`👉 查看完整演示 -`,l:"plugin/hls-quality.html#演示",a:"演示"},"38.2":{t:"安装",p:`::: code-group +yarn ...`,l:"plugin/dash-quality.html#安装",a:"安装"},"37.3":{t:"CDN\r",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-d ...`,l:"plugin/dash-quality.html#cdn",a:"cdn"},"38.0":{t:"# HLS 画质\r",p:"\r",l:"plugin/hls-quality.html",a:"hls-画质"},"38.1":{t:"演示\r",p:`👉 查看完整演示 +`,l:"plugin/hls-quality.html#演示",a:"演示"},"38.2":{t:"安装\r",p:`::: code-group npm install artplayer-plugin-hls-quality -yarn ...`,l:"plugin/hls-quality.html#安装",a:"安装"},"38.3":{t:"CDN",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-h ...`,l:"plugin/hls-quality.html#cdn",a:"cdn"},"39.0":{t:"# Iframe 控制",p:"",l:"plugin/iframe.html",a:"iframe-控制"},"39.1":{t:"说明",p:"通过该插件，你可以轻松在 index.html 里控制跨域 iframe.html 页面里的播放器，如在 index.htm ...",l:"plugin/iframe.html#说明",a:"说明"},"39.2":{t:"演示",p:`👉 查看完整演示 -`,l:"plugin/iframe.html#演示",a:"演示"},"39.3":{t:"安装",p:`::: code-group +yarn ...`,l:"plugin/hls-quality.html#安装",a:"安装"},"38.3":{t:"CDN\r",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-h ...`,l:"plugin/hls-quality.html#cdn",a:"cdn"},"39.0":{t:"# Iframe 控制\r",p:"\r",l:"plugin/iframe.html",a:"iframe-控制"},"39.1":{t:"说明\r",p:"通过该插件，你可以轻松在 index.html 里控制跨域 iframe.html 页面里的播放器，如在 index.htm ...",l:"plugin/iframe.html#说明",a:"说明"},"39.2":{t:"演示\r",p:`👉 查看完整演示 +`,l:"plugin/iframe.html#演示",a:"演示"},"39.3":{t:"安装\r",p:`::: code-group npm install artplayer-plugin-iframe -yarn add a ...`,l:"plugin/iframe.html#安装",a:"安装"},"39.4":{t:"`CDN`",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-i ...`,l:"plugin/iframe.html#cdn",a:"cdn"},"39.5":{t:"使用",p:`::: code-group +yarn add a ...`,l:"plugin/iframe.html#安装",a:"安装"},"39.4":{t:"`CDN`\r",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-i ...`,l:"plugin/iframe.html#cdn",a:"cdn"},"39.5":{t:"使用\r",p:`::: code-group <!DOCTYPE html> <html> - <head ...`,l:"plugin/iframe.html#使用",a:"使用"},"39.6":{t:"`index.html` 接口",p:"",l:"plugin/iframe.html#index-html-接口",a:"index-html-接口"},"39.7":{t:"`commit`",p:"从 index.html 将消息推送到 iframe.html，该函数将在 iframe.html 内部运行，同时它也能用于 ...",l:"plugin/iframe.html#commit",a:"commit"},"39.8":{t:"`message`",p:`在 index.html 接收来自 iframe.html 的消息 -iframe.message((event) => ...`,l:"plugin/iframe.html#message",a:"message"},"39.9":{t:"`destroy`",p:`销毁后 index.html 无法与 iframe.html 通信 + <head ...`,l:"plugin/iframe.html#使用",a:"使用"},"39.6":{t:"`index.html` 接口\r",p:"\r",l:"plugin/iframe.html#index-html-接口",a:"index-html-接口"},"39.7":{t:"`commit`\r",p:"从 index.html 将消息推送到 iframe.html，该函数将在 iframe.html 内部运行，同时它也能用于 ...",l:"plugin/iframe.html#commit",a:"commit"},"39.8":{t:"`message`\r",p:`在 index.html 接收来自 iframe.html 的消息 +iframe.message((event) => ...`,l:"plugin/iframe.html#message",a:"message"},"39.9":{t:"`destroy`\r",p:`销毁后 index.html 无法与 iframe.html 通信 iframe.destroy(); -`,l:"plugin/iframe.html#destroy",a:"destroy"},"39.10":{t:"`iframe.html` 接口",p:`:::warning 提示 +`,l:"plugin/iframe.html#destroy",a:"destroy"},"39.10":{t:"`iframe.html` 接口\r",p:`:::warning 提示 iframe.html 接口 只能运行在 iframe.html 里 ::: -`,l:"plugin/iframe.html#iframe-html-接口",a:"iframe-html-接口"},"39.11":{t:"`inject`",p:`注入脚本，接收来自 index.html 的消息 +`,l:"plugin/iframe.html#iframe-html-接口",a:"iframe-html-接口"},"39.11":{t:"`inject`\r",p:`注入脚本，接收来自 index.html 的消息 ArtplayerPluginIframe.inject(); -`,l:"plugin/iframe.html#inject",a:"inject"},"39.12":{t:"`postMessage`",p:`将消息推送到 index.html +`,l:"plugin/iframe.html#inject",a:"inject"},"39.12":{t:"`postMessage`\r",p:`将消息推送到 index.html iframe.message((event) => { - console.i ...`,l:"plugin/iframe.html#postmessage",a:"postmessage"},"39.13":{t:"例子",p:"最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 ...",l:"plugin/iframe.html#例子",a:"例子"},"40.0":{t:"# 语言设置",p:`::: danger -鉴于捆绑的多国语言越来越多, 从 5.1.0 版本开始, artplayer.js 核心代码除了包含 ...`,l:"start/i18n.html",a:"语言设置"},"40.1":{t:"默认语言",p:`默认语言有: en, zh-cn, 无需手动导入 + console.i ...`,l:"plugin/iframe.html#postmessage",a:"postmessage"},"39.13":{t:"例子\r",p:"最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 ...",l:"plugin/iframe.html#例子",a:"例子"},"40.0":{t:"# 语言设置\r",p:`::: danger +鉴于捆绑的多国语言越来越多, 从 5.1.0 版本开始, artplayer.js 核心代码除了包含 ...`,l:"start/i18n.html",a:"语言设置"},"40.1":{t:"默认语言\r",p:`默认语言有: en, zh-cn, 无需手动导入 var art = new Artplayer({ - contain ...`,l:"start/i18n.html#默认语言",a:"默认语言"},"40.2":{t:"导入语言",p:`打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言 -打包后的语言文件存放于: a ...`,l:"start/i18n.html#导入语言",a:"导入语言"},"40.3":{t:"新增语言",p:`var art = new Artplayer({ + contain ...`,l:"start/i18n.html#默认语言",a:"默认语言"},"40.2":{t:"导入语言\r",p:`打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言 +打包后的语言文件存放于: a ...`,l:"start/i18n.html#导入语言",a:"导入语言"},"40.3":{t:"新增语言\r",p:`var art = new Artplayer({ container: '.artplayer-app', - ...`,l:"start/i18n.html#新增语言",a:"新增语言"},"40.4":{t:"修改语言",p:`import zhTw from 'artplayer/i18n/zh-tw.js'; + ...`,l:"start/i18n.html#新增语言",a:"新增语言"},"40.4":{t:"修改语言\r",p:`import zhTw from 'artplayer/i18n/zh-tw.js'; -var art = new Art ...`,l:"start/i18n.html#修改语言",a:"修改语言"},"41.0":{t:"# 基础选项",p:"",l:"start/option.html",a:"基础选项"},"41.1":{t:"`container`",p:` +var art = new Art ...`,l:"start/i18n.html#修改语言",a:"修改语言"},"41.0":{t:"# 基础选项\r",p:"\r",l:"start/option.html",a:"基础选项"},"41.1":{t:"`container`\r",p:` Type: String, Element Default: #artplayer 播放器挂载的 DOM 容器 -< ...`,l:"start/option.html#container",a:"container"},"41.2":{t:"`url`",p:` +< ...`,l:"start/option.html#container",a:"container"},"41.2":{t:"`url`\r",p:` Type: String Default: '' 视频源地址 -<div className="run-c ...`,l:"start/option.html#url",a:"url"},"41.3":{t:"`id`",p:` +<div className="run-c ...`,l:"start/option.html#url",a:"url"},"41.3":{t:"`id`\r",p:` Type: String Default: '' 播放器的唯一标识，目前只用于记忆播放 autoplayback -< ...`,l:"start/option.html#id",a:"id"},"41.4":{t:"`onReady`",p:` +< ...`,l:"start/option.html#id",a:"id"},"41.4":{t:"`onReady`\r",p:` Type: Function Default: undefined -构造函数接受一个函数作为第二个参数，播放器初始化成功 ...`,l:"start/option.html#onready",a:"onready"},"41.5":{t:"`poster`",p:` +构造函数接受一个函数作为第二个参数，播放器初始化成功 ...`,l:"start/option.html#onready",a:"onready"},"41.5":{t:"`poster`\r",p:` Type: String Default: '' 视频的海报，只会出现在播放器初始化且未播放的状态下 -<div c ...`,l:"start/option.html#poster",a:"poster"},"41.6":{t:"`theme`",p:` +<div c ...`,l:"start/option.html#poster",a:"poster"},"41.6":{t:"`theme`\r",p:` Type: String Default: #f00 播放器主题颜色，目前用于 进度条 和 高亮元素 上 -<div ...`,l:"start/option.html#theme",a:"theme"},"41.7":{t:"`volume`",p:` +<div ...`,l:"start/option.html#theme",a:"theme"},"41.7":{t:"`volume`\r",p:` Type: Number Default: 0.7 播放器的默认音量 -<div className="r ...`,l:"start/option.html#volume",a:"volume"},"41.8":{t:"`isLive`",p:` +<div className="r ...`,l:"start/option.html#volume",a:"volume"},"41.8":{t:"`isLive`\r",p:` Type: Boolean Default: false 使用直播模式，会隐藏进度条和播放时间 -<div clas ...`,l:"start/option.html#islive",a:"islive"},"41.9":{t:"`muted`",p:` +<div clas ...`,l:"start/option.html#islive",a:"islive"},"41.9":{t:"`muted`\r",p:` Type: Boolean Default: false 是否默认静音 -<div className=" ...`,l:"start/option.html#muted",a:"muted"},"41.10":{t:"`autoplay`",p:` +<div className=" ...`,l:"start/option.html#muted",a:"muted"},"41.10":{t:"`autoplay`\r",p:` Type: Boolean Default: false 是否自动播放 -<div className=" ...`,l:"start/option.html#autoplay",a:"autoplay"},"41.11":{t:"`autoSize`",p:` +<div className=" ...`,l:"start/option.html#autoplay",a:"autoplay"},"41.11":{t:"`autoSize`\r",p:` Type: Boolean Default: false -播放器的尺寸默认会填充整个 container 容器尺寸，所以 ...`,l:"start/option.html#autosize",a:"autosize"},"41.12":{t:"`autoMini`",p:` +播放器的尺寸默认会填充整个 container 容器尺寸，所以 ...`,l:"start/option.html#autosize",a:"autosize"},"41.12":{t:"`autoMini`\r",p:` Type: Boolean Default: false 当播放器滚动到浏览器视口以外时，自动进入 迷你播放 模式 -&l ...`,l:"start/option.html#automini",a:"automini"},"41.13":{t:"`loop`",p:` +&l ...`,l:"start/option.html#automini",a:"automini"},"41.13":{t:"`loop`\r",p:` Type: Boolean Default: false 是否循环播放 -<div className=" ...`,l:"start/option.html#loop",a:"loop"},"41.14":{t:"`flip`",p:` +<div className=" ...`,l:"start/option.html#loop",a:"loop"},"41.14":{t:"`flip`\r",p:` Type: Boolean Default: false -是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单 里 ...`,l:"start/option.html#flip",a:"flip"},"41.15":{t:"`playbackRate`",p:` +是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单 里 ...`,l:"start/option.html#flip",a:"flip"},"41.15":{t:"`playbackRate`\r",p:` Type: Boolean Default: false -是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里 ...`,l:"start/option.html#playbackrate",a:"playbackrate"},"41.16":{t:"`aspectRatio`",p:` +是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里 ...`,l:"start/option.html#playbackrate",a:"playbackrate"},"41.16":{t:"`aspectRatio`\r",p:` Type: Boolean Default: false 是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里 - ...`,l:"start/option.html#aspectratio",a:"aspectratio"},"41.17":{t:"`screenshot`",p:` + ...`,l:"start/option.html#aspectratio",a:"aspectratio"},"41.17":{t:"`screenshot`\r",p:` Type: Boolean Default: false 是否在底部控制栏里显示 视频截图 功能 -<div cla ...`,l:"start/option.html#screenshot",a:"screenshot"},"41.18":{t:"`setting`",p:` +<div cla ...`,l:"start/option.html#screenshot",a:"screenshot"},"41.18":{t:"`setting`\r",p:` Type: Boolean Default: false 是否在底部控制栏里显示 设置面板 的开关按钮 -<div ...`,l:"start/option.html#setting",a:"setting"},"41.19":{t:"`hotkey`",p:` +<div ...`,l:"start/option.html#setting",a:"setting"},"41.19":{t:"`hotkey`\r",p:` Type: Boolean Default: true 是否使用快捷键 -<div className=" ...`,l:"start/option.html#hotkey",a:"hotkey"},"41.20":{t:"`pip`",p:` +<div className=" ...`,l:"start/option.html#hotkey",a:"hotkey"},"41.20":{t:"`pip`\r",p:` Type: Boolean Default: false 是否在底部控制栏里显示 画中画 的开关按钮 -<div c ...`,l:"start/option.html#pip",a:"pip"},"41.21":{t:"`mutex`",p:` +<div c ...`,l:"start/option.html#pip",a:"pip"},"41.21":{t:"`mutex`\r",p:` Type: Boolean Default: true 假如页面里同时存在多个播放器，是否只能让一个播放器播放 -< ...`,l:"start/option.html#mutex",a:"mutex"},"41.22":{t:"`fullscreen`",p:` +< ...`,l:"start/option.html#mutex",a:"mutex"},"41.22":{t:"`fullscreen`\r",p:` Type: Boolean Default: false 是否在底部控制栏里显示播放器 窗口全屏 按钮 -<div ...`,l:"start/option.html#fullscreen",a:"fullscreen"},"41.23":{t:"`fullscreenWeb`",p:` +<div ...`,l:"start/option.html#fullscreen",a:"fullscreen"},"41.23":{t:"`fullscreenWeb`\r",p:` Type: Boolean Default: false 是否在底部控制栏里显示播放器 网页全屏 按钮 -<div ...`,l:"start/option.html#fullscreenweb",a:"fullscreenweb"},"41.24":{t:"`subtitleOffset`",p:` +<div ...`,l:"start/option.html#fullscreenweb",a:"fullscreenweb"},"41.24":{t:"`subtitleOffset`\r",p:` Type: Boolean Default: false -字幕时间偏移，范围在 [-5s, 5s]，出现在 设置面板 里 ...`,l:"start/option.html#subtitleoffset",a:"subtitleoffset"},"41.25":{t:"`miniProgressBar`",p:` +字幕时间偏移，范围在 [-5s, 5s]，出现在 设置面板 里 ...`,l:"start/option.html#subtitleoffset",a:"subtitleoffset"},"41.25":{t:"`miniProgressBar`\r",p:` Type: Boolean Default: false 迷你进度条，只在播放器失去焦点后且正在播放时出现 -<di ...`,l:"start/option.html#miniprogressbar",a:"miniprogressbar"},"41.26":{t:"`useSSR`",p:` +<di ...`,l:"start/option.html#miniprogressbar",a:"miniprogressbar"},"41.26":{t:"`useSSR`\r",p:` Type: Boolean Default: false -是否使用 SSR 挂载模式，假如你希望在播放器挂载前，就提前渲 ...`,l:"start/option.html#usessr",a:"usessr"},"41.27":{t:"`playsInline`",p:` +是否使用 SSR 挂载模式，假如你希望在播放器挂载前，就提前渲 ...`,l:"start/option.html#usessr",a:"usessr"},"41.27":{t:"`playsInline`\r",p:` Type: Boolean Default: true 在移动端是否使用 playsInline 模式 -<div ...`,l:"start/option.html#playsinline",a:"playsinline"},"41.28":{t:"`layers`",p:` +<div ...`,l:"start/option.html#playsinline",a:"playsinline"},"41.28":{t:"`layers`\r",p:` Type: Array Default: [] 初始化自定义的 层 -<div className="ru ...`,l:"start/option.html#layers",a:"layers"},"41.29":{t:"`settings`",p:` +<div className="ru ...`,l:"start/option.html#layers",a:"layers"},"41.29":{t:"`settings`\r",p:` Type: Array Default: [] 初始化自定义的 设置面板 -<div className=" ...`,l:"start/option.html#settings",a:"settings"},"41.30":{t:"`contextmenu`",p:` +<div className=" ...`,l:"start/option.html#settings",a:"settings"},"41.30":{t:"`contextmenu`\r",p:` Type: Array Default: [] 初始化自定义的 右键菜单 -<div className=" ...`,l:"start/option.html#contextmenu",a:"contextmenu"},"41.31":{t:"`controls`",p:` +<div className=" ...`,l:"start/option.html#contextmenu",a:"contextmenu"},"41.31":{t:"`controls`\r",p:` Type: Array Default: [] 初始化自定义的底部 控制栏 -<div className=&quo ...`,l:"start/option.html#controls",a:"controls"},"41.32":{t:"`quality`",p:` +<div className=&quo ...`,l:"start/option.html#controls",a:"controls"},"41.32":{t:"`quality`\r",p:` Type: Array Default: [] @@ -1273,7 +1273,7 @@ Default: [] - ...`,l:"start/option.html#quality",a:"quality"},"41.33":{t:"`highlight`",p:` + ...`,l:"start/option.html#quality",a:"quality"},"41.33":{t:"`highlight`\r",p:` Type: Array Default: [] @@ -1289,12 +1289,12 @@ Default: [] time -Nu ...`,l:"start/option.html#highlight",a:"highlight"},"41.34":{t:"`plugins`",p:` +Nu ...`,l:"start/option.html#highlight",a:"highlight"},"41.34":{t:"`plugins`\r",p:` Type: Array Default: [] 初始化自定义的 插件 -<div className="r ...`,l:"start/option.html#plugins",a:"plugins"},"41.35":{t:"`thumbnails`",p:` +<div className="r ...`,l:"start/option.html#plugins",a:"plugins"},"41.35":{t:"`thumbnails`\r",p:` Type: Object Default: {} @@ -1310,7 +1310,7 @@ Default: {} url -Str ...`,l:"start/option.html#thumbnails",a:"thumbnails"},"41.36":{t:"`subtitle`",p:` +Str ...`,l:"start/option.html#thumbnails",a:"thumbnails"},"41.36":{t:"`subtitle`\r",p:` Type: Object Default: {} @@ -1319,56 +1319,56 @@ Default: {} 属性 - ...`,l:"start/option.html#subtitle",a:"subtitle"},"41.37":{t:"`moreVideoAttr`",p:` + ...`,l:"start/option.html#subtitle",a:"subtitle"},"41.37":{t:"`moreVideoAttr`\r",p:` Type: Object -Default: {'controls': false,'preload': 'metadata ...`,l:"start/option.html#morevideoattr",a:"morevideoattr"},"41.38":{t:"`icons`",p:` +Default: {'controls': false,'preload': 'metadata ...`,l:"start/option.html#morevideoattr",a:"morevideoattr"},"41.38":{t:"`icons`\r",p:` Type: Object Default: {} 用于替换默认图标，支持 Html 字符串和 HTMLElement -& ...`,l:"start/option.html#icons",a:"icons"},"41.39":{t:"`type`",p:` +& ...`,l:"start/option.html#icons",a:"icons"},"41.39":{t:"`type`\r",p:` Type: String Default: '' -用于指明视频的格式，需要配合 customType 一起使用，默认视频 ...`,l:"start/option.html#type",a:"type"},"41.40":{t:"`customType`",p:` +用于指明视频的格式，需要配合 customType 一起使用，默认视频 ...`,l:"start/option.html#type",a:"type"},"41.40":{t:"`customType`\r",p:` Type: Object Default: {} -通过视频的 type 进行匹配，把视频解码权交给第三方程序进行处理，处 ...`,l:"start/option.html#customtype",a:"customtype"},"41.41":{t:"`lang`",p:` +通过视频的 type 进行匹配，把视频解码权交给第三方程序进行处理，处 ...`,l:"start/option.html#customtype",a:"customtype"},"41.41":{t:"`lang`\r",p:` Type: String Default: navigator.language.toLowerCase() -默认显示语 ...`,l:"start/option.html#lang",a:"lang"},"41.42":{t:"`i18n`",p:` +默认显示语 ...`,l:"start/option.html#lang",a:"lang"},"41.42":{t:"`i18n`\r",p:` Type: Object Default: {} 自定义 i18n 配置，该配置会和自带的 i18n 进行深度合并 -新增 ...`,l:"start/option.html#i18n",a:"i18n"},"41.43":{t:"`lock`",p:` +新增 ...`,l:"start/option.html#i18n",a:"i18n"},"41.43":{t:"`lock`\r",p:` Type: Boolean Default: false 是否在移动端显示一个 锁定按钮 ，用于隐藏底部 控制栏 -< ...`,l:"start/option.html#lock",a:"lock"},"41.44":{t:"`fastForward`",p:` +< ...`,l:"start/option.html#lock",a:"lock"},"41.44":{t:"`fastForward`\r",p:` Type: Boolean Default: false 是否在移动端添加长按视频快进功能 -<div classN ...`,l:"start/option.html#fastforward",a:"fastforward"},"41.45":{t:"`autoPlayback`",p:` +<div classN ...`,l:"start/option.html#fastforward",a:"fastforward"},"41.45":{t:"`autoPlayback`\r",p:` Type: Boolean Default: false 是否使用自动 回放功能 -<div className=& ...`,l:"start/option.html#autoplayback",a:"autoplayback"},"41.46":{t:"`autoOrientation`",p:` +<div className=& ...`,l:"start/option.html#autoplayback",a:"autoplayback"},"41.46":{t:"`autoOrientation`\r",p:` Type: Boolean Default: false 是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器 - ...`,l:"start/option.html#autoorientation",a:"autoorientation"},"41.47":{t:"`airplay`",p:` + ...`,l:"start/option.html#autoorientation",a:"autoorientation"},"41.47":{t:"`airplay`\r",p:` Type: Boolean Default: false 是否显示 airplay 按钮，当前只有部分浏览器支持该功能 - ...`,l:"start/option.html#airplay",a:"airplay"},"41.48":{t:"`cssVar`",p:` + ...`,l:"start/option.html#airplay",a:"airplay"},"41.48":{t:"`cssVar`\r",p:` Type: Object Default: {} diff --git a/docs/document/assets/component_contextmenu.md.ArGFk5wS.js b/docs/document/assets/component_contextmenu.md.ArGFk5wS.js deleted file mode 100644 index 0112ccd62..000000000 --- a/docs/document/assets/component_contextmenu.md.ArGFk5wS.js +++ /dev/null @@ -1,83 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const B=JSON.parse('{"title":"右键菜单","description":"","frontmatter":{},"headers":[],"relativePath":"component/contextmenu.md","filePath":"component/contextmenu.md","lastUpdated":1682229030000}'),p={name:"component/contextmenu.md"},e=s('

右键菜单 ​

配置 ​

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本

创建 ​

',4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
-
-art.contextmenu.show = true;
-
-// Get the Element of contextmenu by name
-console.info(art.contextmenu['your-menu']);

添加 ​

`,2),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.contextmenu.add({
-    name: 'your-menu',
-    html: 'Your Menu',
-    click: function (...args) {
-        console.info(args);
-        art.contextmenu.show = false;
-    },
-});
-
-art.contextmenu.show = true;
-
-// Get the Element of contextmenu by name
-console.info(art.contextmenu['your-menu']);

删除 ​

`,2),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
-
-art.contextmenu.show = true;
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the contextmenu by name
-        art.contextmenu.remove('your-menu')
-    }, 3000);
-});

更新 ​

`,2),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
-
-art.contextmenu.show = true;
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the contextmenu by name
-        art.contextmenu.update({
-            name: 'your-menu',
-            html: 'Your New Menu',
-        })
-    }, 3000);
-});
`,1),y=[e,h,t,k,r,E,d,c,g];function o(b,u,m,F,_,C){return l(),n("div",null,y)}const D=a(p,[["render",o]]);export{B as __pageData,D as default}; diff --git a/docs/document/assets/component_contextmenu.md.ArGFk5wS.lean.js b/docs/document/assets/component_contextmenu.md.ArGFk5wS.lean.js deleted file mode 100644 index 951b942ec..000000000 --- a/docs/document/assets/component_contextmenu.md.ArGFk5wS.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const B=JSON.parse('{"title":"右键菜单","description":"","frontmatter":{},"headers":[],"relativePath":"component/contextmenu.md","filePath":"component/contextmenu.md","lastUpdated":1682229030000}'),p={name:"component/contextmenu.md"},e=s("",4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",2),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",2),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s("",1),y=[e,h,t,k,r,E,d,c,g];function o(b,u,m,F,_,C){return l(),n("div",null,y)}const D=a(p,[["render",o]]);export{B as __pageData,D as default}; diff --git a/docs/document/assets/component_contextmenu.md.fd267b7b.js b/docs/document/assets/component_contextmenu.md.fd267b7b.js new file mode 100644 index 000000000..5147c7236 --- /dev/null +++ b/docs/document/assets/component_contextmenu.md.fd267b7b.js @@ -0,0 +1,83 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const f=JSON.parse('{"title":"右键菜单","description":"","frontmatter":{},"headers":[],"relativePath":"component/contextmenu.md","filePath":"component/contextmenu.md","lastUpdated":1682229030000}'),o={name:"component/contextmenu.md"},e=s('

右键菜单 ​

配置 ​

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本

创建 ​

',4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
+
+art.contextmenu.show = true;
+
+// Get the Element of contextmenu by name
+console.info(art.contextmenu['your-menu']);

添加 ​

`,2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.contextmenu.add({
+    name: 'your-menu',
+    html: 'Your Menu',
+    click: function (...args) {
+        console.info(args);
+        art.contextmenu.show = false;
+    },
+});
+
+art.contextmenu.show = true;
+
+// Get the Element of contextmenu by name
+console.info(art.contextmenu['your-menu']);

删除 ​

`,2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
+
+art.contextmenu.show = true;
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the contextmenu by name
+        art.contextmenu.remove('your-menu')
+    }, 3000);
+});

更新 ​

`,2),A=n("div",{className:"run-code"},"▶ Run Code",-1),i=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
+
+art.contextmenu.show = true;
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the contextmenu by name
+        art.contextmenu.update({
+            name: 'your-menu',
+            html: 'Your New Menu',
+        })
+    }, 3000);
+});
`,1),C=[e,t,r,c,D,F,y,A,i];function d(b,u,m,h,_,g){return p(),l("div",null,C)}const x=a(o,[["render",d]]);export{f as __pageData,x as default}; diff --git a/docs/document/assets/component_contextmenu.md.fd267b7b.lean.js b/docs/document/assets/component_contextmenu.md.fd267b7b.lean.js new file mode 100644 index 000000000..fdc7d91c6 --- /dev/null +++ b/docs/document/assets/component_contextmenu.md.fd267b7b.lean.js @@ -0,0 +1 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const f=JSON.parse('{"title":"右键菜单","description":"","frontmatter":{},"headers":[],"relativePath":"component/contextmenu.md","filePath":"component/contextmenu.md","lastUpdated":1682229030000}'),o={name:"component/contextmenu.md"},e=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",2),A=n("div",{className:"run-code"},"▶ Run Code",-1),i=s("",1),C=[e,t,r,c,D,F,y,A,i];function d(b,u,m,h,_,g){return p(),l("div",null,C)}const x=a(o,[["render",d]]);export{f as __pageData,x as default}; diff --git a/docs/document/assets/component_controls.md.0jTUQQ0o.js b/docs/document/assets/component_controls.md.0jTUQQ0o.js deleted file mode 100644 index cb55d3223..000000000 --- a/docs/document/assets/component_controls.md.0jTUQQ0o.js +++ /dev/null @@ -1,130 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const A=JSON.parse('{"title":"控制器","description":"","frontmatter":{},"headers":[],"relativePath":"component/controls.md","filePath":"component/controls.md","lastUpdated":1682233868000}'),p={name:"component/controls.md"},h=s('

控制器 ​

配置 ​

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
positionStringleft 和 right 控制控制器出现的左右位置
selectorArray选择列表的对象数组
onSelectFunction选择列表的元素被点击时触发的函数

创建 ​

',4),t=i("div",{className:"run-code"},"▶ Run Code",-1),e=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'your-button',
-            index: 10,
-            position: 'left',
-            html: 'Your Button',
-            tooltip: 'Your Button',
-            style: {
-                color: 'red',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-        {
-            name: 'subtitle',
-            position: 'right',
-            html: 'Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: '<span style="color:red">subtitle 01</span>',
-                },
-                {
-                    html: '<span style="color:yellow">subtitle 02</span>',
-                },
-            ],
-            onSelect: function (item, $dom) {
-                console.info(item, $dom);
-                return 'Your ' + item.html;
-            },
-        },
-    ],
-});
-
-// Get the Element of control by name
-console.info(art.controls['your-button']);
-console.info(art.controls['subtitle']);

添加 ​

`,2),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.controls.add({
-    name: 'button1',
-    index: 10,
-    position: 'left',
-    html: 'Your Button',
-    tooltip: 'Your Button',
-    style: {
-        color: 'red',
-    },
-    click: function (...args) {
-        console.info('click', args);
-    },
-    mounted: function (...args) {
-        console.info('mounted', args);
-    },
-});
-
-// Get the Element of control by name
-console.info(art.controls['button1']);

删除 ​

`,2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'Your Button',
-            tooltip: 'Your Button',
-            style: {
-                color: 'red',
-            },
-        }
-    ]
-});
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the control by name
-        art.controls.remove('button1');
-    }, 3000);
-});

更新 ​

`,2),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: 'subtitle 01',
-                },
-                {
-                    html: 'subtitle 02',
-                },
-            ],
-        }
-    ]
-});
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the control by name
-        art.controls.update({
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'New Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: 'new subtitle 01',
-                },
-                {
-                    html: 'new subtitle 02',
-                },
-            ],
-        });
-    }, 3000);
-});
`,1),y=[h,t,e,k,E,r,d,c,g];function b(o,F,u,m,C,B){return l(),n("div",null,y)}const v=a(p,[["render",b]]);export{A as __pageData,v as default}; diff --git a/docs/document/assets/component_controls.md.0jTUQQ0o.lean.js b/docs/document/assets/component_controls.md.0jTUQQ0o.lean.js deleted file mode 100644 index f07607fcb..000000000 --- a/docs/document/assets/component_controls.md.0jTUQQ0o.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const A=JSON.parse('{"title":"控制器","description":"","frontmatter":{},"headers":[],"relativePath":"component/controls.md","filePath":"component/controls.md","lastUpdated":1682233868000}'),p={name:"component/controls.md"},h=s("",4),t=i("div",{className:"run-code"},"▶ Run Code",-1),e=s("",2),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s("",2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",2),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s("",1),y=[h,t,e,k,E,r,d,c,g];function b(o,F,u,m,C,B){return l(),n("div",null,y)}const v=a(p,[["render",b]]);export{A as __pageData,v as default}; diff --git a/docs/document/assets/component_controls.md.26e168bb.js b/docs/document/assets/component_controls.md.26e168bb.js new file mode 100644 index 000000000..8df89c463 --- /dev/null +++ b/docs/document/assets/component_controls.md.26e168bb.js @@ -0,0 +1,130 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const f=JSON.parse('{"title":"控制器","description":"","frontmatter":{},"headers":[],"relativePath":"component/controls.md","filePath":"component/controls.md","lastUpdated":1682233868000}'),o={name:"component/controls.md"},e=s('

控制器 ​

配置 ​

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
positionStringleft 和 right 控制控制器出现的左右位置
selectorArray选择列表的对象数组
onSelectFunction选择列表的元素被点击时触发的函数

创建 ​

',4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'your-button',
+            index: 10,
+            position: 'left',
+            html: 'Your Button',
+            tooltip: 'Your Button',
+            style: {
+                color: 'red',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+        {
+            name: 'subtitle',
+            position: 'right',
+            html: 'Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">subtitle 01</span>',
+                },
+                {
+                    html: '<span style="color:yellow">subtitle 02</span>',
+                },
+            ],
+            onSelect: function (item, $dom) {
+                console.info(item, $dom);
+                return 'Your ' + item.html;
+            },
+        },
+    ],
+});
+
+// Get the Element of control by name
+console.info(art.controls['your-button']);
+console.info(art.controls['subtitle']);

添加 ​

`,2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.controls.add({
+    name: 'button1',
+    index: 10,
+    position: 'left',
+    html: 'Your Button',
+    tooltip: 'Your Button',
+    style: {
+        color: 'red',
+    },
+    click: function (...args) {
+        console.info('click', args);
+    },
+    mounted: function (...args) {
+        console.info('mounted', args);
+    },
+});
+
+// Get the Element of control by name
+console.info(art.controls['button1']);

删除 ​

`,2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'Your Button',
+            tooltip: 'Your Button',
+            style: {
+                color: 'red',
+            },
+        }
+    ]
+});
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the control by name
+        art.controls.remove('button1');
+    }, 3000);
+});

更新 ​

`,2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: 'subtitle 01',
+                },
+                {
+                    html: 'subtitle 02',
+                },
+            ],
+        }
+    ]
+});
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the control by name
+        art.controls.update({
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'New Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: 'new subtitle 01',
+                },
+                {
+                    html: 'new subtitle 02',
+                },
+            ],
+        });
+    }, 3000);
+});
`,1),A=[e,t,r,c,D,F,y,i,C];function b(d,u,m,h,g,_){return p(),l("div",null,A)}const T=a(o,[["render",b]]);export{f as __pageData,T as default}; diff --git a/docs/document/assets/component_controls.md.26e168bb.lean.js b/docs/document/assets/component_controls.md.26e168bb.lean.js new file mode 100644 index 000000000..4d5e34181 --- /dev/null +++ b/docs/document/assets/component_controls.md.26e168bb.lean.js @@ -0,0 +1 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const f=JSON.parse('{"title":"控制器","description":"","frontmatter":{},"headers":[],"relativePath":"component/controls.md","filePath":"component/controls.md","lastUpdated":1682233868000}'),o={name:"component/controls.md"},e=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s("",1),A=[e,t,r,c,D,F,y,i,C];function b(d,u,m,h,g,_){return p(),l("div",null,A)}const T=a(o,[["render",b]]);export{f as __pageData,T as default}; diff --git a/docs/document/assets/component_layers.md.NOoeaoRV.js b/docs/document/assets/component_layers.md.NOoeaoRV.js deleted file mode 100644 index 17ba0cf49..000000000 --- a/docs/document/assets/component_layers.md.NOoeaoRV.js +++ /dev/null @@ -1,102 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const A=JSON.parse('{"title":"业务层","description":"","frontmatter":{},"headers":[],"relativePath":"component/layers.md","filePath":"component/layers.md","lastUpdated":1682229030000}'),p={name:"component/layers.md"},h=s('

业务层 ​

配置 ​

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本

创建 ​

',4),e=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: \`<img style="width: 100px" src="\${img}">\`,
-            tooltip: 'Potser Tip',
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-    ],
-});
-
-// Get the Element of layer by name
-console.info(art.layers['potser']);

添加 ​

`,2),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.layers.add({
-    name: 'potser',
-    html: \`<img style="width: 100px" src="\${img}">\`,
-    tooltip: 'Potser Tip',
-    style: {
-        position: 'absolute',
-        top: '50px',
-        right: '50px',
-    },
-    click: function (...args) {
-        console.info('click', args);
-    },
-    mounted: function (...args) {
-        console.info('mounted', args);
-    },
-});
-
-// Get the Element of layer by name
-console.info(art.layers['potser']);

删除 ​

`,2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: \`<img style="width: 100px" src="\${img}">\`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-        },
-    ],
-});
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the layer by name
-        art.layers.remove('potser');
-    }, 3000);
-});

更新 ​

`,2),g=i("div",{className:"run-code"},"▶ Run Code",-1),c=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: \`<img style="width: 100px" src="\${img}">\`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-        },
-    ],
-});
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the layer by name
-        art.layers.update({
-            name: 'potser',
-            html: \`<img style="width: 200px" src="\${img}">\`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                left: '50px',
-            },
-        });
-    }, 3000);
-});
`,1),y=[h,e,t,k,E,r,d,g,c];function b(o,F,u,m,C,_){return l(),n("div",null,y)}const D=a(p,[["render",b]]);export{A as __pageData,D as default}; diff --git a/docs/document/assets/component_layers.md.NOoeaoRV.lean.js b/docs/document/assets/component_layers.md.NOoeaoRV.lean.js deleted file mode 100644 index dc21dd6fd..000000000 --- a/docs/document/assets/component_layers.md.NOoeaoRV.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const A=JSON.parse('{"title":"业务层","description":"","frontmatter":{},"headers":[],"relativePath":"component/layers.md","filePath":"component/layers.md","lastUpdated":1682229030000}'),p={name:"component/layers.md"},h=s("",4),e=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",2),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s("",2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",2),g=i("div",{className:"run-code"},"▶ Run Code",-1),c=s("",1),y=[h,e,t,k,E,r,d,g,c];function b(o,F,u,m,C,_){return l(),n("div",null,y)}const D=a(p,[["render",b]]);export{A as __pageData,D as default}; diff --git a/docs/document/assets/component_layers.md.e77c2250.js b/docs/document/assets/component_layers.md.e77c2250.js new file mode 100644 index 000000000..2ee72a5ab --- /dev/null +++ b/docs/document/assets/component_layers.md.e77c2250.js @@ -0,0 +1,102 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const f=JSON.parse('{"title":"业务层","description":"","frontmatter":{},"headers":[],"relativePath":"component/layers.md","filePath":"component/layers.md","lastUpdated":1682229030000}'),o={name:"component/layers.md"},e=s('

业务层 ​

配置 ​

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本

创建 ​

',4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'potser',
+            html: \`<img style="width: 100px" src="\${img}">\`,
+            tooltip: 'Potser Tip',
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+    ],
+});
+
+// Get the Element of layer by name
+console.info(art.layers['potser']);

添加 ​

`,2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.layers.add({
+    name: 'potser',
+    html: \`<img style="width: 100px" src="\${img}">\`,
+    tooltip: 'Potser Tip',
+    style: {
+        position: 'absolute',
+        top: '50px',
+        right: '50px',
+    },
+    click: function (...args) {
+        console.info('click', args);
+    },
+    mounted: function (...args) {
+        console.info('mounted', args);
+    },
+});
+
+// Get the Element of layer by name
+console.info(art.layers['potser']);

删除 ​

`,2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'potser',
+            html: \`<img style="width: 100px" src="\${img}">\`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+        },
+    ],
+});
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the layer by name
+        art.layers.remove('potser');
+    }, 3000);
+});

更新 ​

`,2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'potser',
+            html: \`<img style="width: 100px" src="\${img}">\`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+        },
+    ],
+});
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the layer by name
+        art.layers.update({
+            name: 'potser',
+            html: \`<img style="width: 200px" src="\${img}">\`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                left: '50px',
+            },
+        });
+    }, 3000);
+});
`,1),A=[e,t,r,c,D,F,y,i,C];function b(d,h,m,u,g,_){return p(),l("div",null,A)}const v=a(o,[["render",b]]);export{f as __pageData,v as default}; diff --git a/docs/document/assets/component_layers.md.e77c2250.lean.js b/docs/document/assets/component_layers.md.e77c2250.lean.js new file mode 100644 index 000000000..f51e36335 --- /dev/null +++ b/docs/document/assets/component_layers.md.e77c2250.lean.js @@ -0,0 +1 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const f=JSON.parse('{"title":"业务层","description":"","frontmatter":{},"headers":[],"relativePath":"component/layers.md","filePath":"component/layers.md","lastUpdated":1682229030000}'),o={name:"component/layers.md"},e=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s("",1),A=[e,t,r,c,D,F,y,i,C];function b(d,h,m,u,g,_){return p(),l("div",null,A)}const v=a(o,[["render",b]]);export{f as __pageData,v as default}; diff --git a/docs/document/assets/component_setting.md.eb2ccc76.js b/docs/document/assets/component_setting.md.eb2ccc76.js new file mode 100644 index 000000000..d338fb2d6 --- /dev/null +++ b/docs/document/assets/component_setting.md.eb2ccc76.js @@ -0,0 +1,207 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const x=JSON.parse('{"title":"设置面板","description":"","frontmatter":{},"headers":[],"relativePath":"component/setting.md","filePath":"component/setting.md","lastUpdated":1682779928000}'),o={name:"component/setting.md"},e=s('

设置面板 ​

内置 ​

须先打开设置面板，然后自带四个内置项：flip, playbackRate, aspectRatio, subtitleOffset

',3),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+	setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    subtitleOffset: true,
+});

创建 - 选择列表 ​

属性类型描述
htmlString, Element元素的 DOM
iconString, Element元素的图标
selectorArray元素列表
onSelectFunction元素点击事件
widthNumber列表宽度
tooltipString提示文本
`,3),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Subtitle',
+            width: 250,
+            tooltip: 'Subtitle 01',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">Subtitle 01</span>',
+                    url: '/assets/sample/subtitle.srt?id=1',
+                },
+                {
+                    html: '<span style="color:yellow">Subtitle 02</span>',
+                    url: '/assets/sample/subtitle.srt?id=2',
+                },
+            ],
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                art.subtitle.url = item.url;
+                return item.html;
+            },
+        },
+        {
+            html: 'Quality',
+            width: 150,
+            tooltip: '1080P',
+            selector: [
+                {
+                    default: true,
+                    html: '1080P',
+                    url: '/assets/sample/video.mp4?id=1080',
+                },
+                {
+                    html: '720P',
+                    url: '/assets/sample/video.mp4?id=720',
+                },
+                {
+                    html: '360P',
+                    url: '/assets/sample/video.mp4?id=360',
+                },
+            ],
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                art.switchQuality(item.url, item.html);
+                return item.html;
+            },
+        },
+    ],
+});

创建 - 列表嵌套 ​

`,2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Multi-level',
+            selector: [
+                {
+                    html: 'Setting 01',
+                    width: 150,
+                    selector: [
+                        {
+                            html: 'Setting 01 - 01',
+                        },
+                        {
+                            html: 'Setting 01 - 02',
+                        },
+                    ],
+                    onSelect: function (item, $dom, event) {
+                        console.info(item, $dom, event);
+                        return item.html;
+                    },
+                },
+                {
+                    html: 'Setting 02',
+                    width: 150,
+                    selector: [
+                        {
+                            html: 'Setting 02 - 01',
+                        },
+                        {
+                            html: 'Setting 02 - 02',
+                        },
+                    ],
+                    onSelect: function (item, $dom, event) {
+                        console.info(item, $dom, event);
+                        return item.html;
+                    },
+                },
+            ],
+        },
+    ],
+});

创建 - 切换按钮 ​

属性类型描述
htmlString, Element元素的 DOM 元素
iconString, Element元素的图标
switchBoolean按钮默认状态
onSwitchFunction按钮切换事件
tooltipString提示文本
`,3),C=n("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'PIP Mode',
+            tooltip: 'Close',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            switch: false,
+            onSwitch: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                const nextState = !item.switch;
+                art.pip = nextState;
+                item.tooltip = nextState ? 'Open' : 'Close';
+                return nextState;
+            },
+        },
+    ],
+});

创建 - 范围滑块 ​

属性类型描述
htmlString, Element元素的 DOM 元素
iconString, Element元素的图标
rangeArray默认状态数组
onRangeFunction完成时触发的事件
onChangeFunction变化时触发的事件
tooltipString提示文本
js
const range = [5, 1, 10, 1];
+const value = range[0];
+const min = range[1];
+const max = range[2];
+const step = range[3];
`,4),i=n("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+            onChange: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                return item.range + 'x';
+            },
+        },
+    ],
+});

添加 ​

`,2),d=n("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
+
+art.setting.show = true;
+
+art.setting.add({
+    html: 'Slider',
+    tooltip: '5x',
+    icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+    range: [5, 1, 10, 1],
+});

删除 ​

`,2),m=n("div",{className:"run-code"},"▶ Run Code",-1),h=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    settings: [
+        {
+            name: 'slider',
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+        },
+    ],
+});
+
+art.setting.show = true;
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the setting by name
+        art.setting.remove('slider');
+    }, 3000);
+});

更新 ​

`,2),g=n("div",{className:"run-code"},"▶ Run Code",-1),_=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            name: 'slider',
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+        },
+    ],
+});
+
+art.setting.show = true;
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the setting by name
+        art.setting.update({
+            name: 'slider',
+            html: 'PIP Mode',
+            tooltip: 'Close',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            switch: false,
+        });
+    }, 3000);
+});
`,1),E=[e,t,r,c,D,F,y,C,A,i,b,d,u,m,h,g,_];function v(f,S,q,T,w,P){return p(),l("div",null,E)}const R=a(o,[["render",v]]);export{x as __pageData,R as default}; diff --git a/docs/document/assets/component_setting.md.eb2ccc76.lean.js b/docs/document/assets/component_setting.md.eb2ccc76.lean.js new file mode 100644 index 000000000..bc2022441 --- /dev/null +++ b/docs/document/assets/component_setting.md.eb2ccc76.lean.js @@ -0,0 +1 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const x=JSON.parse('{"title":"设置面板","description":"","frontmatter":{},"headers":[],"relativePath":"component/setting.md","filePath":"component/setting.md","lastUpdated":1682779928000}'),o={name:"component/setting.md"},e=s("",3),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",3),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",3),C=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),i=n("div",{className:"run-code"},"▶ Run Code",-1),b=s("",2),d=n("div",{className:"run-code"},"▶ Run Code",-1),u=s("",2),m=n("div",{className:"run-code"},"▶ Run Code",-1),h=s("",2),g=n("div",{className:"run-code"},"▶ Run Code",-1),_=s("",1),E=[e,t,r,c,D,F,y,C,A,i,b,d,u,m,h,g,_];function v(f,S,q,T,w,P){return p(),l("div",null,E)}const R=a(o,[["render",v]]);export{x as __pageData,R as default}; diff --git a/docs/document/assets/component_setting.md.p_fVirBN.js b/docs/document/assets/component_setting.md.p_fVirBN.js deleted file mode 100644 index 0968426b4..000000000 --- a/docs/document/assets/component_setting.md.p_fVirBN.js +++ /dev/null @@ -1,207 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const P=JSON.parse('{"title":"设置面板","description":"","frontmatter":{},"headers":[],"relativePath":"component/setting.md","filePath":"component/setting.md","lastUpdated":1682779928000}'),p={name:"component/setting.md"},h=s('

设置面板 ​

内置 ​

须先打开设置面板，然后自带四个内置项：flip, playbackRate, aspectRatio, subtitleOffset

',3),t=i("div",{className:"run-code"},"▶ Run Code",-1),e=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-	setting: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-    subtitleOffset: true,
-});

创建 - 选择列表 ​

属性类型描述
htmlString, Element元素的 DOM
iconString, Element元素的图标
selectorArray元素列表
onSelectFunction元素点击事件
widthNumber列表宽度
tooltipString提示文本
`,3),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Subtitle',
-            width: 250,
-            tooltip: 'Subtitle 01',
-            selector: [
-                {
-                    default: true,
-                    html: '<span style="color:red">Subtitle 01</span>',
-                    url: '/assets/sample/subtitle.srt?id=1',
-                },
-                {
-                    html: '<span style="color:yellow">Subtitle 02</span>',
-                    url: '/assets/sample/subtitle.srt?id=2',
-                },
-            ],
-            onSelect: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                art.subtitle.url = item.url;
-                return item.html;
-            },
-        },
-        {
-            html: 'Quality',
-            width: 150,
-            tooltip: '1080P',
-            selector: [
-                {
-                    default: true,
-                    html: '1080P',
-                    url: '/assets/sample/video.mp4?id=1080',
-                },
-                {
-                    html: '720P',
-                    url: '/assets/sample/video.mp4?id=720',
-                },
-                {
-                    html: '360P',
-                    url: '/assets/sample/video.mp4?id=360',
-                },
-            ],
-            onSelect: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                art.switchQuality(item.url, item.html);
-                return item.html;
-            },
-        },
-    ],
-});

创建 - 列表嵌套 ​

`,2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Multi-level',
-            selector: [
-                {
-                    html: 'Setting 01',
-                    width: 150,
-                    selector: [
-                        {
-                            html: 'Setting 01 - 01',
-                        },
-                        {
-                            html: 'Setting 01 - 02',
-                        },
-                    ],
-                    onSelect: function (item, $dom, event) {
-                        console.info(item, $dom, event);
-                        return item.html;
-                    },
-                },
-                {
-                    html: 'Setting 02',
-                    width: 150,
-                    selector: [
-                        {
-                            html: 'Setting 02 - 01',
-                        },
-                        {
-                            html: 'Setting 02 - 02',
-                        },
-                    ],
-                    onSelect: function (item, $dom, event) {
-                        console.info(item, $dom, event);
-                        return item.html;
-                    },
-                },
-            ],
-        },
-    ],
-});

创建 - 切换按钮 ​

属性类型描述
htmlString, Element元素的 DOM 元素
iconString, Element元素的图标
switchBoolean按钮默认状态
onSwitchFunction按钮切换事件
tooltipString提示文本
`,3),g=i("div",{className:"run-code"},"▶ Run Code",-1),c=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'PIP Mode',
-            tooltip: 'Close',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            switch: false,
-            onSwitch: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                const nextState = !item.switch;
-                art.pip = nextState;
-                item.tooltip = nextState ? 'Open' : 'Close';
-                return nextState;
-            },
-        },
-    ],
-});

创建 - 范围滑块 ​

属性类型描述
htmlString, Element元素的 DOM 元素
iconString, Element元素的图标
rangeArray默认状态数组
onRangeFunction完成时触发的事件
onChangeFunction变化时触发的事件
tooltipString提示文本
js
const range = [5, 1, 10, 1];
-const value = range[0];
-const min = range[1];
-const max = range[2];
-const step = range[3];
`,4),y=i("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-            onChange: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                return item.range + 'x';
-            },
-        },
-    ],
-});

添加 ​

`,2),o=i("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
-
-art.setting.show = true;
-
-art.setting.add({
-    html: 'Slider',
-    tooltip: '5x',
-    icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-    range: [5, 1, 10, 1],
-});

删除 ​

`,2),u=i("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-    settings: [
-        {
-            name: 'slider',
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-        },
-    ],
-});
-
-art.setting.show = true;
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the setting by name
-        art.setting.remove('slider');
-    }, 3000);
-});

更新 ​

`,2),C=i("div",{className:"run-code"},"▶ Run Code",-1),B=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            name: 'slider',
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-        },
-    ],
-});
-
-art.setting.show = true;
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the setting by name
-        art.setting.update({
-            name: 'slider',
-            html: 'PIP Mode',
-            tooltip: 'Close',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            switch: false,
-        });
-    }, 3000);
-});
`,1),_=[h,t,e,k,E,r,d,g,c,y,b,o,F,u,m,C,B];function A(v,D,S,q,T,f){return l(),n("div",null,_)}const R=a(p,[["render",A]]);export{P as __pageData,R as default}; diff --git a/docs/document/assets/component_setting.md.p_fVirBN.lean.js b/docs/document/assets/component_setting.md.p_fVirBN.lean.js deleted file mode 100644 index 2c469d833..000000000 --- a/docs/document/assets/component_setting.md.p_fVirBN.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const P=JSON.parse('{"title":"设置面板","description":"","frontmatter":{},"headers":[],"relativePath":"component/setting.md","filePath":"component/setting.md","lastUpdated":1682779928000}'),p={name:"component/setting.md"},h=s("",3),t=i("div",{className:"run-code"},"▶ Run Code",-1),e=s("",3),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s("",2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",3),g=i("div",{className:"run-code"},"▶ Run Code",-1),c=s("",4),y=i("div",{className:"run-code"},"▶ Run Code",-1),b=s("",2),o=i("div",{className:"run-code"},"▶ Run Code",-1),F=s("",2),u=i("div",{className:"run-code"},"▶ Run Code",-1),m=s("",2),C=i("div",{className:"run-code"},"▶ Run Code",-1),B=s("",1),_=[h,t,e,k,E,r,d,g,c,y,b,o,F,u,m,C,B];function A(v,D,S,q,T,f){return l(),n("div",null,_)}const R=a(p,[["render",A]]);export{P as __pageData,R as default}; diff --git a/docs/document/assets/en_advanced_built-in.md.594a1bdd.js b/docs/document/assets/en_advanced_built-in.md.594a1bdd.js new file mode 100644 index 000000000..f327de6f6 --- /dev/null +++ b/docs/document/assets/en_advanced_built-in.md.594a1bdd.js @@ -0,0 +1,187 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const K=JSON.parse('{"title":"Advanced Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1700976201000}'),o={name:"en/advanced/built-in.md"},e=s('

Advanced Properties ​

The advanced properties here refer to the secondary attributes mounted on the instance, which are less commonly used

option ​

Options for the player

',4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.option);

Reminder

If you directly modify this option object, the player will not respond immediately.

template ​

Manages all of the DOM elements of the player

`,4),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.template);
+console.info(art.template.$video);

Warning

To easily distinguish between DOM elements and plain objects, all DOM elements in the player are named starting with a $

Here is the definition of all DOM elements: artplayer/types/template.d.ts

events ​

Manages all DOM events in the player, which is essentially a proxy for addEventListener and removeEventListener. When using the following methods to handle events, the event will also be automatically destroyed when the player is destroyed.

  • The proxy method is used to proxy DOM events
  • The hover method is used to proxy custom hover events
  • The loadImg method is used to listen for the load event of images
`,5),y=n("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
js
var container = document.querySelector('.artplayer-app');
+
+var art = new Artplayer({
+    container: container,
+    url: '/assets/sample/video.mp4',
+});
+
+art.events.proxy(container, 'click', event => {
+    console.info('click', event);
+});
+
+art.events.hover(container, (event) => {
+    console.info('mouseenter', event);
+}, (event) => {
+    console.info('mouseleave', event);
+});
+
+art.events.loadImg('/assets/sample/poster.jpg').then(img => {
+    console.info('loadImg', img);
+});

Warning

If you need some DOM events to only exist during the lifecycle of the player, it is strongly recommended to use these functions to avoid causing memory leaks

storage ​

Manages the local storage of the player

  • The name attribute is used to set the cache key
  • The set method is used to set the cache
  • The get method is used to get the cache
  • The del method is used to delete the cache
  • The clear method is used to clear the cache
`,5),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.storage.set('test', { foo: 'bar' });
+const test = art.storage.get('test');
+console.info(test);
+art.storage.del('test');
+art.storage.clear();

Warning

By default, all player instances share the same localStorage, and the default key is artplayer_settings

If you want different players to use different localStorage, you can modify art.storage.name accordingly

`,2),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.storage.name = 'your-storage-key';
+art.storage.set('test', { foo: 'bar' });

icons ​

Manage all the svg icons of the player

`,3),u=n("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.icons.loading);

This is the definition of all icons:

artplayer/types/icons.d.ts

i18n ​

Manage the player's i18n

  • The get method is used to retrieve the value of i18n
  • The update method is used to update the i18n object
`,5),b=n("div",{className:"run-code"},"▶ Run Code",-1),h=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.i18n.get('Play'));
+
+art.i18n.update({
+    'zh-cn': {
+        Play: 'Your Play'
+    }
+});

WARNING

Using art.i18n.update can only update i18n after instantiation. If you want to update i18n before instantiation, please use the i18n from the basic options for the update.

notice ​

Manage the player's notices, there's only one show property used to display notices.

`,4),_=n("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.notice.show = 'Video Ready To Play';
+})

WARNING

To immediately hide the display of notice: art.notice.show = '';

layers ​

Manage the layers of the player

  • The add method is used for dynamically adding layers
  • The remove method is used for dynamically removing layers
  • The update method is used for dynamically updating layers
  • The show property is used to set whether to display all layers or not
  • The toggle method is used to toggle the display of all layers
`,5),v=n("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.layers.add({
+        html: 'Some Text',
+    });
+
+	setTimeout(() => {
+		art.layers.show = false;
+	}, 1000);
+});

Component configuration Please refer to the following address:

/component/layers.html

controls ​

Manage the player's controllers

  • add method is used to dynamically add controllers
  • remove method is used to dynamically remove controllers
  • update method is used to dynamically update controllers
  • show property is used to set whether to display all controllers
  • toggle method is used to toggle the display of all controllers
`,5),E=n("div",{className:"run-code"},"▶ Run Code",-1),f=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.controls.add({
+        html: 'Some Text',
+        position: 'left',
+    });
+
+	setTimeout(() => {
+		art.controls.show = false;
+	}, 1000);
+});

Component Configuration Please refer to the following address:

/component/controls.html

contextmenu ​

Manage the right-click context menu of the player

  • The add method is used to dynamically add menu items
  • The remove method is used to dynamically remove menu items
  • The update method is used to dynamically update menu items
  • The show attribute is used to set whether to show all menu items
  • The toggle method is used to switch the visibility of all menu items
`,5),k=n("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.contextmenu.add({
+        html: 'Some Text',
+    });
+
+    art.contextmenu.show = true;
+    setTimeout(() => {
+        art.contextmenu.show = false;
+    }, 1000);
+});

Component Configuration Please refer to the following address:

/component/contextmenu.html

subtitle ​

Manage the subtitle features of the player

  • url property sets and returns the current subtitle address
  • style method sets the style of the current subtitle
  • switch method sets the current subtitle address and options
`,5),P=n("div",{className:"run-code"},"▶ Run Code",-1),S=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.subtitle.url = '/assets/sample/subtitle.srt'
+    art.subtitle.style({
+        color: 'red',
+    });
+});

loading ​

Manage the loading layer of the player

  • show property is used to set whether to display the loading layer
  • The toggle attribute is used to toggle the display of the loading layer
`,4),I=n("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.loading.show = true;
+	setTimeout(() => {
+		art.loading.show = false;
+	}, 1000);
+});

hotkey ​

Manage the hotkey functionality of the player

  • The add method is used to add a hotkey
  • The remove method is used to remove a hotkey
`,4),R=n("div",{className:"run-code"},"▶ Run Code",-1),V=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+function hotkeyEvent(event) {
+    console.info('click', event);
+}
+
+art.on('ready', () => {
+    art.hotkey.add(32, hotkeyEvent);
+    setTimeout(() => {
+		art.hotkey.remove(32, hotkeyEvent);
+	}, 5000);
+});

Warning

Shortcut keys will only work after the player has gained focus (e.g., after clicking on the player).

mask ​

Manage the player's mask layer

  • show property is used to set whether to display the mask layer
  • toggle property is used to toggle the display of the mask layer
`,5),x=n("div",{className:"run-code"},"▶ Run Code",-1),j=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.mask.show = false;
+    setTimeout(() => {
+        art.mask.show = true;
+    }, 1000);
+});

setting ​

Manage the player's settings panel

  • add method is used to dynamically add a setting item
  • remove method is used to dynamically remove a setting item
  • update method is used to dynamically update a setting item
  • show property is used to set whether to display all the setting items
  • toggle method is used to toggle whether to display all the setting items
`,4),q=n("div",{className:"run-code"},"▶ Run Code",-1),M=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    subtitleOffset: true,
+});
+
+art.on('ready', () => {
+    art.setting.show = true;
+	setTimeout(() => {
+		art.setting.show = false;
+	}, 1000);
+});

Settings Panel Please refer to the following link

/component/setting.html

plugins ​

Manage the player's plugin features, with only one method add to dynamically add plugins

`,4),O=n("div",{className:"run-code"},"▶ Run Code",-1),W=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
+
+art.on('ready', () => {
+    art.plugins.add(myPlugin);
+});
`,1),$=[e,t,r,c,D,y,F,i,A,C,d,u,m,b,h,_,g,v,T,E,f,k,w,P,S,I,N,R,V,x,j,q,M,O,W];function z(B,G,L,U,H,J){return p(),l("div",null,$)}const Q=a(o,[["render",z]]);export{K as __pageData,Q as default}; diff --git a/docs/document/assets/en_advanced_built-in.md.594a1bdd.lean.js b/docs/document/assets/en_advanced_built-in.md.594a1bdd.lean.js new file mode 100644 index 000000000..e9cf0df04 --- /dev/null +++ b/docs/document/assets/en_advanced_built-in.md.594a1bdd.lean.js @@ -0,0 +1 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const K=JSON.parse('{"title":"Advanced Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1700976201000}'),o={name:"en/advanced/built-in.md"},e=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",4),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",5),y=n("div",{className:"run-code"},"▶ Run Code",-1),F=s("",5),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",2),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s("",3),u=n("div",{className:"run-code"},"▶ Run Code",-1),m=s("",5),b=n("div",{className:"run-code"},"▶ Run Code",-1),h=s("",4),_=n("div",{className:"run-code"},"▶ Run Code",-1),g=s("",5),v=n("div",{className:"run-code"},"▶ Run Code",-1),T=s("",5),E=n("div",{className:"run-code"},"▶ Run Code",-1),f=s("",5),k=n("div",{className:"run-code"},"▶ Run Code",-1),w=s("",5),P=n("div",{className:"run-code"},"▶ Run Code",-1),S=s("",4),I=n("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),R=n("div",{className:"run-code"},"▶ Run Code",-1),V=s("",5),x=n("div",{className:"run-code"},"▶ Run Code",-1),j=s("",4),q=n("div",{className:"run-code"},"▶ Run Code",-1),M=s("",4),O=n("div",{className:"run-code"},"▶ Run Code",-1),W=s("",1),$=[e,t,r,c,D,y,F,i,A,C,d,u,m,b,h,_,g,v,T,E,f,k,w,P,S,I,N,R,V,x,j,q,M,O,W];function z(B,G,L,U,H,J){return p(),l("div",null,$)}const Q=a(o,[["render",z]]);export{K as __pageData,Q as default}; diff --git a/docs/document/assets/en_advanced_built-in.md.z2x4Ba_k.js b/docs/document/assets/en_advanced_built-in.md.z2x4Ba_k.js deleted file mode 100644 index 695d09d65..000000000 --- a/docs/document/assets/en_advanced_built-in.md.z2x4Ba_k.js +++ /dev/null @@ -1,187 +0,0 @@ -import{_ as a,c as n,o as e,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const K=JSON.parse('{"title":"Advanced Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1700976201000}'),l={name:"en/advanced/built-in.md"},p=s('

Advanced Properties ​

The advanced properties here refer to the secondary attributes mounted on the instance, which are less commonly used

option ​

Options for the player

',4),t=i("div",{className:"run-code"},"▶ Run Code",-1),h=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info(art.option);

Reminder

If you directly modify this option object, the player will not respond immediately.

template ​

Manages all of the DOM elements of the player

`,4),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info(art.template);
-console.info(art.template.$video);

Warning

To easily distinguish between DOM elements and plain objects, all DOM elements in the player are named starting with a $

Here is the definition of all DOM elements: artplayer/types/template.d.ts

events ​

Manages all DOM events in the player, which is essentially a proxy for addEventListener and removeEventListener. When using the following methods to handle events, the event will also be automatically destroyed when the player is destroyed.

  • The proxy method is used to proxy DOM events
  • The hover method is used to proxy custom hover events
  • The loadImg method is used to listen for the load event of images
`,5),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var container = document.querySelector('.artplayer-app');
-
-var art = new Artplayer({
-    container: container,
-    url: '/assets/sample/video.mp4',
-});
-
-art.events.proxy(container, 'click', event => {
-    console.info('click', event);
-});
-
-art.events.hover(container, (event) => {
-    console.info('mouseenter', event);
-}, (event) => {
-    console.info('mouseleave', event);
-});
-
-art.events.loadImg('/assets/sample/poster.jpg').then(img => {
-    console.info('loadImg', img);
-});

Warning

If you need some DOM events to only exist during the lifecycle of the player, it is strongly recommended to use these functions to avoid causing memory leaks

storage ​

Manages the local storage of the player

  • The name attribute is used to set the cache key
  • The set method is used to set the cache
  • The get method is used to get the cache
  • The del method is used to delete the cache
  • The clear method is used to clear the cache
`,5),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.storage.set('test', { foo: 'bar' });
-const test = art.storage.get('test');
-console.info(test);
-art.storage.del('test');
-art.storage.clear();

Warning

By default, all player instances share the same localStorage, and the default key is artplayer_settings

If you want different players to use different localStorage, you can modify art.storage.name accordingly

`,2),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.storage.name = 'your-storage-key';
-art.storage.set('test', { foo: 'bar' });

icons ​

Manage all the svg icons of the player

`,3),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info(art.icons.loading);

This is the definition of all icons:

artplayer/types/icons.d.ts

i18n ​

Manage the player's i18n

  • The get method is used to retrieve the value of i18n
  • The update method is used to update the i18n object
`,5),m=i("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info(art.i18n.get('Play'));
-
-art.i18n.update({
-    'zh-cn': {
-        Play: 'Your Play'
-    }
-});

WARNING

Using art.i18n.update can only update i18n after instantiation. If you want to update i18n before instantiation, please use the i18n from the basic options for the update.

notice ​

Manage the player's notices, there's only one show property used to display notices.

`,4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.notice.show = 'Video Ready To Play';
-})

WARNING

To immediately hide the display of notice: art.notice.show = '';

layers ​

Manage the layers of the player

  • The add method is used for dynamically adding layers
  • The remove method is used for dynamically removing layers
  • The update method is used for dynamically updating layers
  • The show property is used to set whether to display all layers or not
  • The toggle method is used to toggle the display of all layers
`,5),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.layers.add({
-        html: 'Some Text',
-    });
-
-	setTimeout(() => {
-		art.layers.show = false;
-	}, 1000);
-});

Component configuration Please refer to the following address:

/component/layers.html

controls ​

Manage the player's controllers

  • add method is used to dynamically add controllers
  • remove method is used to dynamically remove controllers
  • update method is used to dynamically update controllers
  • show property is used to set whether to display all controllers
  • toggle method is used to toggle the display of all controllers
`,5),B=i("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.controls.add({
-        html: 'Some Text',
-        position: 'left',
-    });
-
-	setTimeout(() => {
-		art.controls.show = false;
-	}, 1000);
-});

Component Configuration Please refer to the following address:

/component/controls.html

contextmenu ​

Manage the right-click context menu of the player

  • The add method is used to dynamically add menu items
  • The remove method is used to dynamically remove menu items
  • The update method is used to dynamically update menu items
  • The show attribute is used to set whether to show all menu items
  • The toggle method is used to switch the visibility of all menu items
`,5),f=i("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.contextmenu.add({
-        html: 'Some Text',
-    });
-
-    art.contextmenu.show = true;
-    setTimeout(() => {
-        art.contextmenu.show = false;
-    }, 1000);
-});

Component Configuration Please refer to the following address:

/component/contextmenu.html

subtitle ​

Manage the subtitle features of the player

  • url property sets and returns the current subtitle address
  • style method sets the style of the current subtitle
  • switch method sets the current subtitle address and options
`,5),w=i("div",{className:"run-code"},"▶ Run Code",-1),P=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.subtitle.url = '/assets/sample/subtitle.srt'
-    art.subtitle.style({
-        color: 'red',
-    });
-});

loading ​

Manage the loading layer of the player

  • show property is used to set whether to display the loading layer
  • The toggle attribute is used to toggle the display of the loading layer
`,4),S=i("div",{className:"run-code"},"▶ Run Code",-1),I=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.loading.show = true;
-	setTimeout(() => {
-		art.loading.show = false;
-	}, 1000);
-});

hotkey ​

Manage the hotkey functionality of the player

  • The add method is used to add a hotkey
  • The remove method is used to remove a hotkey
`,4),N=i("div",{className:"run-code"},"▶ Run Code",-1),R=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-function hotkeyEvent(event) {
-    console.info('click', event);
-}
-
-art.on('ready', () => {
-    art.hotkey.add(32, hotkeyEvent);
-    setTimeout(() => {
-		art.hotkey.remove(32, hotkeyEvent);
-	}, 5000);
-});

Warning

Shortcut keys will only work after the player has gained focus (e.g., after clicking on the player).

mask ​

Manage the player's mask layer

  • show property is used to set whether to display the mask layer
  • toggle property is used to toggle the display of the mask layer
`,5),x=i("div",{className:"run-code"},"▶ Run Code",-1),V=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.mask.show = false;
-    setTimeout(() => {
-        art.mask.show = true;
-    }, 1000);
-});

setting ​

Manage the player's settings panel

  • add method is used to dynamically add a setting item
  • remove method is used to dynamically remove a setting item
  • update method is used to dynamically update a setting item
  • show property is used to set whether to display all the setting items
  • toggle method is used to toggle whether to display all the setting items
`,4),j=i("div",{className:"run-code"},"▶ Run Code",-1),q=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-    subtitleOffset: true,
-});
-
-art.on('ready', () => {
-    art.setting.show = true;
-	setTimeout(() => {
-		art.setting.show = false;
-	}, 1000);
-});

Settings Panel Please refer to the following link

/component/setting.html

plugins ​

Manage the player's plugin features, with only one method add to dynamically add plugins

`,4),M=i("div",{className:"run-code"},"▶ Run Code",-1),O=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
-
-art.on('ready', () => {
-    art.plugins.add(myPlugin);
-});
`,1),W=[p,t,h,k,r,E,d,c,o,g,y,u,b,m,F,_,C,v,A,B,T,f,D,w,P,S,I,N,R,x,V,j,q,M,O];function $(z,G,L,U,H,J){return e(),n("div",null,W)}const Q=a(l,[["render",$]]);export{K as __pageData,Q as default}; diff --git a/docs/document/assets/en_advanced_built-in.md.z2x4Ba_k.lean.js b/docs/document/assets/en_advanced_built-in.md.z2x4Ba_k.lean.js deleted file mode 100644 index c324d41d3..000000000 --- a/docs/document/assets/en_advanced_built-in.md.z2x4Ba_k.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as e,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const K=JSON.parse('{"title":"Advanced Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1700976201000}'),l={name:"en/advanced/built-in.md"},p=s("",4),t=i("div",{className:"run-code"},"▶ Run Code",-1),h=s("",4),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s("",5),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",5),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s("",2),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s("",3),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s("",5),m=i("div",{className:"run-code"},"▶ Run Code",-1),F=s("",4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s("",5),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s("",5),B=i("div",{className:"run-code"},"▶ Run Code",-1),T=s("",5),f=i("div",{className:"run-code"},"▶ Run Code",-1),D=s("",5),w=i("div",{className:"run-code"},"▶ Run Code",-1),P=s("",4),S=i("div",{className:"run-code"},"▶ Run Code",-1),I=s("",4),N=i("div",{className:"run-code"},"▶ Run Code",-1),R=s("",5),x=i("div",{className:"run-code"},"▶ Run Code",-1),V=s("",4),j=i("div",{className:"run-code"},"▶ Run Code",-1),q=s("",4),M=i("div",{className:"run-code"},"▶ Run Code",-1),O=s("",1),W=[p,t,h,k,r,E,d,c,o,g,y,u,b,m,F,_,C,v,A,B,T,f,D,w,P,S,I,N,R,x,V,j,q,M,O];function $(z,G,L,U,H,J){return e(),n("div",null,W)}const Q=a(l,[["render",$]]);export{K as __pageData,Q as default}; diff --git a/docs/document/assets/en_advanced_class.md.081fc725.js b/docs/document/assets/en_advanced_class.md.081fc725.js new file mode 100644 index 000000000..2893badda --- /dev/null +++ b/docs/document/assets/en_advanced_class.md.081fc725.js @@ -0,0 +1,8 @@ +import{_ as e,c as n,o,V as s,z as a}from"./chunks/framework.5c8808ab.js";const B=JSON.parse('{"title":"Static Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1700976201000}'),l={name:"en/advanced/class.md"},t=s('

Static Properties ​

Here, Static Properties refer to the first-level properties mounted on the constructor, which are very rarely used.

instances ​

Returns an array of all player instances. You can use this property when you want to manage multiple players at the same time.

',4),p=a("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
console.info([...Artplayer.instances]);
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info([...Artplayer.instances]);

version ​

Returns the version information of the player.

`,3),c=a("div",{className:"run-code"},"▶ Run Code",-1),i=s('
js
console.info(Artplayer.version);

env ​

Returns the environment variables of the player.

',3),d=a("div",{className:"run-code"},"▶ Run Code",-1),_=s('
js
console.info(Artplayer.env);

build ​

Returns the build time of the player

',3),u=a("div",{className:"run-code"},"▶ Run Code",-1),h=s('
js
console.info(Artplayer.build);

config ​

Returns the default configuration of the video

',3),y=a("div",{className:"run-code"},"▶ Run Code",-1),A=s('
js
console.info(Artplayer.config);

utils ​

Returns a collection of utility functions for the player

',3),D=a("div",{className:"run-code"},"▶ Run Code",-1),C=s('
js
console.info(Artplayer.utils);

For the full list of utility functions, please refer to the following address:

artplayer/types/utils.d.ts

scheme ​

Returns the validation scheme for the player options

',4),m=a("div",{className:"run-code"},"▶ Run Code",-1),F=s('
js
console.info(Artplayer.scheme);

Emitter ​

Returns the constructor for the event dispatcher

',3),b=a("div",{className:"run-code"},"▶ Run Code",-1),v=s('
js
console.info(Artplayer.Emitter);

validator ​

Returns the validation function for options

',3),T=a("div",{className:"run-code"},"▶ Run Code",-1),f=s('
js
console.info(Artplayer.validator);

kindOf ​

Returns the function tool for type checking

',3),g=a("div",{className:"run-code"},"▶ Run Code",-1),P=s('
js
console.info(Artplayer.kindOf);

html ​

Returns the html string required for the player

',3),S=a("div",{className:"run-code"},"▶ Run Code",-1),k=s('
js
console.info(Artplayer.html);

option ​

Returns the player's default options

',3),R=a("div",{className:"run-code"},"▶ Run Code",-1),V=s('
js
console.info(Artplayer.option);
',1),N=[t,p,r,c,i,d,_,u,h,y,A,D,C,m,F,b,v,T,f,g,P,S,k,R,V];function q(I,j,E,w,x,O){return o(),n("div",null,N)}const z=e(l,[["render",q]]);export{B as __pageData,z as default}; diff --git a/docs/document/assets/en_advanced_class.md.081fc725.lean.js b/docs/document/assets/en_advanced_class.md.081fc725.lean.js new file mode 100644 index 000000000..7c55e30fd --- /dev/null +++ b/docs/document/assets/en_advanced_class.md.081fc725.lean.js @@ -0,0 +1 @@ +import{_ as e,c as n,o,V as s,z as a}from"./chunks/framework.5c8808ab.js";const B=JSON.parse('{"title":"Static Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1700976201000}'),l={name:"en/advanced/class.md"},t=s("",4),p=a("div",{className:"run-code"},"▶ Run Code",-1),r=s("",3),c=a("div",{className:"run-code"},"▶ Run Code",-1),i=s("",3),d=a("div",{className:"run-code"},"▶ Run Code",-1),_=s("",3),u=a("div",{className:"run-code"},"▶ Run Code",-1),h=s("",3),y=a("div",{className:"run-code"},"▶ Run Code",-1),A=s("",3),D=a("div",{className:"run-code"},"▶ Run Code",-1),C=s("",4),m=a("div",{className:"run-code"},"▶ Run Code",-1),F=s("",3),b=a("div",{className:"run-code"},"▶ Run Code",-1),v=s("",3),T=a("div",{className:"run-code"},"▶ Run Code",-1),f=s("",3),g=a("div",{className:"run-code"},"▶ Run Code",-1),P=s("",3),S=a("div",{className:"run-code"},"▶ Run Code",-1),k=s("",3),R=a("div",{className:"run-code"},"▶ Run Code",-1),V=s("",1),N=[t,p,r,c,i,d,_,u,h,y,A,D,C,m,F,b,v,T,f,g,P,S,k,R,V];function q(I,j,E,w,x,O){return o(),n("div",null,N)}const z=e(l,[["render",q]]);export{B as __pageData,z as default}; diff --git a/docs/document/assets/en_advanced_class.md.9GzYikQ5.js b/docs/document/assets/en_advanced_class.md.9GzYikQ5.js deleted file mode 100644 index a4d4f925e..000000000 --- a/docs/document/assets/en_advanced_class.md.9GzYikQ5.js +++ /dev/null @@ -1,8 +0,0 @@ -import{_ as e,c as i,o as n,R as s,k as a}from"./chunks/framework.0i_P4VHR.js";const $=JSON.parse('{"title":"Static Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1700976201000}'),t={name:"en/advanced/class.md"},l=s('

Static Properties ​

Here, Static Properties refer to the first-level properties mounted on the constructor, which are very rarely used.

instances ​

Returns an array of all player instances. You can use this property when you want to manage multiple players at the same time.

',4),r=a("div",{className:"run-code"},"▶ Run Code",-1),o=s(`
js
console.info([...Artplayer.instances]);
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info([...Artplayer.instances]);

version ​

Returns the version information of the player.

`,3),p=a("div",{className:"run-code"},"▶ Run Code",-1),h=s('
js
console.info(Artplayer.version);

env ​

Returns the environment variables of the player.

',3),d=a("div",{className:"run-code"},"▶ Run Code",-1),c=s('
js
console.info(Artplayer.env);

build ​

Returns the build time of the player

',3),k=a("div",{className:"run-code"},"▶ Run Code",-1),_=s('
js
console.info(Artplayer.build);

config ​

Returns the default configuration of the video

',3),u=a("div",{className:"run-code"},"▶ Run Code",-1),E=s('
js
console.info(Artplayer.config);

utils ​

Returns a collection of utility functions for the player

',3),b=a("div",{className:"run-code"},"▶ Run Code",-1),m=s('
js
console.info(Artplayer.utils);

For the full list of utility functions, please refer to the following address:

artplayer/types/utils.d.ts

scheme ​

Returns the validation scheme for the player options

',4),g=a("div",{className:"run-code"},"▶ Run Code",-1),v=s('
js
console.info(Artplayer.scheme);

Emitter ​

Returns the constructor for the event dispatcher

',3),y=a("div",{className:"run-code"},"▶ Run Code",-1),C=s('
js
console.info(Artplayer.Emitter);

validator ​

Returns the validation function for options

',3),T=a("div",{className:"run-code"},"▶ Run Code",-1),f=s('
js
console.info(Artplayer.validator);

kindOf ​

Returns the function tool for type checking

',3),A=a("div",{className:"run-code"},"▶ Run Code",-1),P=s('
js
console.info(Artplayer.kindOf);

html ​

Returns the html string required for the player

',3),S=a("div",{className:"run-code"},"▶ Run Code",-1),F=s('
js
console.info(Artplayer.html);

option ​

Returns the player's default options

',3),R=a("div",{className:"run-code"},"▶ Run Code",-1),N=s('
js
console.info(Artplayer.option);
',1),V=[l,r,o,p,h,d,c,k,_,u,E,b,m,g,v,y,C,T,f,A,P,S,F,R,N];function q(I,j,w,B,D,x){return n(),i("div",null,V)}const z=e(t,[["render",q]]);export{$ as __pageData,z as default}; diff --git a/docs/document/assets/en_advanced_class.md.9GzYikQ5.lean.js b/docs/document/assets/en_advanced_class.md.9GzYikQ5.lean.js deleted file mode 100644 index 585b4c7a6..000000000 --- a/docs/document/assets/en_advanced_class.md.9GzYikQ5.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as e,c as i,o as n,R as s,k as a}from"./chunks/framework.0i_P4VHR.js";const $=JSON.parse('{"title":"Static Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1700976201000}'),t={name:"en/advanced/class.md"},l=s("",4),r=a("div",{className:"run-code"},"▶ Run Code",-1),o=s("",3),p=a("div",{className:"run-code"},"▶ Run Code",-1),h=s("",3),d=a("div",{className:"run-code"},"▶ Run Code",-1),c=s("",3),k=a("div",{className:"run-code"},"▶ Run Code",-1),_=s("",3),u=a("div",{className:"run-code"},"▶ Run Code",-1),E=s("",3),b=a("div",{className:"run-code"},"▶ Run Code",-1),m=s("",4),g=a("div",{className:"run-code"},"▶ Run Code",-1),v=s("",3),y=a("div",{className:"run-code"},"▶ Run Code",-1),C=s("",3),T=a("div",{className:"run-code"},"▶ Run Code",-1),f=s("",3),A=a("div",{className:"run-code"},"▶ Run Code",-1),P=s("",3),S=a("div",{className:"run-code"},"▶ Run Code",-1),F=s("",3),R=a("div",{className:"run-code"},"▶ Run Code",-1),N=s("",1),V=[l,r,o,p,h,d,c,k,_,u,E,b,m,g,v,y,C,T,f,A,P,S,F,R,N];function q(I,j,w,B,D,x){return n(),i("div",null,V)}const z=e(t,[["render",q]]);export{$ as __pageData,z as default}; diff --git a/docs/document/assets/en_advanced_event.md.f2625316.js b/docs/document/assets/en_advanced_event.md.f2625316.js new file mode 100644 index 000000000..965d46d04 --- /dev/null +++ b/docs/document/assets/en_advanced_event.md.f2625316.js @@ -0,0 +1,341 @@ +import{_ as l,c as p,o,z as s,a as n,V as a}from"./chunks/framework.5c8808ab.js";const Xs=JSON.parse('{"title":"Example Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1700976201000}'),e={name:"en/advanced/event.md"},r=s("h1",{id:"example-events",tabindex:"-1"},[n("Example Events "),s("a",{class:"header-anchor",href:"#example-events","aria-label":'Permalink to "Example Events"'},"​")],-1),t=s("p",null,[n("Player events are divided into two types, one is the video's "),s("code",null,"native events"),n(" (prefix "),s("code",null,"video:"),n("), the other is "),s("code",null,"custom events")],-1),c=s("p",null,"Listening to events:",-1),D=s("div",{className:"run-code"},"▶ Run Code",-1),y=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('video:canplay', () => {
+    console.info('video:canplay');
+});

Listen to an event only once:

`,2),F=s("div",{className:"run-code"},"▶ Run Code",-1),i=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.once('video:canplay', () => {
+    console.info('video:canplay');
+});

Manually trigger an event:

`,2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.emit('focus');

Remove an event:

`,2),d=s("div",{className:"run-code"},"▶ Run Code",-1),b=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+const onReady = () => {
+    console.info('ready');
+    art.off('ready', onReady);
+}
+
+art.on('ready', onReady);

For a full list of events, please refer to the following address:

artplayer/types/events.d.ts

ready ​

Triggered when the player is able to play for the first time

`,4),u=s("div",{className:"run-code"},"▶ Run Code",-1),h=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info('ready');
+});

restart ​

Triggered when the player switches the address and is able to play

`,3),m=s("div",{className:"run-code"},"▶ Run Code",-1),_=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.url = '/assets/sample/video.mp4'
+});
+
+art.on('restart', (url) => {
+    console.info('restart', url);
+});

pause ​

Triggered when the player is paused

`,3),g=s("div",{className:"run-code"},"▶ Run Code",-1),v=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('pause', () => {
+    console.info('pause');
+});

play ​

Triggered when the player starts playing

`,3),E=s("div",{className:"run-code"},"▶ Run Code",-1),T=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('play', () => {
+    console.info('play');
+});

hotkey ​

Triggered when a hotkey on the player is pressed

`,3),f=s("div",{className:"run-code"},"▶ Run Code",-1),w=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('hotkey', (event) => {
+    console.info('hotkey', event);
+});

destroy ​

Triggered when the player is destroyed

`,3),k=s("div",{className:"run-code"},"▶ Run Code",-1),P=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.destroy();
+});
+
+art.on('destroy', () => {
+    console.info('destroy');
+});

focus ​

Triggered when the player gains focus

`,3),S=s("div",{className:"run-code"},"▶ Run Code",-1),q=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('focus', (event) => {
+    console.info('focus', event);
+});

blur ​

Triggered when the player loses focus

`,3),R=s("div",{className:"run-code"},"▶ Run Code",-1),V=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('blur', (event) => {
+    console.info('blur', event);
+});

dblclick ​

Triggered when the player is double-clicked

`,3),N=s("div",{className:"run-code"},"▶ Run Code",-1),j=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('dblclick', (event) => {
+    console.info('dblclick', event);
+});

click ​

Triggered when the player is clicked

`,3),I=s("div",{className:"run-code"},"▶ Run Code",-1),x=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('click', (event) => {
+    console.info('click', event);
+});

error ​

Triggered when an error occurs while the player is loading the video

`,3),z=s("div",{className:"run-code"},"▶ Run Code",-1),O=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});
+
+art.on('error', (error, reconnectTime) => {
+    console.info(error, reconnectTime);
+});

hover ​

Triggered when the player is hovered or unhovered by the mouse

`,3),U=s("div",{className:"run-code"},"▶ Run Code",-1),L=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('hover', (state, event) => {
+    console.info('hover', state, event);
+});

mousemove ​

Triggered when the mouse moves over the player

`,3),H=s("div",{className:"run-code"},"▶ Run Code",-1),W=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('mousemove', (event) => {
+    console.info('mousemove', event);
+});

resize ​

Triggered when the player size changes

`,3),$=s("div",{className:"run-code"},"▶ Run Code",-1),B=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('resize', () => {
+    console.info('resize');
+});

view ​

Triggered when the player appears in the viewport

`,3),M=s("div",{className:"run-code"},"▶ Run Code",-1),J=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('view', (state) => {
+    console.info('view', state);
+});

lock ​

On mobile, triggered when the locked state changes

`,3),G=s("div",{className:"run-code"},"▶ Run Code",-1),K=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lock: true,
+});
+
+art.on('lock', (state) => {
+    console.info('lock', state);
+});

aspectRatio ​

Triggered when the aspect ratio of the player changes

`,3),Q=s("div",{className:"run-code"},"▶ Run Code",-1),X=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    aspectRatio: true,
+    setting: true,
+});
+
+art.on('aspectRatio', (aspectRatio) => {
+    console.info('aspectRatio', aspectRatio);
+});

autoHeight ​

Triggered when the player automatically sets the height

`,3),Y=s("div",{className:"run-code"},"▶ Run Code",-1),Z=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.autoHeight();
+});
+
+art.on('autoHeight', (height) => {
+    console.info('autoHeight', height);
+});

autoSize ​

Triggered when the player automatically sets the size

`,3),ss=s("div",{className:"run-code"},"▶ Run Code",-1),as=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+});
+
+art.on('autoSize', () => {
+    console.info('autoSize');
+});

flip ​

Triggered when the player flips

`,3),ns=s("div",{className:"run-code"},"▶ Run Code",-1),ls=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    flip: true,
+    setting: true,
+});
+
+art.on('flip', (flip) => {
+    console.info('flip', flip);
+});

fullscreen ​

Triggered when the player goes into full screen

`,3),ps=s("div",{className:"run-code"},"▶ Run Code",-1),os=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+});
+
+art.on('fullscreen', (state) => {
+    console.info('fullscreen', state);
+});

fullscreenWeb ​

Triggered when the player enters web fullscreen

`,3),es=s("div",{className:"run-code"},"▶ Run Code",-1),rs=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
+
+art.on('fullscreenWeb', (state) => {
+    console.info('fullscreenWeb', state);
+});

mini ​

Triggered when the player enters mini mode

`,3),ts=s("div",{className:"run-code"},"▶ Run Code",-1),cs=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.mini = true;
+});
+
+art.on('mini', (state) => {
+    console.info('mini', state);
+});

pip ​

Triggered when the player enters Picture-in-Picture mode

`,3),Ds=s("div",{className:"run-code"},"▶ Run Code",-1),ys=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    pip: true,
+});
+
+art.on('pip', (state) => {
+    console.info('pip', state);
+});

screenshot ​

Triggered when the player takes a screenshot

`,3),Fs=s("div",{className:"run-code"},"▶ Run Code",-1),is=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    screenshot: true,
+});
+
+art.on('screenshot', (dataUri) => {
+    console.info('screenshot', dataUri);
+});

seek ​

Triggered when the player jumps in time

`,3),As=s("div",{className:"run-code"},"▶ Run Code",-1),Cs=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('seek', (currentTime) => {
+    console.info('seek', currentTime);
+});

subtitleOffset ​

Triggered when the subtitle offset occurs in the player

`,3),ds=s("div",{className:"run-code"},"▶ Run Code",-1),bs=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitleOffset: true,
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+    setting: true,
+});
+
+art.on('subtitleOffset', (offset) => {
+    console.info('subtitleOffset', offset);
+});

subtitleUpdate ​

Triggered when the subtitle updates

`,3),us=s("div",{className:"run-code"},"▶ Run Code",-1),hs=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
+
+art.on('subtitleUpdate', (text) => {
+    console.info('subtitleUpdate', text);
+});

subtitleLoad ​

Triggered when the subtitle loads

`,3),ms=s("div",{className:"run-code"},"▶ Run Code",-1),_s=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
+
+art.on('subtitleLoad', (url) => {
+    console.info('subtitleLoad', url);
+});

subtitleSwitch ​

Triggered when subtitles switch

`,3),gs=s("div",{className:"run-code"},"▶ Run Code",-1),vs=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
+
+art.on('ready', () => {
+    art.subtitle.url = '/assets/sample/subtitle.ass';
+});
+
+art.on('subtitleSwitch', (url) => {
+    console.info('subtitleSwitch', url);
+});

info ​

Triggered when the information panel is shown or hidden

`,3),Es=s("div",{className:"run-code"},"▶ Run Code",-1),Ts=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('info', (state) => {
+    console.log(state);
+});

layer ​

Triggered when a custom layer is shown or hidden

`,3),fs=s("div",{className:"run-code"},"▶ Run Code",-1),ws=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('layer', (state) => {
+    console.log(state);
+});

loading ​

Triggered when a loader is shown or hidden

`,3),ks=s("div",{className:"run-code"},"▶ Run Code",-1),Ps=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('loading', (state) => {
+    console.log(state);
+});

mask ​

Triggered when a mask layer is shown or hidden

`,3),Ss=s("div",{className:"run-code"},"▶ Run Code",-1),qs=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('mask', (state) => {
+    console.log(state);
+});

subtitle ​

Triggered when the subtitle layer is shown or hidden

`,3),Rs=s("div",{className:"run-code"},"▶ Run Code",-1),Vs=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('subtitle', (state) => {
+    console.log(state);
+});

contextmenu ​

Triggered when the right-click menu is shown or hidden

`,3),Ns=s("div",{className:"run-code"},"▶ Run Code",-1),js=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('contextmenu', (state) => {
+    console.log(state);
+});

control ​

Triggered when the controller is shown or hidden

`,3),Is=s("div",{className:"run-code"},"▶ Run Code",-1),xs=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('control', (state) => {
+    console.log(state);
+});

setting ​

Triggered when the settings panel is shown or hidden

`,3),zs=s("div",{className:"run-code"},"▶ Run Code",-1),Os=a(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
+
+art.on('setting', (state) => {
+    console.log(state);
+});

muted ​

Triggered when the muted state changes

`,3),Us=s("div",{className:"run-code"},"▶ Run Code",-1),Ls=a('
js
var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n});\n\nart.on('muted', (state) => {\n    console.log(state);\n});

video:canplay ​

The browser can play the media file, but estimates there is not enough data to play through to the end without having to stop for further buffering

video:canplaythrough ​

The browser estimates it can play the media through to the end without stopping for content buffering

video:complete ​

OfflineAudioContext rendering is complete

video:durationchange ​

Triggered when the value of the duration property changes

video:emptied ​

The media content becomes empty; for example, when this media has been completely loaded (or partially loaded), this event is sent and the load() method is called to reload it

video:ended ​

The video has stopped because the media reached the end point

video:error ​

An error occurred while fetching media data, or the resource type is not a supported media format

video:loadeddata ​

The first frame of the media has finished loading

video:loadedmetadata ​

Metadata has been loaded

video:pause ​

Playback has been paused

video:play ​

Playback has started

video:playing ​

Playback is ready to start following a pause or delay due to lack of data

video:progress ​

Periodically triggered while the browser is loading resources

video:ratechange ​

The playback rate has changed

video:seeked ​

A seek (frame skipping) operation has completed

video:seeking ​

A seek (frame skipping) operation has started

video:stalled ​

The user agent is trying to fetch media data, but the data unexpectedly has not appeared

video:suspend ​

Media data loading has been suspended

video:timeupdate ​

The time specified by the currentTime attribute has changed

video:volumechange ​

Volume changed

video:waiting ​

Playback has stopped due to temporarily missing data

',43),Hs=[r,t,c,D,y,F,i,A,C,d,b,u,h,m,_,g,v,E,T,f,w,k,P,S,q,R,V,N,j,I,x,z,O,U,L,H,W,$,B,M,J,G,K,Q,X,Y,Z,ss,as,ns,ls,ps,os,es,rs,ts,cs,Ds,ys,Fs,is,As,Cs,ds,bs,us,hs,ms,_s,gs,vs,Es,Ts,fs,ws,ks,Ps,Ss,qs,Rs,Vs,Ns,js,Is,xs,zs,Os,Us,Ls];function Ws($s,Bs,Ms,Js,Gs,Ks){return o(),p("div",null,Hs)}const Ys=l(e,[["render",Ws]]);export{Xs as __pageData,Ys as default}; diff --git a/docs/document/assets/en_advanced_event.md.f2625316.lean.js b/docs/document/assets/en_advanced_event.md.f2625316.lean.js new file mode 100644 index 000000000..2e23b6fb0 --- /dev/null +++ b/docs/document/assets/en_advanced_event.md.f2625316.lean.js @@ -0,0 +1 @@ +import{_ as l,c as p,o,z as s,a as n,V as a}from"./chunks/framework.5c8808ab.js";const Xs=JSON.parse('{"title":"Example Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1700976201000}'),e={name:"en/advanced/event.md"},r=s("h1",{id:"example-events",tabindex:"-1"},[n("Example Events "),s("a",{class:"header-anchor",href:"#example-events","aria-label":'Permalink to "Example Events"'},"​")],-1),t=s("p",null,[n("Player events are divided into two types, one is the video's "),s("code",null,"native events"),n(" (prefix "),s("code",null,"video:"),n("), the other is "),s("code",null,"custom events")],-1),c=s("p",null,"Listening to events:",-1),D=s("div",{className:"run-code"},"▶ Run Code",-1),y=a("",2),F=s("div",{className:"run-code"},"▶ Run Code",-1),i=a("",2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a("",2),d=s("div",{className:"run-code"},"▶ Run Code",-1),b=a("",4),u=s("div",{className:"run-code"},"▶ Run Code",-1),h=a("",3),m=s("div",{className:"run-code"},"▶ Run Code",-1),_=a("",3),g=s("div",{className:"run-code"},"▶ Run Code",-1),v=a("",3),E=s("div",{className:"run-code"},"▶ Run Code",-1),T=a("",3),f=s("div",{className:"run-code"},"▶ Run Code",-1),w=a("",3),k=s("div",{className:"run-code"},"▶ Run Code",-1),P=a("",3),S=s("div",{className:"run-code"},"▶ Run Code",-1),q=a("",3),R=s("div",{className:"run-code"},"▶ Run Code",-1),V=a("",3),N=s("div",{className:"run-code"},"▶ Run Code",-1),j=a("",3),I=s("div",{className:"run-code"},"▶ Run Code",-1),x=a("",3),z=s("div",{className:"run-code"},"▶ Run Code",-1),O=a("",3),U=s("div",{className:"run-code"},"▶ Run Code",-1),L=a("",3),H=s("div",{className:"run-code"},"▶ Run Code",-1),W=a("",3),$=s("div",{className:"run-code"},"▶ Run Code",-1),B=a("",3),M=s("div",{className:"run-code"},"▶ Run Code",-1),J=a("",3),G=s("div",{className:"run-code"},"▶ Run Code",-1),K=a("",3),Q=s("div",{className:"run-code"},"▶ Run Code",-1),X=a("",3),Y=s("div",{className:"run-code"},"▶ Run Code",-1),Z=a("",3),ss=s("div",{className:"run-code"},"▶ Run Code",-1),as=a("",3),ns=s("div",{className:"run-code"},"▶ Run Code",-1),ls=a("",3),ps=s("div",{className:"run-code"},"▶ Run Code",-1),os=a("",3),es=s("div",{className:"run-code"},"▶ Run Code",-1),rs=a("",3),ts=s("div",{className:"run-code"},"▶ Run Code",-1),cs=a("",3),Ds=s("div",{className:"run-code"},"▶ Run Code",-1),ys=a("",3),Fs=s("div",{className:"run-code"},"▶ Run Code",-1),is=a("",3),As=s("div",{className:"run-code"},"▶ Run Code",-1),Cs=a("",3),ds=s("div",{className:"run-code"},"▶ Run Code",-1),bs=a("",3),us=s("div",{className:"run-code"},"▶ Run Code",-1),hs=a("",3),ms=s("div",{className:"run-code"},"▶ Run Code",-1),_s=a("",3),gs=s("div",{className:"run-code"},"▶ Run Code",-1),vs=a("",3),Es=s("div",{className:"run-code"},"▶ Run Code",-1),Ts=a("",3),fs=s("div",{className:"run-code"},"▶ Run Code",-1),ws=a("",3),ks=s("div",{className:"run-code"},"▶ Run Code",-1),Ps=a("",3),Ss=s("div",{className:"run-code"},"▶ Run Code",-1),qs=a("",3),Rs=s("div",{className:"run-code"},"▶ Run Code",-1),Vs=a("",3),Ns=s("div",{className:"run-code"},"▶ Run Code",-1),js=a("",3),Is=s("div",{className:"run-code"},"▶ Run Code",-1),xs=a("",3),zs=s("div",{className:"run-code"},"▶ Run Code",-1),Os=a("",3),Us=s("div",{className:"run-code"},"▶ Run Code",-1),Ls=a("",43),Hs=[r,t,c,D,y,F,i,A,C,d,b,u,h,m,_,g,v,E,T,f,w,k,P,S,q,R,V,N,j,I,x,z,O,U,L,H,W,$,B,M,J,G,K,Q,X,Y,Z,ss,as,ns,ls,ps,os,es,rs,ts,cs,Ds,ys,Fs,is,As,Cs,ds,bs,us,hs,ms,_s,gs,vs,Es,Ts,fs,ws,ks,Ps,Ss,qs,Rs,Vs,Ns,js,Is,xs,zs,Os,Us,Ls];function Ws($s,Bs,Ms,Js,Gs,Ks){return o(),p("div",null,Hs)}const Ys=l(e,[["render",Ws]]);export{Xs as __pageData,Ys as default}; diff --git a/docs/document/assets/en_advanced_event.md.zSK-qc-R.js b/docs/document/assets/en_advanced_event.md.zSK-qc-R.js deleted file mode 100644 index 567d492f8..000000000 --- a/docs/document/assets/en_advanced_event.md.zSK-qc-R.js +++ /dev/null @@ -1,409 +0,0 @@ -import{_ as n,c as l,o as p,k as s,a,R as i}from"./chunks/framework.0i_P4VHR.js";const Xs=JSON.parse('{"title":"Example Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1700976201000}'),e={name:"en/advanced/event.md"},h=s("h1",{id:"example-events",tabindex:"-1"},[a("Example Events "),s("a",{class:"header-anchor",href:"#example-events","aria-label":'Permalink to "Example Events"'},"​")],-1),t=s("p",null,[a("Player events are divided into two types, one is the video's "),s("code",null,"native events"),a(" (prefix "),s("code",null,"video:"),a("), the other is "),s("code",null,"custom events")],-1),k=s("p",null,"Listening to events:",-1),r=s("div",{className:"run-code"},"▶ Run Code",-1),E=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('video:canplay', () => {
-    console.info('video:canplay');
-});

Listen to an event only once:

`,2),d=s("div",{className:"run-code"},"▶ Run Code",-1),c=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.once('video:canplay', () => {
-    console.info('video:canplay');
-});

Manually trigger an event:

`,2),g=s("div",{className:"run-code"},"▶ Run Code",-1),y=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.emit('focus');

Remove an event:

`,2),o=s("div",{className:"run-code"},"▶ Run Code",-1),b=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-const onReady = () => {
-    console.info('ready');
-    art.off('ready', onReady);
-}
-
-art.on('ready', onReady);

For a full list of events, please refer to the following address:

artplayer/types/events.d.ts

ready ​

Triggered when the player is able to play for the first time

`,4),u=s("div",{className:"run-code"},"▶ Run Code",-1),F=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info('ready');
-});

restart ​

Triggered when the player switches the address and is able to play

`,3),m=s("div",{className:"run-code"},"▶ Run Code",-1),_=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.url = '/assets/sample/video.mp4'
-});
-
-art.on('restart', (url) => {
-    console.info('restart', url);
-});

pause ​

Triggered when the player is paused

`,3),C=s("div",{className:"run-code"},"▶ Run Code",-1),v=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('pause', () => {
-    console.info('pause');
-});

play ​

Triggered when the player starts playing

`,3),A=s("div",{className:"run-code"},"▶ Run Code",-1),B=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('play', () => {
-    console.info('play');
-});

hotkey ​

Triggered when a hotkey on the player is pressed

`,3),T=s("div",{className:"run-code"},"▶ Run Code",-1),D=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('hotkey', (event) => {
-    console.info('hotkey', event);
-});

destroy ​

Triggered when the player is destroyed

`,3),f=s("div",{className:"run-code"},"▶ Run Code",-1),w=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.destroy();
-});
-
-art.on('destroy', () => {
-    console.info('destroy');
-});

focus ​

Triggered when the player gains focus

`,3),P=s("div",{className:"run-code"},"▶ Run Code",-1),S=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('focus', (event) => {
-    console.info('focus', event);
-});

blur ​

Triggered when the player loses focus

`,3),R=s("div",{className:"run-code"},"▶ Run Code",-1),N=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('blur', (event) => {
-    console.info('blur', event);
-});

dblclick ​

Triggered when the player is double-clicked

`,3),V=s("div",{className:"run-code"},"▶ Run Code",-1),q=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('dblclick', (event) => {
-    console.info('dblclick', event);
-});

click ​

Triggered when the player is clicked

`,3),j=s("div",{className:"run-code"},"▶ Run Code",-1),I=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('click', (event) => {
-    console.info('click', event);
-});

error ​

Triggered when an error occurs while the player is loading the video

`,3),x=s("div",{className:"run-code"},"▶ Run Code",-1),z=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});
-
-art.on('error', (error, reconnectTime) => {
-    console.info(error, reconnectTime);
-});

hover ​

Triggered when the player is hovered or unhovered by the mouse

`,3),O=s("div",{className:"run-code"},"▶ Run Code",-1),U=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('hover', (state, event) => {
-    console.info('hover', state, event);
-});

mousemove ​

Triggered when the mouse moves over the player

`,3),L=s("div",{className:"run-code"},"▶ Run Code",-1),H=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('mousemove', (event) => {
-    console.info('mousemove', event);
-});

resize ​

Triggered when the player size changes

`,3),W=s("div",{className:"run-code"},"▶ Run Code",-1),$=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('resize', () => {
-    console.info('resize');
-});

view ​

Triggered when the player appears in the viewport

`,3),M=s("div",{className:"run-code"},"▶ Run Code",-1),J=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('view', (state) => {
-    console.info('view', state);
-});

lock ​

On mobile, triggered when the locked state changes

`,3),G=s("div",{className:"run-code"},"▶ Run Code",-1),K=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lock: true,
-});
-
-art.on('lock', (state) => {
-    console.info('lock', state);
-});

aspectRatio ​

Triggered when the aspect ratio of the player changes

`,3),Q=s("div",{className:"run-code"},"▶ Run Code",-1),X=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    aspectRatio: true,
-    setting: true,
-});
-
-art.on('aspectRatio', (aspectRatio) => {
-    console.info('aspectRatio', aspectRatio);
-});

autoHeight ​

Triggered when the player automatically sets the height

`,3),Y=s("div",{className:"run-code"},"▶ Run Code",-1),Z=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.autoHeight();
-});
-
-art.on('autoHeight', (height) => {
-    console.info('autoHeight', height);
-});

autoSize ​

Triggered when the player automatically sets the size

`,3),ss=s("div",{className:"run-code"},"▶ Run Code",-1),is=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-});
-
-art.on('autoSize', () => {
-    console.info('autoSize');
-});

flip ​

Triggered when the player flips

`,3),as=s("div",{className:"run-code"},"▶ Run Code",-1),ns=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    flip: true,
-    setting: true,
-});
-
-art.on('flip', (flip) => {
-    console.info('flip', flip);
-});

fullscreen ​

Triggered when the player goes into full screen

`,3),ls=s("div",{className:"run-code"},"▶ Run Code",-1),ps=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-});
-
-art.on('fullscreen', (state) => {
-    console.info('fullscreen', state);
-});

fullscreenWeb ​

Triggered when the player enters web fullscreen

`,3),es=s("div",{className:"run-code"},"▶ Run Code",-1),hs=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
-
-art.on('fullscreenWeb', (state) => {
-    console.info('fullscreenWeb', state);
-});

mini ​

Triggered when the player enters mini mode

`,3),ts=s("div",{className:"run-code"},"▶ Run Code",-1),ks=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.mini = true;
-});
-
-art.on('mini', (state) => {
-    console.info('mini', state);
-});

pip ​

Triggered when the player enters Picture-in-Picture mode

`,3),rs=s("div",{className:"run-code"},"▶ Run Code",-1),Es=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    pip: true,
-});
-
-art.on('pip', (state) => {
-    console.info('pip', state);
-});

screenshot ​

Triggered when the player takes a screenshot

`,3),ds=s("div",{className:"run-code"},"▶ Run Code",-1),cs=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    screenshot: true,
-});
-
-art.on('screenshot', (dataUri) => {
-    console.info('screenshot', dataUri);
-});

seek ​

Triggered when the player jumps in time

`,3),gs=s("div",{className:"run-code"},"▶ Run Code",-1),ys=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('seek', (currentTime) => {
-    console.info('seek', currentTime);
-});

subtitleOffset ​

Triggered when the subtitle offset occurs in the player

`,3),os=s("div",{className:"run-code"},"▶ Run Code",-1),bs=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitleOffset: true,
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-    setting: true,
-});
-
-art.on('subtitleOffset', (offset) => {
-    console.info('subtitleOffset', offset);
-});

subtitleUpdate ​

Triggered when the subtitle updates

`,3),us=s("div",{className:"run-code"},"▶ Run Code",-1),Fs=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
-
-art.on('subtitleUpdate', (text) => {
-    console.info('subtitleUpdate', text);
-});

subtitleLoad ​

Triggered when the subtitle loads

`,3),ms=s("div",{className:"run-code"},"▶ Run Code",-1),_s=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
-
-art.on('subtitleLoad', (url) => {
-    console.info('subtitleLoad', url);
-});

subtitleSwitch ​

Triggered when subtitles switch

`,3),Cs=s("div",{className:"run-code"},"▶ Run Code",-1),vs=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
-
-art.on('ready', () => {
-    art.subtitle.url = '/assets/sample/subtitle.ass';
-});
-
-art.on('subtitleSwitch', (url) => {
-    console.info('subtitleSwitch', url);
-});

info ​

Triggered when the information panel is shown or hidden

`,3),As=s("div",{className:"run-code"},"▶ Run Code",-1),Bs=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('info', (state) => {
-    console.log(state);
-});

layer ​

Triggered when a custom layer is shown or hidden

`,3),Ts=s("div",{className:"run-code"},"▶ Run Code",-1),Ds=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('layer', (state) => {
-    console.log(state);
-});

loading ​

Triggered when a loader is shown or hidden

`,3),fs=s("div",{className:"run-code"},"▶ Run Code",-1),ws=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('loading', (state) => {
-    console.log(state);
-});

mask ​

Triggered when a mask layer is shown or hidden

`,3),Ps=s("div",{className:"run-code"},"▶ Run Code",-1),Ss=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('mask', (state) => {
-    console.log(state);
-});

subtitle ​

Triggered when the subtitle layer is shown or hidden

`,3),Rs=s("div",{className:"run-code"},"▶ Run Code",-1),Ns=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('subtitle', (state) => {
-    console.log(state);
-});

contextmenu ​

Triggered when the right-click menu is shown or hidden

`,3),Vs=s("div",{className:"run-code"},"▶ Run Code",-1),qs=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('contextmenu', (state) => {
-    console.log(state);
-});

control ​

Triggered when the controller is shown or hidden

`,3),js=s("div",{className:"run-code"},"▶ Run Code",-1),Is=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('control', (state) => {
-    console.log(state);
-});

setting ​

Triggered when the settings panel is shown or hidden

`,3),xs=s("div",{className:"run-code"},"▶ Run Code",-1),zs=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
-
-art.on('setting', (state) => {
-    console.log(state);
-});

muted ​

Triggered when the muted state changes

`,3),Os=s("div",{className:"run-code"},"▶ Run Code",-1),Us=i(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('muted', (state) => {
-    console.log(state);
-});

video:canplay ​

The browser can play the media file, but estimates there is not enough data to play through to the end without having to stop for further buffering

video:canplaythrough ​

The browser estimates it can play the media through to the end without stopping for content buffering

video:complete ​

OfflineAudioContext rendering is complete

video:durationchange ​

Triggered when the value of the duration property changes

video:emptied ​

The media content becomes empty; for example, when this media has been completely loaded (or partially loaded), this event is sent and the load() method is called to reload it

## \`video:ended\`
-
-The video has stopped because the media reached the end point
-
-## \`video:error\`
-
-An error occurred while fetching media data, or the resource type is not a supported media format
-
-## \`video:loadeddata\`
-
-The first frame of the media has finished loading
-
-## \`video:loadedmetadata\`
-
-Metadata has been loaded
-
-## \`video:pause\`
-
-Playback has been paused
-
-## \`video:play\`
-
-Playback has started
-
-## \`video:playing\`
-
-Playback is ready to start following a pause or delay due to lack of data
-
-## \`video:progress\`
-
-Periodically triggered while the browser is loading resources
-
-## \`video:ratechange\`
-
-The playback rate has changed
-
-## \`video:seeked\`
-
-A seek (frame skipping) operation has completed
-
-## \`video:seeking\`
-
-A seek (frame skipping) operation has started
-
-## \`video:stalled\`
-
-The user agent is trying to fetch media data, but the data unexpectedly has not appeared
-
-## \`video:suspend\`
-
-Media data loading has been suspended
-
-## \`video:timeupdate\`
-
-The time specified by the currentTime attribute has changed
-## \`video:volumechange\`
-
-Volume changed
-
-## \`video:waiting\`
-
-Playback has stopped due to temporarily missing data
`,12),Ls=[h,t,k,r,E,d,c,g,y,o,b,u,F,m,_,C,v,A,B,T,D,f,w,P,S,R,N,V,q,j,I,x,z,O,U,L,H,W,$,M,J,G,K,Q,X,Y,Z,ss,is,as,ns,ls,ps,es,hs,ts,ks,rs,Es,ds,cs,gs,ys,os,bs,us,Fs,ms,_s,Cs,vs,As,Bs,Ts,Ds,fs,ws,Ps,Ss,Rs,Ns,Vs,qs,js,Is,xs,zs,Os,Us];function Hs(Ws,$s,Ms,Js,Gs,Ks){return p(),l("div",null,Ls)}const Ys=n(e,[["render",Hs]]);export{Xs as __pageData,Ys as default}; diff --git a/docs/document/assets/en_advanced_event.md.zSK-qc-R.lean.js b/docs/document/assets/en_advanced_event.md.zSK-qc-R.lean.js deleted file mode 100644 index 0e218d066..000000000 --- a/docs/document/assets/en_advanced_event.md.zSK-qc-R.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as n,c as l,o as p,k as s,a,R as i}from"./chunks/framework.0i_P4VHR.js";const Xs=JSON.parse('{"title":"Example Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1700976201000}'),e={name:"en/advanced/event.md"},h=s("h1",{id:"example-events",tabindex:"-1"},[a("Example Events "),s("a",{class:"header-anchor",href:"#example-events","aria-label":'Permalink to "Example Events"'},"​")],-1),t=s("p",null,[a("Player events are divided into two types, one is the video's "),s("code",null,"native events"),a(" (prefix "),s("code",null,"video:"),a("), the other is "),s("code",null,"custom events")],-1),k=s("p",null,"Listening to events:",-1),r=s("div",{className:"run-code"},"▶ Run Code",-1),E=i("",2),d=s("div",{className:"run-code"},"▶ Run Code",-1),c=i("",2),g=s("div",{className:"run-code"},"▶ Run Code",-1),y=i("",2),o=s("div",{className:"run-code"},"▶ Run Code",-1),b=i("",4),u=s("div",{className:"run-code"},"▶ Run Code",-1),F=i("",3),m=s("div",{className:"run-code"},"▶ Run Code",-1),_=i("",3),C=s("div",{className:"run-code"},"▶ Run Code",-1),v=i("",3),A=s("div",{className:"run-code"},"▶ Run Code",-1),B=i("",3),T=s("div",{className:"run-code"},"▶ Run Code",-1),D=i("",3),f=s("div",{className:"run-code"},"▶ Run Code",-1),w=i("",3),P=s("div",{className:"run-code"},"▶ Run Code",-1),S=i("",3),R=s("div",{className:"run-code"},"▶ Run Code",-1),N=i("",3),V=s("div",{className:"run-code"},"▶ Run Code",-1),q=i("",3),j=s("div",{className:"run-code"},"▶ Run Code",-1),I=i("",3),x=s("div",{className:"run-code"},"▶ Run Code",-1),z=i("",3),O=s("div",{className:"run-code"},"▶ Run Code",-1),U=i("",3),L=s("div",{className:"run-code"},"▶ Run Code",-1),H=i("",3),W=s("div",{className:"run-code"},"▶ Run Code",-1),$=i("",3),M=s("div",{className:"run-code"},"▶ Run Code",-1),J=i("",3),G=s("div",{className:"run-code"},"▶ Run Code",-1),K=i("",3),Q=s("div",{className:"run-code"},"▶ Run Code",-1),X=i("",3),Y=s("div",{className:"run-code"},"▶ Run Code",-1),Z=i("",3),ss=s("div",{className:"run-code"},"▶ Run Code",-1),is=i("",3),as=s("div",{className:"run-code"},"▶ Run Code",-1),ns=i("",3),ls=s("div",{className:"run-code"},"▶ Run Code",-1),ps=i("",3),es=s("div",{className:"run-code"},"▶ Run Code",-1),hs=i("",3),ts=s("div",{className:"run-code"},"▶ Run Code",-1),ks=i("",3),rs=s("div",{className:"run-code"},"▶ Run Code",-1),Es=i("",3),ds=s("div",{className:"run-code"},"▶ Run Code",-1),cs=i("",3),gs=s("div",{className:"run-code"},"▶ Run Code",-1),ys=i("",3),os=s("div",{className:"run-code"},"▶ Run Code",-1),bs=i("",3),us=s("div",{className:"run-code"},"▶ Run Code",-1),Fs=i("",3),ms=s("div",{className:"run-code"},"▶ Run Code",-1),_s=i("",3),Cs=s("div",{className:"run-code"},"▶ Run Code",-1),vs=i("",3),As=s("div",{className:"run-code"},"▶ Run Code",-1),Bs=i("",3),Ts=s("div",{className:"run-code"},"▶ Run Code",-1),Ds=i("",3),fs=s("div",{className:"run-code"},"▶ Run Code",-1),ws=i("",3),Ps=s("div",{className:"run-code"},"▶ Run Code",-1),Ss=i("",3),Rs=s("div",{className:"run-code"},"▶ Run Code",-1),Ns=i("",3),Vs=s("div",{className:"run-code"},"▶ Run Code",-1),qs=i("",3),js=s("div",{className:"run-code"},"▶ Run Code",-1),Is=i("",3),xs=s("div",{className:"run-code"},"▶ Run Code",-1),zs=i("",3),Os=s("div",{className:"run-code"},"▶ Run Code",-1),Us=i("",12),Ls=[h,t,k,r,E,d,c,g,y,o,b,u,F,m,_,C,v,A,B,T,D,f,w,P,S,R,N,V,q,j,I,x,z,O,U,L,H,W,$,M,J,G,K,Q,X,Y,Z,ss,is,as,ns,ls,ps,es,hs,ts,ks,rs,Es,ds,cs,gs,ys,os,bs,us,Fs,ms,_s,Cs,vs,As,Bs,Ts,Ds,fs,ws,Ps,Ss,Rs,Ns,Vs,qs,js,Is,xs,zs,Os,Us];function Hs(Ws,$s,Ms,Js,Gs,Ks){return p(),l("div",null,Ls)}const Ys=n(e,[["render",Hs]]);export{Xs as __pageData,Ys as default}; diff --git a/docs/document/assets/en_advanced_global.md.e0d9b7d1.js b/docs/document/assets/en_advanced_global.md.e0d9b7d1.js new file mode 100644 index 000000000..579a131c7 --- /dev/null +++ b/docs/document/assets/en_advanced_global.md.e0d9b7d1.js @@ -0,0 +1,222 @@ +import{_ as n,c as l,o as p,V as s,z as a}from"./chunks/framework.5c8808ab.js";const Ss=JSON.parse('{"title":"Global Attributes","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1700976201000}'),e={name:"en/advanced/global.md"},o=s('

Global Attributes ​

Here, Global Attributes refer to the first-level properties mounted on the constructor. Property names are all in uppercase, subject to change in the future and basically not needed.

DEBUG ​

Whether to start debug mode, which can print out all built-in events of the video by default is turned off.

',4),r=a("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
Artplayer.DEBUG = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

CONTEXTMENU ​

Whether to enable the right-click context menu, enabled by default.

`,3),c=a("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
Artplayer.CONTEXTMENU = false;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

NOTICE_TIME ​

The display duration of the notification message, in milliseconds, defaults to 2000

`,3),y=a("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
js
Artplayer.NOTICE_TIME = 5000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

SETTING_WIDTH ​

The default width of the settings panel, in pixels, defaults to 250

`,3),C=a("div",{className:"run-code"},"▶ Run Code",-1),i=s(`
js
Artplayer.SETTING_WIDTH = 300;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});

SETTING_ITEM_WIDTH ​

Set the default width of the settings items in the panel, in pixels, the default is 200.

`,3),A=a("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
Artplayer.SETTING_ITEM_WIDTH = 300;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});

SETTING_ITEM_HEIGHT ​

Set the default height of the settings items in the panel, in pixels, the default is 35.

`,3),u=a("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
Artplayer.SETTING_ITEM_HEIGHT = 40;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});

RESIZE_TIME ​

Throttle time for the resize event, in milliseconds, defaults to 200

`,3),_=a("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
Artplayer.RESIZE_TIME = 500;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('resize', () => {
+    console.log('resize');
+});

SCROLL_TIME ​

Throttle time for the scroll event, in milliseconds, defaults to 200

`,3),h=a("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
Artplayer.SCROLL_TIME = 500;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('scroll', () => {
+    console.log('scroll');
+});

SCROLL_GAP ​

The boundary tolerance distance for the view event, in pixels, default is 50

`,3),E=a("div",{className:"run-code"},"▶ Run Code",-1),v=s(`
js
Artplayer.SCROLL_GAP = 100;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('scroll', () => {
+    console.log('scroll');
+});

AUTO_PLAYBACK_MAX ​

The maximum number of records for the automatic playback feature, default is 10

`,3),g=a("div",{className:"run-code"},"▶ Run Code",-1),I=s(`
js
Artplayer.AUTO_PLAYBACK_MAX = 20;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});

AUTO_PLAYBACK_MIN ​

The minimum duration for the auto playback feature, in seconds, with a default of 5.

`,3),f=a("div",{className:"run-code"},"▶ Run Code",-1),S=s(`
js
Artplayer.AUTO_PLAYBACK_MIN = 10;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});

AUTO_PLAYBACK_TIMEOUT ​

The delay duration for hiding the auto playback feature, in milliseconds, with a default of 3000.

`,3),P=a("div",{className:"run-code"},"▶ Run Code",-1),R=s(`
js
Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});

RECONNECT_TIME_MAX ​

The maximum number of automatic reconnection attempts when a connection error occurs, default is 5

`,3),N=a("div",{className:"run-code"},"▶ Run Code",-1),k=s(`
js
Artplayer.RECONNECT_TIME_MAX = 10;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});

RECONNECT_SLEEP_TIME ​

The delay time for the automatic reconnection attempt when a connection error occurs, in milliseconds, default is 1000

`,3),w=a("div",{className:"run-code"},"▶ Run Code",-1),O=s(`
js
Artplayer.RECONNECT_SLEEP_TIME = 3000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});

CONTROL_HIDE_TIME ​

...

Auto-hide delay time for the bottom control bar, measured in milliseconds, default is 3000

`,4),L=a("div",{className:"run-code"},"▶ Run Code",-1),V=s(`
js
Artplayer.CONTROL_HIDE_TIME = 5000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

DBCLICK_TIME ​

Double-click event delay time, measured in milliseconds, default is 300

`,3),j=a("div",{className:"run-code"},"▶ Run Code",-1),q=s(`
js
Artplayer.DBCLICK_TIME = 500;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('dblclick', () => {
+    console.log('dblclick');
+});

DBCLICK_FULLSCREEN ​

On desktop, whether to switch to fullscreen on double click, default is true

`,3),M=a("div",{className:"run-code"},"▶ Run Code",-1),x=s(`
js
Artplayer.DBCLICK_FULLSCREEN = false;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

MOBILE_DBCLICK_PLAY ​

On mobile, whether to toggle play/pause on double click, default is true

`,3),B=a("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
Artplayer.MOBILE_DBCLICK_PLAY = false;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

MOBILE_CLICK_PLAY ​

On mobile, whether to play/pause on single click, default is false

`,3),K=a("div",{className:"run-code"},"▶ Run Code",-1),G=s(`
js
Artplayer.MOBILE_CLICK_PLAY = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

On mobile devices, whether a tap toggles play/pause, defaults to false

`,2),Y=a("div",{className:"run-code"},"▶ Run Code",-1),H=s(`
js
Artplayer.MOBILE_CLICK_PLAY = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

AUTO_ORIENTATION_TIME ​

On mobile devices, the delay time for auto-rotation, in milliseconds, defaults to 200

`,3),W=a("div",{className:"run-code"},"▶ Run Code",-1),X=s(`
js
Artplayer.AUTO_ORIENTATION_TIME = 500;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoOrientation: true,
+});

INFO_LOOP_TIME ​

Info panel refresh time, unit in milliseconds, default is 1000

`,3),z=a("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
Artplayer.INFO_LOOP_TIME = 2000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.info.show = true;

FAST_FORWARD_VALUE ​

On mobile, the multiplier rate of the speed when long-pressing for fast-forward, default is 3

`,3),Z=a("div",{className:"run-code"},"▶ Run Code",-1),J=s(`
js
Artplayer.FAST_FORWARD_VALUE = 5;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});

FAST_FORWARD_TIME ​

The time, in milliseconds, to fast-forward when double-tapped, default is 10 On mobile, the delay time of the long-press acceleration, in milliseconds, default is 1000

`,3),Q=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
Artplayer.FAST_FORWARD_TIME = 2000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});

TOUCH_MOVE_RATIO ​

On mobile, the ratio of the speed of sliding left and right to seek, default is 0.5

`,3),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s(`
js
Artplayer.TOUCH_MOVE_RATIO = 1;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

VOLUME_STEP ​

The step ratio of adjusting volume with shortcuts, default is 0.1

`,3),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
Artplayer.VOLUME_STEP = 0.2;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

SEEK_STEP ​

The increment by which the playback progress is adjusted via keyboard shortcuts, in seconds, the default is 5

`,3),es=a("div",{className:"run-code"},"▶ Run Code",-1),os=s(`
js
Artplayer.SEEK_STEP = 10;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

PLAYBACK_RATE ​

The list of built-in playback speeds, by default [0.5, 0.75, 1, 1.25, 1.5, 2]

`,3),rs=a("div",{className:"run-code"},"▶ Run Code",-1),ts=s(`
js
Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5];
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    playbackRate: true,
+});
+
+art.contextmenu.show = true;
+art.setting.show = true;

ASPECT_RATIO ​

Built-in list of video aspect ratios, default is ['default', '4:3', '16:9']

`,3),cs=a("div",{className:"run-code"},"▶ Run Code",-1),Ds=s(`
js
Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5'];
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    aspectRatio: true,
+});
+
+art.contextmenu.show = true;
+art.setting.show = true;

FLIP ​

Built-in list of video flips, defaults to ['normal', 'horizontal', 'vertical']

`,3),ys=a("div",{className:"run-code"},"▶ Run Code",-1),Fs=s(`
js
Artplayer.FLIP = ['normal', 'horizontal'];
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+});
+
+art.contextmenu.show = true;
+art.setting.show = true;

FULLSCREEN_WEB_IN_BODY ​

When in web fullscreen, whether to mount the player under the body element, defaults to false

`,3),Cs=a("div",{className:"run-code"},"▶ Run Code",-1),is=s(`
js
Artplayer.FULLSCREEN_WEB_IN_BODY = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});

LOG_VERSION ​

Setting whether to print the player version, the default is true

`,3),As=a("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
Artplayer.LOG_VERSION = false;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

USE_RAF ​

Setting whether to use requestAnimationFrame, the default is false, currently mainly used for smooth progress bar effects

`,3),us=a("div",{className:"run-code"},"▶ Run Code",-1),bs=s(`
js
Artplayer.USE_RAF = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    miniProgressBar: true,
+});
`,1),_s=[o,r,t,c,D,y,F,C,i,A,d,u,b,_,m,h,T,E,v,g,I,f,S,P,R,N,k,w,O,L,V,j,q,M,x,B,U,K,G,Y,H,W,X,z,$,Z,J,Q,ss,as,ns,ls,ps,es,os,rs,ts,cs,Ds,ys,Fs,Cs,is,As,ds,us,bs];function ms(hs,Ts,Es,vs,gs,Is){return p(),l("div",null,_s)}const Ps=n(e,[["render",ms]]);export{Ss as __pageData,Ps as default}; diff --git a/docs/document/assets/en_advanced_global.md.e0d9b7d1.lean.js b/docs/document/assets/en_advanced_global.md.e0d9b7d1.lean.js new file mode 100644 index 000000000..11d5d8bc8 --- /dev/null +++ b/docs/document/assets/en_advanced_global.md.e0d9b7d1.lean.js @@ -0,0 +1 @@ +import{_ as n,c as l,o as p,V as s,z as a}from"./chunks/framework.5c8808ab.js";const Ss=JSON.parse('{"title":"Global Attributes","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1700976201000}'),e={name:"en/advanced/global.md"},o=s("",4),r=a("div",{className:"run-code"},"▶ Run Code",-1),t=s("",3),c=a("div",{className:"run-code"},"▶ Run Code",-1),D=s("",3),y=a("div",{className:"run-code"},"▶ Run Code",-1),F=s("",3),C=a("div",{className:"run-code"},"▶ Run Code",-1),i=s("",3),A=a("div",{className:"run-code"},"▶ Run Code",-1),d=s("",3),u=a("div",{className:"run-code"},"▶ Run Code",-1),b=s("",3),_=a("div",{className:"run-code"},"▶ Run Code",-1),m=s("",3),h=a("div",{className:"run-code"},"▶ Run Code",-1),T=s("",3),E=a("div",{className:"run-code"},"▶ Run Code",-1),v=s("",3),g=a("div",{className:"run-code"},"▶ Run Code",-1),I=s("",3),f=a("div",{className:"run-code"},"▶ Run Code",-1),S=s("",3),P=a("div",{className:"run-code"},"▶ Run Code",-1),R=s("",3),N=a("div",{className:"run-code"},"▶ Run Code",-1),k=s("",3),w=a("div",{className:"run-code"},"▶ Run Code",-1),O=s("",4),L=a("div",{className:"run-code"},"▶ Run Code",-1),V=s("",3),j=a("div",{className:"run-code"},"▶ Run Code",-1),q=s("",3),M=a("div",{className:"run-code"},"▶ Run Code",-1),x=s("",3),B=a("div",{className:"run-code"},"▶ Run Code",-1),U=s("",3),K=a("div",{className:"run-code"},"▶ Run Code",-1),G=s("",2),Y=a("div",{className:"run-code"},"▶ Run Code",-1),H=s("",3),W=a("div",{className:"run-code"},"▶ Run Code",-1),X=s("",3),z=a("div",{className:"run-code"},"▶ Run Code",-1),$=s("",3),Z=a("div",{className:"run-code"},"▶ Run Code",-1),J=s("",3),Q=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",3),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s("",3),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",3),es=a("div",{className:"run-code"},"▶ Run Code",-1),os=s("",3),rs=a("div",{className:"run-code"},"▶ Run Code",-1),ts=s("",3),cs=a("div",{className:"run-code"},"▶ Run Code",-1),Ds=s("",3),ys=a("div",{className:"run-code"},"▶ Run Code",-1),Fs=s("",3),Cs=a("div",{className:"run-code"},"▶ Run Code",-1),is=s("",3),As=a("div",{className:"run-code"},"▶ Run Code",-1),ds=s("",3),us=a("div",{className:"run-code"},"▶ Run Code",-1),bs=s("",1),_s=[o,r,t,c,D,y,F,C,i,A,d,u,b,_,m,h,T,E,v,g,I,f,S,P,R,N,k,w,O,L,V,j,q,M,x,B,U,K,G,Y,H,W,X,z,$,Z,J,Q,ss,as,ns,ls,ps,es,os,rs,ts,cs,Ds,ys,Fs,Cs,is,As,ds,us,bs];function ms(hs,Ts,Es,vs,gs,Is){return p(),l("div",null,_s)}const Ps=n(e,[["render",ms]]);export{Ss as __pageData,Ps as default}; diff --git a/docs/document/assets/en_advanced_global.md.qRhgbcq8.js b/docs/document/assets/en_advanced_global.md.qRhgbcq8.js deleted file mode 100644 index 1df737cca..000000000 --- a/docs/document/assets/en_advanced_global.md.qRhgbcq8.js +++ /dev/null @@ -1,222 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const Is=JSON.parse('{"title":"Global Attributes","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1700976201000}'),e={name:"en/advanced/global.md"},p=s('

Global Attributes ​

Here, Global Attributes refer to the first-level properties mounted on the constructor. Property names are all in uppercase, subject to change in the future and basically not needed.

DEBUG ​

Whether to start debug mode, which can print out all built-in events of the video by default is turned off.

',4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
Artplayer.DEBUG = true;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

CONTEXTMENU ​

Whether to enable the right-click context menu, enabled by default.

`,3),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
Artplayer.CONTEXTMENU = false;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

NOTICE_TIME ​

The display duration of the notification message, in milliseconds, defaults to 2000

`,3),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
Artplayer.NOTICE_TIME = 5000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

SETTING_WIDTH ​

The default width of the settings panel, in pixels, defaults to 250

`,3),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s(`
js
Artplayer.SETTING_WIDTH = 300;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});

SETTING_ITEM_WIDTH ​

Set the default width of the settings items in the panel, in pixels, the default is 200.

`,3),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
Artplayer.SETTING_ITEM_WIDTH = 300;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});

SETTING_ITEM_HEIGHT ​

Set the default height of the settings items in the panel, in pixels, the default is 35.

`,3),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
Artplayer.SETTING_ITEM_HEIGHT = 40;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});

RESIZE_TIME ​

Throttle time for the resize event, in milliseconds, defaults to 200

`,3),F=i("div",{className:"run-code"},"▶ Run Code",-1),_=s(`
js
Artplayer.RESIZE_TIME = 500;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('resize', () => {
-    console.log('resize');
-});

SCROLL_TIME ​

Throttle time for the scroll event, in milliseconds, defaults to 200

`,3),m=i("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
Artplayer.SCROLL_TIME = 500;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('scroll', () => {
-    console.log('scroll');
-});

SCROLL_GAP ​

The boundary tolerance distance for the view event, in pixels, default is 50

`,3),A=i("div",{className:"run-code"},"▶ Run Code",-1),v=s(`
js
Artplayer.SCROLL_GAP = 100;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('scroll', () => {
-    console.log('scroll');
-});

AUTO_PLAYBACK_MAX ​

The maximum number of records for the automatic playback feature, default is 10

`,3),T=i("div",{className:"run-code"},"▶ Run Code",-1),B=s(`
js
Artplayer.AUTO_PLAYBACK_MAX = 20;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});

AUTO_PLAYBACK_MIN ​

The minimum duration for the auto playback feature, in seconds, with a default of 5.

`,3),D=i("div",{className:"run-code"},"▶ Run Code",-1),I=s(`
js
Artplayer.AUTO_PLAYBACK_MIN = 10;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});

AUTO_PLAYBACK_TIMEOUT ​

The delay duration for hiding the auto playback feature, in milliseconds, with a default of 3000.

`,3),f=i("div",{className:"run-code"},"▶ Run Code",-1),S=s(`
js
Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});

RECONNECT_TIME_MAX ​

The maximum number of automatic reconnection attempts when a connection error occurs, default is 5

`,3),P=i("div",{className:"run-code"},"▶ Run Code",-1),R=s(`
js
Artplayer.RECONNECT_TIME_MAX = 10;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});

RECONNECT_SLEEP_TIME ​

The delay time for the automatic reconnection attempt when a connection error occurs, in milliseconds, default is 1000

`,3),N=i("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
Artplayer.RECONNECT_SLEEP_TIME = 3000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});

CONTROL_HIDE_TIME ​

...

Auto-hide delay time for the bottom control bar, measured in milliseconds, default is 3000

`,4),O=i("div",{className:"run-code"},"▶ Run Code",-1),L=s(`
js
Artplayer.CONTROL_HIDE_TIME = 5000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

DBCLICK_TIME ​

Double-click event delay time, measured in milliseconds, default is 300

`,3),V=i("div",{className:"run-code"},"▶ Run Code",-1),j=s(`
js
Artplayer.DBCLICK_TIME = 500;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('dblclick', () => {
-    console.log('dblclick');
-});

DBCLICK_FULLSCREEN ​

On desktop, whether to switch to fullscreen on double click, default is true

`,3),q=i("div",{className:"run-code"},"▶ Run Code",-1),M=s(`
js
Artplayer.DBCLICK_FULLSCREEN = false;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

MOBILE_DBCLICK_PLAY ​

On mobile, whether to toggle play/pause on double click, default is true

`,3),x=i("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
Artplayer.MOBILE_DBCLICK_PLAY = false;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

MOBILE_CLICK_PLAY ​

On mobile, whether to play/pause on single click, default is false

`,3),K=i("div",{className:"run-code"},"▶ Run Code",-1),G=s(`
js
Artplayer.MOBILE_CLICK_PLAY = true;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

On mobile devices, whether a tap toggles play/pause, defaults to false

`,2),Y=i("div",{className:"run-code"},"▶ Run Code",-1),H=s(`
js
Artplayer.MOBILE_CLICK_PLAY = true;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

AUTO_ORIENTATION_TIME ​

On mobile devices, the delay time for auto-rotation, in milliseconds, defaults to 200

`,3),W=i("div",{className:"run-code"},"▶ Run Code",-1),X=s(`
js
Artplayer.AUTO_ORIENTATION_TIME = 500;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoOrientation: true,
-});

INFO_LOOP_TIME ​

Info panel refresh time, unit in milliseconds, default is 1000

`,3),z=i("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
Artplayer.INFO_LOOP_TIME = 2000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.info.show = true;

FAST_FORWARD_VALUE ​

On mobile, the multiplier rate of the speed when long-pressing for fast-forward, default is 3

`,3),Z=i("div",{className:"run-code"},"▶ Run Code",-1),J=s(`
js
Artplayer.FAST_FORWARD_VALUE = 5;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});

FAST_FORWARD_TIME ​

The time, in milliseconds, to fast-forward when double-tapped, default is 10 On mobile, the delay time of the long-press acceleration, in milliseconds, default is 1000

`,3),Q=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
Artplayer.FAST_FORWARD_TIME = 2000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});

TOUCH_MOVE_RATIO ​

On mobile, the ratio of the speed of sliding left and right to seek, default is 0.5

`,3),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s(`
js
Artplayer.TOUCH_MOVE_RATIO = 1;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

VOLUME_STEP ​

The step ratio of adjusting volume with shortcuts, default is 0.1

`,3),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s(`
js
Artplayer.VOLUME_STEP = 0.2;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

SEEK_STEP ​

The increment by which the playback progress is adjusted via keyboard shortcuts, in seconds, the default is 5

`,3),es=i("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
Artplayer.SEEK_STEP = 10;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

PLAYBACK_RATE ​

The list of built-in playback speeds, by default [0.5, 0.75, 1, 1.25, 1.5, 2]

`,3),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s(`
js
Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5];
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    playbackRate: true,
-});
-
-art.contextmenu.show = true;
-art.setting.show = true;

ASPECT_RATIO ​

Built-in list of video aspect ratios, default is ['default', '4:3', '16:9']

`,3),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s(`
js
Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5'];
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    aspectRatio: true,
-});
-
-art.contextmenu.show = true;
-art.setting.show = true;

FLIP ​

Built-in list of video flips, defaults to ['normal', 'horizontal', 'vertical']

`,3),Es=i("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
Artplayer.FLIP = ['normal', 'horizontal'];
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-});
-
-art.contextmenu.show = true;
-art.setting.show = true;

FULLSCREEN_WEB_IN_BODY ​

When in web fullscreen, whether to mount the player under the body element, defaults to false

`,3),cs=i("div",{className:"run-code"},"▶ Run Code",-1),os=s(`
js
Artplayer.FULLSCREEN_WEB_IN_BODY = true;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});

LOG_VERSION ​

Setting whether to print the player version, the default is true

`,3),gs=i("div",{className:"run-code"},"▶ Run Code",-1),ys=s(`
js
Artplayer.LOG_VERSION = false;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

USE_RAF ​

Setting whether to use requestAnimationFrame, the default is false, currently mainly used for smooth progress bar effects

`,3),us=i("div",{className:"run-code"},"▶ Run Code",-1),bs=s(`
js
Artplayer.USE_RAF = true;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    miniProgressBar: true,
-});
`,1),Fs=[p,h,t,k,r,E,d,c,o,g,y,u,b,F,_,m,C,A,v,T,B,D,I,f,S,P,R,N,w,O,L,V,j,q,M,x,U,K,G,Y,H,W,X,z,$,Z,J,Q,ss,is,as,ns,ls,es,ps,hs,ts,ks,rs,Es,ds,cs,os,gs,ys,us,bs];function _s(ms,Cs,As,vs,Ts,Bs){return l(),n("div",null,Fs)}const fs=a(e,[["render",_s]]);export{Is as __pageData,fs as default}; diff --git a/docs/document/assets/en_advanced_global.md.qRhgbcq8.lean.js b/docs/document/assets/en_advanced_global.md.qRhgbcq8.lean.js deleted file mode 100644 index a098a2cd5..000000000 --- a/docs/document/assets/en_advanced_global.md.qRhgbcq8.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const Is=JSON.parse('{"title":"Global Attributes","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1700976201000}'),e={name:"en/advanced/global.md"},p=s("",4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",3),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s("",3),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",3),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s("",3),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s("",3),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s("",3),F=i("div",{className:"run-code"},"▶ Run Code",-1),_=s("",3),m=i("div",{className:"run-code"},"▶ Run Code",-1),C=s("",3),A=i("div",{className:"run-code"},"▶ Run Code",-1),v=s("",3),T=i("div",{className:"run-code"},"▶ Run Code",-1),B=s("",3),D=i("div",{className:"run-code"},"▶ Run Code",-1),I=s("",3),f=i("div",{className:"run-code"},"▶ Run Code",-1),S=s("",3),P=i("div",{className:"run-code"},"▶ Run Code",-1),R=s("",3),N=i("div",{className:"run-code"},"▶ Run Code",-1),w=s("",4),O=i("div",{className:"run-code"},"▶ Run Code",-1),L=s("",3),V=i("div",{className:"run-code"},"▶ Run Code",-1),j=s("",3),q=i("div",{className:"run-code"},"▶ Run Code",-1),M=s("",3),x=i("div",{className:"run-code"},"▶ Run Code",-1),U=s("",3),K=i("div",{className:"run-code"},"▶ Run Code",-1),G=s("",2),Y=i("div",{className:"run-code"},"▶ Run Code",-1),H=s("",3),W=i("div",{className:"run-code"},"▶ Run Code",-1),X=s("",3),z=i("div",{className:"run-code"},"▶ Run Code",-1),$=s("",3),Z=i("div",{className:"run-code"},"▶ Run Code",-1),J=s("",3),Q=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",3),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s("",3),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s("",3),es=i("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",3),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s("",3),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s("",3),Es=i("div",{className:"run-code"},"▶ Run Code",-1),ds=s("",3),cs=i("div",{className:"run-code"},"▶ Run Code",-1),os=s("",3),gs=i("div",{className:"run-code"},"▶ Run Code",-1),ys=s("",3),us=i("div",{className:"run-code"},"▶ Run Code",-1),bs=s("",1),Fs=[p,h,t,k,r,E,d,c,o,g,y,u,b,F,_,m,C,A,v,T,B,D,I,f,S,P,R,N,w,O,L,V,j,q,M,x,U,K,G,Y,H,W,X,z,$,Z,J,Q,ss,is,as,ns,ls,es,ps,hs,ts,ks,rs,Es,ds,cs,os,gs,ys,us,bs];function _s(ms,Cs,As,vs,Ts,Bs){return l(),n("div",null,Fs)}const fs=a(e,[["render",_s]]);export{Is as __pageData,fs as default}; diff --git a/docs/document/assets/en_advanced_plugin.md.1474c5cb.js b/docs/document/assets/en_advanced_plugin.md.1474c5cb.js new file mode 100644 index 000000000..0e44d8019 --- /dev/null +++ b/docs/document/assets/en_advanced_plugin.md.1474c5cb.js @@ -0,0 +1,99 @@ +import{_ as l,c as p,o,z as s,a as n,V as a}from"./chunks/framework.5c8808ab.js";const _=JSON.parse('{"title":"Writing Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","filePath":"en/advanced/plugin.md","lastUpdated":1700976201000}'),e={name:"en/advanced/plugin.md"},r=s("h1",{id:"writing-plugins",tabindex:"-1"},[n("Writing Plugins "),s("a",{class:"header-anchor",href:"#writing-plugins","aria-label":'Permalink to "Writing Plugins"'},"​")],-1),c=s("p",null,[n("Once you know the player's "),s("code",null,"properties"),n(", "),s("code",null,"methods"),n(", and "),s("code",null,"events"),n(", writing plugins is very simple.")],-1),t=s("p",null,"You can load the plugin functions when instantiated.",-1),F=s("div",{className:"run-code"},"▶ Run Code",-1),D=a(`
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [myPlugin],
+});
+
+art.on('ready', () => {
+    console.info(art.plugins.myPlugin);
+});

Here's the translation of the provided text into English while preserving the Markdown formatting:

A function that allows loading plugins after instantiation

`,3),y=s("div",{className:"run-code"},"▶ Run Code",-1),i=a(`
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.plugins.add(myPlugin);
+
+art.on('ready', () => {
+    console.info(art.plugins.myPlugin);
+});

For example, I want to write a plugin that displays an image advertisement after the video is paused.

js
function adsPlugin(option) {
+    return (art) => {
+        art.layers.add({
+            name: 'ads',
+            html: \`<img style="width: 100px" src="\${option.url}">\`,
+            style: {
+                display: 'none',
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+            },
+        });
+
+        function show() {
+            art.layers.ads.style.display = 'block';
+        }
+
+        function hide() {
+            art.layers.ads.style.display = 'none';
+        }
+
+        art.controls.add({
+            name: 'hide-ads',
+            position: 'right',
+            html: 'Hide Ads',
+            tooltip: 'Hide Ads',
+            click: hide,
+            style: {
+                marginRight: '20px'
+            }
+        });
+
+        art.controls.add({
+            name: 'show-ads',
+            position: 'right',
+            html: 'Show Ads',
+            tooltip: 'Show Ads',
+            click: show,
+        });
+
+        art.on('play', hide);
+        art.on('pause', show);
+
+        return {
+            name: 'adsPlugin',
+            show,
+            hide
+        };
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        adsPlugin({
+            url: '/assets/sample/layer.png'
+        })
+    ],
+});
`,3),A=[r,c,t,F,D,y,i];function C(b,u,m,d,h,g){return o(),p("div",null,A)}const f=l(e,[["render",C]]);export{_ as __pageData,f as default}; diff --git a/docs/document/assets/en_advanced_plugin.md.1474c5cb.lean.js b/docs/document/assets/en_advanced_plugin.md.1474c5cb.lean.js new file mode 100644 index 000000000..4da072a80 --- /dev/null +++ b/docs/document/assets/en_advanced_plugin.md.1474c5cb.lean.js @@ -0,0 +1 @@ +import{_ as l,c as p,o,z as s,a as n,V as a}from"./chunks/framework.5c8808ab.js";const _=JSON.parse('{"title":"Writing Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","filePath":"en/advanced/plugin.md","lastUpdated":1700976201000}'),e={name:"en/advanced/plugin.md"},r=s("h1",{id:"writing-plugins",tabindex:"-1"},[n("Writing Plugins "),s("a",{class:"header-anchor",href:"#writing-plugins","aria-label":'Permalink to "Writing Plugins"'},"​")],-1),c=s("p",null,[n("Once you know the player's "),s("code",null,"properties"),n(", "),s("code",null,"methods"),n(", and "),s("code",null,"events"),n(", writing plugins is very simple.")],-1),t=s("p",null,"You can load the plugin functions when instantiated.",-1),F=s("div",{className:"run-code"},"▶ Run Code",-1),D=a("",3),y=s("div",{className:"run-code"},"▶ Run Code",-1),i=a("",3),A=[r,c,t,F,D,y,i];function C(b,u,m,d,h,g){return o(),p("div",null,A)}const f=l(e,[["render",C]]);export{_ as __pageData,f as default}; diff --git a/docs/document/assets/en_advanced_plugin.md.Y8KYMmTM.js b/docs/document/assets/en_advanced_plugin.md.Y8KYMmTM.js deleted file mode 100644 index d81971e32..000000000 --- a/docs/document/assets/en_advanced_plugin.md.Y8KYMmTM.js +++ /dev/null @@ -1,99 +0,0 @@ -import{_ as n,c as l,o as p,k as s,a as i,R as a}from"./chunks/framework.0i_P4VHR.js";const _=JSON.parse('{"title":"Writing Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","filePath":"en/advanced/plugin.md","lastUpdated":1700976201000}'),h={name:"en/advanced/plugin.md"},e=s("h1",{id:"writing-plugins",tabindex:"-1"},[i("Writing Plugins "),s("a",{class:"header-anchor",href:"#writing-plugins","aria-label":'Permalink to "Writing Plugins"'},"​")],-1),k=s("p",null,[i("Once you know the player's "),s("code",null,"properties"),i(", "),s("code",null,"methods"),i(", and "),s("code",null,"events"),i(", writing plugins is very simple.")],-1),t=s("p",null,"You can load the plugin functions when instantiated.",-1),E=s("div",{className:"run-code"},"▶ Run Code",-1),r=a(`
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [myPlugin],
-});
-
-art.on('ready', () => {
-    console.info(art.plugins.myPlugin);
-});

Here's the translation of the provided text into English while preserving the Markdown formatting:

A function that allows loading plugins after instantiation

`,3),d=s("div",{className:"run-code"},"▶ Run Code",-1),g=a(`
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.plugins.add(myPlugin);
-
-art.on('ready', () => {
-    console.info(art.plugins.myPlugin);
-});

For example, I want to write a plugin that displays an image advertisement after the video is paused.

js
function adsPlugin(option) {
-    return (art) => {
-        art.layers.add({
-            name: 'ads',
-            html: \`<img style="width: 100px" src="\${option.url}">\`,
-            style: {
-                display: 'none',
-                position: 'absolute',
-                top: '20px',
-                right: '20px',
-            },
-        });
-
-        function show() {
-            art.layers.ads.style.display = 'block';
-        }
-
-        function hide() {
-            art.layers.ads.style.display = 'none';
-        }
-
-        art.controls.add({
-            name: 'hide-ads',
-            position: 'right',
-            html: 'Hide Ads',
-            tooltip: 'Hide Ads',
-            click: hide,
-            style: {
-                marginRight: '20px'
-            }
-        });
-
-        art.controls.add({
-            name: 'show-ads',
-            position: 'right',
-            html: 'Show Ads',
-            tooltip: 'Show Ads',
-            click: show,
-        });
-
-        art.on('play', hide);
-        art.on('pause', show);
-
-        return {
-            name: 'adsPlugin',
-            show,
-            hide
-        };
-    }
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        adsPlugin({
-            url: '/assets/sample/layer.png'
-        })
-    ],
-});
`,3),c=[e,k,t,E,r,d,g];function y(b,u,F,o,m,C){return p(),l("div",null,c)}const A=n(h,[["render",y]]);export{_ as __pageData,A as default}; diff --git a/docs/document/assets/en_advanced_plugin.md.Y8KYMmTM.lean.js b/docs/document/assets/en_advanced_plugin.md.Y8KYMmTM.lean.js deleted file mode 100644 index 7ad7e6106..000000000 --- a/docs/document/assets/en_advanced_plugin.md.Y8KYMmTM.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as n,c as l,o as p,k as s,a as i,R as a}from"./chunks/framework.0i_P4VHR.js";const _=JSON.parse('{"title":"Writing Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","filePath":"en/advanced/plugin.md","lastUpdated":1700976201000}'),h={name:"en/advanced/plugin.md"},e=s("h1",{id:"writing-plugins",tabindex:"-1"},[i("Writing Plugins "),s("a",{class:"header-anchor",href:"#writing-plugins","aria-label":'Permalink to "Writing Plugins"'},"​")],-1),k=s("p",null,[i("Once you know the player's "),s("code",null,"properties"),i(", "),s("code",null,"methods"),i(", and "),s("code",null,"events"),i(", writing plugins is very simple.")],-1),t=s("p",null,"You can load the plugin functions when instantiated.",-1),E=s("div",{className:"run-code"},"▶ Run Code",-1),r=a("",3),d=s("div",{className:"run-code"},"▶ Run Code",-1),g=a("",3),c=[e,k,t,E,r,d,g];function y(b,u,F,o,m,C){return p(),l("div",null,c)}const A=n(h,[["render",y]]);export{_ as __pageData,A as default}; diff --git a/docs/document/assets/en_advanced_property.md.50568d20.js b/docs/document/assets/en_advanced_property.md.50568d20.js new file mode 100644 index 000000000..cc62f7860 --- /dev/null +++ b/docs/document/assets/en_advanced_property.md.50568d20.js @@ -0,0 +1,383 @@ +import{_ as n,c as l,o as p,V as s,z as a}from"./chunks/framework.5c8808ab.js";const Ls=JSON.parse('{"title":"Instance Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1700976201000}'),o={name:"en/advanced/property.md"},e=s('

Instance Properties ​

Here, instance properties refer to the primary properties mounted on the instance, which are quite commonly used.

play ​

  • Type: Function

Play video

',5),r=a("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    art.play();
+});

pause ​

  • Type: Function

Pause video

`,4),c=a("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    art.play();
+
+    setTimeout(() => {
+        art.pause();
+    }, 3000);
+});

toggle ​

  • Type: Function

Toggle the play and pause state of the video

`,4),y=a("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    art.toggle();
+
+    setTimeout(() => {
+        art.toggle();
+    }, 3000);
+});

destroy ​

  • Type: Function
  • Parameter: Boolean

Destroy the player. Accepts a parameter indicating whether to remove the player's html after destruction, which defaults to true

`,4),i=a("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.destroy();
+});

seek ​

  • Type: Setter
  • Parameter: Number

Jump to a specific time in the video, in seconds.

`,4),C=a("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 5;
+});

forward ​

  • Type: Setter
  • Parameter: Number

Fast forward the video time, in seconds.

`,4),u=a("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.forward = 5;
+});

backward ​

  • Type: Setter
  • Parameter: Number

Video rewind time in seconds

`,4),m=a("div",{className:"run-code"},"▶ Run Code",-1),h=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 5;
+
+    setTimeout(() => {
+        art.backward = 2;
+    }, 3000);
+});

volume ​

  • Type: Setter/Getter
  • Parameter: Number

Sets and gets the video volume, which ranges from [0, 1]

`,4),_=a("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.volume);
+    art.volume = 0.5;
+    console.info(art.volume);
+});

url ​

  • Type: Setter/Getter
  • Parameter: String

Set and retrieve the video address

`,4),v=a("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.url = '/assets/sample/video.mp4?t=0';
+});

switch ​

  • Type: Setter
  • Parameter: String

Set the video address, which is similar to art.url, but performs some optimization operations

`,4),E=a("div",{className:"run-code"},"▶ Run Code",-1),S=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switch = '/assets/sample/video.mp4?t=0';
+    }, 3000);
+});

switchUrl ​

  • Type: Function
  • Parameter: String

Set the video address, similar to setting art.url, but some optimization operations will be executed.

`,4),P=a("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchUrl('/assets/sample/video.mp4?t=0');
+    }, 3000);
+});

Warning

art.switch and art.switchUrl have the same functionality. However, the art.switchUrl method will return a Promise. When it resolves, it indicates that the new address can be played; when it rejects, it indicates there was an error loading the new address.

switchQuality ​

  • Type: Function
  • Parameter: String

Set video quality address, similar to art.switchUrl, but it will carry over the previous playback progress.

`,5),f=a("div",{className:"run-code"},"▶ Run Code",-1),k=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchQuality('/assets/sample/video.mp4?t=0');
+    }, 3000);
+});

muted ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get whether the video is muted.

`,4),q=a("div",{className:"run-code"},"▶ Run Code",-1),R=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.muted);
+    art.muted = true;
+    console.info(art.muted);
+});

currentTime ​

  • Type: Setter/Getter
  • Parameter: Number

Set and get the current time of the video. Setting the time is similar to seek, but it does not trigger additional events.

`,4),N=a("div",{className:"run-code"},"▶ Run Code",-1),V=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.currentTime);
+    art.currentTime = 5;
+    console.info(art.currentTime);
+});

duration ​

  • Type: Getter

Get the video duration

`,4),I=a("div",{className:"run-code"},"▶ Run Code",-1),j=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.duration);
+});

Note

Some videos do not have a duration, such as videos that are being live streamed or videos that have not been fully decoded, in which case the obtained duration will be 0

screenshot ​

  • Type: Function

Download a screenshot of the current video frame

`,5),x=a("div",{className:"run-code"},"▶ Run Code",-1),G=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.screenshot();
+});

getDataURL ​

  • Type: Function

Gets the base64 address of the screenshot of the current video frame, which returns a Promise.

`,4),z=a("div",{className:"run-code"},"▶ Run Code",-1),B=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', async () => {
+    const url = await art.getDataURL();
+    console.info(url)
+});

getBlobUrl ​

  • Type: Function

Gets the blob address of the screenshot of the current video frame, which returns a Promise.

`,4),U=a("div",{className:"run-code"},"▶ Run Code",-1),W=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', async () => {
+    const url = await art.getBlobUrl();
+    console.info(url);
+});

fullscreen ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get the player window fullscreen

`,4),H=a("div",{className:"run-code"},"▶ Run Code",-1),L=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'Fullscreen Switch',
+            click: function () {
+                art.fullscreen = !art.fullscreen;
+            },
+        },
+    ],
+});

Note

Due to browser security mechanisms, before triggering the window to fullscreen, the page must have had an interaction (e.g. user clicked on the page).

fullscreenWeb ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get the player web page full screen

`,5),O=a("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
+
+art.on('ready', () => {
+    art.fullscreenWeb = true;
+
+    setTimeout(() => {
+        art.fullscreenWeb = false;
+    }, 3000);
+});

pip ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get the player picture-in-picture mode

`,4),J=a("div",{className:"run-code"},"▶ Run Code",-1),M=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'PIP',
+            click: function () {
+                art.pip = !art.pip;
+            },
+        },
+    ],
+});

Warning

Due to browser security mechanisms, user interaction (e.g., a user click on the page) must occur before triggering picture-in-picture.

poster ​

  • Type: Setter/Getter
  • Parameter: String

Set and get the video poster, the poster effect is visible only before the video starts playing.

`,5),Q=a("div",{className:"run-code"},"▶ Run Code",-1),K=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    poster: '/assets/sample/poster.jpg',
+});
+
+art.on('ready', () => {
+    console.info(art.poster);
+    art.poster = '/assets/sample/poster.jpg?t=0';
+    console.info(art.poster);
+});

mini ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get the player's mini mode

`,4),X=a("div",{className:"run-code"},"▶ Run Code",-1),Y=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.mini = true;
+});

playing ​

  • Type: Getter
  • Parameter: Boolean

Get whether the video is currently playing

`,4),Z=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    console.info(art.playing);
+});

autoSize ​

  • Type: Function

Sets whether the video should auto adjust its size

`,4),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.autoSize();
+});

rect ​

  • Type: Getter

Gets the size and position information of the player

`,4),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(JSON.stringify(art.rect));
+});

Warning

The size and coordinates are obtained via getBoundingClientRect

flip ​

  • Type: Setter/Getter
  • Parameter: String

Set and get the player flip, supports normal, horizontal, vertical

`,5),os=a("div",{className:"run-code"},"▶ Run Code",-1),es=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.flip);
+    art.flip = 'horizontal';
+    console.info(art.flip);
+});

playbackRate ​

  • Type: Setter/Getter
  • Parameter: Number Set and get the playback speed of the player
`,3),rs=a("div",{className:"run-code"},"▶ Run Code",-1),ts=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.playbackRate);
+    art.playbackRate = 2;
+    console.info(art.playbackRate);
+});

aspectRatio ​

  • Type: Setter/Getter
  • Parameter: String

Set and get the aspect ratio of the player

`,4),cs=a("div",{className:"run-code"},"▶ Run Code",-1),Ds=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.aspectRatio);
+    art.aspectRatio = '16:9';
+    console.info(art.aspectRatio);
+});

autoHeight ​

  • Type: Function

When the container has only width, this attribute can automatically calculate and set the height of the video

`,4),ys=a("div",{className:"run-code"},"▶ Run Code",-1),Fs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.autoHeight();
+});
+
+art.on('resize', () => {
+    art.autoHeight();
+});

Warning

When your container has only width but you do not know the exact height, this property is very useful as it can automatically calculate the video's height, but you need to make sure when to set this property.

attr ​

  • Type: Function
  • Parameter: String

Dynamically get and set the attributes of the video element

`,5),is=a("div",{className:"run-code"},"▶ Run Code",-1),As=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.attr('playsInline'));
+    art.attr('playsInline', true);
+    console.info(art.attr('playsInline'));
+});

type ​

  • Type: Setter/Getter
  • Parameter: String

Dynamically get and set the video type

`,4),Cs=a("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.type);
+    art.type = 'm3u8';
+    console.info(art.type);
+});

theme ​

  • Type: Setter/Getter
  • Parameter: String

Dynamically get and set the player's theme color

`,4),us=a("div",{className:"run-code"},"▶ Run Code",-1),bs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.theme);
+    art.theme = '#000';
+    console.info(art.theme);
+});

airplay ​

  • Type: Function

Activate airplay

`,4),ms=a("div",{className:"run-code"},"▶ Run Code",-1),hs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'AirPlay',
+            click: function () {
+                art.airplay();
+            },
+        },
+    ],
+});

loaded ​

  • Type: Getter

The proportion of the video that is cached, ranging from [0, 1], commonly used with the video:timeupdate event.

`,4),_s=a("div",{className:"run-code"},"▶ Run Code",-1),gs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('video:timeupdate', () => {
+    console.info(art.loaded);
+});

played ​

  • Type: Getter

The proportion of the video that has been played, ranging from [0, 1], commonly used with the video:timeupdate event.

`,4),vs=a("div",{className:"run-code"},"▶ Run Code",-1),Ts=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('video:timeupdate', () => {
+    console.info(art.played);
+});

proxy ​

  • Type: Function

A proxy function for DOM events, which essentially proxies addEventListener and removeEventListener. When using proxy to handle events, the event will automatically be destroyed when the player is destroyed.

`,4),Es=a("div",{className:"run-code"},"▶ Run Code",-1),Ss=s(`
js
var container = document.querySelector('.artplayer-app');
+
+var art = new Artplayer({
+	container: container,
+	url: '/assets/sample/video.mp4',
+});
+
+art.proxy(container, 'click', event => {
+	console.info(event);
+});

Tip

If you need some DOM events to exist only during the lifespan of the player, it is highly recommended to use this function to avoid causing memory leaks.

query ​

  • Type: Function

DOM query function, similar to document.querySelector, but the object being queried is limited within the current player, which can prevent errors due to having the same class name.

`,5),Ps=a("div",{className:"run-code"},"▶ Run Code",-1),ws=s(`
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
+
+console.info(art.query('.art-video'));

video ​

  • Type: Element

A shortcut to return the video element of the player.

`,4),fs=a("div",{className:"run-code"},"▶ Run Code",-1),ks=s(`
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
+
+console.info(art.video);

cssVar ​

  • Type: Function

Dynamically getting or setting css variables

`,4),qs=a("div",{className:"run-code"},"▶ Run Code",-1),Rs=s(`
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.log(art.cssVar('--art-theme'));
+    art.cssVar('--art-theme', 'green');
+    console.log(art.cssVar('--art-theme'));
+});

quality ​

  • Type: Setter
  • Parameter: Array

Dynamically setting the list of qualities

`,4),Ns=a("div",{className:"run-code"},"▶ Run Code",-1),Vs=s(`
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+	quality: [
+		{
+			default: true,
+			html: 'SD 480P',
+			url: '/assets/sample/video.mp4',
+		},
+		{
+			html: 'HD 720P',
+			url: '/assets/sample/video.mp4',
+		},
+	],
+});
+
+art.on('ready', () => {
+	setTimeout(() => {
+		art.quality = [
+			{
+				default: true,
+				html: '1080P',
+				url: '/assets/sample/video.mp4',
+			},
+			{
+				html: '4K',
+				url: '/assets/sample/video.mp4',
+			},
+		];
+	}, 3000);
+})
`,1),Is=[e,r,t,c,D,y,F,i,A,C,d,u,b,m,h,_,g,v,T,E,S,P,w,f,k,q,R,N,V,I,j,x,G,z,B,U,W,H,L,O,$,J,M,Q,K,X,Y,Z,ss,as,ns,ls,ps,os,es,rs,ts,cs,Ds,ys,Fs,is,As,Cs,ds,us,bs,ms,hs,_s,gs,vs,Ts,Es,Ss,Ps,ws,fs,ks,qs,Rs,Ns,Vs];function js(xs,Gs,zs,Bs,Us,Ws){return p(),l("div",null,Is)}const Os=n(o,[["render",js]]);export{Ls as __pageData,Os as default}; diff --git a/docs/document/assets/en_advanced_property.md.50568d20.lean.js b/docs/document/assets/en_advanced_property.md.50568d20.lean.js new file mode 100644 index 000000000..b1694c1e2 --- /dev/null +++ b/docs/document/assets/en_advanced_property.md.50568d20.lean.js @@ -0,0 +1 @@ +import{_ as n,c as l,o as p,V as s,z as a}from"./chunks/framework.5c8808ab.js";const Ls=JSON.parse('{"title":"Instance Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1700976201000}'),o={name:"en/advanced/property.md"},e=s("",5),r=a("div",{className:"run-code"},"▶ Run Code",-1),t=s("",4),c=a("div",{className:"run-code"},"▶ Run Code",-1),D=s("",4),y=a("div",{className:"run-code"},"▶ Run Code",-1),F=s("",4),i=a("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),C=a("div",{className:"run-code"},"▶ Run Code",-1),d=s("",4),u=a("div",{className:"run-code"},"▶ Run Code",-1),b=s("",4),m=a("div",{className:"run-code"},"▶ Run Code",-1),h=s("",4),_=a("div",{className:"run-code"},"▶ Run Code",-1),g=s("",4),v=a("div",{className:"run-code"},"▶ Run Code",-1),T=s("",4),E=a("div",{className:"run-code"},"▶ Run Code",-1),S=s("",4),P=a("div",{className:"run-code"},"▶ Run Code",-1),w=s("",5),f=a("div",{className:"run-code"},"▶ Run Code",-1),k=s("",4),q=a("div",{className:"run-code"},"▶ Run Code",-1),R=s("",4),N=a("div",{className:"run-code"},"▶ Run Code",-1),V=s("",4),I=a("div",{className:"run-code"},"▶ Run Code",-1),j=s("",5),x=a("div",{className:"run-code"},"▶ Run Code",-1),G=s("",4),z=a("div",{className:"run-code"},"▶ Run Code",-1),B=s("",4),U=a("div",{className:"run-code"},"▶ Run Code",-1),W=s("",4),H=a("div",{className:"run-code"},"▶ Run Code",-1),L=s("",5),O=a("div",{className:"run-code"},"▶ Run Code",-1),$=s("",4),J=a("div",{className:"run-code"},"▶ Run Code",-1),M=s("",5),Q=a("div",{className:"run-code"},"▶ Run Code",-1),K=s("",4),X=a("div",{className:"run-code"},"▶ Run Code",-1),Y=s("",4),Z=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s("",4),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",5),os=a("div",{className:"run-code"},"▶ Run Code",-1),es=s("",3),rs=a("div",{className:"run-code"},"▶ Run Code",-1),ts=s("",4),cs=a("div",{className:"run-code"},"▶ Run Code",-1),Ds=s("",4),ys=a("div",{className:"run-code"},"▶ Run Code",-1),Fs=s("",5),is=a("div",{className:"run-code"},"▶ Run Code",-1),As=s("",4),Cs=a("div",{className:"run-code"},"▶ Run Code",-1),ds=s("",4),us=a("div",{className:"run-code"},"▶ Run Code",-1),bs=s("",4),ms=a("div",{className:"run-code"},"▶ Run Code",-1),hs=s("",4),_s=a("div",{className:"run-code"},"▶ Run Code",-1),gs=s("",4),vs=a("div",{className:"run-code"},"▶ Run Code",-1),Ts=s("",4),Es=a("div",{className:"run-code"},"▶ Run Code",-1),Ss=s("",5),Ps=a("div",{className:"run-code"},"▶ Run Code",-1),ws=s("",4),fs=a("div",{className:"run-code"},"▶ Run Code",-1),ks=s("",4),qs=a("div",{className:"run-code"},"▶ Run Code",-1),Rs=s("",4),Ns=a("div",{className:"run-code"},"▶ Run Code",-1),Vs=s("",1),Is=[e,r,t,c,D,y,F,i,A,C,d,u,b,m,h,_,g,v,T,E,S,P,w,f,k,q,R,N,V,I,j,x,G,z,B,U,W,H,L,O,$,J,M,Q,K,X,Y,Z,ss,as,ns,ls,ps,os,es,rs,ts,cs,Ds,ys,Fs,is,As,Cs,ds,us,bs,ms,hs,_s,gs,vs,Ts,Es,Ss,Ps,ws,fs,ks,qs,Rs,Ns,Vs];function js(xs,Gs,zs,Bs,Us,Ws){return p(),l("div",null,Is)}const Os=n(o,[["render",js]]);export{Ls as __pageData,Os as default}; diff --git a/docs/document/assets/en_advanced_property.md.Do7trmU_.js b/docs/document/assets/en_advanced_property.md.Do7trmU_.js deleted file mode 100644 index 1538d13ab..000000000 --- a/docs/document/assets/en_advanced_property.md.Do7trmU_.js +++ /dev/null @@ -1,384 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const Ls=JSON.parse('{"title":"Instance Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1700976201000}'),e={name:"en/advanced/property.md"},p=s('

Instance Properties ​

Here, instance properties refer to the primary properties mounted on the instance, which are quite commonly used.

play ​

  • Type: Function

Play video

',5),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js

-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    art.play();
-});

pause ​

  • Type: Function

Pause video

`,4),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    art.play();
-
-    setTimeout(() => {
-        art.pause();
-    }, 3000);
-});

toggle ​

  • Type: Function

Toggle the play and pause state of the video

`,4),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    art.toggle();
-
-    setTimeout(() => {
-        art.toggle();
-    }, 3000);
-});

destroy ​

  • Type: Function
  • Parameter: Boolean

Destroy the player. Accepts a parameter indicating whether to remove the player's html after destruction, which defaults to true

`,4),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.destroy();
-});

seek ​

  • Type: Setter
  • Parameter: Number

Jump to a specific time in the video, in seconds.

`,4),o=i("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 5;
-});

forward ​

  • Type: Setter
  • Parameter: Number

Fast forward the video time, in seconds.

`,4),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.forward = 5;
-});

backward ​

  • Type: Setter
  • Parameter: Number

Video rewind time in seconds

`,4),F=i("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 5;
-
-    setTimeout(() => {
-        art.backward = 2;
-    }, 3000);
-});

volume ​

  • Type: Setter/Getter
  • Parameter: Number

Sets and gets the video volume, which ranges from [0, 1]

`,4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.volume);
-    art.volume = 0.5;
-    console.info(art.volume);
-});

url ​

  • Type: Setter/Getter
  • Parameter: String

Set and retrieve the video address

`,4),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.url = '/assets/sample/video.mp4?t=0';
-});

switch ​

  • Type: Setter
  • Parameter: String

Set the video address, which is similar to art.url, but performs some optimization operations

`,4),B=i("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switch = '/assets/sample/video.mp4?t=0';
-    }, 3000);
-});

switchUrl ​

  • Type: Function
  • Parameter: String

Set the video address, similar to setting art.url, but some optimization operations will be executed.

`,4),D=i("div",{className:"run-code"},"▶ Run Code",-1),S=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switchUrl('/assets/sample/video.mp4?t=0');
-    }, 3000);
-});

Warning

art.switch and art.switchUrl have the same functionality. However, the art.switchUrl method will return a Promise. When it resolves, it indicates that the new address can be played; when it rejects, it indicates there was an error loading the new address.

switchQuality ​

  • Type: Function
  • Parameter: String

Set video quality address, similar to art.switchUrl, but it will carry over the previous playback progress.

`,5),P=i("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switchQuality('/assets/sample/video.mp4?t=0');
-    }, 3000);
-});

muted ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get whether the video is muted.

`,4),f=i("div",{className:"run-code"},"▶ Run Code",-1),q=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.muted);
-    art.muted = true;
-    console.info(art.muted);
-});

currentTime ​

  • Type: Setter/Getter
  • Parameter: Number

Set and get the current time of the video. Setting the time is similar to seek, but it does not trigger additional events.

`,4),R=i("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.currentTime);
-    art.currentTime = 5;
-    console.info(art.currentTime);
-});

duration ​

  • Type: Getter

Get the video duration

`,4),I=i("div",{className:"run-code"},"▶ Run Code",-1),V=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.duration);
-});

Note

Some videos do not have a duration, such as videos that are being live streamed or videos that have not been fully decoded, in which case the obtained duration will be 0

screenshot ​

  • Type: Function

Download a screenshot of the current video frame

`,5),j=i("div",{className:"run-code"},"▶ Run Code",-1),x=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.screenshot();
-});

getDataURL ​

  • Type: Function

Gets the base64 address of the screenshot of the current video frame, which returns a Promise.

`,4),G=i("div",{className:"run-code"},"▶ Run Code",-1),z=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', async () => {
-    const url = await art.getDataURL();
-    console.info(url)
-});

getBlobUrl ​

  • Type: Function

Gets the blob address of the screenshot of the current video frame, which returns a Promise.

`,4),U=i("div",{className:"run-code"},"▶ Run Code",-1),W=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', async () => {
-    const url = await art.getBlobUrl();
-    console.info(url);
-});

fullscreen ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get the player window fullscreen

`,4),H=i("div",{className:"run-code"},"▶ Run Code",-1),L=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'Fullscreen Switch',
-            click: function () {
-                art.fullscreen = !art.fullscreen;
-            },
-        },
-    ],
-});

Note

Due to browser security mechanisms, before triggering the window to fullscreen, the page must have had an interaction (e.g. user clicked on the page).

fullscreenWeb ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get the player web page full screen

`,5),O=i("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
-
-art.on('ready', () => {
-    art.fullscreenWeb = true;
-
-    setTimeout(() => {
-        art.fullscreenWeb = false;
-    }, 3000);
-});

pip ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get the player picture-in-picture mode

`,4),J=i("div",{className:"run-code"},"▶ Run Code",-1),M=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'PIP',
-            click: function () {
-                art.pip = !art.pip;
-            },
-        },
-    ],
-});

Warning

Due to browser security mechanisms, user interaction (e.g., a user click on the page) must occur before triggering picture-in-picture.

poster ​

  • Type: Setter/Getter
  • Parameter: String

Set and get the video poster, the poster effect is visible only before the video starts playing.

`,5),Q=i("div",{className:"run-code"},"▶ Run Code",-1),K=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    poster: '/assets/sample/poster.jpg',
-});
-
-art.on('ready', () => {
-    console.info(art.poster);
-    art.poster = '/assets/sample/poster.jpg?t=0';
-    console.info(art.poster);
-});

mini ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get the player's mini mode

`,4),X=i("div",{className:"run-code"},"▶ Run Code",-1),Y=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.mini = true;
-});

playing ​

  • Type: Getter
  • Parameter: Boolean

Get whether the video is currently playing

`,4),Z=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    console.info(art.playing);
-});

autoSize ​

  • Type: Function

Sets whether the video should auto adjust its size

`,4),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.autoSize();
-});

rect ​

  • Type: Getter

Gets the size and position information of the player

`,4),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(JSON.stringify(art.rect));
-});

Warning

The size and coordinates are obtained via getBoundingClientRect

flip ​

  • Type: Setter/Getter
  • Parameter: String

Set and get the player flip, supports normal, horizontal, vertical

`,5),es=i("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.flip);
-    art.flip = 'horizontal';
-    console.info(art.flip);
-});

playbackRate ​

  • Type: Setter/Getter
  • Parameter: Number Set and get the playback speed of the player
`,3),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.playbackRate);
-    art.playbackRate = 2;
-    console.info(art.playbackRate);
-});

aspectRatio ​

  • Type: Setter/Getter
  • Parameter: String

Set and get the aspect ratio of the player

`,4),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.aspectRatio);
-    art.aspectRatio = '16:9';
-    console.info(art.aspectRatio);
-});

autoHeight ​

  • Type: Function

When the container has only width, this attribute can automatically calculate and set the height of the video

`,4),Es=i("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.autoHeight();
-});
-
-art.on('resize', () => {
-    art.autoHeight();
-});

Warning

When your container has only width but you do not know the exact height, this property is very useful as it can automatically calculate the video's height, but you need to make sure when to set this property.

attr ​

  • Type: Function
  • Parameter: String

Dynamically get and set the attributes of the video element

`,5),cs=i("div",{className:"run-code"},"▶ Run Code",-1),gs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.attr('playsInline'));
-    art.attr('playsInline', true);
-    console.info(art.attr('playsInline'));
-});

type ​

  • Type: Setter/Getter
  • Parameter: String

Dynamically get and set the video type

`,4),os=i("div",{className:"run-code"},"▶ Run Code",-1),ys=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.type);
-    art.type = 'm3u8';
-    console.info(art.type);
-});

theme ​

  • Type: Setter/Getter
  • Parameter: String

Dynamically get and set the player's theme color

`,4),us=i("div",{className:"run-code"},"▶ Run Code",-1),bs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.theme);
-    art.theme = '#000';
-    console.info(art.theme);
-});

airplay ​

  • Type: Function

Activate airplay

`,4),Fs=i("div",{className:"run-code"},"▶ Run Code",-1),ms=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'AirPlay',
-            click: function () {
-                art.airplay();
-            },
-        },
-    ],
-});

loaded ​

  • Type: Getter

The proportion of the video that is cached, ranging from [0, 1], commonly used with the video:timeupdate event.

`,4),_s=i("div",{className:"run-code"},"▶ Run Code",-1),Cs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('video:timeupdate', () => {
-    console.info(art.loaded);
-});

played ​

  • Type: Getter

The proportion of the video that has been played, ranging from [0, 1], commonly used with the video:timeupdate event.

`,4),vs=i("div",{className:"run-code"},"▶ Run Code",-1),As=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('video:timeupdate', () => {
-    console.info(art.played);
-});

proxy ​

  • Type: Function

A proxy function for DOM events, which essentially proxies addEventListener and removeEventListener. When using proxy to handle events, the event will automatically be destroyed when the player is destroyed.

`,4),Bs=i("div",{className:"run-code"},"▶ Run Code",-1),Ts=s(`
js
var container = document.querySelector('.artplayer-app');
-
-var art = new Artplayer({
-	container: container,
-	url: '/assets/sample/video.mp4',
-});
-
-art.proxy(container, 'click', event => {
-	console.info(event);
-});

Tip

If you need some DOM events to exist only during the lifespan of the player, it is highly recommended to use this function to avoid causing memory leaks.

query ​

  • Type: Function

DOM query function, similar to document.querySelector, but the object being queried is limited within the current player, which can prevent errors due to having the same class name.

`,5),Ds=i("div",{className:"run-code"},"▶ Run Code",-1),Ss=s(`
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
-
-console.info(art.query('.art-video'));

video ​

  • Type: Element

A shortcut to return the video element of the player.

`,4),Ps=i("div",{className:"run-code"},"▶ Run Code",-1),ws=s(`
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
-
-console.info(art.video);

cssVar ​

  • Type: Function

Dynamically getting or setting css variables

`,4),fs=i("div",{className:"run-code"},"▶ Run Code",-1),qs=s(`
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.log(art.cssVar('--art-theme'));
-    art.cssVar('--art-theme', 'green');
-    console.log(art.cssVar('--art-theme'));
-});

quality ​

  • Type: Setter
  • Parameter: Array

Dynamically setting the list of qualities

`,4),Rs=i("div",{className:"run-code"},"▶ Run Code",-1),Ns=s(`
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-	quality: [
-		{
-			default: true,
-			html: 'SD 480P',
-			url: '/assets/sample/video.mp4',
-		},
-		{
-			html: 'HD 720P',
-			url: '/assets/sample/video.mp4',
-		},
-	],
-});
-
-art.on('ready', () => {
-	setTimeout(() => {
-		art.quality = [
-			{
-				default: true,
-				html: '1080P',
-				url: '/assets/sample/video.mp4',
-			},
-			{
-				html: '4K',
-				url: '/assets/sample/video.mp4',
-			},
-		];
-	}, 3000);
-})
`,1),Is=[p,h,t,k,r,E,d,c,g,o,y,u,b,F,m,_,C,v,A,B,T,D,S,P,w,f,q,R,N,I,V,j,x,G,z,U,W,H,L,O,$,J,M,Q,K,X,Y,Z,ss,is,as,ns,ls,es,ps,hs,ts,ks,rs,Es,ds,cs,gs,os,ys,us,bs,Fs,ms,_s,Cs,vs,As,Bs,Ts,Ds,Ss,Ps,ws,fs,qs,Rs,Ns];function Vs(js,xs,Gs,zs,Us,Ws){return l(),n("div",null,Is)}const Os=a(e,[["render",Vs]]);export{Ls as __pageData,Os as default}; diff --git a/docs/document/assets/en_advanced_property.md.Do7trmU_.lean.js b/docs/document/assets/en_advanced_property.md.Do7trmU_.lean.js deleted file mode 100644 index ee2ce51fa..000000000 --- a/docs/document/assets/en_advanced_property.md.Do7trmU_.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const Ls=JSON.parse('{"title":"Instance Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1700976201000}'),e={name:"en/advanced/property.md"},p=s("",5),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",4),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s("",4),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",4),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s("",4),o=i("div",{className:"run-code"},"▶ Run Code",-1),y=s("",4),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s("",4),F=i("div",{className:"run-code"},"▶ Run Code",-1),m=s("",4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s("",4),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),B=i("div",{className:"run-code"},"▶ Run Code",-1),T=s("",4),D=i("div",{className:"run-code"},"▶ Run Code",-1),S=s("",5),P=i("div",{className:"run-code"},"▶ Run Code",-1),w=s("",4),f=i("div",{className:"run-code"},"▶ Run Code",-1),q=s("",4),R=i("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),I=i("div",{className:"run-code"},"▶ Run Code",-1),V=s("",5),j=i("div",{className:"run-code"},"▶ Run Code",-1),x=s("",4),G=i("div",{className:"run-code"},"▶ Run Code",-1),z=s("",4),U=i("div",{className:"run-code"},"▶ Run Code",-1),W=s("",4),H=i("div",{className:"run-code"},"▶ Run Code",-1),L=s("",5),O=i("div",{className:"run-code"},"▶ Run Code",-1),$=s("",4),J=i("div",{className:"run-code"},"▶ Run Code",-1),M=s("",5),Q=i("div",{className:"run-code"},"▶ Run Code",-1),K=s("",4),X=i("div",{className:"run-code"},"▶ Run Code",-1),Y=s("",4),Z=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s("",4),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s("",5),es=i("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",3),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s("",4),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s("",4),Es=i("div",{className:"run-code"},"▶ Run Code",-1),ds=s("",5),cs=i("div",{className:"run-code"},"▶ Run Code",-1),gs=s("",4),os=i("div",{className:"run-code"},"▶ Run Code",-1),ys=s("",4),us=i("div",{className:"run-code"},"▶ Run Code",-1),bs=s("",4),Fs=i("div",{className:"run-code"},"▶ Run Code",-1),ms=s("",4),_s=i("div",{className:"run-code"},"▶ Run Code",-1),Cs=s("",4),vs=i("div",{className:"run-code"},"▶ Run Code",-1),As=s("",4),Bs=i("div",{className:"run-code"},"▶ Run Code",-1),Ts=s("",5),Ds=i("div",{className:"run-code"},"▶ Run Code",-1),Ss=s("",4),Ps=i("div",{className:"run-code"},"▶ Run Code",-1),ws=s("",4),fs=i("div",{className:"run-code"},"▶ Run Code",-1),qs=s("",4),Rs=i("div",{className:"run-code"},"▶ Run Code",-1),Ns=s("",1),Is=[p,h,t,k,r,E,d,c,g,o,y,u,b,F,m,_,C,v,A,B,T,D,S,P,w,f,q,R,N,I,V,j,x,G,z,U,W,H,L,O,$,J,M,Q,K,X,Y,Z,ss,is,as,ns,ls,es,ps,hs,ts,ks,rs,Es,ds,cs,gs,os,ys,us,bs,Fs,ms,_s,Cs,vs,As,Bs,Ts,Ds,Ss,Ps,ws,fs,qs,Rs,Ns];function Vs(js,xs,Gs,zs,Us,Ws){return l(),n("div",null,Is)}const Os=a(e,[["render",Vs]]);export{Ls as __pageData,Os as default}; diff --git a/docs/document/assets/en_component_contextmenu.md.1179a46a.js b/docs/document/assets/en_component_contextmenu.md.1179a46a.js new file mode 100644 index 000000000..3f8ec6da3 --- /dev/null +++ b/docs/document/assets/en_component_contextmenu.md.1179a46a.js @@ -0,0 +1,83 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const E=JSON.parse('{"title":"Context Menu","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/contextmenu.md","filePath":"en/component/contextmenu.md","lastUpdated":1700976201000}'),o={name:"en/component/contextmenu.md"},e=s('

Context Menu ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique name of the component, used for marking the class name
indexNumberComponent index, used for display priority
htmlString, ElementThe DOM element of the component
styleObjectStyle object for the component
clickFunctionClick event for the component
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component

Creation ​

',4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
+
+art.contextmenu.show = true;
+
+// Get the Element of contextmenu by name
+console.info(art.contextmenu['your-menu']);

Add ​

`,2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.contextmenu.add({
+    name: 'your-menu',
+    html: 'Your Menu',
+    click: function (...args) {
+        console.info(args);
+        art.contextmenu.show = false;
+    },
+});
+
+art.contextmenu.show = true;
+
+// Get the Element of contextmenu by name
+console.info(art.contextmenu['your-menu']);

Delete ​

`,2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
+
+art.contextmenu.show = true;
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the context menu by name
+        art.contextmenu.remove('your-menu')
+    }, 3000);
+});

Updates ​

`,2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
+
+art.contextmenu.show = true;
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the contextmenu by name
+        art.contextmenu.update({
+            name: 'your-menu',
+            html: 'Your New Menu',
+        })
+    }, 3000);
+});
`,1),A=[e,t,r,c,D,F,y,i,C];function d(u,b,m,h,g,_){return p(),l("div",null,A)}const x=a(o,[["render",d]]);export{E as __pageData,x as default}; diff --git a/docs/document/assets/en_component_contextmenu.md.1179a46a.lean.js b/docs/document/assets/en_component_contextmenu.md.1179a46a.lean.js new file mode 100644 index 000000000..ef4e28090 --- /dev/null +++ b/docs/document/assets/en_component_contextmenu.md.1179a46a.lean.js @@ -0,0 +1 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const E=JSON.parse('{"title":"Context Menu","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/contextmenu.md","filePath":"en/component/contextmenu.md","lastUpdated":1700976201000}'),o={name:"en/component/contextmenu.md"},e=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s("",1),A=[e,t,r,c,D,F,y,i,C];function d(u,b,m,h,g,_){return p(),l("div",null,A)}const x=a(o,[["render",d]]);export{E as __pageData,x as default}; diff --git a/docs/document/assets/en_component_contextmenu.md.SYOH84zB.js b/docs/document/assets/en_component_contextmenu.md.SYOH84zB.js deleted file mode 100644 index 6c8108df8..000000000 --- a/docs/document/assets/en_component_contextmenu.md.SYOH84zB.js +++ /dev/null @@ -1,83 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const B=JSON.parse('{"title":"Context Menu","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/contextmenu.md","filePath":"en/component/contextmenu.md","lastUpdated":1700976201000}'),e={name:"en/component/contextmenu.md"},p=s('

Context Menu ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique name of the component, used for marking the class name
indexNumberComponent index, used for display priority
htmlString, ElementThe DOM element of the component
styleObjectStyle object for the component
clickFunctionClick event for the component
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component

Creation ​

',4),t=i("div",{className:"run-code"},"▶ Run Code",-1),h=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
-
-art.contextmenu.show = true;
-
-// Get the Element of contextmenu by name
-console.info(art.contextmenu['your-menu']);

Add ​

`,2),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.contextmenu.add({
-    name: 'your-menu',
-    html: 'Your Menu',
-    click: function (...args) {
-        console.info(args);
-        art.contextmenu.show = false;
-    },
-});
-
-art.contextmenu.show = true;
-
-// Get the Element of contextmenu by name
-console.info(art.contextmenu['your-menu']);

Delete ​

`,2),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
-
-art.contextmenu.show = true;
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the context menu by name
-        art.contextmenu.remove('your-menu')
-    }, 3000);
-});

Updates ​

`,2),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
-
-art.contextmenu.show = true;
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the contextmenu by name
-        art.contextmenu.update({
-            name: 'your-menu',
-            html: 'Your New Menu',
-        })
-    }, 3000);
-});
`,1),o=[p,t,h,k,r,E,d,c,g];function y(u,b,m,F,C,_){return l(),n("div",null,o)}const D=a(e,[["render",y]]);export{B as __pageData,D as default}; diff --git a/docs/document/assets/en_component_contextmenu.md.SYOH84zB.lean.js b/docs/document/assets/en_component_contextmenu.md.SYOH84zB.lean.js deleted file mode 100644 index a0c296da1..000000000 --- a/docs/document/assets/en_component_contextmenu.md.SYOH84zB.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const B=JSON.parse('{"title":"Context Menu","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/contextmenu.md","filePath":"en/component/contextmenu.md","lastUpdated":1700976201000}'),e={name:"en/component/contextmenu.md"},p=s("",4),t=i("div",{className:"run-code"},"▶ Run Code",-1),h=s("",2),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",2),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s("",1),o=[p,t,h,k,r,E,d,c,g];function y(u,b,m,F,C,_){return l(),n("div",null,o)}const D=a(e,[["render",y]]);export{B as __pageData,D as default}; diff --git a/docs/document/assets/en_component_controls.md.0f436d61.js b/docs/document/assets/en_component_controls.md.0f436d61.js new file mode 100644 index 000000000..add11faa1 --- /dev/null +++ b/docs/document/assets/en_component_controls.md.0f436d61.js @@ -0,0 +1,130 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const f=JSON.parse('{"title":"Controller","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/controls.md","filePath":"en/component/controls.md","lastUpdated":1700976201000}'),o={name:"en/component/controls.md"},e=s('

Controller ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringThe unique name of the component for class identification
indexNumberThe index of the component, used for display priority
htmlString, ElementThe component's DOM element
styleObjectThe style object for the component
clickFunctionComponent click event
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component
positionStringleft and right control the position of the controller
selectorArrayAn array of objects for the selection list
onSelectFunctionFunction triggered when an item from the selection list is clicked

Creation ​

',4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'your-button',
+            index: 10,
+            position: 'left',
+            html: 'Your Button',
+            tooltip: 'Your Button',
+            style: {
+                color: 'red',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+        {
+            name: 'subtitle',
+            position: 'right',
+            html: 'Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">subtitle 01</span>',
+                },
+                {
+                    html: '<span style="color:yellow">subtitle 02</span>',
+                },
+            ],
+            onSelect: function (item, $dom) {
+                console.info(item, $dom);
+                return 'Your ' + item.html;
+            },
+        },
+    ],
+});
+
+// Get the Element of control by name
+console.info(art.controls['your-button']);
+console.info(art.controls['subtitle']);

Adding ​

`,2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.controls.add({
+    name: 'button1',
+    index: 10,
+    position: 'left',
+    html: 'Your Button',
+    tooltip: 'Your Button',
+    style: {
+        color: 'red',
+    },
+    click: function (...args) {
+        console.info('click', args);
+    },
+    mounted: function (...args) {
+        console.info('mounted', args);
+    },
+});
+
+// Get the Element of control by name
+console.info(art.controls['button1']);

Delete ​

`,2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'Your Button',
+            tooltip: 'Your Button',
+            style: {
+                color: 'red',
+            },
+        }
+    ]
+});
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the control by name
+        art.controls.remove('button1');
+    }, 3000);
+});

Update ​

`,2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: 'subtitle 01',
+                },
+                {
+                    html: 'subtitle 02',
+                },
+            ],
+        }
+    ]
+});
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the control by name
+        art.controls.update({
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'New Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: 'new subtitle 01',
+                },
+                {
+                    html: 'new subtitle 02',
+                },
+            ],
+        });
+    }, 3000);
+});
`,1),A=[e,t,r,c,D,F,y,i,C];function b(d,u,m,h,g,_){return p(),l("div",null,A)}const T=a(o,[["render",b]]);export{f as __pageData,T as default}; diff --git a/docs/document/assets/en_component_controls.md.0f436d61.lean.js b/docs/document/assets/en_component_controls.md.0f436d61.lean.js new file mode 100644 index 000000000..45e48f8d7 --- /dev/null +++ b/docs/document/assets/en_component_controls.md.0f436d61.lean.js @@ -0,0 +1 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const f=JSON.parse('{"title":"Controller","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/controls.md","filePath":"en/component/controls.md","lastUpdated":1700976201000}'),o={name:"en/component/controls.md"},e=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s("",1),A=[e,t,r,c,D,F,y,i,C];function b(d,u,m,h,g,_){return p(),l("div",null,A)}const T=a(o,[["render",b]]);export{f as __pageData,T as default}; diff --git a/docs/document/assets/en_component_controls.md.IARYvQ-y.js b/docs/document/assets/en_component_controls.md.IARYvQ-y.js deleted file mode 100644 index 2e3b5f263..000000000 --- a/docs/document/assets/en_component_controls.md.IARYvQ-y.js +++ /dev/null @@ -1,130 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const A=JSON.parse('{"title":"Controller","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/controls.md","filePath":"en/component/controls.md","lastUpdated":1700976201000}'),p={name:"en/component/controls.md"},h=s('

Controller ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringThe unique name of the component for class identification
indexNumberThe index of the component, used for display priority
htmlString, ElementThe component's DOM element
styleObjectThe style object for the component
clickFunctionComponent click event
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component
positionStringleft and right control the position of the controller
selectorArrayAn array of objects for the selection list
onSelectFunctionFunction triggered when an item from the selection list is clicked

Creation ​

',4),e=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'your-button',
-            index: 10,
-            position: 'left',
-            html: 'Your Button',
-            tooltip: 'Your Button',
-            style: {
-                color: 'red',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-        {
-            name: 'subtitle',
-            position: 'right',
-            html: 'Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: '<span style="color:red">subtitle 01</span>',
-                },
-                {
-                    html: '<span style="color:yellow">subtitle 02</span>',
-                },
-            ],
-            onSelect: function (item, $dom) {
-                console.info(item, $dom);
-                return 'Your ' + item.html;
-            },
-        },
-    ],
-});
-
-// Get the Element of control by name
-console.info(art.controls['your-button']);
-console.info(art.controls['subtitle']);

Adding ​

`,2),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.controls.add({
-    name: 'button1',
-    index: 10,
-    position: 'left',
-    html: 'Your Button',
-    tooltip: 'Your Button',
-    style: {
-        color: 'red',
-    },
-    click: function (...args) {
-        console.info('click', args);
-    },
-    mounted: function (...args) {
-        console.info('mounted', args);
-    },
-});
-
-// Get the Element of control by name
-console.info(art.controls['button1']);

Delete ​

`,2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'Your Button',
-            tooltip: 'Your Button',
-            style: {
-                color: 'red',
-            },
-        }
-    ]
-});
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the control by name
-        art.controls.remove('button1');
-    }, 3000);
-});

Update ​

`,2),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: 'subtitle 01',
-                },
-                {
-                    html: 'subtitle 02',
-                },
-            ],
-        }
-    ]
-});
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the control by name
-        art.controls.update({
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'New Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: 'new subtitle 01',
-                },
-                {
-                    html: 'new subtitle 02',
-                },
-            ],
-        });
-    }, 3000);
-});
`,1),o=[h,e,t,k,E,r,d,c,g];function y(b,u,F,m,C,B){return l(),n("div",null,o)}const f=a(p,[["render",y]]);export{A as __pageData,f as default}; diff --git a/docs/document/assets/en_component_controls.md.IARYvQ-y.lean.js b/docs/document/assets/en_component_controls.md.IARYvQ-y.lean.js deleted file mode 100644 index 4d4b74d4f..000000000 --- a/docs/document/assets/en_component_controls.md.IARYvQ-y.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const A=JSON.parse('{"title":"Controller","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/controls.md","filePath":"en/component/controls.md","lastUpdated":1700976201000}'),p={name:"en/component/controls.md"},h=s("",4),e=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",2),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s("",2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",2),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s("",1),o=[h,e,t,k,E,r,d,c,g];function y(b,u,F,m,C,B){return l(),n("div",null,o)}const f=a(p,[["render",y]]);export{A as __pageData,f as default}; diff --git a/docs/document/assets/en_component_layers.md.7c6bb293.js b/docs/document/assets/en_component_layers.md.7c6bb293.js new file mode 100644 index 000000000..8074ff487 --- /dev/null +++ b/docs/document/assets/en_component_layers.md.7c6bb293.js @@ -0,0 +1,102 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const f=JSON.parse('{"title":"Layer","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/layers.md","filePath":"en/component/layers.md","lastUpdated":1700976201000}'),o={name:"en/component/layers.md"},e=s('

Layer ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique name of the component, used for marking class name
indexNumberComponent index, used for display priority
htmlString, ElementThe DOM element of the component
styleObjectStyle object for the component
clickFunctionClick event for the component
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component

Creation ​

',4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'poster',
+            html: \`<img style="width: 100px" src="\${img}">\`,
+            tooltip: 'Poster Tip',
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+    ],
+});
+
+// Get the Element of layer by name
+console.info(art.layers['poster']);

Add ​

`,2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.layers.add({
+    name: 'poster',
+    html: \`<img style="width: 100px" src="\${img}">\`,
+    tooltip: 'Poster Tip',
+    style: {
+        position: 'absolute',
+        top: '50px',
+        right: '50px',
+    },
+    click: function (...args) {
+        console.info('click', args);
+    },
+    mounted: function (...args) {
+        console.info('mounted', args);
+    },
+});
+
+// Get the Element of layer by name
+console.info(art.layers['poster']);

Delete ​

`,2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'poster',
+            html: \`<img style="width: 100px" src="\${img}">\`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+        },
+    ],
+});
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the layer by name
+        art.layers.remove('poster');
+    }, 3000);
+});

Update ​

`,2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'poster',
+            html: \`<img style="width: 100px" src="\${img}">\`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+        },
+    ],
+});
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the layer by name
+        art.layers.update({
+            name: 'poster',
+            html: \`<img style="width: 200px" src="\${img}">\`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                left: '50px',
+            },
+        });
+    }, 3000);
+});
`,1),A=[e,t,r,c,D,F,y,i,C];function d(b,h,m,u,g,_){return p(),l("div",null,A)}const T=a(o,[["render",d]]);export{f as __pageData,T as default}; diff --git a/docs/document/assets/en_component_layers.md.7c6bb293.lean.js b/docs/document/assets/en_component_layers.md.7c6bb293.lean.js new file mode 100644 index 000000000..57322dc58 --- /dev/null +++ b/docs/document/assets/en_component_layers.md.7c6bb293.lean.js @@ -0,0 +1 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const f=JSON.parse('{"title":"Layer","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/layers.md","filePath":"en/component/layers.md","lastUpdated":1700976201000}'),o={name:"en/component/layers.md"},e=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s("",1),A=[e,t,r,c,D,F,y,i,C];function d(b,h,m,u,g,_){return p(),l("div",null,A)}const T=a(o,[["render",d]]);export{f as __pageData,T as default}; diff --git a/docs/document/assets/en_component_layers.md.jnNJVITB.js b/docs/document/assets/en_component_layers.md.jnNJVITB.js deleted file mode 100644 index 8e3c8a1ac..000000000 --- a/docs/document/assets/en_component_layers.md.jnNJVITB.js +++ /dev/null @@ -1,102 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const A=JSON.parse('{"title":"Layer","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/layers.md","filePath":"en/component/layers.md","lastUpdated":1700976201000}'),p={name:"en/component/layers.md"},h=s('

Layer ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique name of the component, used for marking class name
indexNumberComponent index, used for display priority
htmlString, ElementThe DOM element of the component
styleObjectStyle object for the component
clickFunctionClick event for the component
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component

Creation ​

',4),e=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'poster',
-            html: \`<img style="width: 100px" src="\${img}">\`,
-            tooltip: 'Poster Tip',
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-    ],
-});
-
-// Get the Element of layer by name
-console.info(art.layers['poster']);

Add ​

`,2),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.layers.add({
-    name: 'poster',
-    html: \`<img style="width: 100px" src="\${img}">\`,
-    tooltip: 'Poster Tip',
-    style: {
-        position: 'absolute',
-        top: '50px',
-        right: '50px',
-    },
-    click: function (...args) {
-        console.info('click', args);
-    },
-    mounted: function (...args) {
-        console.info('mounted', args);
-    },
-});
-
-// Get the Element of layer by name
-console.info(art.layers['poster']);

Delete ​

`,2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'poster',
-            html: \`<img style="width: 100px" src="\${img}">\`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-        },
-    ],
-});
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the layer by name
-        art.layers.remove('poster');
-    }, 3000);
-});

Update ​

`,2),g=i("div",{className:"run-code"},"▶ Run Code",-1),c=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'poster',
-            html: \`<img style="width: 100px" src="\${img}">\`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-        },
-    ],
-});
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the layer by name
-        art.layers.update({
-            name: 'poster',
-            html: \`<img style="width: 200px" src="\${img}">\`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                left: '50px',
-            },
-        });
-    }, 3000);
-});
`,1),y=[h,e,t,k,E,r,d,g,c];function o(b,F,u,m,C,_){return l(),n("div",null,y)}const D=a(p,[["render",o]]);export{A as __pageData,D as default}; diff --git a/docs/document/assets/en_component_layers.md.jnNJVITB.lean.js b/docs/document/assets/en_component_layers.md.jnNJVITB.lean.js deleted file mode 100644 index 494495715..000000000 --- a/docs/document/assets/en_component_layers.md.jnNJVITB.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const A=JSON.parse('{"title":"Layer","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/layers.md","filePath":"en/component/layers.md","lastUpdated":1700976201000}'),p={name:"en/component/layers.md"},h=s("",4),e=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",2),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s("",2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",2),g=i("div",{className:"run-code"},"▶ Run Code",-1),c=s("",1),y=[h,e,t,k,E,r,d,g,c];function o(b,F,u,m,C,_){return l(),n("div",null,y)}const D=a(p,[["render",o]]);export{A as __pageData,D as default}; diff --git a/docs/document/assets/en_component_setting.md.1eba86a5.js b/docs/document/assets/en_component_setting.md.1eba86a5.js new file mode 100644 index 000000000..0571f3fa1 --- /dev/null +++ b/docs/document/assets/en_component_setting.md.1eba86a5.js @@ -0,0 +1,207 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const R=JSON.parse('{"title":"Settings Panel","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/setting.md","filePath":"en/component/setting.md","lastUpdated":1700976201000}'),o={name:"en/component/setting.md"},e=s('

Settings Panel ​

Built-in ​

First, open the settings panel, and then it comes with four built-in items: flip, playbackRate, aspectRatio, subtitleOffset

',3),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    subtitleOffset: true,
+});

Create - Selection List ​

PropertyTypeDescription
htmlString, ElementElement's DOM

| icon | String, Element | 元素的图标 | | selector | Array | 元素列表 | | onSelect | Function | 元素点击事件 | | width | Number | 列表宽度 | | tooltip | String | 提示文本 |

`,4),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Subtitle',
+            width: 250,
+            tooltip: 'Subtitle 01',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">Subtitle 01</span>',
+                    url: '/assets/sample/subtitle.srt?id=1',
+                },
+                {
+                    html: '<span style="color:yellow">Subtitle 02</span>',
+                    url: '/assets/sample/subtitle.srt?id=2',
+                },
+            ],
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                art.subtitle.url = item.url;
+                return item.html;
+            },
+        },
+        {
+            html: 'Quality',
+            width: 150,
+            tooltip: '1080P',
+            selector: [
+                {
+                    default: true,
+                    html: '1080P',
+                    url: '/assets/sample/video.mp4?id=1080',
+                },
+                {
+                    html: '720P',
+                    url: '/assets/sample/video.mp4?id=720',
+                },
+                {
+                    html: '360P',
+                    url: '/assets/sample/video.mp4?id=360',
+                },
+            ],
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                art.switchQuality(item.url, item.html);
+                return item.html;
+            },
+        },
+    ],
+});

Creating - Nested Lists ​

`,2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Multi-level',
+            selector: [
+                {
+                    html: 'Setting 01',
+                    width: 150,
+                    selector: [
+                        {
+                            html: 'Setting 01 - 01',
+                        },
+                        {
+                            html: 'Setting 01 - 02',
+                        },
+                    ],
+                    onSelect: function (item, $dom, event) {
+                        console.info(item, $dom, event);
+                        return item.html;
+                    },
+                },
+                {
+                    html: 'Setting 02',
+                    width: 150,
+                    selector: [
+                        {
+                            html: 'Setting 02 - 01',
+                        },
+                        {
+                            html: 'Setting 02 - 02',
+                        },
+                    ],
+                    onSelect: function (item, $dom, event) {
+                        console.info(item, $dom, event);
+                        return item.html;
+                    },
+                },
+            ],
+        },
+    ],
+});

Create - Toggle Button ​

PropertyTypeDescription
htmlString, ElementElement's DOM element
iconString, ElementElement's icon
switchBooleanButton's default state
onSwitchFunctionButton toggle event
tooltipStringTooltip text
`,3),C=n("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'PIP Mode',
+            tooltip: 'Close',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            switch: false,
+            onSwitch: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                const nextState = !item.switch;
+                art.pip = nextState;
+                item.tooltip = nextState ? 'Open' : 'Close';
+                return nextState;
+            },
+        },
+    ],
+});

Create - Range Slider ​

AttributeTypeDescription
htmlString, ElementThe element's DOM element
iconString, ElementThe element's icon
rangeArrayDefault state array
onRangeFunctionEvent triggered upon completion
onChangeFunctionEvent triggered on change
tooltipStringTooltip text
js
const range = [5, 1, 10, 1];
+const value = range[0];
+const min = range[1];
+const max = range[2];
+const step = range[3];
`,4),i=n("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" height="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+            onChange: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                return item.range + 'x';
+            },
+        },
+    ],
+});

Add ​

`,2),d=n("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
+
+art.setting.show = true;
+
+art.setting.add({
+    html: 'Slider',
+    tooltip: '5x',
+    icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+    range: [5, 1, 10, 1],
+});

Delete ​

`,2),m=n("div",{className:"run-code"},"▶ Run Code",-1),h=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    settings: [
+        {
+            name: 'slider',
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+        },
+    ],
+});
+
+art.setting.show = true;
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the setting by name
+        art.setting.remove('slider');
+    }, 3000);
+});

Updates ​

`,2),g=n("div",{className:"run-code"},"▶ Run Code",-1),_=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            name: 'slider',
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+        },
+    ],
+});
+
+art.setting.show = true;
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the setting by name
+        art.setting.update({
+            name: 'slider',
+            html: 'PIP Mode',
+            tooltip: 'Close',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            switch: false,
+        });
+    }, 3000);
+});
`,1),E=[e,t,r,c,D,F,y,C,A,i,b,d,u,m,h,g,_];function v(S,f,T,q,P,w){return p(),l("div",null,E)}const N=a(o,[["render",v]]);export{R as __pageData,N as default}; diff --git a/docs/document/assets/en_component_setting.md.1eba86a5.lean.js b/docs/document/assets/en_component_setting.md.1eba86a5.lean.js new file mode 100644 index 000000000..ad3e187ec --- /dev/null +++ b/docs/document/assets/en_component_setting.md.1eba86a5.lean.js @@ -0,0 +1 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const R=JSON.parse('{"title":"Settings Panel","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/setting.md","filePath":"en/component/setting.md","lastUpdated":1700976201000}'),o={name:"en/component/setting.md"},e=s("",3),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",4),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",3),C=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),i=n("div",{className:"run-code"},"▶ Run Code",-1),b=s("",2),d=n("div",{className:"run-code"},"▶ Run Code",-1),u=s("",2),m=n("div",{className:"run-code"},"▶ Run Code",-1),h=s("",2),g=n("div",{className:"run-code"},"▶ Run Code",-1),_=s("",1),E=[e,t,r,c,D,F,y,C,A,i,b,d,u,m,h,g,_];function v(S,f,T,q,P,w){return p(),l("div",null,E)}const N=a(o,[["render",v]]);export{R as __pageData,N as default}; diff --git a/docs/document/assets/en_component_setting.md.nFvHHMIg.js b/docs/document/assets/en_component_setting.md.nFvHHMIg.js deleted file mode 100644 index 8c613890a..000000000 --- a/docs/document/assets/en_component_setting.md.nFvHHMIg.js +++ /dev/null @@ -1,207 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const w=JSON.parse('{"title":"Settings Panel","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/setting.md","filePath":"en/component/setting.md","lastUpdated":1700976201000}'),p={name:"en/component/setting.md"},e=s('

Settings Panel ​

Built-in ​

First, open the settings panel, and then it comes with four built-in items: flip, playbackRate, aspectRatio, subtitleOffset

',3),t=i("div",{className:"run-code"},"▶ Run Code",-1),h=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-    subtitleOffset: true,
-});

Create - Selection List ​

PropertyTypeDescription
htmlString, ElementElement's DOM

| icon | String, Element | 元素的图标 | | selector | Array | 元素列表 | | onSelect | Function | 元素点击事件 | | width | Number | 列表宽度 | | tooltip | String | 提示文本 |

`,4),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Subtitle',
-            width: 250,
-            tooltip: 'Subtitle 01',
-            selector: [
-                {
-                    default: true,
-                    html: '<span style="color:red">Subtitle 01</span>',
-                    url: '/assets/sample/subtitle.srt?id=1',
-                },
-                {
-                    html: '<span style="color:yellow">Subtitle 02</span>',
-                    url: '/assets/sample/subtitle.srt?id=2',
-                },
-            ],
-            onSelect: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                art.subtitle.url = item.url;
-                return item.html;
-            },
-        },
-        {
-            html: 'Quality',
-            width: 150,
-            tooltip: '1080P',
-            selector: [
-                {
-                    default: true,
-                    html: '1080P',
-                    url: '/assets/sample/video.mp4?id=1080',
-                },
-                {
-                    html: '720P',
-                    url: '/assets/sample/video.mp4?id=720',
-                },
-                {
-                    html: '360P',
-                    url: '/assets/sample/video.mp4?id=360',
-                },
-            ],
-            onSelect: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                art.switchQuality(item.url, item.html);
-                return item.html;
-            },
-        },
-    ],
-});

Creating - Nested Lists ​

`,2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Multi-level',
-            selector: [
-                {
-                    html: 'Setting 01',
-                    width: 150,
-                    selector: [
-                        {
-                            html: 'Setting 01 - 01',
-                        },
-                        {
-                            html: 'Setting 01 - 02',
-                        },
-                    ],
-                    onSelect: function (item, $dom, event) {
-                        console.info(item, $dom, event);
-                        return item.html;
-                    },
-                },
-                {
-                    html: 'Setting 02',
-                    width: 150,
-                    selector: [
-                        {
-                            html: 'Setting 02 - 01',
-                        },
-                        {
-                            html: 'Setting 02 - 02',
-                        },
-                    ],
-                    onSelect: function (item, $dom, event) {
-                        console.info(item, $dom, event);
-                        return item.html;
-                    },
-                },
-            ],
-        },
-    ],
-});

Create - Toggle Button ​

PropertyTypeDescription
htmlString, ElementElement's DOM element
iconString, ElementElement's icon
switchBooleanButton's default state
onSwitchFunctionButton toggle event
tooltipStringTooltip text
`,3),g=i("div",{className:"run-code"},"▶ Run Code",-1),c=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'PIP Mode',
-            tooltip: 'Close',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            switch: false,
-            onSwitch: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                const nextState = !item.switch;
-                art.pip = nextState;
-                item.tooltip = nextState ? 'Open' : 'Close';
-                return nextState;
-            },
-        },
-    ],
-});

Create - Range Slider ​

AttributeTypeDescription
htmlString, ElementThe element's DOM element
iconString, ElementThe element's icon
rangeArrayDefault state array
onRangeFunctionEvent triggered upon completion
onChangeFunctionEvent triggered on change
tooltipStringTooltip text
js
const range = [5, 1, 10, 1];
-const value = range[0];
-const min = range[1];
-const max = range[2];
-const step = range[3];
`,4),y=i("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" height="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-            onChange: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                return item.range + 'x';
-            },
-        },
-    ],
-});

Add ​

`,2),o=i("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
-
-art.setting.show = true;
-
-art.setting.add({
-    html: 'Slider',
-    tooltip: '5x',
-    icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-    range: [5, 1, 10, 1],
-});

Delete ​

`,2),u=i("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-    settings: [
-        {
-            name: 'slider',
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-        },
-    ],
-});
-
-art.setting.show = true;
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the setting by name
-        art.setting.remove('slider');
-    }, 3000);
-});

Updates ​

`,2),C=i("div",{className:"run-code"},"▶ Run Code",-1),B=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            name: 'slider',
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-        },
-    ],
-});
-
-art.setting.show = true;
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the setting by name
-        art.setting.update({
-            name: 'slider',
-            html: 'PIP Mode',
-            tooltip: 'Close',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            switch: false,
-        });
-    }, 3000);
-});
`,1),_=[e,t,h,k,E,r,d,g,c,y,b,o,F,u,m,C,B];function A(v,D,S,T,q,f){return l(),n("div",null,_)}const R=a(p,[["render",A]]);export{w as __pageData,R as default}; diff --git a/docs/document/assets/en_component_setting.md.nFvHHMIg.lean.js b/docs/document/assets/en_component_setting.md.nFvHHMIg.lean.js deleted file mode 100644 index b425852e2..000000000 --- a/docs/document/assets/en_component_setting.md.nFvHHMIg.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const w=JSON.parse('{"title":"Settings Panel","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/setting.md","filePath":"en/component/setting.md","lastUpdated":1700976201000}'),p={name:"en/component/setting.md"},e=s("",3),t=i("div",{className:"run-code"},"▶ Run Code",-1),h=s("",4),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s("",2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",3),g=i("div",{className:"run-code"},"▶ Run Code",-1),c=s("",4),y=i("div",{className:"run-code"},"▶ Run Code",-1),b=s("",2),o=i("div",{className:"run-code"},"▶ Run Code",-1),F=s("",2),u=i("div",{className:"run-code"},"▶ Run Code",-1),m=s("",2),C=i("div",{className:"run-code"},"▶ Run Code",-1),B=s("",1),_=[e,t,h,k,E,r,d,g,c,y,b,o,F,u,m,C,B];function A(v,D,S,T,q,f){return l(),n("div",null,_)}const R=a(p,[["render",A]]);export{w as __pageData,R as default}; diff --git a/docs/document/assets/en_index.md.Rh7gVg1U.js b/docs/document/assets/en_index.md.Rh7gVg1U.js deleted file mode 100644 index 510ea6ec9..000000000 --- a/docs/document/assets/en_index.md.Rh7gVg1U.js +++ /dev/null @@ -1,173 +0,0 @@ -import{_ as s,c as i,o as a,R as n}from"./chunks/framework.0i_P4VHR.js";const y=JSON.parse('{"title":"Installation and Usage","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","filePath":"en/index.md","lastUpdated":1704849613000}'),l={name:"en/index.md"},p=n(`

Installation and Usage ​

Installation ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

Usage ​

js
import Artplayer from 'artplayer';
-
-const art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'path/to/video.mp4',
-});
html
<html>
-    <head>
-        <title>ArtPlayer Demo</title>
-        <meta charset="UTF-8" />
-        <style>
-            .artplayer-app {
-                width: 400px;
-                height: 300px;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app"></div>
-    </body>
-</html>

Warning

The player's size depends on the size of the container container, so your container container must have a size.

You can see more examples of use at the following link

/packages/artplayer-template

Vue.js ​

vue
<template>
-  <div ref="artRef"></div>
-</template>
-
-<script>
-import Artplayer from "artplayer";
-
-export default {
-  data() {
-    return {
-      instance: null,
-    };
-  },
-  props: {
-    option: {
-      type: Object,
-      required: true,
-    },
-  },
-  mounted() {
-    this.instance = new Artplayer({
-      ...this.option,
-      container: this.$refs.artRef,
-    });
-
-    this.$nextTick(() => {
-      this.$emit("get-instance", this.instance);
-    });
-  },
-  beforeDestroy() {
-    if (this.instance && this.instance.destroy) {
-      this.instance.destroy(false);
-    }
-  },
-};
-</script>
vue
<template>
-  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
-</template>
-
-<script>
-import Artplayer from "./Artplayer.vue";
-
-export default {
-  data() {
-    return {
-      option: {
-        url: "path/to/video.mp4",
-      },
-      style: {
-        width: "600px",
-        height: "400px",
-        margin: "60px auto 0",
-      },
-    };
-  },
-  components: {
-    Artplayer,
-  },
-  methods: {
-    getInstance(art) {
-      console.info(art);
-    },
-  },
-};
-</script>

Artplayer Not Responsive：

Modifying option directly in Vue.js will not change the player

React.js ​

jsx
import { useEffect, useRef } from 'react';
-import Artplayer from 'artplayer';
-
-export default function Player({ option, getInstance, ...rest }) {
-    const artRef = useRef();
-
-    useEffect(() => {
-        const art = new Artplayer({
-            ...option,
-            container: artRef.current,
-        });
-
-        if (getInstance && typeof getInstance === 'function') {
-            getInstance(art);
-        }
-
-        return () => {
-            if (art && art.destroy) {
-                art.destroy(false);
-            }
-        };
-    }, []);
-
-    return <div ref={artRef} {...rest}></div>;
-}
jsx
import React from 'react';
-import Artplayer from './ArtPlayer.jsx';
-
-function App() {
-    return (
-        <div>
-            <Artplayer
-                option={{
-                    url: 'https://artplayer.org/assets/sample/video.mp4',
-                }}
-                style={{
-                    width: '600px',
-                    height: '400px',
-                    margin: '60px auto 0',
-                }}
-                getInstance={(art) => console.info(art)}
-            />
-        </div>
-    );
-}
-
-export default App;

Non-responsive Artplayer:

In React.js, directly modifying the option will not change the player

TypeScript ​

Importing Artplayer will automatically import artplayer.d.ts

Vue.js ​

vue
<script setup>
-import Artplayer from 'artplayer';
-const art = ref<Artplayer>(null);
-art.value = new Artplayer();
-</script>

React.js ​

jsx
import Artplayer from 'artplayer';
-const art = useRef<Artplayer>(null);
-art.current = new Artplayer();

Option ​

you can also separately import the type for options

ts
import Artplayer from 'artplayer';
-import { type Option } from 'artplayer/types/option';
-
-const option: Option = {
-    container: '.artplayer-app',
-    url: './assets/sample/video.mp4',
-};
-
-option.volume = 0.5;
-
-const art = new Artplayer(option);

Complete TypeScript Definitions

packages/artplayer/types

JavaScript ​

Sometimes your js file may lose the TypeScript type hints, in this case, you can manually import the types

Variables:

js
/**
- * @type {import("artplayer")}
- */
-let art = null;

Parameters:

js
/**
- * @param {import("artplayer")} art
- */
-function getInstance(art) {
-  //
-}

Properties:

js
export default {
-  data() {
-    return {
-      /**
-       * @type {import("artplayer")}
-       */
-      art: null,
-    }
-  }
-}

Options:

js
/**
- * @type {import("artplayer/types/option").Option}
- */
-
-const option = {
-    container: '.artplayer-app',
-    url: './assets/sample/video.mp4',
-};
-
-option.volume = 0.5;
-
-const art8 = new Artplayer(option);

Ancient Browsers ​

The production build of artplayer.js is only compatible with the latest major version of Chrome: last 1 Chrome version

For ancient browsers, you can use the artplayer.legacy.js file, which is compatible up to: IE 11

js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

If you need to support even older browsers, please modify the following configuration and then build it yourself:

Build configuration: scripts/build.js

Refer to documentation: browserslist

`,41),e=[p];function t(h,k,r,E,d,c){return a(),i("div",null,e)}const b=s(l,[["render",t]]);export{y as __pageData,b as default}; diff --git a/docs/document/assets/en_index.md.Rh7gVg1U.lean.js b/docs/document/assets/en_index.md.Rh7gVg1U.lean.js deleted file mode 100644 index 990bf4d2e..000000000 --- a/docs/document/assets/en_index.md.Rh7gVg1U.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as s,c as i,o as a,R as n}from"./chunks/framework.0i_P4VHR.js";const y=JSON.parse('{"title":"Installation and Usage","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","filePath":"en/index.md","lastUpdated":1704849613000}'),l={name:"en/index.md"},p=n("",41),e=[p];function t(h,k,r,E,d,c){return a(),i("div",null,e)}const b=s(l,[["render",t]]);export{y as __pageData,b as default}; diff --git a/docs/document/assets/en_index.md.f106ccd1.js b/docs/document/assets/en_index.md.f106ccd1.js new file mode 100644 index 000000000..e284c2135 --- /dev/null +++ b/docs/document/assets/en_index.md.f106ccd1.js @@ -0,0 +1,173 @@ +import{_ as s,c as a,o as n,V as l}from"./chunks/framework.5c8808ab.js";const C=JSON.parse('{"title":"Installation and Usage","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","filePath":"en/index.md","lastUpdated":1704849613000}'),p={name:"en/index.md"},e=l(`

Installation and Usage ​

Installation ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

Usage ​

js
import Artplayer from 'artplayer';
+
+const art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'path/to/video.mp4',
+});
html
<html>
+    <head>
+        <title>ArtPlayer Demo</title>
+        <meta charset="UTF-8" />
+        <style>
+            .artplayer-app {
+                width: 400px;
+                height: 300px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app"></div>
+    </body>
+</html>

Warning

The player's size depends on the size of the container container, so your container container must have a size.

You can see more examples of use at the following link

/packages/artplayer-template

Vue.js ​

vue
<template>
+  <div ref="artRef"></div>
+</template>
+
+<script>
+import Artplayer from "artplayer";
+
+export default {
+  data() {
+    return {
+      instance: null,
+    };
+  },
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    this.instance = new Artplayer({
+      ...this.option,
+      container: this.$refs.artRef,
+    });
+
+    this.$nextTick(() => {
+      this.$emit("get-instance", this.instance);
+    });
+  },
+  beforeDestroy() {
+    if (this.instance && this.instance.destroy) {
+      this.instance.destroy(false);
+    }
+  },
+};
+</script>
vue
<template>
+  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
+</template>
+
+<script>
+import Artplayer from "./Artplayer.vue";
+
+export default {
+  data() {
+    return {
+      option: {
+        url: "path/to/video.mp4",
+      },
+      style: {
+        width: "600px",
+        height: "400px",
+        margin: "60px auto 0",
+      },
+    };
+  },
+  components: {
+    Artplayer,
+  },
+  methods: {
+    getInstance(art) {
+      console.info(art);
+    },
+  },
+};
+</script>

Artplayer Not Responsive：

Modifying option directly in Vue.js will not change the player

React.js ​

jsx
import { useEffect, useRef } from 'react';
+import Artplayer from 'artplayer';
+
+export default function Player({ option, getInstance, ...rest }) {
+    const artRef = useRef();
+
+    useEffect(() => {
+        const art = new Artplayer({
+            ...option,
+            container: artRef.current,
+        });
+
+        if (getInstance && typeof getInstance === 'function') {
+            getInstance(art);
+        }
+
+        return () => {
+            if (art && art.destroy) {
+                art.destroy(false);
+            }
+        };
+    }, []);
+
+    return <div ref={artRef} {...rest}></div>;
+}
jsx
import React from 'react';
+import Artplayer from './ArtPlayer.jsx';
+
+function App() {
+    return (
+        <div>
+            <Artplayer
+                option={{
+                    url: 'https://artplayer.org/assets/sample/video.mp4',
+                }}
+                style={{
+                    width: '600px',
+                    height: '400px',
+                    margin: '60px auto 0',
+                }}
+                getInstance={(art) => console.info(art)}
+            />
+        </div>
+    );
+}
+
+export default App;

Non-responsive Artplayer:

In React.js, directly modifying the option will not change the player

TypeScript ​

Importing Artplayer will automatically import artplayer.d.ts

Vue.js ​

vue
<script setup>
+import Artplayer from 'artplayer';
+const art = ref<Artplayer>(null);
+art.value = new Artplayer();
+</script>

React.js ​

jsx
import Artplayer from 'artplayer';
+const art = useRef<Artplayer>(null);
+art.current = new Artplayer();

Option ​

you can also separately import the type for options

ts
import Artplayer from 'artplayer';
+import { type Option } from 'artplayer/types/option';
+
+const option: Option = {
+    container: '.artplayer-app',
+    url: './assets/sample/video.mp4',
+};
+
+option.volume = 0.5;
+
+const art = new Artplayer(option);

Complete TypeScript Definitions

packages/artplayer/types

JavaScript ​

Sometimes your js file may lose the TypeScript type hints, in this case, you can manually import the types

Variables:

js
/**
+ * @type {import("artplayer")}
+ */
+let art = null;

Parameters:

js
/**
+ * @param {import("artplayer")} art
+ */
+function getInstance(art) {
+  //
+}

Properties:

js
export default {
+  data() {
+    return {
+      /**
+       * @type {import("artplayer")}
+       */
+      art: null,
+    }
+  }
+}

Options:

js
/**
+ * @type {import("artplayer/types/option").Option}
+ */
+
+const option = {
+    container: '.artplayer-app',
+    url: './assets/sample/video.mp4',
+};
+
+option.volume = 0.5;
+
+const art8 = new Artplayer(option);

Ancient Browsers ​

The production build of artplayer.js is only compatible with the latest major version of Chrome: last 1 Chrome version

For ancient browsers, you can use the artplayer.legacy.js file, which is compatible up to: IE 11

js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

If you need to support even older browsers, please modify the following configuration and then build it yourself:

Build configuration: scripts/build.js

Refer to documentation: browserslist

`,41),o=[e];function t(r,c,i,y,F,D){return n(),a("div",null,o)}const u=s(p,[["render",t]]);export{C as __pageData,u as default}; diff --git a/docs/document/assets/en_index.md.f106ccd1.lean.js b/docs/document/assets/en_index.md.f106ccd1.lean.js new file mode 100644 index 000000000..133ae3279 --- /dev/null +++ b/docs/document/assets/en_index.md.f106ccd1.lean.js @@ -0,0 +1 @@ +import{_ as s,c as a,o as n,V as l}from"./chunks/framework.5c8808ab.js";const C=JSON.parse('{"title":"Installation and Usage","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","filePath":"en/index.md","lastUpdated":1704849613000}'),p={name:"en/index.md"},e=l("",41),o=[e];function t(r,c,i,y,F,D){return n(),a("div",null,o)}const u=s(p,[["render",t]]);export{C as __pageData,u as default}; diff --git a/docs/document/assets/en_library_dash.md.Jpp-XowT.js b/docs/document/assets/en_library_dash.md.Jpp-XowT.js deleted file mode 100644 index 7f942ea39..000000000 --- a/docs/document/assets/en_library_dash.md.Jpp-XowT.js +++ /dev/null @@ -1,24 +0,0 @@ -import{_ as i,c as n,o as l,k as s,a,R as p}from"./chunks/framework.0i_P4VHR.js";const m=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/dash.md","filePath":"en/library/dash.md","lastUpdated":1700965824000}'),h={name:"en/library/dash.md"},t=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-label":'Permalink to "dash.js"'},"​")],-1),e=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),r=p(`
js
function playMpd(video, url, art) {
-    if (dashjs.supportsMediaSource()) {
-        if (art.dash) art.dash.destroy();
-        const dash = dashjs.MediaPlayer().create();
-        dash.initialize(video, url, art.option.autoplay);
-        art.dash = dash; 
-        art.on('destroy', () => dash.destroy());
-    } else {
-        art.notice.show = 'Unsupported playback format: mpd';
-    }
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
-    type: 'mpd',
-    customType: {
-        mpd: playMpd
-    },
-});
-
-art.on('ready', () => {
-    console.info(art.dash);
-});
`,1),E=[t,e,k,r];function d(c,y,g,o,b,F){return l(),n("div",null,E)}const _=i(h,[["render",d]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/en_library_dash.md.Jpp-XowT.lean.js b/docs/document/assets/en_library_dash.md.Jpp-XowT.lean.js deleted file mode 100644 index 074bab17a..000000000 --- a/docs/document/assets/en_library_dash.md.Jpp-XowT.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as i,c as n,o as l,k as s,a,R as p}from"./chunks/framework.0i_P4VHR.js";const m=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/dash.md","filePath":"en/library/dash.md","lastUpdated":1700965824000}'),h={name:"en/library/dash.md"},t=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-label":'Permalink to "dash.js"'},"​")],-1),e=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),r=p("",1),E=[t,e,k,r];function d(c,y,g,o,b,F){return l(),n("div",null,E)}const _=i(h,[["render",d]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/en_library_dash.md.e9cf5101.js b/docs/document/assets/en_library_dash.md.e9cf5101.js new file mode 100644 index 000000000..5a248da13 --- /dev/null +++ b/docs/document/assets/en_library_dash.md.e9cf5101.js @@ -0,0 +1,24 @@ +import{_ as n,c as l,o as p,z as s,a,V as o}from"./chunks/framework.5c8808ab.js";const u=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/dash.md","filePath":"en/library/dash.md","lastUpdated":1700965824000}'),e={name:"en/library/dash.md"},r=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-label":'Permalink to "dash.js"'},"​")],-1),t=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),y=o(`
js
function playMpd(video, url, art) {
+    if (dashjs.supportsMediaSource()) {
+        if (art.dash) art.dash.destroy();
+        const dash = dashjs.MediaPlayer().create();
+        dash.initialize(video, url, art.option.autoplay);
+        art.dash = dash; 
+        art.on('destroy', () => dash.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: mpd';
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
+    type: 'mpd',
+    customType: {
+        mpd: playMpd
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.dash);
+});
`,1),F=[r,t,c,y];function D(A,i,C,d,b,h){return p(),l("div",null,F)}const _=n(e,[["render",D]]);export{u as __pageData,_ as default}; diff --git a/docs/document/assets/en_library_dash.md.e9cf5101.lean.js b/docs/document/assets/en_library_dash.md.e9cf5101.lean.js new file mode 100644 index 000000000..9651d658b --- /dev/null +++ b/docs/document/assets/en_library_dash.md.e9cf5101.lean.js @@ -0,0 +1 @@ +import{_ as n,c as l,o as p,z as s,a,V as o}from"./chunks/framework.5c8808ab.js";const u=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/dash.md","filePath":"en/library/dash.md","lastUpdated":1700965824000}'),e={name:"en/library/dash.md"},r=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-label":'Permalink to "dash.js"'},"​")],-1),t=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),y=o("",1),F=[r,t,c,y];function D(A,i,C,d,b,h){return p(),l("div",null,F)}const _=n(e,[["render",D]]);export{u as __pageData,_ as default}; diff --git a/docs/document/assets/en_library_flv.md.86217f64.js b/docs/document/assets/en_library_flv.md.86217f64.js new file mode 100644 index 000000000..4695402be --- /dev/null +++ b/docs/document/assets/en_library_flv.md.86217f64.js @@ -0,0 +1,25 @@ +import{_ as a,c as l,o as p,z as s,a as n,V as o}from"./chunks/framework.5c8808ab.js";const u=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/flv.md","filePath":"en/library/flv.md","lastUpdated":1700965824000}'),e={name:"en/library/flv.md"},r=s("h1",{id:"flv-js",tabindex:"-1"},[n("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-label":'Permalink to "flv.js"'},"​")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),F=o(`
js
function playFlv(video, url, art) {
+    if (flvjs.isSupported()) {
+        if (art.flv) art.flv.destroy();
+        const flv = flvjs.createPlayer({ type: 'flv', url });
+        flv.attachMediaElement(video);
+        flv.load();
+        art.flv = flv; 
+        art.on('destroy', () => flv.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: flv';
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.flv',
+    type: 'flv',
+    customType: {
+        flv: playFlv,
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.flv);
+});
`,1),y=[r,t,c,F];function D(A,i,C,b,d,f){return p(),l("div",null,y)}const v=a(e,[["render",D]]);export{u as __pageData,v as default}; diff --git a/docs/document/assets/en_library_flv.md.86217f64.lean.js b/docs/document/assets/en_library_flv.md.86217f64.lean.js new file mode 100644 index 000000000..c9cdcb642 --- /dev/null +++ b/docs/document/assets/en_library_flv.md.86217f64.lean.js @@ -0,0 +1 @@ +import{_ as a,c as l,o as p,z as s,a as n,V as o}from"./chunks/framework.5c8808ab.js";const u=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/flv.md","filePath":"en/library/flv.md","lastUpdated":1700965824000}'),e={name:"en/library/flv.md"},r=s("h1",{id:"flv-js",tabindex:"-1"},[n("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-label":'Permalink to "flv.js"'},"​")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(A,i,C,b,d,f){return p(),l("div",null,y)}const v=a(e,[["render",D]]);export{u as __pageData,v as default}; diff --git a/docs/document/assets/en_library_flv.md.ishIQbK4.js b/docs/document/assets/en_library_flv.md.ishIQbK4.js deleted file mode 100644 index 619887394..000000000 --- a/docs/document/assets/en_library_flv.md.ishIQbK4.js +++ /dev/null @@ -1,25 +0,0 @@ -import{_ as a,c as n,o as l,k as s,a as i,R as p}from"./chunks/framework.0i_P4VHR.js";const m=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/flv.md","filePath":"en/library/flv.md","lastUpdated":1700965824000}'),h={name:"en/library/flv.md"},e=s("h1",{id:"flv-js",tabindex:"-1"},[i("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-label":'Permalink to "flv.js"'},"​")],-1),t=s("p",null,[i("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),r=p(`
js
function playFlv(video, url, art) {
-    if (flvjs.isSupported()) {
-        if (art.flv) art.flv.destroy();
-        const flv = flvjs.createPlayer({ type: 'flv', url });
-        flv.attachMediaElement(video);
-        flv.load();
-        art.flv = flv; 
-        art.on('destroy', () => flv.destroy());
-    } else {
-        art.notice.show = 'Unsupported playback format: flv';
-    }
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.flv',
-    type: 'flv',
-    customType: {
-        flv: playFlv,
-    },
-});
-
-art.on('ready', () => {
-    console.info(art.flv);
-});
`,1),E=[e,t,k,r];function d(c,y,g,b,o,F){return l(),n("div",null,E)}const f=a(h,[["render",d]]);export{m as __pageData,f as default}; diff --git a/docs/document/assets/en_library_flv.md.ishIQbK4.lean.js b/docs/document/assets/en_library_flv.md.ishIQbK4.lean.js deleted file mode 100644 index 8aa6db97f..000000000 --- a/docs/document/assets/en_library_flv.md.ishIQbK4.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,k as s,a as i,R as p}from"./chunks/framework.0i_P4VHR.js";const m=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/flv.md","filePath":"en/library/flv.md","lastUpdated":1700965824000}'),h={name:"en/library/flv.md"},e=s("h1",{id:"flv-js",tabindex:"-1"},[i("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-label":'Permalink to "flv.js"'},"​")],-1),t=s("p",null,[i("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),r=p("",1),E=[e,t,k,r];function d(c,y,g,b,o,F){return l(),n("div",null,E)}const f=a(h,[["render",d]]);export{m as __pageData,f as default}; diff --git a/docs/document/assets/en_library_hls.md.fbd5bf84.js b/docs/document/assets/en_library_hls.md.fbd5bf84.js new file mode 100644 index 000000000..aaadff18f --- /dev/null +++ b/docs/document/assets/en_library_hls.md.fbd5bf84.js @@ -0,0 +1,27 @@ +import{_ as a,c as l,o as p,z as s,a as n,V as o}from"./chunks/framework.5c8808ab.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/hls.md","filePath":"en/library/hls.md","lastUpdated":1700965824000}'),e={name:"en/library/hls.md"},r=s("h1",{id:"hls-js",tabindex:"-1"},[n("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-label":'Permalink to "hls.js"'},"​")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),F=o(`
js
function playM3u8(video, url, art) {
+    if (Hls.isSupported()) {
+        if (art.hls) art.hls.destroy();
+        const hls = new Hls();
+        hls.loadSource(url);
+        hls.attachMedia(video);
+        art.hls = hls;
+        art.on('destroy', () => hls.destroy());
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = url;
+    } else {
+        art.notice.show = 'Unsupported playback format: m3u8';
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+    type: 'm3u8',
+    customType: {
+        m3u8: playM3u8,
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.hls);
+});
`,1),y=[r,t,c,F];function D(A,i,C,b,u,d){return p(),l("div",null,y)}const _=a(e,[["render",D]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/en_library_hls.md.fbd5bf84.lean.js b/docs/document/assets/en_library_hls.md.fbd5bf84.lean.js new file mode 100644 index 000000000..f5c1d3e78 --- /dev/null +++ b/docs/document/assets/en_library_hls.md.fbd5bf84.lean.js @@ -0,0 +1 @@ +import{_ as a,c as l,o as p,z as s,a as n,V as o}from"./chunks/framework.5c8808ab.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/hls.md","filePath":"en/library/hls.md","lastUpdated":1700965824000}'),e={name:"en/library/hls.md"},r=s("h1",{id:"hls-js",tabindex:"-1"},[n("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-label":'Permalink to "hls.js"'},"​")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(A,i,C,b,u,d){return p(),l("div",null,y)}const _=a(e,[["render",D]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/en_library_hls.md.hGNwocGY.js b/docs/document/assets/en_library_hls.md.hGNwocGY.js deleted file mode 100644 index 884e72fd7..000000000 --- a/docs/document/assets/en_library_hls.md.hGNwocGY.js +++ /dev/null @@ -1,27 +0,0 @@ -import{_ as a,c as n,o as l,k as s,a as i,R as p}from"./chunks/framework.0i_P4VHR.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/hls.md","filePath":"en/library/hls.md","lastUpdated":1700965824000}'),h={name:"en/library/hls.md"},e=s("h1",{id:"hls-js",tabindex:"-1"},[i("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-label":'Permalink to "hls.js"'},"​")],-1),t=s("p",null,[i("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),r=p(`
js
function playM3u8(video, url, art) {
-    if (Hls.isSupported()) {
-        if (art.hls) art.hls.destroy();
-        const hls = new Hls();
-        hls.loadSource(url);
-        hls.attachMedia(video);
-        art.hls = hls;
-        art.on('destroy', () => hls.destroy());
-    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-        video.src = url;
-    } else {
-        art.notice.show = 'Unsupported playback format: m3u8';
-    }
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
-    type: 'm3u8',
-    customType: {
-        m3u8: playM3u8,
-    },
-});
-
-art.on('ready', () => {
-    console.info(art.hls);
-});
`,1),E=[e,t,k,r];function d(y,c,g,o,b,F){return l(),n("div",null,E)}const _=a(h,[["render",d]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/en_library_hls.md.hGNwocGY.lean.js b/docs/document/assets/en_library_hls.md.hGNwocGY.lean.js deleted file mode 100644 index 9ea0b93e8..000000000 --- a/docs/document/assets/en_library_hls.md.hGNwocGY.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,k as s,a as i,R as p}from"./chunks/framework.0i_P4VHR.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/hls.md","filePath":"en/library/hls.md","lastUpdated":1700965824000}'),h={name:"en/library/hls.md"},e=s("h1",{id:"hls-js",tabindex:"-1"},[i("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-label":'Permalink to "hls.js"'},"​")],-1),t=s("p",null,[i("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),r=p("",1),E=[e,t,k,r];function d(y,c,g,o,b,F){return l(),n("div",null,E)}const _=a(h,[["render",d]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/en_plugin_ads.md.58cff8db.js b/docs/document/assets/en_plugin_ads.md.58cff8db.js new file mode 100644 index 000000000..cf11069eb --- /dev/null +++ b/docs/document/assets/en_plugin_ads.md.58cff8db.js @@ -0,0 +1,48 @@ +import{_ as a,c as n,o as l,V as s,z as p}from"./chunks/framework.5c8808ab.js";const A=JSON.parse('{"title":"Video Ads","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/ads.md","filePath":"en/plugin/ads.md","lastUpdated":1700976201000}'),e={name:"en/plugin/ads.md"},o=s('

Video Ads ​

Demo ​

👉 View Full Demo

Installation ​

bash
npm install artplayer-plugin-ads
bash
yarn add artplayer-plugin-ads
bash
pnpm add artplayer-plugin-ads
html
<script src="path/to/artplayer-plugin-ads.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
bash
https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js

Usage ​

',8),r=p("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),t=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    plugins: [
+        artplayerPluginAds({
+            // HTML ad, ignored if it's a video ad
+            html: '<img src="/assets/sample/poster.jpg">',
+
+            // URL of the video ad
+            video: '/assets/sample/test1.mp4',
+
+            // Ad redirect URL, no redirection if empty
+            url: 'http://artplayer.org',
+
+            // The duration that must be watched, which can't be skipped, in seconds
+            // If this value is greater than or equal to totalDuration, the ad can't be closed early
+            // If this value is less than or equal to 0, then the ad can be closed at any time
+            playDuration: 5,
+
+            // Total duration of the ad, in seconds
+            totalDuration: 10,
+
+            // Whether the video ad is muted by default
+            muted: false,
+
+            // Multilingual support
+            i18n: {
+                close: 'Close ad',
+                countdown: '%s seconds',
+                detail: 'See details',
+                canBeClosed: '%s seconds until the ad can be closed',
+            },
+        }),
+    ],
+});
+
+// ad is clicked
+art.on('artplayerPluginAds:click', (ads) => {
+    console.info(ads);
+});
+
+// Ad skipped
+art.on('artplayerPluginAds:skip', (ads) => {
+    console.info(ads);
+});
`,1),c=[o,r,t];function i(y,D,F,d,C,b){return l(),n("div",null,c)}const m=a(e,[["render",i]]);export{A as __pageData,m as default}; diff --git a/docs/document/assets/en_plugin_ads.md.58cff8db.lean.js b/docs/document/assets/en_plugin_ads.md.58cff8db.lean.js new file mode 100644 index 000000000..9beacf58e --- /dev/null +++ b/docs/document/assets/en_plugin_ads.md.58cff8db.lean.js @@ -0,0 +1 @@ +import{_ as a,c as n,o as l,V as s,z as p}from"./chunks/framework.5c8808ab.js";const A=JSON.parse('{"title":"Video Ads","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/ads.md","filePath":"en/plugin/ads.md","lastUpdated":1700976201000}'),e={name:"en/plugin/ads.md"},o=s("",8),r=p("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),t=s("",1),c=[o,r,t];function i(y,D,F,d,C,b){return l(),n("div",null,c)}const m=a(e,[["render",i]]);export{A as __pageData,m as default}; diff --git a/docs/document/assets/en_plugin_ads.md.9yiWT-DL.js b/docs/document/assets/en_plugin_ads.md.9yiWT-DL.js deleted file mode 100644 index 9d64f01cf..000000000 --- a/docs/document/assets/en_plugin_ads.md.9yiWT-DL.js +++ /dev/null @@ -1,48 +0,0 @@ -import{_ as a,c as i,o as n,R as s,k as l}from"./chunks/framework.0i_P4VHR.js";const y=JSON.parse('{"title":"Video Ads","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/ads.md","filePath":"en/plugin/ads.md","lastUpdated":1700976201000}'),e={name:"en/plugin/ads.md"},p=s('

Video Ads ​

Demo ​

👉 View Full Demo

Installation ​

bash
npm install artplayer-plugin-ads
bash
yarn add artplayer-plugin-ads
bash
pnpm add artplayer-plugin-ads
html
<script src="path/to/artplayer-plugin-ads.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
bash
https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js

Usage ​

',8),t=l("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),h=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-    fullscreen: true,
-    fullscreenWeb: true,
-    plugins: [
-        artplayerPluginAds({
-            // HTML ad, ignored if it's a video ad
-            html: '<img src="/assets/sample/poster.jpg">',
-
-            // URL of the video ad
-            video: '/assets/sample/test1.mp4',
-
-            // Ad redirect URL, no redirection if empty
-            url: 'http://artplayer.org',
-
-            // The duration that must be watched, which can't be skipped, in seconds
-            // If this value is greater than or equal to totalDuration, the ad can't be closed early
-            // If this value is less than or equal to 0, then the ad can be closed at any time
-            playDuration: 5,
-
-            // Total duration of the ad, in seconds
-            totalDuration: 10,
-
-            // Whether the video ad is muted by default
-            muted: false,
-
-            // Multilingual support
-            i18n: {
-                close: 'Close ad',
-                countdown: '%s seconds',
-                detail: 'See details',
-                canBeClosed: '%s seconds until the ad can be closed',
-            },
-        }),
-    ],
-});
-
-// ad is clicked
-art.on('artplayerPluginAds:click', (ads) => {
-    console.info(ads);
-});
-
-// Ad skipped
-art.on('artplayerPluginAds:skip', (ads) => {
-    console.info(ads);
-});
`,1),r=[p,t,h];function k(d,c,E,o,b,g){return n(),i("div",null,r)}const m=a(e,[["render",k]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/en_plugin_ads.md.9yiWT-DL.lean.js b/docs/document/assets/en_plugin_ads.md.9yiWT-DL.lean.js deleted file mode 100644 index 72c98ef0c..000000000 --- a/docs/document/assets/en_plugin_ads.md.9yiWT-DL.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as i,o as n,R as s,k as l}from"./chunks/framework.0i_P4VHR.js";const y=JSON.parse('{"title":"Video Ads","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/ads.md","filePath":"en/plugin/ads.md","lastUpdated":1700976201000}'),e={name:"en/plugin/ads.md"},p=s("",8),t=l("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),h=s("",1),r=[p,t,h];function k(d,c,E,o,b,g){return n(),i("div",null,r)}const m=a(e,[["render",k]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/en_plugin_danmuku.md.7f61da0a.js b/docs/document/assets/en_plugin_danmuku.md.7f61da0a.js new file mode 100644 index 000000000..53b6e3fbd --- /dev/null +++ b/docs/document/assets/en_plugin_danmuku.md.7f61da0a.js @@ -0,0 +1,284 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const N=JSON.parse('{"title":"Danmuku","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/danmuku.md","filePath":"en/plugin/danmuku.md","lastUpdated":1700976934000}'),o={name:"en/plugin/danmuku.md"},e=s(`

Danmuku ​

Demo ​

👉 View Full Demo

Installation ​

bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js

Option ​

js
{
+    danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
+    speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
+    opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
+    fontSize: 25, // 字体大小，支持数字和百分比
+    color: '#FFFFFF', // 默认字体颜色
+    mode: 0, // 默认模式，0-滚动，1-静止
+    margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
+    antiOverlap: true, // 是否防重叠
+    useWorker: true, // 是否使用 web worker
+    synchronousPlayback: false, // 是否同步到播放速度
+    filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
+    lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
+    maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
+    minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
+    maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
+    theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
+    heatmap: true, // 是否开启弹幕热度图, 默认为 false
+    beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
+    // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
+    mount: document.querySelector('.artplayer-danmuku'),
+}

Using Danmuku Array ​

`,10),r=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),c=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            // Danmuku array
+            danmuku: [
+                {
+                    text: '111', // Danmuku text
+                    time: 1, // Send time, in seconds
+                    color: '#fff', // Danmuku local color
+                    border: false, // Whether to display outline
+                    mode: 0, // Danmuku mode: 0 for scrolling, 1 for stationary
+                },
+                {
+                    text: '222',
+                    time: 2,
+                    color: 'red',
+                    border: true,
+                    mode: 0,
+                },
+                {
+                    text: '333',
+                    time: 3,
+                    color: 'green',
+                    border: false,
+                    mode: 1,
+                },
+            ],
+        }),
+    ],
+});

Using Danmuku XML ​

`,2),t=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),D=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            // Danmuku XML file, consistent with the danmuku format of the Bilibili website
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});

Using Asynchronous Call ​

`,2),F=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),y=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            // Use Promise to return asynchronously
+            danmuku: function () {
+                return new Promise((resolve) => {
+                    return resolve([
+                        {
+                            text: '111',
+                            time: 1,
+                        },
+                        {
+                            text: '222',
+                            time: 2,
+                        },
+                        {
+                            text: '333',
+                            time: 3,
+                        },
+                    ]);
+                });
+            },
+        }),
+    ],
+});

hide/show ​

Hide or show the bullet comments with the methods hide and show.

`,3),i=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),C=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Hide Danmuku',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.hide();
+            },
+        },
+        {
+            position: 'right',
+            html: 'Show Danmuku',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.show();
+            },
+        },
+    ],
+});

isHide ​

Judge whether the current barrage is hidden or displayed with the isHide property.

`,3),A=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),u=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Hide Barrage',
+            click: function (_, event) {
+                if (art.plugins.artplayerPluginDanmuku.isHide) {
+                    art.plugins.artplayerPluginDanmuku.show();
+                    event.target.innerText = 'Hide Barrage';
+                } else {
+                    art.plugins.artplayerPluginDanmuku.hide();
+                    event.target.innerText = 'Show Barrage';
+                }
+            },
+        },
+    ],
+});

emit ​

Send a real-time danmaku message through the emit method

`,3),b=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),m=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Send Danmaku',
+            click: function () {
+                var text = prompt('Please enter the danmaku text', 'Danmaku test text');
+                if (!text || !text.trim()) return;
+                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
+                art.plugins.artplayerPluginDanmuku.emit({
+                    text: text,
+                    color: color,
+                    border: true,
+                });
+            },
+        },
+    ],
+});

config ​

Change the barrage configuration in real-time with the config method, supported attributes include:

  • danmuku
  • speed
  • opacity
  • fontSize
  • color
  • mode
  • margin
  • antiOverlap
  • synchronousPlayback
  • filter
  • lockTime
  • beforeEmit
`,4),d=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),h=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Danmaku size：<input type="range" min="12" max="50" step="1" value="25">',
+            style: {
+                display: 'flex',
+                alignItems: 'center',
+            },
+            mounted: function ($setting) {
+                const $range = $setting.querySelector('input[type=range]');
+                $range.addEventListener('change', () => {
+                    art.plugins.artplayerPluginDanmuku.config({
+                        fontSize: Number($range.value),
+                    });
+                });
+            },
+        },
+    ],
+});

load ​

The load method can be used to reload the danmu data source or switch to new danmu.

`,3),g=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),_=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Reload Danmu',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+        {
+            position: 'right',
+            html: 'Switch Danmu',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.config({
+                    danmuku: '/assets/sample/danmuku-v2.xml',
+                });
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+    ],
+});

reset ​

Used to clear the current displayed barrages

`,3),E=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),k=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('resize', () => {
+    art.plugins.artplayerPluginDanmuku.reset();
+});

option ​

Used to get the current barrage configuration

`,3),v=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),f=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('ready', () => {
+    console.info(art.plugins.artplayerPluginDanmuku.option);
+});

Event ​

js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('artplayerPluginDanmuku:emit', (danmu) => {
+    console.info('新增弹幕', danmu);
+});
+
+art.on('artplayerPluginDanmuku:loaded', (danmus) => {
+    console.info('加载弹幕', danmus.length);
+});
+
+art.on('artplayerPluginDanmuku:error', (error) => {
+    console.info('加载错误', error);
+});
+
+art.on('artplayerPluginDanmuku:config', (option) => {
+    console.info('配置变化', option);
+});
+
+art.on('artplayerPluginDanmuku:stop', () => {
+    console.info('弹幕停止');
+});
+
+art.on('artplayerPluginDanmuku:start', () => {
+    console.info('弹幕开始');
+});
+
+art.on('artplayerPluginDanmuku:hide', () => {
+    console.info('弹幕隐藏');
+});
+
+art.on('artplayerPluginDanmuku:show', () => {
+    console.info('弹幕显示');
+});
+
+art.on('artplayerPluginDanmuku:destroy', () => {
+    console.info('弹幕销毁');
+});
`,3),P=[e,r,c,t,D,F,y,i,C,A,u,b,m,d,h,g,_,E,k,v,f];function T(x,B,w,q,S,j){return p(),l("div",null,P)}const I=a(o,[["render",T]]);export{N as __pageData,I as default}; diff --git a/docs/document/assets/en_plugin_danmuku.md.7f61da0a.lean.js b/docs/document/assets/en_plugin_danmuku.md.7f61da0a.lean.js new file mode 100644 index 000000000..45a9230c8 --- /dev/null +++ b/docs/document/assets/en_plugin_danmuku.md.7f61da0a.lean.js @@ -0,0 +1 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const N=JSON.parse('{"title":"Danmuku","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/danmuku.md","filePath":"en/plugin/danmuku.md","lastUpdated":1700976934000}'),o={name:"en/plugin/danmuku.md"},e=s("",10),r=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),c=s("",2),t=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),D=s("",2),F=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),y=s("",3),i=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),C=s("",3),A=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),u=s("",3),b=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),m=s("",4),d=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),h=s("",3),g=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),_=s("",3),E=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),k=s("",3),v=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),f=s("",3),P=[e,r,c,t,D,F,y,i,C,A,u,b,m,d,h,g,_,E,k,v,f];function T(x,B,w,q,S,j){return p(),l("div",null,P)}const I=a(o,[["render",T]]);export{N as __pageData,I as default}; diff --git a/docs/document/assets/en_plugin_danmuku.md.JrPwnjtm.js b/docs/document/assets/en_plugin_danmuku.md.JrPwnjtm.js deleted file mode 100644 index df874a070..000000000 --- a/docs/document/assets/en_plugin_danmuku.md.JrPwnjtm.js +++ /dev/null @@ -1,284 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const I=JSON.parse('{"title":"Danmuku","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/danmuku.md","filePath":"en/plugin/danmuku.md","lastUpdated":1700976934000}'),p={name:"en/plugin/danmuku.md"},h=s(`

Danmuku ​

Demo ​

👉 View Full Demo

Installation ​

bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js

Option ​

js
{
-    danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
-    speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
-    opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
-    fontSize: 25, // 字体大小，支持数字和百分比
-    color: '#FFFFFF', // 默认字体颜色
-    mode: 0, // 默认模式，0-滚动，1-静止
-    margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
-    antiOverlap: true, // 是否防重叠
-    useWorker: true, // 是否使用 web worker
-    synchronousPlayback: false, // 是否同步到播放速度
-    filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
-    lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
-    maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
-    minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
-    maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
-    theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
-    heatmap: true, // 是否开启弹幕热度图, 默认为 false
-    beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
-    // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
-    mount: document.querySelector('.artplayer-danmuku'),
-}

Using Danmuku Array ​

`,10),e=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),k=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            // Danmuku array
-            danmuku: [
-                {
-                    text: '111', // Danmuku text
-                    time: 1, // Send time, in seconds
-                    color: '#fff', // Danmuku local color
-                    border: false, // Whether to display outline
-                    mode: 0, // Danmuku mode: 0 for scrolling, 1 for stationary
-                },
-                {
-                    text: '222',
-                    time: 2,
-                    color: 'red',
-                    border: true,
-                    mode: 0,
-                },
-                {
-                    text: '333',
-                    time: 3,
-                    color: 'green',
-                    border: false,
-                    mode: 1,
-                },
-            ],
-        }),
-    ],
-});

Using Danmuku XML ​

`,2),t=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),r=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            // Danmuku XML file, consistent with the danmuku format of the Bilibili website
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});

Using Asynchronous Call ​

`,2),E=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),d=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            // Use Promise to return asynchronously
-            danmuku: function () {
-                return new Promise((resolve) => {
-                    return resolve([
-                        {
-                            text: '111',
-                            time: 1,
-                        },
-                        {
-                            text: '222',
-                            time: 2,
-                        },
-                        {
-                            text: '333',
-                            time: 3,
-                        },
-                    ]);
-                });
-            },
-        }),
-    ],
-});

hide/show ​

Hide or show the bullet comments with the methods hide and show.

`,3),g=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),c=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: 'Hide Danmuku',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.hide();
-            },
-        },
-        {
-            position: 'right',
-            html: 'Show Danmuku',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.show();
-            },
-        },
-    ],
-});

isHide ​

Judge whether the current barrage is hidden or displayed with the isHide property.

`,3),y=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),u=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: 'Hide Barrage',
-            click: function (_, event) {
-                if (art.plugins.artplayerPluginDanmuku.isHide) {
-                    art.plugins.artplayerPluginDanmuku.show();
-                    event.target.innerText = 'Hide Barrage';
-                } else {
-                    art.plugins.artplayerPluginDanmuku.hide();
-                    event.target.innerText = 'Show Barrage';
-                }
-            },
-        },
-    ],
-});

emit ​

Send a real-time danmaku message through the emit method

`,3),b=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),m=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: 'Send Danmaku',
-            click: function () {
-                var text = prompt('Please enter the danmaku text', 'Danmaku test text');
-                if (!text || !text.trim()) return;
-                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
-                art.plugins.artplayerPluginDanmuku.emit({
-                    text: text,
-                    color: color,
-                    border: true,
-                });
-            },
-        },
-    ],
-});

config ​

Change the barrage configuration in real-time with the config method, supported attributes include:

  • danmuku
  • speed
  • opacity
  • fontSize
  • color
  • mode
  • margin
  • antiOverlap
  • synchronousPlayback
  • filter
  • lockTime
  • beforeEmit
`,4),o=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),F=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: 'Danmaku size：<input type="range" min="12" max="50" step="1" value="25">',
-            style: {
-                display: 'flex',
-                alignItems: 'center',
-            },
-            mounted: function ($setting) {
-                const $range = $setting.querySelector('input[type=range]');
-                $range.addEventListener('change', () => {
-                    art.plugins.artplayerPluginDanmuku.config({
-                        fontSize: Number($range.value),
-                    });
-                });
-            },
-        },
-    ],
-});

load ​

The load method can be used to reload the danmu data source or switch to new danmu.

`,3),C=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),B=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: 'Reload Danmu',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.load();
-            },
-        },
-        {
-            position: 'right',
-            html: 'Switch Danmu',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.config({
-                    danmuku: '/assets/sample/danmuku-v2.xml',
-                });
-                art.plugins.artplayerPluginDanmuku.load();
-            },
-        },
-    ],
-});

reset ​

Used to clear the current displayed barrages

`,3),D=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),v=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
-
-art.on('resize', () => {
-    art.plugins.artplayerPluginDanmuku.reset();
-});

option ​

Used to get the current barrage configuration

`,3),A=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),_=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
-
-art.on('ready', () => {
-    console.info(art.plugins.artplayerPluginDanmuku.option);
-});

Event ​

js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
-
-art.on('artplayerPluginDanmuku:emit', (danmu) => {
-    console.info('新增弹幕', danmu);
-});
-
-art.on('artplayerPluginDanmuku:loaded', (danmus) => {
-    console.info('加载弹幕', danmus.length);
-});
-
-art.on('artplayerPluginDanmuku:error', (error) => {
-    console.info('加载错误', error);
-});
-
-art.on('artplayerPluginDanmuku:config', (option) => {
-    console.info('配置变化', option);
-});
-
-art.on('artplayerPluginDanmuku:stop', () => {
-    console.info('弹幕停止');
-});
-
-art.on('artplayerPluginDanmuku:start', () => {
-    console.info('弹幕开始');
-});
-
-art.on('artplayerPluginDanmuku:hide', () => {
-    console.info('弹幕隐藏');
-});
-
-art.on('artplayerPluginDanmuku:show', () => {
-    console.info('弹幕显示');
-});
-
-art.on('artplayerPluginDanmuku:destroy', () => {
-    console.info('弹幕销毁');
-});
`,3),f=[h,e,k,t,r,E,d,g,c,y,u,b,m,o,F,C,B,D,v,A,_];function P(T,x,w,S,q,j){return l(),n("div",null,f)}const V=a(p,[["render",P]]);export{I as __pageData,V as default}; diff --git a/docs/document/assets/en_plugin_danmuku.md.JrPwnjtm.lean.js b/docs/document/assets/en_plugin_danmuku.md.JrPwnjtm.lean.js deleted file mode 100644 index 99be59d8b..000000000 --- a/docs/document/assets/en_plugin_danmuku.md.JrPwnjtm.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const I=JSON.parse('{"title":"Danmuku","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/danmuku.md","filePath":"en/plugin/danmuku.md","lastUpdated":1700976934000}'),p={name:"en/plugin/danmuku.md"},h=s("",10),e=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),k=s("",2),t=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),r=s("",2),E=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),d=s("",3),g=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),c=s("",3),y=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),u=s("",3),b=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),m=s("",4),o=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),F=s("",3),C=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),B=s("",3),D=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),v=s("",3),A=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),_=s("",3),f=[h,e,k,t,r,E,d,g,c,y,u,b,m,o,F,C,B,D,v,A,_];function P(T,x,w,S,q,j){return l(),n("div",null,f)}const V=a(p,[["render",P]]);export{I as __pageData,V as default}; diff --git a/docs/document/assets/en_plugin_dash-quality.md.6u3ORxbU.js b/docs/document/assets/en_plugin_dash-quality.md.6u3ORxbU.js deleted file mode 100644 index 3861ee264..000000000 --- a/docs/document/assets/en_plugin_dash-quality.md.6u3ORxbU.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as s,o as i,R as e}from"./chunks/framework.0i_P4VHR.js";const k=JSON.parse('{"title":"Dash Video Quality","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/dash-quality.md","filePath":"en/plugin/dash-quality.md","lastUpdated":1700976201000}'),t={name:"en/plugin/dash-quality.md"},l=e('

Dash Video Quality ​

Demo ​

👉 View the full demo

Installation ​

bash
npm install artplayer-plugin-dash-quality
bash
yarn add artplayer-plugin-dash-quality
bash
pnpm add artplayer-plugin-dash-quality
html
<script src="path/to/artplayer-plugin-dash-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
bash
https://unpkg.com/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
',7),n=[l];function p(d,r,h,o,c,u){return i(),s("div",null,n)}const g=a(t,[["render",p]]);export{k as __pageData,g as default}; diff --git a/docs/document/assets/en_plugin_dash-quality.md.6u3ORxbU.lean.js b/docs/document/assets/en_plugin_dash-quality.md.6u3ORxbU.lean.js deleted file mode 100644 index a89bd2640..000000000 --- a/docs/document/assets/en_plugin_dash-quality.md.6u3ORxbU.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as s,o as i,R as e}from"./chunks/framework.0i_P4VHR.js";const k=JSON.parse('{"title":"Dash Video Quality","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/dash-quality.md","filePath":"en/plugin/dash-quality.md","lastUpdated":1700976201000}'),t={name:"en/plugin/dash-quality.md"},l=e("",7),n=[l];function p(d,r,h,o,c,u){return i(),s("div",null,n)}const g=a(t,[["render",p]]);export{k as __pageData,g as default}; diff --git a/docs/document/assets/en_plugin_dash-quality.md.e4ac85b7.js b/docs/document/assets/en_plugin_dash-quality.md.e4ac85b7.js new file mode 100644 index 000000000..2b3612fbf --- /dev/null +++ b/docs/document/assets/en_plugin_dash-quality.md.e4ac85b7.js @@ -0,0 +1 @@ +import{_ as a,c as s,o as e,V as l}from"./chunks/framework.5c8808ab.js";const m=JSON.parse('{"title":"Dash Video Quality","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/dash-quality.md","filePath":"en/plugin/dash-quality.md","lastUpdated":1700976201000}'),n={name:"en/plugin/dash-quality.md"},t=l('

Dash Video Quality ​

Demo ​

👉 View the full demo

Installation ​

bash
npm install artplayer-plugin-dash-quality
bash
yarn add artplayer-plugin-dash-quality
bash
pnpm add artplayer-plugin-dash-quality
html
<script src="path/to/artplayer-plugin-dash-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
bash
https://unpkg.com/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
',7),p=[t];function i(o,r,d,c,u,h){return e(),s("div",null,p)}const y=a(n,[["render",i]]);export{m as __pageData,y as default}; diff --git a/docs/document/assets/en_plugin_dash-quality.md.e4ac85b7.lean.js b/docs/document/assets/en_plugin_dash-quality.md.e4ac85b7.lean.js new file mode 100644 index 000000000..ee3fc5a21 --- /dev/null +++ b/docs/document/assets/en_plugin_dash-quality.md.e4ac85b7.lean.js @@ -0,0 +1 @@ +import{_ as a,c as s,o as e,V as l}from"./chunks/framework.5c8808ab.js";const m=JSON.parse('{"title":"Dash Video Quality","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/dash-quality.md","filePath":"en/plugin/dash-quality.md","lastUpdated":1700976201000}'),n={name:"en/plugin/dash-quality.md"},t=l("",7),p=[t];function i(o,r,d,c,u,h){return e(),s("div",null,p)}const y=a(n,[["render",i]]);export{m as __pageData,y as default}; diff --git a/docs/document/assets/en_plugin_hls-quality.md.ASrjORd8.js b/docs/document/assets/en_plugin_hls-quality.md.ASrjORd8.js deleted file mode 100644 index 1094968bd..000000000 --- a/docs/document/assets/en_plugin_hls-quality.md.ASrjORd8.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as s,o as i,R as e}from"./chunks/framework.0i_P4VHR.js";const k=JSON.parse('{"title":"HLS Quality","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/hls-quality.md","filePath":"en/plugin/hls-quality.md","lastUpdated":1700976201000}'),l={name:"en/plugin/hls-quality.md"},t=e('

HLS Quality ​

Demonstration ​

👉 View the full demo

Installation ​

bash
npm install artplayer-plugin-hls-quality
bash
yarn add artplayer-plugin-hls-quality
bash
pnpm add artplayer-plugin-hls-quality
html
<script src="path/to/artplayer-plugin-hls-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
bash
https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
',7),n=[t];function p(r,d,h,o,c,u){return i(),s("div",null,n)}const g=a(l,[["render",p]]);export{k as __pageData,g as default}; diff --git a/docs/document/assets/en_plugin_hls-quality.md.ASrjORd8.lean.js b/docs/document/assets/en_plugin_hls-quality.md.ASrjORd8.lean.js deleted file mode 100644 index 588a21c9a..000000000 --- a/docs/document/assets/en_plugin_hls-quality.md.ASrjORd8.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as s,o as i,R as e}from"./chunks/framework.0i_P4VHR.js";const k=JSON.parse('{"title":"HLS Quality","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/hls-quality.md","filePath":"en/plugin/hls-quality.md","lastUpdated":1700976201000}'),l={name:"en/plugin/hls-quality.md"},t=e("",7),n=[t];function p(r,d,h,o,c,u){return i(),s("div",null,n)}const g=a(l,[["render",p]]);export{k as __pageData,g as default}; diff --git a/docs/document/assets/en_plugin_hls-quality.md.f81c5868.js b/docs/document/assets/en_plugin_hls-quality.md.f81c5868.js new file mode 100644 index 000000000..e0bd52d43 --- /dev/null +++ b/docs/document/assets/en_plugin_hls-quality.md.f81c5868.js @@ -0,0 +1 @@ +import{_ as a,c as s,o as l,V as e}from"./chunks/framework.5c8808ab.js";const y=JSON.parse('{"title":"HLS Quality","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/hls-quality.md","filePath":"en/plugin/hls-quality.md","lastUpdated":1700976201000}'),n={name:"en/plugin/hls-quality.md"},t=e('

HLS Quality ​

Demonstration ​

👉 View the full demo

Installation ​

bash
npm install artplayer-plugin-hls-quality
bash
yarn add artplayer-plugin-hls-quality
bash
pnpm add artplayer-plugin-hls-quality
html
<script src="path/to/artplayer-plugin-hls-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
bash
https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
',7),p=[t];function i(r,o,c,d,u,h){return l(),s("div",null,p)}const m=a(n,[["render",i]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/en_plugin_hls-quality.md.f81c5868.lean.js b/docs/document/assets/en_plugin_hls-quality.md.f81c5868.lean.js new file mode 100644 index 000000000..01da00ef8 --- /dev/null +++ b/docs/document/assets/en_plugin_hls-quality.md.f81c5868.lean.js @@ -0,0 +1 @@ +import{_ as a,c as s,o as l,V as e}from"./chunks/framework.5c8808ab.js";const y=JSON.parse('{"title":"HLS Quality","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/hls-quality.md","filePath":"en/plugin/hls-quality.md","lastUpdated":1700976201000}'),n={name:"en/plugin/hls-quality.md"},t=e("",7),p=[t];function i(r,o,c,d,u,h){return l(),s("div",null,p)}const m=a(n,[["render",i]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/en_plugin_iframe.md.353a1a79.js b/docs/document/assets/en_plugin_iframe.md.353a1a79.js new file mode 100644 index 000000000..f293fcffd --- /dev/null +++ b/docs/document/assets/en_plugin_iframe.md.353a1a79.js @@ -0,0 +1,166 @@ +import{_ as s,c as n,o as a,V as l}from"./chunks/framework.5c8808ab.js";const A=JSON.parse('{"title":"Iframe Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/iframe.md","filePath":"en/plugin/iframe.md","lastUpdated":1700976201000}'),p={name:"en/plugin/iframe.md"},o=l(`

Iframe Control ​

Description ​

With this plugin, you can easily control the player inside the cross-domain iframe.html page from within index.html. For example, you can control the functionalities of the iframe.html player from index.html or retrieve the values of the iframe.html player.

Demonstration ​

👉 View full demonstration

Installation ​

bash
npm install artplayer-plugin-iframe
bash
yarn add artplayer-plugin-iframe
bash
pnpm add artplayer-plugin-iframe
html
<script src="path/to/artplayer-plugin-iframe.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
bash
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js

Usage ​

html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <iframe id="iframe"></iframe>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            const iframe = new ArtplayerPluginIframe({
+                // Iframe element
+                iframe: document.querySelector('#iframe'),
+                // Iframe url
+                url: 'path/to/iframe.html',
+            });
+
+            // Send message to iframe
+            iframe.commit(() => {
+                var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: 'path/to/video.mp4',
+                });
+            });
+        </script>
+    </body>
+</html>
html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            // Inject scripts to receive messages from instances
+            ArtplayerPluginIframe.inject();
+        </script>
+    </body>
+</html>

index.html Interface ​

commit ​

Push messages from index.html to iframe.html. This function will run inside iframe.html and can also be used to asynchronously retrieve values from within iframe.html.

js
iframe.commit(() => {
+    var art = new Artplayer({
+        container: '.artplayer-app',
+        url: 'path/to/video.mp4',
+    });
+});
+
+iframe.commit(() => {
+    art.seek = 5;
+});
+
+// Get the value from the iframe.html
+(async function () {
+    // Use the return keyword
+    var currentTime = await iframe.commit(() => {
+        return art.currentTime;
+    });
+
+    // or use the resolve method
+    var currentTime2 = await iframe.commit((resolve) => {
+        setTimeout(() => {
+            resolve(art.currentTime);
+        }, 1000);
+    });
+})();

message ​

Receive messages from iframe.html in index.html

js
iframe.message((event) => {
+    console.info(event);
+});

destroy ​

After destruction, index.html can no longer communicate with iframe.html

js
iframe.destroy();

iframe.html Interface ​

Warning

The iframe.html interface can only run inside iframe.html

inject ​

Inject a script, receive messages from index.html

js
ArtplayerPluginIframe.inject();

postMessage ​

Push messages to index.html

js
iframe.message((event) => {
+    console.info(event);
+});
+
+iframe.commit(() => {
+    ArtplayerPluginIframe.postMessage({
+        type: 'currentTime',
+        data: art.currentTime,
+    });
+});

例子 ​

最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 iframe.html 里的 fullscreenWeb 事件并通知到 index.html 即可

html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <iframe id="iframe"></iframe>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <style>
+            .fullscreenWeb {
+                position: fixed;
+                z-index: 9999;
+                width: 100%;
+                height: 100%;
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+            }
+        </style>
+        <script>
+            const $iframe = document.querySelector('#iframe');
+            const iframe = new ArtplayerPluginIframe({
+                iframe: $iframe,
+                url: 'path/to/iframe.html',
+            });
+
+            iframe.message(({ type, data }) => {
+                switch (type) {
+                    case 'fullscreenWeb':
+                        if (data) {
+                            $iframe.classList.add('fullscreenWeb');
+                        } else {
+                            $iframe.classList.remove('fullscreenWeb');
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            });
+
+            iframe.commit(() => {
+                var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: 'path/to/video.mp4',
+                });
+
+                art.on('fullscreenWeb', (state) => {
+                    ArtplayerPluginIframe.postMessage({
+                        type: 'fullscreenWeb',
+                        data: state,
+                    });
+                });
+            });
+        </script>
+    </body>
+</html>
html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            ArtplayerPluginIframe.inject();
+        </script>
+    </body>
+</html>
`,32),e=[o];function r(t,c,F,D,y,i){return a(),n("div",null,e)}const b=s(p,[["render",r]]);export{A as __pageData,b as default}; diff --git a/docs/document/assets/en_plugin_iframe.md.353a1a79.lean.js b/docs/document/assets/en_plugin_iframe.md.353a1a79.lean.js new file mode 100644 index 000000000..ab10f6c2c --- /dev/null +++ b/docs/document/assets/en_plugin_iframe.md.353a1a79.lean.js @@ -0,0 +1 @@ +import{_ as s,c as n,o as a,V as l}from"./chunks/framework.5c8808ab.js";const A=JSON.parse('{"title":"Iframe Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/iframe.md","filePath":"en/plugin/iframe.md","lastUpdated":1700976201000}'),p={name:"en/plugin/iframe.md"},o=l("",32),e=[o];function r(t,c,F,D,y,i){return a(),n("div",null,e)}const b=s(p,[["render",r]]);export{A as __pageData,b as default}; diff --git a/docs/document/assets/en_plugin_iframe.md.4Juyzc_J.js b/docs/document/assets/en_plugin_iframe.md.4Juyzc_J.js deleted file mode 100644 index 25bc31762..000000000 --- a/docs/document/assets/en_plugin_iframe.md.4Juyzc_J.js +++ /dev/null @@ -1,168 +0,0 @@ -import{_ as s,c as i,o as a,R as n}from"./chunks/framework.0i_P4VHR.js";const y=JSON.parse('{"title":"Iframe Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/iframe.md","filePath":"en/plugin/iframe.md","lastUpdated":1700976201000}'),l={name:"en/plugin/iframe.md"},p=n(`

Iframe Control ​

Description ​

With this plugin, you can easily control the player inside the cross-domain iframe.html page from within index.html. For example, you can control the functionalities of the iframe.html player from index.html or retrieve the values of the iframe.html player.

Demonstration ​

👉 View full demonstration

Installation ​

bash
npm install artplayer-plugin-iframe
bash
yarn add artplayer-plugin-iframe
bash
pnpm add artplayer-plugin-iframe
html
<script src="path/to/artplayer-plugin-iframe.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
bash
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js

Usage ​

html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-    </head>
-    <body>
-        <iframe id="iframe"></iframe>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            const iframe = new ArtplayerPluginIframe({
-                // Iframe element
-                iframe: document.querySelector('#iframe'),
-                // Iframe url
-                url: 'path/to/iframe.html',
-            });
-
-            // Send message to iframe
-            iframe.commit(() => {
-                var art = new Artplayer({
-                    container: '.artplayer-app',
-                    url: 'path/to/video.mp4',
-                });
-            });
-        </script>
-    </body>
-</html>
html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-        <style>
-            html,
-            body {
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                padding: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
-        <script src="path/to/artplayer.js"></script>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            // Inject scripts to receive messages from instances
-            ArtplayerPluginIframe.inject();
-        </script>
-    </body>
-</html>

index.html Interface ​

commit ​

Push messages from index.html to iframe.html. This function will run inside iframe.html and can also be used to asynchronously retrieve values from within iframe.html.

js
iframe.commit(() => {
-    var art = new Artplayer({
-        container: '.artplayer-app',
-        url: 'path/to/video.mp4',
-    });
-});
-
-iframe.commit(() => {
-    art.seek = 5;
-});
-
-// Get the value from the iframe.html
-(async function () {
-    // Use the return keyword
-    var currentTime = await iframe.commit(() => {
-        return art.currentTime;
-    });
-
-    // or use the resolve method
-    var currentTime2 = await iframe.commit((resolve) => {
-        setTimeout(() => {
-            resolve(art.currentTime);
-        }, 1000);
-    });
-})();

message ​

Receive messages from iframe.html in index.html

js
iframe.message((event) => {
-    console.info(event);
-});

destroy ​

After destruction, index.html can no longer communicate with iframe.html

js
iframe.destroy();

iframe.html Interface ​

Warning

The iframe.html interface can only run inside iframe.html

inject ​

Inject a script, receive messages from index.html

js
ArtplayerPluginIframe.inject();

postMessage ​

Push messages to index.html

js
iframe.message((event) => {
-    console.info(event);
-});
-
-iframe.commit(() => {
-    ArtplayerPluginIframe.postMessage({
-        type: 'currentTime',
-        data: art.currentTime,
-    });
-});

例子 ​

最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 iframe.html 里的 fullscreenWeb 事件并通知到 index.html 即可

html

-<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-    </head>
-    <body>
-        <iframe id="iframe"></iframe>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <style>
-            .fullscreenWeb {
-                position: fixed;
-                z-index: 9999;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                right: 0;
-                bottom: 0;
-            }
-        </style>
-        <script>
-            const $iframe = document.querySelector('#iframe');
-            const iframe = new ArtplayerPluginIframe({
-                iframe: $iframe,
-                url: 'path/to/iframe.html',
-            });
-
-            iframe.message(({ type, data }) => {
-                switch (type) {
-                    case 'fullscreenWeb':
-                        if (data) {
-                            $iframe.classList.add('fullscreenWeb');
-                        } else {
-                            $iframe.classList.remove('fullscreenWeb');
-                        }
-                        break;
-                    default:
-                        break;
-                }
-            });
-
-            iframe.commit(() => {
-                var art = new Artplayer({
-                    container: '.artplayer-app',
-                    url: 'path/to/video.mp4',
-                });
-
-                art.on('fullscreenWeb', (state) => {
-                    ArtplayerPluginIframe.postMessage({
-                        type: 'fullscreenWeb',
-                        data: state,
-                    });
-                });
-            });
-        </script>
-    </body>
-</html>
html

-<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-        <style>
-            html,
-            body {
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                padding: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
-        <script src="path/to/artplayer.js"></script>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            ArtplayerPluginIframe.inject();
-        </script>
-    </body>
-</html>
`,32),h=[p];function e(t,k,r,E,d,g){return a(),i("div",null,h)}const b=s(l,[["render",e]]);export{y as __pageData,b as default}; diff --git a/docs/document/assets/en_plugin_iframe.md.4Juyzc_J.lean.js b/docs/document/assets/en_plugin_iframe.md.4Juyzc_J.lean.js deleted file mode 100644 index 9d59c43b0..000000000 --- a/docs/document/assets/en_plugin_iframe.md.4Juyzc_J.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as s,c as i,o as a,R as n}from"./chunks/framework.0i_P4VHR.js";const y=JSON.parse('{"title":"Iframe Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/iframe.md","filePath":"en/plugin/iframe.md","lastUpdated":1700976201000}'),l={name:"en/plugin/iframe.md"},p=n("",32),h=[p];function e(t,k,r,E,d,g){return a(),i("div",null,h)}const b=s(l,[["render",e]]);export{y as __pageData,b as default}; diff --git a/docs/document/assets/en_start_i18n.md.3dd9042d.js b/docs/document/assets/en_start_i18n.md.3dd9042d.js new file mode 100644 index 000000000..7d17bdc76 --- /dev/null +++ b/docs/document/assets/en_start_i18n.md.3dd9042d.js @@ -0,0 +1,52 @@ +import{_ as s,c as a,o as n,V as l}from"./chunks/framework.5c8808ab.js";const A=JSON.parse('{"title":"Language Settings","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/i18n.md","filePath":"en/start/i18n.md","lastUpdated":1700976201000}'),p={name:"en/start/i18n.md"},e=l(`

Language Settings ​

DANGER

Given the increasing number of bundled multilingual packs, starting from version 5.1.0, the core code of artplayer.js will no longer include other languages besides Simplified Chinese and English. You need to import the required languages on your own.

WARNING

When a language cannot be matched, English will be displayed by default. For i18n usage, refer to: artplayer/types/i18n.d.ts

Default Languages ​

The default languages are: en, zh-cn, which do not require manual import.

js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'zh-cn', // or 'en'
+});

Importing Languages ​

Language files before packaging are located in: artplayer/src/i18n/*.js. You are welcome to add your language. Packaged language files are located at: artplayer/dist/i18n/*.js

Manually imported languages include: cs, es, fa, fr, id, pl, ru, zh-tw

js
import id from 'artplayer/dist/i18n/id.js';
+import zhTw from 'artplayer/dist/i18n/zh-tw.js';
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: { 
+        id: id,
+        'zh-tw': zhTw,
+    },
+    lang: 'zh-tw',
+});
js
<script src="artplayer/dist/i18n/id.js"></script>
+<script src="artplayer/dist/i18n/zh-tw.js"></script>
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: { 
+        id: window['artplayer-i18n-id'],
+        'zh-tw': window['artplayer-i18n-zh-tw'],
+    },
+    lang: 'zh-tw',
+});

Add Language ​

js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'your-lang',
+    i18n: {
+        'your-lang': {
+            Play: 'Your Play'
+        },
+    },
+});

Modify Language ​

js
import zhTw from 'artplayer/i18n/zh-tw.js';
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: {
+        // Change the default language
+        'zh-cn': {
+            Play: 'Your Play'
+        },
+        // Change the imported language
+        'zh-tw': {
+            ...zhTw,
+            Play: 'Your Play'
+        },
+    },
+});
`,14),o=[e];function r(t,c,D,y,F,i){return n(),a("div",null,o)}const d=s(p,[["render",r]]);export{A as __pageData,d as default}; diff --git a/docs/document/assets/en_start_i18n.md.3dd9042d.lean.js b/docs/document/assets/en_start_i18n.md.3dd9042d.lean.js new file mode 100644 index 000000000..a4c3fcedc --- /dev/null +++ b/docs/document/assets/en_start_i18n.md.3dd9042d.lean.js @@ -0,0 +1 @@ +import{_ as s,c as a,o as n,V as l}from"./chunks/framework.5c8808ab.js";const A=JSON.parse('{"title":"Language Settings","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/i18n.md","filePath":"en/start/i18n.md","lastUpdated":1700976201000}'),p={name:"en/start/i18n.md"},e=l("",14),o=[e];function r(t,c,D,y,F,i){return n(),a("div",null,o)}const d=s(p,[["render",r]]);export{A as __pageData,d as default}; diff --git a/docs/document/assets/en_start_i18n.md.U7_kdB72.js b/docs/document/assets/en_start_i18n.md.U7_kdB72.js deleted file mode 100644 index 7ab024323..000000000 --- a/docs/document/assets/en_start_i18n.md.U7_kdB72.js +++ /dev/null @@ -1,52 +0,0 @@ -import{_ as s,c as a,o as i,R as n}from"./chunks/framework.0i_P4VHR.js";const o=JSON.parse('{"title":"Language Settings","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/i18n.md","filePath":"en/start/i18n.md","lastUpdated":1700976201000}'),l={name:"en/start/i18n.md"},e=n(`

Language Settings ​

DANGER

Given the increasing number of bundled multilingual packs, starting from version 5.1.0, the core code of artplayer.js will no longer include other languages besides Simplified Chinese and English. You need to import the required languages on your own.

WARNING

When a language cannot be matched, English will be displayed by default. For i18n usage, refer to: artplayer/types/i18n.d.ts

Default Languages ​

The default languages are: en, zh-cn, which do not require manual import.

js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'zh-cn', // or 'en'
-});

Importing Languages ​

Language files before packaging are located in: artplayer/src/i18n/*.js. You are welcome to add your language. Packaged language files are located at: artplayer/dist/i18n/*.js

Manually imported languages include: cs, es, fa, fr, id, pl, ru, zh-tw

js
import id from 'artplayer/dist/i18n/id.js';
-import zhTw from 'artplayer/dist/i18n/zh-tw.js';
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: { 
-        id: id,
-        'zh-tw': zhTw,
-    },
-    lang: 'zh-tw',
-});
js
<script src="artplayer/dist/i18n/id.js"></script>
-<script src="artplayer/dist/i18n/zh-tw.js"></script>
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: { 
-        id: window['artplayer-i18n-id'],
-        'zh-tw': window['artplayer-i18n-zh-tw'],
-    },
-    lang: 'zh-tw',
-});

Add Language ​

js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'your-lang',
-    i18n: {
-        'your-lang': {
-            Play: 'Your Play'
-        },
-    },
-});

Modify Language ​

js
import zhTw from 'artplayer/i18n/zh-tw.js';
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: {
-        // Change the default language
-        'zh-cn': {
-            Play: 'Your Play'
-        },
-        // Change the imported language
-        'zh-tw': {
-            ...zhTw,
-            Play: 'Your Play'
-        },
-    },
-});
`,14),p=[e];function h(t,r,k,d,E,g){return i(),a("div",null,p)}const y=s(l,[["render",h]]);export{o as __pageData,y as default}; diff --git a/docs/document/assets/en_start_i18n.md.U7_kdB72.lean.js b/docs/document/assets/en_start_i18n.md.U7_kdB72.lean.js deleted file mode 100644 index 1b855af7a..000000000 --- a/docs/document/assets/en_start_i18n.md.U7_kdB72.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as s,c as a,o as i,R as n}from"./chunks/framework.0i_P4VHR.js";const o=JSON.parse('{"title":"Language Settings","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/i18n.md","filePath":"en/start/i18n.md","lastUpdated":1700976201000}'),l={name:"en/start/i18n.md"},e=n("",14),p=[e];function h(t,r,k,d,E,g){return i(),a("div",null,p)}const y=s(l,[["render",h]]);export{o as __pageData,y as default}; diff --git a/docs/document/assets/en_start_option.md.4c3bbf55.js b/docs/document/assets/en_start_option.md.4c3bbf55.js new file mode 100644 index 000000000..daac1a06f --- /dev/null +++ b/docs/document/assets/en_start_option.md.4c3bbf55.js @@ -0,0 +1,380 @@ +import{_ as n,c as l,o as p,V as s,z as a}from"./chunks/framework.5c8808ab.js";const ra=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1700976201000}'),e={name:"en/start/option.md"},o=s('

Basic Options ​

container ​

  • Type: String, Element
  • Default: #artplayer

The DOM container where the player mounts

',4),t=a("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app', 
+    // container: document.querySelector('.artplayer-app'),
+    url: '/assets/sample/video.mp4',
+});

You may need to initialize the size of the container element, like:

css
.artplayer-app {
+    width: 400px;
+    height: 300px;
+}

Or use aspect-ratio:

css
.artplayer-app {
+    aspect-ratio: 16/9;
+}

Tip

Among all options, only container is mandatory.

url ​

  • Type: String
  • Default: ''

The video source address

`,9),c=a("div",{className:"run-code"},"▶ Run Code",-1),i=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

Sometimes the url is not known so quickly, in which case you can set the url asynchronously.

`,2),D=a("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+});
+
+setTimeout(() => {
+    art.url = '/assets/sample/video.mp4';
+}, 1000);

Note

The default support is for three video file formats: .mp4, .ogg, .webm.

If you need to play other formats such as .m3u8 or .flv, please refer to the Third-party Libraries on the left side.

id ​

  • Type: String
  • Default: ''

The unique identifier of the player, currently used only for remembering playback with autoplayback

`,5),F=a("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
+    id: 'your-url-id',
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

onReady ​

  • Type: Function
  • Default: undefined

The constructor accepts a function as the second argument, which is triggered when the player is successfully initialized and the video is ready to play, similar to the ready event

`,4),A=a("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer(
+    {
+        container: '.artplayer-app',
+        url: '/assets/sample/video.mp4',
+        muted: true,
+    },
+    function onReady(art) {
+        this.play()
+    },
+);

Equivalent to:

js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    art.play();
+});

Warning

The this inside the callback function refers to the player instance, but if an arrow function is used for the callback, this will not point to the player instance.

poster ​

  • Type: String
  • Default: ''

The poster of the video, which only appears when the player is initialized and before it starts playing.

`,7),h=a("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    poster: '/assets/sample/poster.jpg',
+});

theme ​

  • Type: String
  • Default: #f00

Player theme color, currently used for progress bar and highlight elements

`,4),b=a("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    theme: '#ffad00',
+});

volume ​

  • Type: Number
  • Default: 0.7

The default volume of the player

`,4),g=a("div",{className:"run-code"},"▶ Run Code",-1),_=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    volume: 0.5,
+});

Warning

The player will cache the size of the last volume. When the player is initialized next time (such as refreshing the page), it will read this cached value.

isLive ​

  • Type: Boolean
  • Default: false

Use live mode, which will hide the progress bar and playback time

`,5),v=a("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    isLive: true,
+});

muted ​

  • Type: Boolean
  • Default: false

Whether to mute by default

`,4),f=a("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});

autoplay ​

  • Type: Boolean
  • Default: false

Whether to play automatically

  • Default: false

Autoplay

`,6),S=a("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoplay: true,
+    muted: true,
+});

Warning

If you want the video to autoplay by default upon entering the page, muted must be set to true. For more information, please read Autoplay Policy Changes

autoSize ​

  • Type: Boolean
  • Default: false

The size of the player will by default fill the entire container, which often results in black bars. This value can automatically adjust the player size to hide the black bars, similar to css's object-fit: cover;

`,5),k=a("div",{className:"run-code"},"▶ Run Code",-1),P=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+});

autoMini ​

  • Type: Boolean
  • Default: false

Automatically enter mini mode when the player scrolls out of the browser viewport

`,4),R=a("div",{className:"run-code"},"▶ Run Code",-1),q=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoMini: true,
+});

loop ​

  • Type: Boolean
  • Default: false

Whether to loop the video

`,4),V=a("div",{className:"run-code"},"▶ Run Code",-1),I=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    loop: true,
+});

flip ​

  • Type: Boolean
  • Default: false

Whether to show the video flip feature, currently only available in Settings Panel and Context Menu

`,4),j=a("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    flip: true,
+    setting: true,
+});

playbackRate ​

  • Type: Boolean
  • Default: false

Whether to show the playback speed feature of the video, it will appear in Settings Panel and Context Menu

`,4),x=a("div",{className:"run-code"},"▶ Run Code",-1),B=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    playbackRate: true,
+    setting: true,
+});

aspectRatio ​

  • Type: Boolean
  • Default: false

Displays the video aspect ratio feature, it will appear in the Settings Panel and Context Menu

`,4),W=a("div",{className:"run-code"},"▶ Run Code",-1),z=s(`
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 the screenshot button, it will appear in the toolbar and context menu Display Screenshot function in the bottom control bar

`,4),O=a("div",{className:"run-code"},"▶ Run Code",-1),M=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    screenshot: true,
+});

Warning

Due to browser security mechanisms, if the video source address and the website are cross-origin, screenshot failure may occur

setting ​

  • Type: Boolean
  • Default: false

Display the toggle button for the Settings Panel in the bottom control bar

`,5),L=a("div",{className:"run-code"},"▶ Run Code",-1),H=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});

hotkey ​

  • Type: Boolean
  • Default: true

Whether to use hotkeys

`,4),U=a("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    hotkey: true,
+});
HotkeyDescription
↑Increase volume
↓Decrease volume
←Fast forward video
→Rewind video
spaceToggle play/pause

Tip

These hotkeys will only work after the player gains focus (such as after clicking on the player).

pip ​

  • Type: Boolean
  • Default: false Show the Picture in Picture switch button on the bottom control bar
`,5),Y=a("div",{className:"run-code"},"▶ Run Code",-1),Q=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    pip: true,
+});

mutex ​

  • Type: Boolean
  • Default: true

If there are multiple players on the page, should only one player be allowed to play at a time

`,4),J=a("div",{className:"run-code"},"▶ Run Code",-1),G=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    mutex: true,
+});

fullscreen ​

  • Type: Boolean
  • Default: false Display the Window Fullscreen button on the control bar at the bottom
`,3),K=a("div",{className:"run-code"},"▶ Run Code",-1),X=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+});

fullscreenWeb ​

  • Type: Boolean
  • Default: false

Display the Web Fullscreen button on the control bar at the bottom

`,4),Z=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});

subtitleOffset ​

  • Type: Boolean

  • Default: false

Subtitle time offset, the range is [-5s, 5s], appearing in the Settings panel

`,4),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitleOffset: true,
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+    setting: true,
+});

miniProgressBar ​

  • Type: Boolean
  • Default: false

Mini progress bar, only appears when the player loses focus and is playing

`,4),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    miniProgressBar: true,
+});

useSSR ​

  • Type: Boolean
  • Default: false

Whether to use SSR (Server-Side Rendering) mount mode, useful if you want to pre-render the player's required HTML before the player mounts

You can access the player's required HTML through Artplayer.html

`,5),es=a("div",{className:"run-code"},"▶ Run Code",-1),os=s(`
js
var $container = document.querySelector('.artplayer-app');
+$container.innerHTML = Artplayer.html;
+
+var art = new Artplayer({
+    container: $container,
+    url: '/assets/sample/video.mp4',
+    useSSR: true,
+});

playsInline ​

  • Type: Boolean
  • Default: true

Whether to use playsInline mode on mobile devices

`,4),ts=a("div",{className:"run-code"},"▶ Run Code",-1),rs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    playsInline: true,
+});

layers ​

  • Type: Array
  • Default: []

Initializes custom layers

`,4),cs=a("div",{className:"run-code"},"▶ Run Code",-1),is=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'poster',
+            html: \`<img style="width: 100px" src="\${img}">\`,
+            style: {
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+                opacity: '.9',
+            },
+            click: function (...args) {
+                console.info('click', args);
+                art.layers.show = false;
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+    ],
+});

Component Configuration Please refer to the following address:

/component/layers.html

settings ​

  • Type: Array
  • Default: []

Initializes custom settings panel

`,5),Ds=a("div",{className:"run-code"},"▶ Run Code",-1),ys=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'setting01',
+            selector: [
+                {
+                    html: 'setting01-01',
+                },
+                {
+                    html: 'setting01-02',
+                },
+            ],
+            onSelect: function (...args) {
+                console.info(args);
+            },
+        },
+        {
+            html: 'setting02',
+            selector: [
+                {
+                    html: 'setting02-01',
+                },
+                {
+                    html: 'setting02-02',
+                },
+            ],
+            onSelect: function (...args) {
+                console.info(args);
+            },
+        },
+    ],
+});

Settings Panel Please refer to the following address

/component/setting.html

contextmenu ​

  • Type: Array
  • Default: []

Initialize custom context menu

`,5),Fs=a("div",{className:"run-code"},"▶ Run Code",-1),Cs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            html: 'your-menu',
+            click: function (...args) {
+                console.info('click', args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});

Component Configuration Please refer to the following address:

/component/contextmenu.html- Type:

controls ​

  • Type: Array
  • Default: []

Initializes custom bottom control bar

`,5),As=a("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'left',
+            html: 'your-control',
+            tooltip: 'Your Control',
+            style: {
+                color: 'green',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+        },
+    ],
+});

Component Configuration Refer to the following address:

/component/controls.html

quality ​

  • Type: Array
  • Default: []

Whether to show the quality selection list in the bottom control bar

PropertyTypeDescription
defaultBooleanDefault quality
htmlStringQuality name
urlStringQuality URL
`,6),hs=a("div",{className:"run-code"},"▶ Run Code",-1),us=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    quality: [
+        {
+            default: true,
+            html: 'SD 480P',
+            url: '/assets/sample/video.mp4',
+        },
+        {
+            html: 'HD 720P',
+            url: '/assets/sample/video.mp4',
+        },
+    ],
+});

highlight ​

  • Type: Array
  • Default: []

Show highlight information on the progress bar

PropertyTypeDescription
timeNumberHighlight time (in seconds)
textStringHighlight text
`,5),bs=a("div",{className:"run-code"},"▶ Run Code",-1),ms=s(`
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: '－－终わり－－',
+        },
+    ],
+});

plugins ​

  • Type: Array
  • Default: []

Initialize custom plugins

`,4),gs=a("div",{className:"run-code"},"▶ Run Code",-1),_s=s(`
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [myPlugin],
+});

thumbnails ​

  • Type: Object
  • Default: {}

Set thumbnails on the progress bar

PropertyTypeDescription
urlStringThumbnail URL
numberNumberNumber of thumbnails
columnNumberColumns of thumbnails
widthNumberThumbnail width
heightNumberThumbnail height
`,5),vs=a("div",{className:"run-code"},"▶ Run Code",-1),Ts=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    thumbnails: {
+        url: '/assets/sample/thumbnails.png',
+        number: 60,
+        column: 10,
+    },
+});

Online thumbnail generation

artplayer-tool-thumbnail

subtitle ​

  • Type: Object
  • Default: {}

Set the video subtitles, supporting subtitle formats: vtt, srt, ass

PropertyTypeDescription
nameStringSubtitle name
urlStringSubtitle URL
typeStringSubtitle type, options: vtt, srt, ass

| style | Object | Subtitle style | | encoding | String | Subtitle encoding, default utf-8 | | escape | Boolean | Whether to escape html tags, default true | | onVttLoad | Function | Function to modify vtt text |

`,7),fs=a("div",{className:"run-code"},"▶ Run Code",-1),Es=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+        type: 'srt',
+        encoding: 'utf-8',
+        escape: true,
+        style: {
+            color: '#03A9F4',
+            'font-size': '30px',
+        },
+    },
+});

moreVideoAttr ​

  • Type: Object
  • Default: {'controls': false, 'preload': 'metadata'}

Additional video attributes, these attributes will be directly written into the video element

`,4),Ss=a("div",{className:"run-code"},"▶ Run Code",-1),ws=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    moreVideoAttr: {
+        'webkit-playsinline': true,
+        playsInline: true,
+    },
+});

icons ​

  • Type: Object
  • Default: {}

Used to replace default icons, supports Html strings and HTMLElement

`,4),ks=a("div",{className:"run-code"},"▶ Run Code",-1),Ps=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    icons: {
+        loading: '<img src="/assets/img/loading.gif">',
+        state: '<img src="/assets/img/state.png">',
+    },
+});

Definition of all icons

artplayer/types/icons.d.ts

type ​

  • Type: String
  • Default: ''

Used to specify the format of the video, which is used in conjunction with customType. By default, the video format is the same as the file extension of the video URL (such as .m3u8, .mkv, .ts). However, sometimes the video URL does not have the correct file extension, so it needs to be specifically stated.

`,5),Rs=a("div",{className:"run-code"},"▶ Run Code",-1),qs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.m3u8',
+    type: 'm3u8',
+});

Recognition of file extensions

The player can only parse this type of file extension: /assets/sample/video.m3u8

But it cannot parse this type of file extension: /assets/sample/video?type=m3u8

Therefore, if you use customType, it is best to specify type as well

customType ​

  • Type: Object
  • Default: {}

Matches the video's type to delegate the video decoding to a third-party program for processing. The processing function can receive three parameters:

  • video: Video DOM element
  • url: Video address
  • art: Current instance
`,6),Vs=a("div",{className:"run-code"},"▶ Run Code",-1),Is=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.m3u8',
+    customType: {
+        m3u8: function (video, url, art) {
+            //
+        },
+    },
+});

lang ​

  • Type: String
  • Default: navigator.language.toLowerCase()

Default display language, currently supports: en, zh-cn

`,4),js=a("div",{className:"run-code"},"▶ Run Code",-1),Ns=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'en',
+});

More language settings

/start/i18n.html

i18n ​

  • Type: Object
  • Default: {}

Custom i18n configuration, which will be deeply merged with the built-in i18n

Add your language:

`,6),xs=a("div",{className:"run-code"},"▶ Run Code",-1),Bs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'your-lang',
+    i18n: {
+        'your-lang': {
+            Play: 'Your Play'
+        },
+    },
+});

Modifying the existing language

`,2),Ws=a("div",{className:"run-code"},"▶ Run Code",-1),zs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: {
+        'zh-cn': {
+            Play: 'Your Play'
+        },
+        'zh-tw': {
+            Play: 'Your Play'
+        },
+    },
+});

More language settings

/start/i18n.html

lock ​

  • Type: Boolean
  • Default: false

Whether to display a lock button on mobile to hide the bottom control bar

`,5),Os=a("div",{className:"run-code"},"▶ Run Code",-1),Ms=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lock: true,
+});

fastForward ​

  • Type: Boolean
  • Default: false

Whether to add fast forward function by long pressing on the video on mobile devices

`,4),Ls=a("div",{className:"run-code"},"▶ Run Code",-1),Hs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});

autoPlayback ​

  • Type: Boolean
  • Default: false

Whether to use the automatic playback feature

`,4),Us=a("div",{className:"run-code"},"▶ Run Code",-1),$s=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    id: 'your-url-id',
+    autoPlayback: true,
+});

Warning

Because the player by default uses url as the key to cache the playback progress

But if the url of the same video is different, then you need to use id to identify the unique key of the video

autoOrientation ​

  • Type: Boolean
  • Default: false

Whether to rotate the player on mobile web pages in full screen according to the video size and the viewport dimensions

`,5),Ys=a("div",{className:"run-code"},"▶ Run Code",-1),Qs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoOrientation: true,
+});

airplay ​

  • Type: Boolean
  • Default: false

Whether to display the airplay button, currently only some browsers support this feature

`,4),Js=a("div",{className:"run-code"},"▶ Run Code",-1),Gs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    airplay: true,
+});

cssVar ​

  • Type: Object
  • Default: {}

Used to change built-in CSS variables

`,4),Ks=a("div",{className:"run-code"},"▶ Run Code",-1),Xs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    cssVar: {
+        //
+    },
+});

Reference for cssVar syntax

artplayer/types/cssVar.d.ts

`,2),Zs=[o,t,r,c,i,D,y,F,C,A,d,h,u,b,m,g,_,v,T,f,E,S,w,k,P,R,q,V,I,j,N,x,B,W,z,O,M,L,H,U,$,Y,Q,J,G,K,X,Z,ss,as,ns,ls,ps,es,os,ts,rs,cs,is,Ds,ys,Fs,Cs,As,ds,hs,us,bs,ms,gs,_s,vs,Ts,fs,Es,Ss,ws,ks,Ps,Rs,qs,Vs,Is,js,Ns,xs,Bs,Ws,zs,Os,Ms,Ls,Hs,Us,$s,Ys,Qs,Js,Gs,Ks,Xs];function sa(aa,na,la,pa,ea,oa){return p(),l("div",null,Zs)}const ca=n(e,[["render",sa]]);export{ra as __pageData,ca as default}; diff --git a/docs/document/assets/en_start_option.md.4c3bbf55.lean.js b/docs/document/assets/en_start_option.md.4c3bbf55.lean.js new file mode 100644 index 000000000..48e77d7c4 --- /dev/null +++ b/docs/document/assets/en_start_option.md.4c3bbf55.lean.js @@ -0,0 +1 @@ +import{_ as n,c as l,o as p,V as s,z as a}from"./chunks/framework.5c8808ab.js";const ra=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1700976201000}'),e={name:"en/start/option.md"},o=s("",4),t=a("div",{className:"run-code"},"▶ Run Code",-1),r=s("",9),c=a("div",{className:"run-code"},"▶ Run Code",-1),i=s("",2),D=a("div",{className:"run-code"},"▶ Run Code",-1),y=s("",5),F=a("div",{className:"run-code"},"▶ Run Code",-1),C=s("",4),A=a("div",{className:"run-code"},"▶ Run Code",-1),d=s("",7),h=a("div",{className:"run-code"},"▶ Run Code",-1),u=s("",4),b=a("div",{className:"run-code"},"▶ Run Code",-1),m=s("",4),g=a("div",{className:"run-code"},"▶ Run Code",-1),_=s("",5),v=a("div",{className:"run-code"},"▶ Run Code",-1),T=s("",4),f=a("div",{className:"run-code"},"▶ Run Code",-1),E=s("",6),S=a("div",{className:"run-code"},"▶ Run Code",-1),w=s("",5),k=a("div",{className:"run-code"},"▶ Run Code",-1),P=s("",4),R=a("div",{className:"run-code"},"▶ Run Code",-1),q=s("",4),V=a("div",{className:"run-code"},"▶ Run Code",-1),I=s("",4),j=a("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),x=a("div",{className:"run-code"},"▶ Run Code",-1),B=s("",4),W=a("div",{className:"run-code"},"▶ Run Code",-1),z=s("",4),O=a("div",{className:"run-code"},"▶ Run Code",-1),M=s("",5),L=a("div",{className:"run-code"},"▶ Run Code",-1),H=s("",4),U=a("div",{className:"run-code"},"▶ Run Code",-1),$=s("",5),Y=a("div",{className:"run-code"},"▶ Run Code",-1),Q=s("",4),J=a("div",{className:"run-code"},"▶ Run Code",-1),G=s("",3),K=a("div",{className:"run-code"},"▶ Run Code",-1),X=s("",4),Z=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s("",4),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",5),es=a("div",{className:"run-code"},"▶ Run Code",-1),os=s("",4),ts=a("div",{className:"run-code"},"▶ Run Code",-1),rs=s("",4),cs=a("div",{className:"run-code"},"▶ Run Code",-1),is=s("",5),Ds=a("div",{className:"run-code"},"▶ Run Code",-1),ys=s("",5),Fs=a("div",{className:"run-code"},"▶ Run Code",-1),Cs=s("",5),As=a("div",{className:"run-code"},"▶ Run Code",-1),ds=s("",6),hs=a("div",{className:"run-code"},"▶ Run Code",-1),us=s("",5),bs=a("div",{className:"run-code"},"▶ Run Code",-1),ms=s("",4),gs=a("div",{className:"run-code"},"▶ Run Code",-1),_s=s("",5),vs=a("div",{className:"run-code"},"▶ Run Code",-1),Ts=s("",7),fs=a("div",{className:"run-code"},"▶ Run Code",-1),Es=s("",4),Ss=a("div",{className:"run-code"},"▶ Run Code",-1),ws=s("",4),ks=a("div",{className:"run-code"},"▶ Run Code",-1),Ps=s("",5),Rs=a("div",{className:"run-code"},"▶ Run Code",-1),qs=s("",6),Vs=a("div",{className:"run-code"},"▶ Run Code",-1),Is=s("",4),js=a("div",{className:"run-code"},"▶ Run Code",-1),Ns=s("",6),xs=a("div",{className:"run-code"},"▶ Run Code",-1),Bs=s("",2),Ws=a("div",{className:"run-code"},"▶ Run Code",-1),zs=s("",5),Os=a("div",{className:"run-code"},"▶ Run Code",-1),Ms=s("",4),Ls=a("div",{className:"run-code"},"▶ Run Code",-1),Hs=s("",4),Us=a("div",{className:"run-code"},"▶ Run Code",-1),$s=s("",5),Ys=a("div",{className:"run-code"},"▶ Run Code",-1),Qs=s("",4),Js=a("div",{className:"run-code"},"▶ Run Code",-1),Gs=s("",4),Ks=a("div",{className:"run-code"},"▶ Run Code",-1),Xs=s("",2),Zs=[o,t,r,c,i,D,y,F,C,A,d,h,u,b,m,g,_,v,T,f,E,S,w,k,P,R,q,V,I,j,N,x,B,W,z,O,M,L,H,U,$,Y,Q,J,G,K,X,Z,ss,as,ns,ls,ps,es,os,ts,rs,cs,is,Ds,ys,Fs,Cs,As,ds,hs,us,bs,ms,gs,_s,vs,Ts,fs,Es,Ss,ws,ks,Ps,Rs,qs,Vs,Is,js,Ns,xs,Bs,Ws,zs,Os,Ms,Ls,Hs,Us,$s,Ys,Qs,Js,Gs,Ks,Xs];function sa(aa,na,la,pa,ea,oa){return p(),l("div",null,Zs)}const ca=n(e,[["render",sa]]);export{ra as __pageData,ca as default}; diff --git a/docs/document/assets/en_start_option.md.bVliSlll.js b/docs/document/assets/en_start_option.md.bVliSlll.js deleted file mode 100644 index 724bf7efd..000000000 --- a/docs/document/assets/en_start_option.md.bVliSlll.js +++ /dev/null @@ -1,380 +0,0 @@ -import{_ as a,c as n,o as e,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const hi=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1700976201000}'),l={name:"en/start/option.md"},p=s('

Basic Options ​

container ​

  • Type: String, Element
  • Default: #artplayer

The DOM container where the player mounts

',4),t=i("div",{className:"run-code"},"▶ Run Code",-1),h=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app', 
-    // container: document.querySelector('.artplayer-app'),
-    url: '/assets/sample/video.mp4',
-});

You may need to initialize the size of the container element, like:

css
.artplayer-app {
-    width: 400px;
-    height: 300px;
-}

Or use aspect-ratio:

css
.artplayer-app {
-    aspect-ratio: 16/9;
-}

Tip

Among all options, only container is mandatory.

url ​

  • Type: String
  • Default: ''

The video source address

`,9),r=i("div",{className:"run-code"},"▶ Run Code",-1),k=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

Sometimes the url is not known so quickly, in which case you can set the url asynchronously.

`,2),d=i("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-});
-
-setTimeout(() => {
-    art.url = '/assets/sample/video.mp4';
-}, 1000);

Note

The default support is for three video file formats: .mp4, .ogg, .webm.

If you need to play other formats such as .m3u8 or .flv, please refer to the Third-party Libraries on the left side.

id ​

  • Type: String
  • Default: ''

The unique identifier of the player, currently used only for remembering playback with autoplayback

`,5),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s(`
js
var art = new Artplayer({
-    id: 'your-url-id',
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

onReady ​

  • Type: Function
  • Default: undefined

The constructor accepts a function as the second argument, which is triggered when the player is successfully initialized and the video is ready to play, similar to the ready event

`,4),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer(
-    {
-        container: '.artplayer-app',
-        url: '/assets/sample/video.mp4',
-        muted: true,
-    },
-    function onReady(art) {
-        this.play()
-    },
-);

Equivalent to:

js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    art.play();
-});

Warning

The this inside the callback function refers to the player instance, but if an arrow function is used for the callback, this will not point to the player instance.

poster ​

  • Type: String
  • Default: ''

The poster of the video, which only appears when the player is initialized and before it starts playing.

`,7),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    poster: '/assets/sample/poster.jpg',
-});

theme ​

  • Type: String
  • Default: #f00

Player theme color, currently used for progress bar and highlight elements

`,4),m=i("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    theme: '#ffad00',
-});

volume ​

  • Type: Number
  • Default: 0.7

The default volume of the player

`,4),_=i("div",{className:"run-code"},"▶ Run Code",-1),v=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    volume: 0.5,
-});

Warning

The player will cache the size of the last volume. When the player is initialized next time (such as refreshing the page), it will read this cached value.

isLive ​

  • Type: Boolean
  • Default: false

Use live mode, which will hide the progress bar and playback time

`,5),C=i("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    isLive: true,
-});

muted ​

  • Type: Boolean
  • Default: false

Whether to mute by default

`,4),T=i("div",{className:"run-code"},"▶ Run Code",-1),B=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});

autoplay ​

  • Type: Boolean
  • Default: false

Whether to play automatically

  • Default: false

Autoplay

`,6),f=i("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoplay: true,
-    muted: true,
-});

Warning

If you want the video to autoplay by default upon entering the page, muted must be set to true. For more information, please read Autoplay Policy Changes

autoSize ​

  • Type: Boolean
  • Default: false

The size of the player will by default fill the entire container, which often results in black bars. This value can automatically adjust the player size to hide the black bars, similar to css's object-fit: cover;

`,5),S=i("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-});

autoMini ​

  • Type: Boolean
  • Default: false

Automatically enter mini mode when the player scrolls out of the browser viewport

`,4),P=i("div",{className:"run-code"},"▶ Run Code",-1),R=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoMini: true,
-});

loop ​

  • Type: Boolean
  • Default: false

Whether to loop the video

`,4),q=i("div",{className:"run-code"},"▶ Run Code",-1),I=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    loop: true,
-});

flip ​

  • Type: Boolean
  • Default: false

Whether to show the video flip feature, currently only available in Settings Panel and Context Menu

`,4),V=i("div",{className:"run-code"},"▶ Run Code",-1),j=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    flip: true,
-    setting: true,
-});

playbackRate ​

  • Type: Boolean
  • Default: false

Whether to show the playback speed feature of the video, it will appear in Settings Panel and Context Menu

`,4),N=i("div",{className:"run-code"},"▶ Run Code",-1),x=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    playbackRate: true,
-    setting: true,
-});

aspectRatio ​

  • Type: Boolean
  • Default: false

Displays the video aspect ratio feature, it will appear in the Settings Panel and Context Menu

`,4),W=i("div",{className:"run-code"},"▶ Run Code",-1),z=s(`
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 the screenshot button, it will appear in the toolbar and context menu Display Screenshot function in the bottom control bar

`,4),O=i("div",{className:"run-code"},"▶ Run Code",-1),M=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    screenshot: true,
-});

Warning

Due to browser security mechanisms, if the video source address and the website are cross-origin, screenshot failure may occur

setting ​

  • Type: Boolean
  • Default: false

Display the toggle button for the Settings Panel in the bottom control bar

`,5),L=i("div",{className:"run-code"},"▶ Run Code",-1),H=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});

hotkey ​

  • Type: Boolean
  • Default: true

Whether to use hotkeys

`,4),U=i("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    hotkey: true,
-});
HotkeyDescription
↑Increase volume
↓Decrease volume
←Fast forward video
→Rewind video
spaceToggle play/pause

Tip

These hotkeys will only work after the player gains focus (such as after clicking on the player).

pip ​

  • Type: Boolean
  • Default: false Show the Picture in Picture switch button on the bottom control bar
`,5),Y=i("div",{className:"run-code"},"▶ Run Code",-1),Q=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    pip: true,
-});

mutex ​

  • Type: Boolean
  • Default: true

If there are multiple players on the page, should only one player be allowed to play at a time

`,4),J=i("div",{className:"run-code"},"▶ Run Code",-1),G=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    mutex: true,
-});

fullscreen ​

  • Type: Boolean
  • Default: false Display the Window Fullscreen button on the control bar at the bottom
`,3),K=i("div",{className:"run-code"},"▶ Run Code",-1),X=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-});

fullscreenWeb ​

  • Type: Boolean
  • Default: false

Display the Web Fullscreen button on the control bar at the bottom

`,4),Z=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});

subtitleOffset ​

  • Type: Boolean

  • Default: false

Subtitle time offset, the range is [-5s, 5s], appearing in the Settings panel

`,4),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitleOffset: true,
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-    setting: true,
-});

miniProgressBar ​

  • Type: Boolean
  • Default: false

Mini progress bar, only appears when the player loses focus and is playing

`,4),ns=i("div",{className:"run-code"},"▶ Run Code",-1),es=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    miniProgressBar: true,
-});

useSSR ​

  • Type: Boolean
  • Default: false

Whether to use SSR (Server-Side Rendering) mount mode, useful if you want to pre-render the player's required HTML before the player mounts

You can access the player's required HTML through Artplayer.html

`,5),ls=i("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
var $container = document.querySelector('.artplayer-app');
-$container.innerHTML = Artplayer.html;
-
-var art = new Artplayer({
-    container: $container,
-    url: '/assets/sample/video.mp4',
-    useSSR: true,
-});

playsInline ​

  • Type: Boolean
  • Default: true

Whether to use playsInline mode on mobile devices

`,4),ts=i("div",{className:"run-code"},"▶ Run Code",-1),hs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    playsInline: true,
-});

layers ​

  • Type: Array
  • Default: []

Initializes custom layers

`,4),rs=i("div",{className:"run-code"},"▶ Run Code",-1),ks=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'poster',
-            html: \`<img style="width: 100px" src="\${img}">\`,
-            style: {
-                position: 'absolute',
-                top: '20px',
-                right: '20px',
-                opacity: '.9',
-            },
-            click: function (...args) {
-                console.info('click', args);
-                art.layers.show = false;
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-    ],
-});

Component Configuration Please refer to the following address:

/component/layers.html

settings ​

  • Type: Array
  • Default: []

Initializes custom settings panel

`,5),ds=i("div",{className:"run-code"},"▶ Run Code",-1),Es=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'setting01',
-            selector: [
-                {
-                    html: 'setting01-01',
-                },
-                {
-                    html: 'setting01-02',
-                },
-            ],
-            onSelect: function (...args) {
-                console.info(args);
-            },
-        },
-        {
-            html: 'setting02',
-            selector: [
-                {
-                    html: 'setting02-01',
-                },
-                {
-                    html: 'setting02-02',
-                },
-            ],
-            onSelect: function (...args) {
-                console.info(args);
-            },
-        },
-    ],
-});

Settings Panel Please refer to the following address

/component/setting.html

contextmenu ​

  • Type: Array
  • Default: []

Initialize custom context menu

`,5),cs=i("div",{className:"run-code"},"▶ Run Code",-1),os=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            html: 'your-menu',
-            click: function (...args) {
-                console.info('click', args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});

Component Configuration Please refer to the following address:

/component/contextmenu.html- Type:

controls ​

  • Type: Array
  • Default: []

Initializes custom bottom control bar

`,5),gs=i("div",{className:"run-code"},"▶ Run Code",-1),ys=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'left',
-            html: 'your-control',
-            tooltip: 'Your Control',
-            style: {
-                color: 'green',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-        },
-    ],
-});

Component Configuration Refer to the following address:

/component/controls.html

quality ​

  • Type: Array
  • Default: []

Whether to show the quality selection list in the bottom control bar

PropertyTypeDescription
defaultBooleanDefault quality
htmlStringQuality name
urlStringQuality URL
`,6),us=i("div",{className:"run-code"},"▶ Run Code",-1),bs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    quality: [
-        {
-            default: true,
-            html: 'SD 480P',
-            url: '/assets/sample/video.mp4',
-        },
-        {
-            html: 'HD 720P',
-            url: '/assets/sample/video.mp4',
-        },
-    ],
-});

highlight ​

  • Type: Array
  • Default: []

Show highlight information on the progress bar

PropertyTypeDescription
timeNumberHighlight time (in seconds)
textStringHighlight text
`,5),ms=i("div",{className:"run-code"},"▶ Run Code",-1),Fs=s(`
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: '－－终わり－－',
-        },
-    ],
-});

plugins ​

  • Type: Array
  • Default: []

Initialize custom plugins

`,4),_s=i("div",{className:"run-code"},"▶ Run Code",-1),vs=s(`
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [myPlugin],
-});

thumbnails ​

  • Type: Object
  • Default: {}

Set thumbnails on the progress bar

PropertyTypeDescription
urlStringThumbnail URL
numberNumberNumber of thumbnails
columnNumberColumns of thumbnails
widthNumberThumbnail width
heightNumberThumbnail height
`,5),Cs=i("div",{className:"run-code"},"▶ Run Code",-1),As=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    thumbnails: {
-        url: '/assets/sample/thumbnails.png',
-        number: 60,
-        column: 10,
-    },
-});

Online thumbnail generation

artplayer-tool-thumbnail

subtitle ​

  • Type: Object
  • Default: {}

Set the video subtitles, supporting subtitle formats: vtt, srt, ass

PropertyTypeDescription
nameStringSubtitle name
urlStringSubtitle URL
typeStringSubtitle type, options: vtt, srt, ass

| style | Object | Subtitle style | | encoding | String | Subtitle encoding, default utf-8 | | escape | Boolean | Whether to escape html tags, default true | | onVttLoad | Function | Function to modify vtt text |

`,7),Ts=i("div",{className:"run-code"},"▶ Run Code",-1),Bs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-        type: 'srt',
-        encoding: 'utf-8',
-        escape: true,
-        style: {
-            color: '#03A9F4',
-            'font-size': '30px',
-        },
-    },
-});

moreVideoAttr ​

  • Type: Object
  • Default: {'controls': false, 'preload': 'metadata'}

Additional video attributes, these attributes will be directly written into the video element

`,4),fs=i("div",{className:"run-code"},"▶ Run Code",-1),Ds=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    moreVideoAttr: {
-        'webkit-playsinline': true,
-        playsInline: true,
-    },
-});

icons ​

  • Type: Object
  • Default: {}

Used to replace default icons, supports Html strings and HTMLElement

`,4),Ss=i("div",{className:"run-code"},"▶ Run Code",-1),ws=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    icons: {
-        loading: '<img src="/assets/img/loading.gif">',
-        state: '<img src="/assets/img/state.png">',
-    },
-});

Definition of all icons

artplayer/types/icons.d.ts

type ​

  • Type: String
  • Default: ''

Used to specify the format of the video, which is used in conjunction with customType. By default, the video format is the same as the file extension of the video URL (such as .m3u8, .mkv, .ts). However, sometimes the video URL does not have the correct file extension, so it needs to be specifically stated.

`,5),Ps=i("div",{className:"run-code"},"▶ Run Code",-1),Rs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.m3u8',
-    type: 'm3u8',
-});

Recognition of file extensions

The player can only parse this type of file extension: /assets/sample/video.m3u8

But it cannot parse this type of file extension: /assets/sample/video?type=m3u8

Therefore, if you use customType, it is best to specify type as well

customType ​

  • Type: Object
  • Default: {}

Matches the video's type to delegate the video decoding to a third-party program for processing. The processing function can receive three parameters:

  • video: Video DOM element
  • url: Video address
  • art: Current instance
`,6),qs=i("div",{className:"run-code"},"▶ Run Code",-1),Is=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.m3u8',
-    customType: {
-        m3u8: function (video, url, art) {
-            //
-        },
-    },
-});

lang ​

  • Type: String
  • Default: navigator.language.toLowerCase()

Default display language, currently supports: en, zh-cn

`,4),Vs=i("div",{className:"run-code"},"▶ Run Code",-1),js=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'en',
-});

More language settings

/start/i18n.html

i18n ​

  • Type: Object
  • Default: {}

Custom i18n configuration, which will be deeply merged with the built-in i18n

Add your language:

`,6),Ns=i("div",{className:"run-code"},"▶ Run Code",-1),xs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'your-lang',
-    i18n: {
-        'your-lang': {
-            Play: 'Your Play'
-        },
-    },
-});

Modifying the existing language

`,2),Ws=i("div",{className:"run-code"},"▶ Run Code",-1),zs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: {
-        'zh-cn': {
-            Play: 'Your Play'
-        },
-        'zh-tw': {
-            Play: 'Your Play'
-        },
-    },
-});

More language settings

/start/i18n.html

lock ​

  • Type: Boolean
  • Default: false

Whether to display a lock button on mobile to hide the bottom control bar

`,5),Os=i("div",{className:"run-code"},"▶ Run Code",-1),Ms=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lock: true,
-});

fastForward ​

  • Type: Boolean
  • Default: false

Whether to add fast forward function by long pressing on the video on mobile devices

`,4),Ls=i("div",{className:"run-code"},"▶ Run Code",-1),Hs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});

autoPlayback ​

  • Type: Boolean
  • Default: false

Whether to use the automatic playback feature

`,4),Us=i("div",{className:"run-code"},"▶ Run Code",-1),$s=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    id: 'your-url-id',
-    autoPlayback: true,
-});

Warning

Because the player by default uses url as the key to cache the playback progress

But if the url of the same video is different, then you need to use id to identify the unique key of the video

autoOrientation ​

  • Type: Boolean
  • Default: false

Whether to rotate the player on mobile web pages in full screen according to the video size and the viewport dimensions

`,5),Ys=i("div",{className:"run-code"},"▶ Run Code",-1),Qs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoOrientation: true,
-});

airplay ​

  • Type: Boolean
  • Default: false

Whether to display the airplay button, currently only some browsers support this feature

`,4),Js=i("div",{className:"run-code"},"▶ Run Code",-1),Gs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    airplay: true,
-});

cssVar ​

  • Type: Object
  • Default: {}

Used to change built-in CSS variables

`,4),Ks=i("div",{className:"run-code"},"▶ Run Code",-1),Xs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    cssVar: {
-        //
-    },
-});

Reference for cssVar syntax

artplayer/types/cssVar.d.ts

`,2),Zs=[p,t,h,r,k,d,E,c,o,g,y,u,b,m,F,_,v,C,A,T,B,f,D,S,w,P,R,q,I,V,j,N,x,W,z,O,M,L,H,U,$,Y,Q,J,G,K,X,Z,ss,is,as,ns,es,ls,ps,ts,hs,rs,ks,ds,Es,cs,os,gs,ys,us,bs,ms,Fs,_s,vs,Cs,As,Ts,Bs,fs,Ds,Ss,ws,Ps,Rs,qs,Is,Vs,js,Ns,xs,Ws,zs,Os,Ms,Ls,Hs,Us,$s,Ys,Qs,Js,Gs,Ks,Xs];function si(ii,ai,ni,ei,li,pi){return e(),n("div",null,Zs)}const ri=a(l,[["render",si]]);export{hi as __pageData,ri as default}; diff --git a/docs/document/assets/en_start_option.md.bVliSlll.lean.js b/docs/document/assets/en_start_option.md.bVliSlll.lean.js deleted file mode 100644 index cc678e1fc..000000000 --- a/docs/document/assets/en_start_option.md.bVliSlll.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as e,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const hi=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1700976201000}'),l={name:"en/start/option.md"},p=s("",4),t=i("div",{className:"run-code"},"▶ Run Code",-1),h=s("",9),r=i("div",{className:"run-code"},"▶ Run Code",-1),k=s("",2),d=i("div",{className:"run-code"},"▶ Run Code",-1),E=s("",5),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s("",4),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s("",7),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s("",4),m=i("div",{className:"run-code"},"▶ Run Code",-1),F=s("",4),_=i("div",{className:"run-code"},"▶ Run Code",-1),v=s("",5),C=i("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),T=i("div",{className:"run-code"},"▶ Run Code",-1),B=s("",6),f=i("div",{className:"run-code"},"▶ Run Code",-1),D=s("",5),S=i("div",{className:"run-code"},"▶ Run Code",-1),w=s("",4),P=i("div",{className:"run-code"},"▶ Run Code",-1),R=s("",4),q=i("div",{className:"run-code"},"▶ Run Code",-1),I=s("",4),V=i("div",{className:"run-code"},"▶ Run Code",-1),j=s("",4),N=i("div",{className:"run-code"},"▶ Run Code",-1),x=s("",4),W=i("div",{className:"run-code"},"▶ Run Code",-1),z=s("",4),O=i("div",{className:"run-code"},"▶ Run Code",-1),M=s("",5),L=i("div",{className:"run-code"},"▶ Run Code",-1),H=s("",4),U=i("div",{className:"run-code"},"▶ Run Code",-1),$=s("",5),Y=i("div",{className:"run-code"},"▶ Run Code",-1),Q=s("",4),J=i("div",{className:"run-code"},"▶ Run Code",-1),G=s("",3),K=i("div",{className:"run-code"},"▶ Run Code",-1),X=s("",4),Z=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s("",4),ns=i("div",{className:"run-code"},"▶ Run Code",-1),es=s("",5),ls=i("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",4),ts=i("div",{className:"run-code"},"▶ Run Code",-1),hs=s("",4),rs=i("div",{className:"run-code"},"▶ Run Code",-1),ks=s("",5),ds=i("div",{className:"run-code"},"▶ Run Code",-1),Es=s("",5),cs=i("div",{className:"run-code"},"▶ Run Code",-1),os=s("",5),gs=i("div",{className:"run-code"},"▶ Run Code",-1),ys=s("",6),us=i("div",{className:"run-code"},"▶ Run Code",-1),bs=s("",5),ms=i("div",{className:"run-code"},"▶ Run Code",-1),Fs=s("",4),_s=i("div",{className:"run-code"},"▶ Run Code",-1),vs=s("",5),Cs=i("div",{className:"run-code"},"▶ Run Code",-1),As=s("",7),Ts=i("div",{className:"run-code"},"▶ Run Code",-1),Bs=s("",4),fs=i("div",{className:"run-code"},"▶ Run Code",-1),Ds=s("",4),Ss=i("div",{className:"run-code"},"▶ Run Code",-1),ws=s("",5),Ps=i("div",{className:"run-code"},"▶ Run Code",-1),Rs=s("",6),qs=i("div",{className:"run-code"},"▶ Run Code",-1),Is=s("",4),Vs=i("div",{className:"run-code"},"▶ Run Code",-1),js=s("",6),Ns=i("div",{className:"run-code"},"▶ Run Code",-1),xs=s("",2),Ws=i("div",{className:"run-code"},"▶ Run Code",-1),zs=s("",5),Os=i("div",{className:"run-code"},"▶ Run Code",-1),Ms=s("",4),Ls=i("div",{className:"run-code"},"▶ Run Code",-1),Hs=s("",4),Us=i("div",{className:"run-code"},"▶ Run Code",-1),$s=s("",5),Ys=i("div",{className:"run-code"},"▶ Run Code",-1),Qs=s("",4),Js=i("div",{className:"run-code"},"▶ Run Code",-1),Gs=s("",4),Ks=i("div",{className:"run-code"},"▶ Run Code",-1),Xs=s("",2),Zs=[p,t,h,r,k,d,E,c,o,g,y,u,b,m,F,_,v,C,A,T,B,f,D,S,w,P,R,q,I,V,j,N,x,W,z,O,M,L,H,U,$,Y,Q,J,G,K,X,Z,ss,is,as,ns,es,ls,ps,ts,hs,rs,ks,ds,Es,cs,os,gs,ys,us,bs,ms,Fs,_s,vs,Cs,As,Ts,Bs,fs,Ds,Ss,ws,Ps,Rs,qs,Is,Vs,js,Ns,xs,Ws,zs,Os,Ms,Ls,Hs,Us,$s,Ys,Qs,Js,Gs,Ks,Xs];function si(ii,ai,ni,ei,li,pi){return e(),n("div",null,Zs)}const ri=a(l,[["render",si]]);export{hi as __pageData,ri as default}; diff --git a/docs/document/assets/flex-logo.SQNie4Vp.svg b/docs/document/assets/flex-logo.2489261b.svg similarity index 100% rename from docs/document/assets/flex-logo.SQNie4Vp.svg rename to docs/document/assets/flex-logo.2489261b.svg diff --git a/docs/document/assets/index.md.09ef185d.js b/docs/document/assets/index.md.09ef185d.js new file mode 100644 index 000000000..76f16046e --- /dev/null +++ b/docs/document/assets/index.md.09ef185d.js @@ -0,0 +1,173 @@ +import{_ as s,c as a,o as n,V as l}from"./chunks/framework.5c8808ab.js";const C=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1704849613000}'),p={name:"index.md"},e=l(`

安装使用 ​

安装 ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

使用 ​

js
import Artplayer from 'artplayer';
+
+const art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'path/to/video.mp4',
+});
html
<html>
+    <head>
+        <title>ArtPlayer Demo</title>
+        <meta charset="UTF-8" />
+        <style>
+            .artplayer-app {
+                width: 400px;
+                height: 300px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app"></div>
+    </body>
+</html>

提示

播放器的尺寸依赖于容器 container 的尺寸，所以你的容器 container 必须是有尺寸的

以下链接可以看到更多的使用例子

/packages/artplayer-template

Vue.js ​

vue
<template>
+  <div ref="artRef"></div>
+</template>
+
+<script>
+import Artplayer from "artplayer";
+
+export default {
+  data() {
+    return {
+      instance: null,
+    };
+  },
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    this.instance = new Artplayer({
+      ...this.option,
+      container: this.$refs.artRef,
+    });
+
+    this.$nextTick(() => {
+      this.$emit("get-instance", this.instance);
+    });
+  },
+  beforeDestroy() {
+    if (this.instance && this.instance.destroy) {
+      this.instance.destroy(false);
+    }
+  },
+};
+</script>
vue
<template>
+  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
+</template>
+
+<script>
+import Artplayer from "./Artplayer.vue";
+
+export default {
+  data() {
+    return {
+      option: {
+        url: "path/to/video.mp4",
+      },
+      style: {
+        width: "600px",
+        height: "400px",
+        margin: "60px auto 0",
+      },
+    };
+  },
+  components: {
+    Artplayer,
+  },
+  methods: {
+    getInstance(art) {
+      console.info(art);
+    },
+  },
+};
+</script>

Artplayer 非响应式：

在 Vue.js 里直接修改 option 是不会改变播放器的

React.js ​

jsx
import { useEffect, useRef } from 'react';
+import Artplayer from 'artplayer';
+
+export default function Player({ option, getInstance, ...rest }) {
+    const artRef = useRef();
+
+    useEffect(() => {
+        const art = new Artplayer({
+            ...option,
+            container: artRef.current,
+        });
+
+        if (getInstance && typeof getInstance === 'function') {
+            getInstance(art);
+        }
+
+        return () => {
+            if (art && art.destroy) {
+                art.destroy(false);
+            }
+        };
+    }, []);
+
+    return <div ref={artRef} {...rest}></div>;
+}
jsx
import React from 'react';
+import Artplayer from './ArtPlayer.jsx';
+
+function App() {
+    return (
+        <div>
+            <Artplayer
+                option={{
+                    url: 'https://artplayer.org/assets/sample/video.mp4',
+                }}
+                style={{
+                    width: '600px',
+                    height: '400px',
+                    margin: '60px auto 0',
+                }}
+                getInstance={(art) => console.info(art)}
+            />
+        </div>
+    );
+}
+
+export default App;

Artplayer 非响应式：

在 React.js 里直接修改 option 是不会改变播放器的

TypeScript ​

导入 Artplayer 时会自动导入的 artplayer.d.ts

Vue.js ​

vue
<script setup>
+import Artplayer from 'artplayer';
+const art = ref<Artplayer>(null);
+art.value = new Artplayer();
+</script>

React.js ​

jsx
import Artplayer from 'artplayer';
+const art = useRef<Artplayer>(null);
+art.current = new Artplayer();

Option ​

你也可以单独导入选项的类型

ts
import Artplayer from 'artplayer';
+import { type Option } from 'artplayer/types/option';
+
+const option: Option = {
+    container: '.artplayer-app',
+    url: './assets/sample/video.mp4',
+};
+
+option.volume = 0.5;
+
+const art = new Artplayer(option);

全部 TypeScript 定义

packages/artplayer/types

JavaScript ​

有时你的 js 文件会丢失 TypeScript 的类型提示，这时候你可以手动导入类型

变量：

js
/**
+ * @type {import("artplayer")}
+ */
+let art = null;

参数：

js
/**
+ * @param {import("artplayer")} art
+ */
+function getInstance(art) {
+  //
+}

属性：

js
export default {
+  data() {
+    return {
+      /**
+       * @type {import("artplayer")}
+       */
+      art: null,
+    }
+  }
+}

选项：

js
/**
+ * @type {import("artplayer/types/option").Option}
+ */
+
+const option = {
+    container: '.artplayer-app',
+    url: './assets/sample/video.mp4',
+};
+
+option.volume = 0.5;
+
+const art8 = new Artplayer(option);

古老的浏览器 ​

生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome：last 1 Chrome version

对于古老的浏览器，可以使用 artplayer.legacy.js 文件，可以兼容到：IE 11

js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

假如你要兼容更古老的浏览器时，请修改以下配置然后自行构建：

构建配置：scripts/build.js

参考文档：browserslist

`,41),o=[e];function t(r,c,y,i,F,D){return n(),a("div",null,o)}const A=s(p,[["render",t]]);export{C as __pageData,A as default}; diff --git a/docs/document/assets/index.md.09ef185d.lean.js b/docs/document/assets/index.md.09ef185d.lean.js new file mode 100644 index 000000000..e04b0396a --- /dev/null +++ b/docs/document/assets/index.md.09ef185d.lean.js @@ -0,0 +1 @@ +import{_ as s,c as a,o as n,V as l}from"./chunks/framework.5c8808ab.js";const C=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1704849613000}'),p={name:"index.md"},e=l("",41),o=[e];function t(r,c,y,i,F,D){return n(),a("div",null,o)}const A=s(p,[["render",t]]);export{C as __pageData,A as default}; diff --git a/docs/document/assets/index.md.GsXLLJ7H.js b/docs/document/assets/index.md.GsXLLJ7H.js deleted file mode 100644 index 12eef2aba..000000000 --- a/docs/document/assets/index.md.GsXLLJ7H.js +++ /dev/null @@ -1,173 +0,0 @@ -import{_ as s,c as i,o as a,R as n}from"./chunks/framework.0i_P4VHR.js";const y=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1704849613000}'),l={name:"index.md"},p=n(`

安装使用 ​

安装 ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

使用 ​

js
import Artplayer from 'artplayer';
-
-const art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'path/to/video.mp4',
-});
html
<html>
-    <head>
-        <title>ArtPlayer Demo</title>
-        <meta charset="UTF-8" />
-        <style>
-            .artplayer-app {
-                width: 400px;
-                height: 300px;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app"></div>
-    </body>
-</html>

提示

播放器的尺寸依赖于容器 container 的尺寸，所以你的容器 container 必须是有尺寸的

以下链接可以看到更多的使用例子

/packages/artplayer-template

Vue.js ​

vue
<template>
-  <div ref="artRef"></div>
-</template>
-
-<script>
-import Artplayer from "artplayer";
-
-export default {
-  data() {
-    return {
-      instance: null,
-    };
-  },
-  props: {
-    option: {
-      type: Object,
-      required: true,
-    },
-  },
-  mounted() {
-    this.instance = new Artplayer({
-      ...this.option,
-      container: this.$refs.artRef,
-    });
-
-    this.$nextTick(() => {
-      this.$emit("get-instance", this.instance);
-    });
-  },
-  beforeDestroy() {
-    if (this.instance && this.instance.destroy) {
-      this.instance.destroy(false);
-    }
-  },
-};
-</script>
vue
<template>
-  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
-</template>
-
-<script>
-import Artplayer from "./Artplayer.vue";
-
-export default {
-  data() {
-    return {
-      option: {
-        url: "path/to/video.mp4",
-      },
-      style: {
-        width: "600px",
-        height: "400px",
-        margin: "60px auto 0",
-      },
-    };
-  },
-  components: {
-    Artplayer,
-  },
-  methods: {
-    getInstance(art) {
-      console.info(art);
-    },
-  },
-};
-</script>

Artplayer 非响应式：

在 Vue.js 里直接修改 option 是不会改变播放器的

React.js ​

jsx
import { useEffect, useRef } from 'react';
-import Artplayer from 'artplayer';
-
-export default function Player({ option, getInstance, ...rest }) {
-    const artRef = useRef();
-
-    useEffect(() => {
-        const art = new Artplayer({
-            ...option,
-            container: artRef.current,
-        });
-
-        if (getInstance && typeof getInstance === 'function') {
-            getInstance(art);
-        }
-
-        return () => {
-            if (art && art.destroy) {
-                art.destroy(false);
-            }
-        };
-    }, []);
-
-    return <div ref={artRef} {...rest}></div>;
-}
jsx
import React from 'react';
-import Artplayer from './ArtPlayer.jsx';
-
-function App() {
-    return (
-        <div>
-            <Artplayer
-                option={{
-                    url: 'https://artplayer.org/assets/sample/video.mp4',
-                }}
-                style={{
-                    width: '600px',
-                    height: '400px',
-                    margin: '60px auto 0',
-                }}
-                getInstance={(art) => console.info(art)}
-            />
-        </div>
-    );
-}
-
-export default App;

Artplayer 非响应式：

在 React.js 里直接修改 option 是不会改变播放器的

TypeScript ​

导入 Artplayer 时会自动导入的 artplayer.d.ts

Vue.js ​

vue
<script setup>
-import Artplayer from 'artplayer';
-const art = ref<Artplayer>(null);
-art.value = new Artplayer();
-</script>

React.js ​

jsx
import Artplayer from 'artplayer';
-const art = useRef<Artplayer>(null);
-art.current = new Artplayer();

Option ​

你也可以单独导入选项的类型

ts
import Artplayer from 'artplayer';
-import { type Option } from 'artplayer/types/option';
-
-const option: Option = {
-    container: '.artplayer-app',
-    url: './assets/sample/video.mp4',
-};
-
-option.volume = 0.5;
-
-const art = new Artplayer(option);

全部 TypeScript 定义

packages/artplayer/types

JavaScript ​

有时你的 js 文件会丢失 TypeScript 的类型提示，这时候你可以手动导入类型

变量：

js
/**
- * @type {import("artplayer")}
- */
-let art = null;

参数：

js
/**
- * @param {import("artplayer")} art
- */
-function getInstance(art) {
-  //
-}

属性：

js
export default {
-  data() {
-    return {
-      /**
-       * @type {import("artplayer")}
-       */
-      art: null,
-    }
-  }
-}

选项：

js
/**
- * @type {import("artplayer/types/option").Option}
- */
-
-const option = {
-    container: '.artplayer-app',
-    url: './assets/sample/video.mp4',
-};
-
-option.volume = 0.5;
-
-const art8 = new Artplayer(option);

古老的浏览器 ​

生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome：last 1 Chrome version

对于古老的浏览器，可以使用 artplayer.legacy.js 文件，可以兼容到：IE 11

js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

假如你要兼容更古老的浏览器时，请修改以下配置然后自行构建：

构建配置：scripts/build.js

参考文档：browserslist

`,41),e=[p];function t(h,k,r,E,d,c){return a(),i("div",null,e)}const b=s(l,[["render",t]]);export{y as __pageData,b as default}; diff --git a/docs/document/assets/index.md.GsXLLJ7H.lean.js b/docs/document/assets/index.md.GsXLLJ7H.lean.js deleted file mode 100644 index 79326b104..000000000 --- a/docs/document/assets/index.md.GsXLLJ7H.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as s,c as i,o as a,R as n}from"./chunks/framework.0i_P4VHR.js";const y=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1704849613000}'),l={name:"index.md"},p=n("",41),e=[p];function t(h,k,r,E,d,c){return a(),i("div",null,e)}const b=s(l,[["render",t]]);export{y as __pageData,b as default}; diff --git a/docs/document/assets/inter-italic-cyrillic-ext.OVycGSDq.woff2 b/docs/document/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2 similarity index 100% rename from docs/document/assets/inter-italic-cyrillic-ext.OVycGSDq.woff2 rename to docs/document/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2 diff --git a/docs/document/assets/inter-italic-cyrillic.-nLMcIwj.woff2 b/docs/document/assets/inter-italic-cyrillic.ea42a392.woff2 similarity index 100% rename from docs/document/assets/inter-italic-cyrillic.-nLMcIwj.woff2 rename to docs/document/assets/inter-italic-cyrillic.ea42a392.woff2 diff --git a/docs/document/assets/inter-italic-greek-ext.hznxWNZO.woff2 b/docs/document/assets/inter-italic-greek-ext.4fbe9427.woff2 similarity index 100% rename from docs/document/assets/inter-italic-greek-ext.hznxWNZO.woff2 rename to docs/document/assets/inter-italic-greek-ext.4fbe9427.woff2 diff --git a/docs/document/assets/inter-italic-greek.PSfer2Kc.woff2 b/docs/document/assets/inter-italic-greek.8f4463c4.woff2 similarity index 100% rename from docs/document/assets/inter-italic-greek.PSfer2Kc.woff2 rename to docs/document/assets/inter-italic-greek.8f4463c4.woff2 diff --git a/docs/document/assets/inter-italic-latin-ext.RnFly65-.woff2 b/docs/document/assets/inter-italic-latin-ext.bd8920cc.woff2 similarity index 100% rename from docs/document/assets/inter-italic-latin-ext.RnFly65-.woff2 rename to docs/document/assets/inter-italic-latin-ext.bd8920cc.woff2 diff --git a/docs/document/assets/inter-italic-latin.27E69YJn.woff2 b/docs/document/assets/inter-italic-latin.bd3b6f56.woff2 similarity index 100% rename from docs/document/assets/inter-italic-latin.27E69YJn.woff2 rename to docs/document/assets/inter-italic-latin.bd3b6f56.woff2 diff --git a/docs/document/assets/inter-italic-vietnamese.xzQHe1q1.woff2 b/docs/document/assets/inter-italic-vietnamese.6ce511fb.woff2 similarity index 100% rename from docs/document/assets/inter-italic-vietnamese.xzQHe1q1.woff2 rename to docs/document/assets/inter-italic-vietnamese.6ce511fb.woff2 diff --git a/docs/document/assets/inter-roman-cyrillic-ext.8T9wMG5w.woff2 b/docs/document/assets/inter-roman-cyrillic-ext.e75737ce.woff2 similarity index 100% rename from docs/document/assets/inter-roman-cyrillic-ext.8T9wMG5w.woff2 rename to docs/document/assets/inter-roman-cyrillic-ext.e75737ce.woff2 diff --git a/docs/document/assets/inter-roman-cyrillic.jIZ9REo5.woff2 b/docs/document/assets/inter-roman-cyrillic.5f2c6c8c.woff2 similarity index 100% rename from docs/document/assets/inter-roman-cyrillic.jIZ9REo5.woff2 rename to docs/document/assets/inter-roman-cyrillic.5f2c6c8c.woff2 diff --git a/docs/document/assets/inter-roman-greek-ext.9JiNzaSO.woff2 b/docs/document/assets/inter-roman-greek-ext.ab0619bc.woff2 similarity index 100% rename from docs/document/assets/inter-roman-greek-ext.9JiNzaSO.woff2 rename to docs/document/assets/inter-roman-greek-ext.ab0619bc.woff2 diff --git a/docs/document/assets/inter-roman-greek.Cb5wWeGA.woff2 b/docs/document/assets/inter-roman-greek.d5a6d92a.woff2 similarity index 100% rename from docs/document/assets/inter-roman-greek.Cb5wWeGA.woff2 rename to docs/document/assets/inter-roman-greek.d5a6d92a.woff2 diff --git a/docs/document/assets/inter-roman-latin-ext.GZWE-KO4.woff2 b/docs/document/assets/inter-roman-latin-ext.0030eebd.woff2 similarity index 100% rename from docs/document/assets/inter-roman-latin-ext.GZWE-KO4.woff2 rename to docs/document/assets/inter-roman-latin-ext.0030eebd.woff2 diff --git a/docs/document/assets/inter-roman-latin.bvIUbFQP.woff2 b/docs/document/assets/inter-roman-latin.2ed14f66.woff2 similarity index 100% rename from docs/document/assets/inter-roman-latin.bvIUbFQP.woff2 rename to docs/document/assets/inter-roman-latin.2ed14f66.woff2 diff --git a/docs/document/assets/inter-roman-vietnamese.paY3CzEB.woff2 b/docs/document/assets/inter-roman-vietnamese.14ce25a6.woff2 similarity index 100% rename from docs/document/assets/inter-roman-vietnamese.paY3CzEB.woff2 rename to docs/document/assets/inter-roman-vietnamese.14ce25a6.woff2 diff --git a/docs/document/assets/library_dash.md.7ec0db41.js b/docs/document/assets/library_dash.md.7ec0db41.js new file mode 100644 index 000000000..6b60068dc --- /dev/null +++ b/docs/document/assets/library_dash.md.7ec0db41.js @@ -0,0 +1,24 @@ +import{_ as n,c as l,o as p,z as s,a,V as o}from"./chunks/framework.5c8808ab.js";const u=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/dash.md","filePath":"library/dash.md","lastUpdated":1682237343000}'),e={name:"library/dash.md"},r=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-label":'Permalink to "dash.js"'},"​")],-1),t=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),y=o(`
js
function playMpd(video, url, art) {
+    if (dashjs.supportsMediaSource()) {
+        if (art.dash) art.dash.destroy();
+        const dash = dashjs.MediaPlayer().create();
+        dash.initialize(video, url, art.option.autoplay);
+        art.dash = dash; 
+        art.on('destroy', () => dash.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: mpd';
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
+    type: 'mpd',
+    customType: {
+        mpd: playMpd
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.dash);
+});
`,1),F=[r,t,c,y];function D(A,i,C,d,b,h){return p(),l("div",null,F)}const _=n(e,[["render",D]]);export{u as __pageData,_ as default}; diff --git a/docs/document/assets/library_dash.md.7ec0db41.lean.js b/docs/document/assets/library_dash.md.7ec0db41.lean.js new file mode 100644 index 000000000..ca7a59edc --- /dev/null +++ b/docs/document/assets/library_dash.md.7ec0db41.lean.js @@ -0,0 +1 @@ +import{_ as n,c as l,o as p,z as s,a,V as o}from"./chunks/framework.5c8808ab.js";const u=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/dash.md","filePath":"library/dash.md","lastUpdated":1682237343000}'),e={name:"library/dash.md"},r=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-label":'Permalink to "dash.js"'},"​")],-1),t=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),y=o("",1),F=[r,t,c,y];function D(A,i,C,d,b,h){return p(),l("div",null,F)}const _=n(e,[["render",D]]);export{u as __pageData,_ as default}; diff --git a/docs/document/assets/library_dash.md.OIMp2Mfb.js b/docs/document/assets/library_dash.md.OIMp2Mfb.js deleted file mode 100644 index ea0843063..000000000 --- a/docs/document/assets/library_dash.md.OIMp2Mfb.js +++ /dev/null @@ -1,24 +0,0 @@ -import{_ as i,c as n,o as l,k as s,a,R as p}from"./chunks/framework.0i_P4VHR.js";const m=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/dash.md","filePath":"library/dash.md","lastUpdated":1682237343000}'),h={name:"library/dash.md"},t=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-label":'Permalink to "dash.js"'},"​")],-1),e=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),r=p(`
js
function playMpd(video, url, art) {
-    if (dashjs.supportsMediaSource()) {
-        if (art.dash) art.dash.destroy();
-        const dash = dashjs.MediaPlayer().create();
-        dash.initialize(video, url, art.option.autoplay);
-        art.dash = dash; 
-        art.on('destroy', () => dash.destroy());
-    } else {
-        art.notice.show = 'Unsupported playback format: mpd';
-    }
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
-    type: 'mpd',
-    customType: {
-        mpd: playMpd
-    },
-});
-
-art.on('ready', () => {
-    console.info(art.dash);
-});
`,1),E=[t,e,k,r];function d(c,y,g,o,b,F){return l(),n("div",null,E)}const _=i(h,[["render",d]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/library_dash.md.OIMp2Mfb.lean.js b/docs/document/assets/library_dash.md.OIMp2Mfb.lean.js deleted file mode 100644 index 54859f14b..000000000 --- a/docs/document/assets/library_dash.md.OIMp2Mfb.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as i,c as n,o as l,k as s,a,R as p}from"./chunks/framework.0i_P4VHR.js";const m=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/dash.md","filePath":"library/dash.md","lastUpdated":1682237343000}'),h={name:"library/dash.md"},t=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-label":'Permalink to "dash.js"'},"​")],-1),e=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),r=p("",1),E=[t,e,k,r];function d(c,y,g,o,b,F){return l(),n("div",null,E)}const _=i(h,[["render",d]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/library_flv.md.2c005fa8.js b/docs/document/assets/library_flv.md.2c005fa8.js new file mode 100644 index 000000000..cd0d1d176 --- /dev/null +++ b/docs/document/assets/library_flv.md.2c005fa8.js @@ -0,0 +1,25 @@ +import{_ as a,c as l,o as p,z as s,a as n,V as o}from"./chunks/framework.5c8808ab.js";const u=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/flv.md","filePath":"library/flv.md","lastUpdated":1682237343000}'),e={name:"library/flv.md"},r=s("h1",{id:"flv-js",tabindex:"-1"},[n("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-label":'Permalink to "flv.js"'},"​")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),F=o(`
js
function playFlv(video, url, art) {
+    if (flvjs.isSupported()) {
+        if (art.flv) art.flv.destroy();
+        const flv = flvjs.createPlayer({ type: 'flv', url });
+        flv.attachMediaElement(video);
+        flv.load();
+        art.flv = flv; 
+        art.on('destroy', () => flv.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: flv';
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.flv',
+    type: 'flv',
+    customType: {
+        flv: playFlv,
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.flv);
+});
`,1),y=[r,t,c,F];function D(A,i,C,b,d,f){return p(),l("div",null,y)}const v=a(e,[["render",D]]);export{u as __pageData,v as default}; diff --git a/docs/document/assets/library_flv.md.2c005fa8.lean.js b/docs/document/assets/library_flv.md.2c005fa8.lean.js new file mode 100644 index 000000000..fc048c22a --- /dev/null +++ b/docs/document/assets/library_flv.md.2c005fa8.lean.js @@ -0,0 +1 @@ +import{_ as a,c as l,o as p,z as s,a as n,V as o}from"./chunks/framework.5c8808ab.js";const u=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/flv.md","filePath":"library/flv.md","lastUpdated":1682237343000}'),e={name:"library/flv.md"},r=s("h1",{id:"flv-js",tabindex:"-1"},[n("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-label":'Permalink to "flv.js"'},"​")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(A,i,C,b,d,f){return p(),l("div",null,y)}const v=a(e,[["render",D]]);export{u as __pageData,v as default}; diff --git a/docs/document/assets/library_flv.md.S3Dt2Ece.js b/docs/document/assets/library_flv.md.S3Dt2Ece.js deleted file mode 100644 index 68061a01e..000000000 --- a/docs/document/assets/library_flv.md.S3Dt2Ece.js +++ /dev/null @@ -1,25 +0,0 @@ -import{_ as a,c as n,o as l,k as s,a as i,R as p}from"./chunks/framework.0i_P4VHR.js";const m=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/flv.md","filePath":"library/flv.md","lastUpdated":1682237343000}'),h={name:"library/flv.md"},e=s("h1",{id:"flv-js",tabindex:"-1"},[i("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-label":'Permalink to "flv.js"'},"​")],-1),t=s("p",null,[i("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),r=p(`
js
function playFlv(video, url, art) {
-    if (flvjs.isSupported()) {
-        if (art.flv) art.flv.destroy();
-        const flv = flvjs.createPlayer({ type: 'flv', url });
-        flv.attachMediaElement(video);
-        flv.load();
-        art.flv = flv; 
-        art.on('destroy', () => flv.destroy());
-    } else {
-        art.notice.show = 'Unsupported playback format: flv';
-    }
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.flv',
-    type: 'flv',
-    customType: {
-        flv: playFlv,
-    },
-});
-
-art.on('ready', () => {
-    console.info(art.flv);
-});
`,1),E=[e,t,k,r];function d(c,y,g,b,o,F){return l(),n("div",null,E)}const f=a(h,[["render",d]]);export{m as __pageData,f as default}; diff --git a/docs/document/assets/library_flv.md.S3Dt2Ece.lean.js b/docs/document/assets/library_flv.md.S3Dt2Ece.lean.js deleted file mode 100644 index 889aaef8c..000000000 --- a/docs/document/assets/library_flv.md.S3Dt2Ece.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,k as s,a as i,R as p}from"./chunks/framework.0i_P4VHR.js";const m=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/flv.md","filePath":"library/flv.md","lastUpdated":1682237343000}'),h={name:"library/flv.md"},e=s("h1",{id:"flv-js",tabindex:"-1"},[i("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-label":'Permalink to "flv.js"'},"​")],-1),t=s("p",null,[i("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),r=p("",1),E=[e,t,k,r];function d(c,y,g,b,o,F){return l(),n("div",null,E)}const f=a(h,[["render",d]]);export{m as __pageData,f as default}; diff --git a/docs/document/assets/library_hls.md.d0ec0f48.js b/docs/document/assets/library_hls.md.d0ec0f48.js new file mode 100644 index 000000000..4c5a520b5 --- /dev/null +++ b/docs/document/assets/library_hls.md.d0ec0f48.js @@ -0,0 +1,27 @@ +import{_ as a,c as l,o as p,z as s,a as n,V as o}from"./chunks/framework.5c8808ab.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/hls.md","filePath":"library/hls.md","lastUpdated":1682237343000}'),e={name:"library/hls.md"},r=s("h1",{id:"hls-js",tabindex:"-1"},[n("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-label":'Permalink to "hls.js"'},"​")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),F=o(`
js
function playM3u8(video, url, art) {
+    if (Hls.isSupported()) {
+        if (art.hls) art.hls.destroy();
+        const hls = new Hls();
+        hls.loadSource(url);
+        hls.attachMedia(video);
+        art.hls = hls;
+        art.on('destroy', () => hls.destroy());
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = url;
+    } else {
+        art.notice.show = 'Unsupported playback format: m3u8';
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+    type: 'm3u8',
+    customType: {
+        m3u8: playM3u8,
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.hls);
+});
`,1),y=[r,t,c,F];function D(A,i,C,b,u,d){return p(),l("div",null,y)}const _=a(e,[["render",D]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/library_hls.md.d0ec0f48.lean.js b/docs/document/assets/library_hls.md.d0ec0f48.lean.js new file mode 100644 index 000000000..4540bf731 --- /dev/null +++ b/docs/document/assets/library_hls.md.d0ec0f48.lean.js @@ -0,0 +1 @@ +import{_ as a,c as l,o as p,z as s,a as n,V as o}from"./chunks/framework.5c8808ab.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/hls.md","filePath":"library/hls.md","lastUpdated":1682237343000}'),e={name:"library/hls.md"},r=s("h1",{id:"hls-js",tabindex:"-1"},[n("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-label":'Permalink to "hls.js"'},"​")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(A,i,C,b,u,d){return p(),l("div",null,y)}const _=a(e,[["render",D]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/library_hls.md.dMAWlqwL.js b/docs/document/assets/library_hls.md.dMAWlqwL.js deleted file mode 100644 index 3a8f65fee..000000000 --- a/docs/document/assets/library_hls.md.dMAWlqwL.js +++ /dev/null @@ -1,27 +0,0 @@ -import{_ as a,c as n,o as l,k as s,a as i,R as p}from"./chunks/framework.0i_P4VHR.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/hls.md","filePath":"library/hls.md","lastUpdated":1682237343000}'),h={name:"library/hls.md"},e=s("h1",{id:"hls-js",tabindex:"-1"},[i("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-label":'Permalink to "hls.js"'},"​")],-1),t=s("p",null,[i("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),r=p(`
js
function playM3u8(video, url, art) {
-    if (Hls.isSupported()) {
-        if (art.hls) art.hls.destroy();
-        const hls = new Hls();
-        hls.loadSource(url);
-        hls.attachMedia(video);
-        art.hls = hls;
-        art.on('destroy', () => hls.destroy());
-    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-        video.src = url;
-    } else {
-        art.notice.show = 'Unsupported playback format: m3u8';
-    }
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
-    type: 'm3u8',
-    customType: {
-        m3u8: playM3u8,
-    },
-});
-
-art.on('ready', () => {
-    console.info(art.hls);
-});
`,1),E=[e,t,k,r];function d(y,c,g,o,b,F){return l(),n("div",null,E)}const _=a(h,[["render",d]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/library_hls.md.dMAWlqwL.lean.js b/docs/document/assets/library_hls.md.dMAWlqwL.lean.js deleted file mode 100644 index 4e44cfff2..000000000 --- a/docs/document/assets/library_hls.md.dMAWlqwL.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,k as s,a as i,R as p}from"./chunks/framework.0i_P4VHR.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/hls.md","filePath":"library/hls.md","lastUpdated":1682237343000}'),h={name:"library/hls.md"},e=s("h1",{id:"hls-js",tabindex:"-1"},[i("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-label":'Permalink to "hls.js"'},"​")],-1),t=s("p",null,[i("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),r=p("",1),E=[e,t,k,r];function d(y,c,g,o,b,F){return l(),n("div",null,E)}const _=a(h,[["render",d]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/plugin_ads.md.9ab59996.js b/docs/document/assets/plugin_ads.md.9ab59996.js new file mode 100644 index 000000000..8f8d64cfd --- /dev/null +++ b/docs/document/assets/plugin_ads.md.9ab59996.js @@ -0,0 +1,48 @@ +import{_ as a,c as n,o as l,V as s,z as p}from"./chunks/framework.5c8808ab.js";const u=JSON.parse('{"title":"视频广告","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/ads.md","filePath":"plugin/ads.md","lastUpdated":1673441101000}'),e={name:"plugin/ads.md"},o=s('

视频广告 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-ads
bash
yarn add artplayer-plugin-ads
bash
pnpm add artplayer-plugin-ads
html
<script src="path/to/artplayer-plugin-ads.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
bash
https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js

使用 ​

',8),r=p("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),t=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    plugins: [
+        artplayerPluginAds({
+            // html广告，假如是视频广告则忽略该值
+            html: '<img src="/assets/sample/poster.jpg">',
+
+            // 视频广告的地址
+            video: '/assets/sample/test1.mp4',
+
+            // 广告跳转网址，为空则不跳转
+            url: 'http://artplayer.org',
+
+            // 必须观看的时长，期间不能被跳过，单位为秒
+            // 当该值大于或等于totalDuration时，不能提前关闭广告
+            // 当该值等于或小于0时，则随时都可以关闭广告
+            playDuration: 5,
+
+            // 广告总时长，单位为秒
+            totalDuration: 10,
+
+            // 视频广告是否默认静音
+            muted: false,
+
+            // 多语言支持
+            i18n: {
+                close: '关闭广告',
+                countdown: '%s秒',
+                detail: '查看详情',
+                canBeClosed: '%s秒后可关闭广告',
+            },
+        }),
+    ],
+});
+
+// ad is clicked
+art.on('artplayerPluginAds:click', (ads) => {
+    console.info(ads);
+});
+
+// Ad skipped
+art.on('artplayerPluginAds:skip', (ads) => {
+    console.info(ads);
+});
`,1),c=[o,r,t];function i(D,y,F,C,b,d){return l(),n("div",null,c)}const m=a(e,[["render",i]]);export{u as __pageData,m as default}; diff --git a/docs/document/assets/plugin_ads.md.9ab59996.lean.js b/docs/document/assets/plugin_ads.md.9ab59996.lean.js new file mode 100644 index 000000000..dbe8f42f9 --- /dev/null +++ b/docs/document/assets/plugin_ads.md.9ab59996.lean.js @@ -0,0 +1 @@ +import{_ as a,c as n,o as l,V as s,z as p}from"./chunks/framework.5c8808ab.js";const u=JSON.parse('{"title":"视频广告","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/ads.md","filePath":"plugin/ads.md","lastUpdated":1673441101000}'),e={name:"plugin/ads.md"},o=s("",8),r=p("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),t=s("",1),c=[o,r,t];function i(D,y,F,C,b,d){return l(),n("div",null,c)}const m=a(e,[["render",i]]);export{u as __pageData,m as default}; diff --git a/docs/document/assets/plugin_ads.md.gRoRf0IC.js b/docs/document/assets/plugin_ads.md.gRoRf0IC.js deleted file mode 100644 index a3c6ff637..000000000 --- a/docs/document/assets/plugin_ads.md.gRoRf0IC.js +++ /dev/null @@ -1,48 +0,0 @@ -import{_ as a,c as i,o as n,R as s,k as l}from"./chunks/framework.0i_P4VHR.js";const y=JSON.parse('{"title":"视频广告","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/ads.md","filePath":"plugin/ads.md","lastUpdated":1673441101000}'),p={name:"plugin/ads.md"},e=s('

视频广告 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-ads
bash
yarn add artplayer-plugin-ads
bash
pnpm add artplayer-plugin-ads
html
<script src="path/to/artplayer-plugin-ads.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
bash
https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js

使用 ​

',8),t=l("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),h=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-    fullscreen: true,
-    fullscreenWeb: true,
-    plugins: [
-        artplayerPluginAds({
-            // html广告，假如是视频广告则忽略该值
-            html: '<img src="/assets/sample/poster.jpg">',
-
-            // 视频广告的地址
-            video: '/assets/sample/test1.mp4',
-
-            // 广告跳转网址，为空则不跳转
-            url: 'http://artplayer.org',
-
-            // 必须观看的时长，期间不能被跳过，单位为秒
-            // 当该值大于或等于totalDuration时，不能提前关闭广告
-            // 当该值等于或小于0时，则随时都可以关闭广告
-            playDuration: 5,
-
-            // 广告总时长，单位为秒
-            totalDuration: 10,
-
-            // 视频广告是否默认静音
-            muted: false,
-
-            // 多语言支持
-            i18n: {
-                close: '关闭广告',
-                countdown: '%s秒',
-                detail: '查看详情',
-                canBeClosed: '%s秒后可关闭广告',
-            },
-        }),
-    ],
-});
-
-// ad is clicked
-art.on('artplayerPluginAds:click', (ads) => {
-    console.info(ads);
-});
-
-// Ad skipped
-art.on('artplayerPluginAds:skip', (ads) => {
-    console.info(ads);
-});
`,1),r=[e,t,h];function k(d,E,c,b,g,u){return n(),i("div",null,r)}const m=a(p,[["render",k]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/plugin_ads.md.gRoRf0IC.lean.js b/docs/document/assets/plugin_ads.md.gRoRf0IC.lean.js deleted file mode 100644 index 03f525243..000000000 --- a/docs/document/assets/plugin_ads.md.gRoRf0IC.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as i,o as n,R as s,k as l}from"./chunks/framework.0i_P4VHR.js";const y=JSON.parse('{"title":"视频广告","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/ads.md","filePath":"plugin/ads.md","lastUpdated":1673441101000}'),p={name:"plugin/ads.md"},e=s("",8),t=l("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),h=s("",1),r=[e,t,h];function k(d,E,c,b,g,u){return n(),i("div",null,r)}const m=a(p,[["render",k]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/plugin_danmuku.md.6Sr90uTr.js b/docs/document/assets/plugin_danmuku.md.6Sr90uTr.js deleted file mode 100644 index b2053f645..000000000 --- a/docs/document/assets/plugin_danmuku.md.6Sr90uTr.js +++ /dev/null @@ -1,284 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const V=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1683036652000}'),p={name:"plugin/danmuku.md"},h=s(`

弹幕库 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js

选项 ​

js
{
-    danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
-    speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
-    opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
-    fontSize: 25, // 字体大小，支持数字和百分比
-    color: '#FFFFFF', // 默认字体颜色
-    mode: 0, // 默认模式，0-滚动，1-静止
-    margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
-    antiOverlap: true, // 是否防重叠
-    useWorker: true, // 是否使用 web worker
-    synchronousPlayback: false, // 是否同步到播放速度
-    filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
-    lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
-    maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
-    minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
-    maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
-    theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
-    heatmap: true, // 是否开启弹幕热度图, 默认为 false
-    beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
-    // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
-    mount: document.querySelector('.artplayer-danmuku'),
-}

使用弹幕数组 ​

`,10),e=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),k=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            // 弹幕数组
-            danmuku: [
-                {
-                    text: '111', // 弹幕文本
-                    time: 1, // 发送时间，单位秒
-                    color: '#fff', // 弹幕局部颜色
-                    border: false, // 是否显示描边
-                    mode: 0, // 弹幕模式: 0表示滚动, 1静止
-                },
-                {
-                    text: '222',
-                    time: 2,
-                    color: 'red',
-                    border: true,
-                    mode: 0,
-                },
-                {
-                    text: '333',
-                    time: 3,
-                    color: 'green',
-                    border: false,
-                    mode: 1,
-                },
-            ],
-        }),
-    ],
-});

使用弹幕 XML ​

`,2),t=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),E=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            // 弹幕 XML 文件，和 Bilibili 网站的弹幕格式一致
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});

使用异步调用 ​

`,2),r=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),d=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            // 使用 Promise 异步返回
-            danmuku: function () {
-                return new Promise((resovle) => {
-                    return resovle([
-                        {
-                            text: '111',
-                            time: 1,
-                        },
-                        {
-                            text: '222',
-                            time: 2,
-                        },
-                        {
-                            text: '333',
-                            time: 3,
-                        },
-                    ]);
-                });
-            },
-        }),
-    ],
-});

hide/show ​

通过方法 hide 和 show 进行隐藏或者显示弹幕

`,3),g=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),c=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '隐藏弹幕',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.hide();
-            },
-        },
-        {
-            position: 'right',
-            html: '显示弹幕',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.show();
-            },
-        },
-    ],
-});

isHide ​

通过属性 isHide 判断当前弹幕是隐藏或者显示

`,3),y=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),u=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '隐藏弹幕',
-            click: function (_, event) {
-                if (art.plugins.artplayerPluginDanmuku.isHide) {
-                    art.plugins.artplayerPluginDanmuku.show();
-                    event.target.innerText = '隐藏弹幕';
-                } else {
-                    art.plugins.artplayerPluginDanmuku.hide();
-                    event.target.innerText = '显示弹幕';
-                }
-            },
-        },
-    ],
-});

emit ​

通过方法 emit 发送一条实时弹幕

`,3),b=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),F=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '发送弹幕',
-            click: function () {
-                var text = prompt('请输入弹幕文本', '弹幕测试文本');
-                if (!text || !text.trim()) return;
-                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
-                art.plugins.artplayerPluginDanmuku.emit({
-                    text: text,
-                    color: color,
-                    border: true,
-                });
-            },
-        },
-    ],
-});

config ​

通过方法 config 实时改变弹幕配置，支持属性有：

  • danmuku
  • speed
  • opacity
  • fontSize
  • color
  • mode
  • margin
  • antiOverlap
  • synchronousPlayback
  • filter
  • lockTime
  • beforeEmit
`,4),m=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),o=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '弹幕大小：<input type="range" min="12" max="50" step="1" value="25">',
-            style: {
-                display: 'flex',
-                alignItems: 'center',
-            },
-            mounted: function ($setting) {
-                const $range = $setting.querySelector('input[type=range]');
-                $range.addEventListener('change', () => {
-                    art.plugins.artplayerPluginDanmuku.config({
-                        fontSize: Number($range.value),
-                    });
-                });
-            },
-        },
-    ],
-});

load ​

通过 load 方法可以重载弹幕源，或者切换新弹幕

`,3),C=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),B=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '重载弹幕',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.load();
-            },
-        },
-        {
-            position: 'right',
-            html: '切换弹幕',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.config({
-                    danmuku: '/assets/sample/danmuku-v2.xml',
-                });
-                art.plugins.artplayerPluginDanmuku.load();
-            },
-        },
-    ],
-});

reset ​

用于清空当前显示的弹幕

`,3),v=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),A=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
-
-art.on('resize', () => {
-    art.plugins.artplayerPluginDanmuku.reset();
-});

option ​

用于获取当前弹幕配置

`,3),_=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),D=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
-
-art.on('ready', () => {
-    console.info(art.plugins.artplayerPluginDanmuku.option);
-});

事件 ​

js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
-
-art.on('artplayerPluginDanmuku:emit', (danmu) => {
-    console.info('新增弹幕', danmu);
-});
-
-art.on('artplayerPluginDanmuku:loaded', (danmus) => {
-    console.info('加载弹幕', danmus.length);
-});
-
-art.on('artplayerPluginDanmuku:error', (error) => {
-    console.info('加载错误', error);
-});
-
-art.on('artplayerPluginDanmuku:config', (option) => {
-    console.info('配置变化', option);
-});
-
-art.on('artplayerPluginDanmuku:stop', () => {
-    console.info('弹幕停止');
-});
-
-art.on('artplayerPluginDanmuku:start', () => {
-    console.info('弹幕开始');
-});
-
-art.on('artplayerPluginDanmuku:hide', () => {
-    console.info('弹幕隐藏');
-});
-
-art.on('artplayerPluginDanmuku:show', () => {
-    console.info('弹幕显示');
-});
-
-art.on('artplayerPluginDanmuku:destroy', () => {
-    console.info('弹幕销毁');
-});
`,3),f=[h,e,k,t,E,r,d,g,c,y,u,b,F,m,o,C,B,v,A,_,D];function P(T,x,q,S,j,w){return l(),n("div",null,f)}const I=a(p,[["render",P]]);export{V as __pageData,I as default}; diff --git a/docs/document/assets/plugin_danmuku.md.6Sr90uTr.lean.js b/docs/document/assets/plugin_danmuku.md.6Sr90uTr.lean.js deleted file mode 100644 index 6d29c4d35..000000000 --- a/docs/document/assets/plugin_danmuku.md.6Sr90uTr.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const V=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1683036652000}'),p={name:"plugin/danmuku.md"},h=s("",10),e=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),k=s("",2),t=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),E=s("",2),r=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),d=s("",3),g=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),c=s("",3),y=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),u=s("",3),b=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),F=s("",4),m=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),o=s("",3),C=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),B=s("",3),v=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),A=s("",3),_=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),D=s("",3),f=[h,e,k,t,E,r,d,g,c,y,u,b,F,m,o,C,B,v,A,_,D];function P(T,x,q,S,j,w){return l(),n("div",null,f)}const I=a(p,[["render",P]]);export{V as __pageData,I as default}; diff --git a/docs/document/assets/plugin_danmuku.md.df77c020.js b/docs/document/assets/plugin_danmuku.md.df77c020.js new file mode 100644 index 000000000..32575652c --- /dev/null +++ b/docs/document/assets/plugin_danmuku.md.df77c020.js @@ -0,0 +1,284 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const I=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1683036652000}'),o={name:"plugin/danmuku.md"},e=s(`

弹幕库 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js

选项 ​

js
{
+    danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
+    speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
+    opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
+    fontSize: 25, // 字体大小，支持数字和百分比
+    color: '#FFFFFF', // 默认字体颜色
+    mode: 0, // 默认模式，0-滚动，1-静止
+    margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
+    antiOverlap: true, // 是否防重叠
+    useWorker: true, // 是否使用 web worker
+    synchronousPlayback: false, // 是否同步到播放速度
+    filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
+    lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
+    maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
+    minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
+    maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
+    theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
+    heatmap: true, // 是否开启弹幕热度图, 默认为 false
+    beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
+    // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
+    mount: document.querySelector('.artplayer-danmuku'),
+}

使用弹幕数组 ​

`,10),r=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),c=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            // 弹幕数组
+            danmuku: [
+                {
+                    text: '111', // 弹幕文本
+                    time: 1, // 发送时间，单位秒
+                    color: '#fff', // 弹幕局部颜色
+                    border: false, // 是否显示描边
+                    mode: 0, // 弹幕模式: 0表示滚动, 1静止
+                },
+                {
+                    text: '222',
+                    time: 2,
+                    color: 'red',
+                    border: true,
+                    mode: 0,
+                },
+                {
+                    text: '333',
+                    time: 3,
+                    color: 'green',
+                    border: false,
+                    mode: 1,
+                },
+            ],
+        }),
+    ],
+});

使用弹幕 XML ​

`,2),t=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),D=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            // 弹幕 XML 文件，和 Bilibili 网站的弹幕格式一致
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});

使用异步调用 ​

`,2),F=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),y=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            // 使用 Promise 异步返回
+            danmuku: function () {
+                return new Promise((resovle) => {
+                    return resovle([
+                        {
+                            text: '111',
+                            time: 1,
+                        },
+                        {
+                            text: '222',
+                            time: 2,
+                        },
+                        {
+                            text: '333',
+                            time: 3,
+                        },
+                    ]);
+                });
+            },
+        }),
+    ],
+});

hide/show ​

通过方法 hide 和 show 进行隐藏或者显示弹幕

`,3),i=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),C=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '隐藏弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.hide();
+            },
+        },
+        {
+            position: 'right',
+            html: '显示弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.show();
+            },
+        },
+    ],
+});

isHide ​

通过属性 isHide 判断当前弹幕是隐藏或者显示

`,3),A=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),u=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '隐藏弹幕',
+            click: function (_, event) {
+                if (art.plugins.artplayerPluginDanmuku.isHide) {
+                    art.plugins.artplayerPluginDanmuku.show();
+                    event.target.innerText = '隐藏弹幕';
+                } else {
+                    art.plugins.artplayerPluginDanmuku.hide();
+                    event.target.innerText = '显示弹幕';
+                }
+            },
+        },
+    ],
+});

emit ​

通过方法 emit 发送一条实时弹幕

`,3),b=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),m=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '发送弹幕',
+            click: function () {
+                var text = prompt('请输入弹幕文本', '弹幕测试文本');
+                if (!text || !text.trim()) return;
+                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
+                art.plugins.artplayerPluginDanmuku.emit({
+                    text: text,
+                    color: color,
+                    border: true,
+                });
+            },
+        },
+    ],
+});

config ​

通过方法 config 实时改变弹幕配置，支持属性有：

  • danmuku
  • speed
  • opacity
  • fontSize
  • color
  • mode
  • margin
  • antiOverlap
  • synchronousPlayback
  • filter
  • lockTime
  • beforeEmit
`,4),d=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),h=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '弹幕大小：<input type="range" min="12" max="50" step="1" value="25">',
+            style: {
+                display: 'flex',
+                alignItems: 'center',
+            },
+            mounted: function ($setting) {
+                const $range = $setting.querySelector('input[type=range]');
+                $range.addEventListener('change', () => {
+                    art.plugins.artplayerPluginDanmuku.config({
+                        fontSize: Number($range.value),
+                    });
+                });
+            },
+        },
+    ],
+});

load ​

通过 load 方法可以重载弹幕源，或者切换新弹幕

`,3),g=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),_=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '重载弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+        {
+            position: 'right',
+            html: '切换弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.config({
+                    danmuku: '/assets/sample/danmuku-v2.xml',
+                });
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+    ],
+});

reset ​

用于清空当前显示的弹幕

`,3),E=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),k=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('resize', () => {
+    art.plugins.artplayerPluginDanmuku.reset();
+});

option ​

用于获取当前弹幕配置

`,3),v=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),f=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('ready', () => {
+    console.info(art.plugins.artplayerPluginDanmuku.option);
+});

事件 ​

js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('artplayerPluginDanmuku:emit', (danmu) => {
+    console.info('新增弹幕', danmu);
+});
+
+art.on('artplayerPluginDanmuku:loaded', (danmus) => {
+    console.info('加载弹幕', danmus.length);
+});
+
+art.on('artplayerPluginDanmuku:error', (error) => {
+    console.info('加载错误', error);
+});
+
+art.on('artplayerPluginDanmuku:config', (option) => {
+    console.info('配置变化', option);
+});
+
+art.on('artplayerPluginDanmuku:stop', () => {
+    console.info('弹幕停止');
+});
+
+art.on('artplayerPluginDanmuku:start', () => {
+    console.info('弹幕开始');
+});
+
+art.on('artplayerPluginDanmuku:hide', () => {
+    console.info('弹幕隐藏');
+});
+
+art.on('artplayerPluginDanmuku:show', () => {
+    console.info('弹幕显示');
+});
+
+art.on('artplayerPluginDanmuku:destroy', () => {
+    console.info('弹幕销毁');
+});
`,3),P=[e,r,c,t,D,F,y,i,C,A,u,b,m,d,h,g,_,E,k,v,f];function T(x,B,q,j,S,w){return p(),l("div",null,P)}const N=a(o,[["render",T]]);export{I as __pageData,N as default}; diff --git a/docs/document/assets/plugin_danmuku.md.df77c020.lean.js b/docs/document/assets/plugin_danmuku.md.df77c020.lean.js new file mode 100644 index 000000000..4d19b9c2b --- /dev/null +++ b/docs/document/assets/plugin_danmuku.md.df77c020.lean.js @@ -0,0 +1 @@ +import{_ as a,c as l,o as p,V as s,z as n}from"./chunks/framework.5c8808ab.js";const I=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1683036652000}'),o={name:"plugin/danmuku.md"},e=s("",10),r=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),c=s("",2),t=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),D=s("",2),F=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),y=s("",3),i=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),C=s("",3),A=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),u=s("",3),b=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),m=s("",4),d=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),h=s("",3),g=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),_=s("",3),E=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),k=s("",3),v=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),f=s("",3),P=[e,r,c,t,D,F,y,i,C,A,u,b,m,d,h,g,_,E,k,v,f];function T(x,B,q,j,S,w){return p(),l("div",null,P)}const N=a(o,[["render",T]]);export{I as __pageData,N as default}; diff --git a/docs/document/assets/plugin_dash-quality.md.9e6180e5.js b/docs/document/assets/plugin_dash-quality.md.9e6180e5.js new file mode 100644 index 000000000..b13327c2a --- /dev/null +++ b/docs/document/assets/plugin_dash-quality.md.9e6180e5.js @@ -0,0 +1 @@ +import{_ as a,c as s,o as e,V as l}from"./chunks/framework.5c8808ab.js";const y=JSON.parse('{"title":"Dash 画质","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/dash-quality.md","filePath":"plugin/dash-quality.md","lastUpdated":1676696783000}'),n={name:"plugin/dash-quality.md"},t=l('

Dash 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-dash-quality
bash
yarn add artplayer-plugin-dash-quality
bash
pnpm add artplayer-plugin-dash-quality
html
<script src="path/to/artplayer-plugin-dash-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
bash
https://unpkg.com/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
',7),p=[t];function r(i,o,d,c,u,h){return e(),s("div",null,p)}const m=a(n,[["render",r]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/plugin_dash-quality.md.9e6180e5.lean.js b/docs/document/assets/plugin_dash-quality.md.9e6180e5.lean.js new file mode 100644 index 000000000..a19b98f57 --- /dev/null +++ b/docs/document/assets/plugin_dash-quality.md.9e6180e5.lean.js @@ -0,0 +1 @@ +import{_ as a,c as s,o as e,V as l}from"./chunks/framework.5c8808ab.js";const y=JSON.parse('{"title":"Dash 画质","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/dash-quality.md","filePath":"plugin/dash-quality.md","lastUpdated":1676696783000}'),n={name:"plugin/dash-quality.md"},t=l("",7),p=[t];function r(i,o,d,c,u,h){return e(),s("div",null,p)}const m=a(n,[["render",r]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/plugin_dash-quality.md.l9HmSZHU.js b/docs/document/assets/plugin_dash-quality.md.l9HmSZHU.js deleted file mode 100644 index d4c710c04..000000000 --- a/docs/document/assets/plugin_dash-quality.md.l9HmSZHU.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as s,o as i,R as e}from"./chunks/framework.0i_P4VHR.js";const k=JSON.parse('{"title":"Dash 画质","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/dash-quality.md","filePath":"plugin/dash-quality.md","lastUpdated":1676696783000}'),t={name:"plugin/dash-quality.md"},l=e('

Dash 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-dash-quality
bash
yarn add artplayer-plugin-dash-quality
bash
pnpm add artplayer-plugin-dash-quality
html
<script src="path/to/artplayer-plugin-dash-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
bash
https://unpkg.com/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
',7),n=[l];function p(d,r,h,o,c,u){return i(),s("div",null,n)}const g=a(t,[["render",p]]);export{k as __pageData,g as default}; diff --git a/docs/document/assets/plugin_dash-quality.md.l9HmSZHU.lean.js b/docs/document/assets/plugin_dash-quality.md.l9HmSZHU.lean.js deleted file mode 100644 index 62d57aad3..000000000 --- a/docs/document/assets/plugin_dash-quality.md.l9HmSZHU.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as s,o as i,R as e}from"./chunks/framework.0i_P4VHR.js";const k=JSON.parse('{"title":"Dash 画质","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/dash-quality.md","filePath":"plugin/dash-quality.md","lastUpdated":1676696783000}'),t={name:"plugin/dash-quality.md"},l=e("",7),n=[l];function p(d,r,h,o,c,u){return i(),s("div",null,n)}const g=a(t,[["render",p]]);export{k as __pageData,g as default}; diff --git a/docs/document/assets/plugin_hls-quality.md.1bd7508a.js b/docs/document/assets/plugin_hls-quality.md.1bd7508a.js new file mode 100644 index 000000000..5518c951a --- /dev/null +++ b/docs/document/assets/plugin_hls-quality.md.1bd7508a.js @@ -0,0 +1 @@ +import{_ as a,c as s,o as l,V as e}from"./chunks/framework.5c8808ab.js";const y=JSON.parse('{"title":"HLS 画质","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/hls-quality.md","filePath":"plugin/hls-quality.md","lastUpdated":1673441101000}'),n={name:"plugin/hls-quality.md"},t=e('

HLS 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-hls-quality
bash
yarn add artplayer-plugin-hls-quality
bash
pnpm add artplayer-plugin-hls-quality
html
<script src="path/to/artplayer-plugin-hls-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
bash
https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
',7),p=[t];function i(r,o,c,d,u,h){return l(),s("div",null,p)}const m=a(n,[["render",i]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/plugin_hls-quality.md.1bd7508a.lean.js b/docs/document/assets/plugin_hls-quality.md.1bd7508a.lean.js new file mode 100644 index 000000000..b54e2089a --- /dev/null +++ b/docs/document/assets/plugin_hls-quality.md.1bd7508a.lean.js @@ -0,0 +1 @@ +import{_ as a,c as s,o as l,V as e}from"./chunks/framework.5c8808ab.js";const y=JSON.parse('{"title":"HLS 画质","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/hls-quality.md","filePath":"plugin/hls-quality.md","lastUpdated":1673441101000}'),n={name:"plugin/hls-quality.md"},t=e("",7),p=[t];function i(r,o,c,d,u,h){return l(),s("div",null,p)}const m=a(n,[["render",i]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/plugin_hls-quality.md.pI7BTVQv.js b/docs/document/assets/plugin_hls-quality.md.pI7BTVQv.js deleted file mode 100644 index 7159ba8b1..000000000 --- a/docs/document/assets/plugin_hls-quality.md.pI7BTVQv.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as s,o as i,R as e}from"./chunks/framework.0i_P4VHR.js";const k=JSON.parse('{"title":"HLS 画质","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/hls-quality.md","filePath":"plugin/hls-quality.md","lastUpdated":1673441101000}'),l={name:"plugin/hls-quality.md"},t=e('

HLS 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-hls-quality
bash
yarn add artplayer-plugin-hls-quality
bash
pnpm add artplayer-plugin-hls-quality
html
<script src="path/to/artplayer-plugin-hls-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
bash
https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
',7),n=[t];function p(r,d,h,c,o,u){return i(),s("div",null,n)}const g=a(l,[["render",p]]);export{k as __pageData,g as default}; diff --git a/docs/document/assets/plugin_hls-quality.md.pI7BTVQv.lean.js b/docs/document/assets/plugin_hls-quality.md.pI7BTVQv.lean.js deleted file mode 100644 index 1f49467ad..000000000 --- a/docs/document/assets/plugin_hls-quality.md.pI7BTVQv.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as s,o as i,R as e}from"./chunks/framework.0i_P4VHR.js";const k=JSON.parse('{"title":"HLS 画质","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/hls-quality.md","filePath":"plugin/hls-quality.md","lastUpdated":1673441101000}'),l={name:"plugin/hls-quality.md"},t=e("",7),n=[t];function p(r,d,h,c,o,u){return i(),s("div",null,n)}const g=a(l,[["render",p]]);export{k as __pageData,g as default}; diff --git a/docs/document/assets/plugin_iframe.md.70937a79.js b/docs/document/assets/plugin_iframe.md.70937a79.js new file mode 100644 index 000000000..05c7f1d22 --- /dev/null +++ b/docs/document/assets/plugin_iframe.md.70937a79.js @@ -0,0 +1,166 @@ +import{_ as s,c as a,o as n,V as l}from"./chunks/framework.5c8808ab.js";const A=JSON.parse('{"title":"Iframe 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/iframe.md","filePath":"plugin/iframe.md","lastUpdated":1680272727000}'),p={name:"plugin/iframe.md"},o=l(`

Iframe 控制 ​

说明 ​

通过该插件，你可以轻松在 index.html 里控制跨域 iframe.html 页面里的播放器，如在 index.html 里通过代码控制 iframe.html 播放器的功能，或者获取 iframe.html 播放器的值

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-iframe
bash
yarn add artplayer-plugin-iframe
bash
pnpm add artplayer-plugin-iframe
html
<script src="path/to/artplayer-plugin-iframe.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
bash
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js

使用 ​

html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <iframe id="iframe"></iframe>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            const iframe = new ArtplayerPluginIframe({
+                // Iframe element
+                iframe: document.querySelector('#iframe'),
+                // Iframe url
+                url: 'path/to/iframe.html',
+            });
+
+            // Send message to iframe
+            iframe.commit(() => {
+                var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: 'path/to/video.mp4',
+                });
+            });
+        </script>
+    </body>
+</html>
html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            // Inject scripts to receive messages from instances
+            ArtplayerPluginIframe.inject();
+        </script>
+    </body>
+</html>

index.html 接口 ​

commit ​

从 index.html 将消息推送到 iframe.html，该函数将在 iframe.html 内部运行，同时它也能用于异步获取 iframe.html 里的值

js
iframe.commit(() => {
+    var art = new Artplayer({
+        container: '.artplayer-app',
+        url: 'path/to/video.mp4',
+    });
+});
+
+iframe.commit(() => {
+    art.seek = 5;
+});
+
+// Get the value from the iframe.html
+(async function () {
+    // Use the return keyword
+    var currentTime = await iframe.commit(() => {
+        return art.currentTime;
+    });
+
+    // or use the resolve method
+    var currentTime2 = await iframe.commit((resolve) => {
+        setTimeout(() => {
+            resolve(art.currentTime);
+        }, 1000);
+    });
+})();

message ​

在 index.html 接收来自 iframe.html 的消息

js
iframe.message((event) => {
+    console.info(event);
+});

destroy ​

销毁后 index.html 无法与 iframe.html 通信

js
iframe.destroy();

iframe.html 接口 ​

提示

iframe.html 接口 只能运行在 iframe.html 里

inject ​

注入脚本，接收来自 index.html 的消息

js
ArtplayerPluginIframe.inject();

postMessage ​

将消息推送到 index.html

js
iframe.message((event) => {
+    console.info(event);
+});
+
+iframe.commit(() => {
+    ArtplayerPluginIframe.postMessage({
+        type: 'currentTime',
+        data: art.currentTime,
+    });
+});

例子 ​

最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 iframe.html 里的 fullscreenWeb 事件并通知到 index.html 即可

html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <iframe id="iframe"></iframe>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <style>
+            .fullscreenWeb {
+                position: fixed;
+                z-index: 9999;
+                width: 100%;
+                height: 100%;
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+            }
+        </style>
+        <script>
+            const $iframe = document.querySelector('#iframe');
+            const iframe = new ArtplayerPluginIframe({
+                iframe: $iframe,
+                url: 'path/to/iframe.html',
+            });
+
+            iframe.message(({ type, data }) => {
+                switch (type) {
+                    case 'fullscreenWeb':
+                        if (data) {
+                            $iframe.classList.add('fullscreenWeb');
+                        } else {
+                            $iframe.classList.remove('fullscreenWeb');
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            });
+
+            iframe.commit(() => {
+                var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: 'path/to/video.mp4',
+                });
+
+                art.on('fullscreenWeb', (state) => {
+                    ArtplayerPluginIframe.postMessage({
+                        type: 'fullscreenWeb',
+                        data: state,
+                    });
+                });
+            });
+        </script>
+    </body>
+</html>
html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            ArtplayerPluginIframe.inject();
+        </script>
+    </body>
+</html>
`,32),e=[o];function r(t,c,F,D,y,i){return n(),a("div",null,e)}const b=s(p,[["render",r]]);export{A as __pageData,b as default}; diff --git a/docs/document/assets/plugin_iframe.md.70937a79.lean.js b/docs/document/assets/plugin_iframe.md.70937a79.lean.js new file mode 100644 index 000000000..48cbd6287 --- /dev/null +++ b/docs/document/assets/plugin_iframe.md.70937a79.lean.js @@ -0,0 +1 @@ +import{_ as s,c as a,o as n,V as l}from"./chunks/framework.5c8808ab.js";const A=JSON.parse('{"title":"Iframe 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/iframe.md","filePath":"plugin/iframe.md","lastUpdated":1680272727000}'),p={name:"plugin/iframe.md"},o=l("",32),e=[o];function r(t,c,F,D,y,i){return n(),a("div",null,e)}const b=s(p,[["render",r]]);export{A as __pageData,b as default}; diff --git a/docs/document/assets/plugin_iframe.md._V2kijq2.js b/docs/document/assets/plugin_iframe.md._V2kijq2.js deleted file mode 100644 index 3cd191556..000000000 --- a/docs/document/assets/plugin_iframe.md._V2kijq2.js +++ /dev/null @@ -1,168 +0,0 @@ -import{_ as s,c as i,o as a,R as n}from"./chunks/framework.0i_P4VHR.js";const y=JSON.parse('{"title":"Iframe 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/iframe.md","filePath":"plugin/iframe.md","lastUpdated":1680272727000}'),l={name:"plugin/iframe.md"},p=n(`

Iframe 控制 ​

说明 ​

通过该插件，你可以轻松在 index.html 里控制跨域 iframe.html 页面里的播放器，如在 index.html 里通过代码控制 iframe.html 播放器的功能，或者获取 iframe.html 播放器的值

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-iframe
bash
yarn add artplayer-plugin-iframe
bash
pnpm add artplayer-plugin-iframe
html
<script src="path/to/artplayer-plugin-iframe.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
bash
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js

使用 ​

html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-    </head>
-    <body>
-        <iframe id="iframe"></iframe>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            const iframe = new ArtplayerPluginIframe({
-                // Iframe element
-                iframe: document.querySelector('#iframe'),
-                // Iframe url
-                url: 'path/to/iframe.html',
-            });
-
-            // Send message to iframe
-            iframe.commit(() => {
-                var art = new Artplayer({
-                    container: '.artplayer-app',
-                    url: 'path/to/video.mp4',
-                });
-            });
-        </script>
-    </body>
-</html>
html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-        <style>
-            html,
-            body {
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                padding: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
-        <script src="path/to/artplayer.js"></script>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            // Inject scripts to receive messages from instances
-            ArtplayerPluginIframe.inject();
-        </script>
-    </body>
-</html>

index.html 接口 ​

commit ​

从 index.html 将消息推送到 iframe.html，该函数将在 iframe.html 内部运行，同时它也能用于异步获取 iframe.html 里的值

js
iframe.commit(() => {
-    var art = new Artplayer({
-        container: '.artplayer-app',
-        url: 'path/to/video.mp4',
-    });
-});
-
-iframe.commit(() => {
-    art.seek = 5;
-});
-
-// Get the value from the iframe.html
-(async function () {
-    // Use the return keyword
-    var currentTime = await iframe.commit(() => {
-        return art.currentTime;
-    });
-
-    // or use the resolve method
-    var currentTime2 = await iframe.commit((resolve) => {
-        setTimeout(() => {
-            resolve(art.currentTime);
-        }, 1000);
-    });
-})();

message ​

在 index.html 接收来自 iframe.html 的消息

js
iframe.message((event) => {
-    console.info(event);
-});

destroy ​

销毁后 index.html 无法与 iframe.html 通信

js
iframe.destroy();

iframe.html 接口 ​

提示

iframe.html 接口 只能运行在 iframe.html 里

inject ​

注入脚本，接收来自 index.html 的消息

js
ArtplayerPluginIframe.inject();

postMessage ​

将消息推送到 index.html

js
iframe.message((event) => {
-    console.info(event);
-});
-
-iframe.commit(() => {
-    ArtplayerPluginIframe.postMessage({
-        type: 'currentTime',
-        data: art.currentTime,
-    });
-});

例子 ​

最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 iframe.html 里的 fullscreenWeb 事件并通知到 index.html 即可

html

-<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-    </head>
-    <body>
-        <iframe id="iframe"></iframe>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <style>
-            .fullscreenWeb {
-                position: fixed;
-                z-index: 9999;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                right: 0;
-                bottom: 0;
-            }
-        </style>
-        <script>
-            const $iframe = document.querySelector('#iframe');
-            const iframe = new ArtplayerPluginIframe({
-                iframe: $iframe,
-                url: 'path/to/iframe.html',
-            });
-
-            iframe.message(({ type, data }) => {
-                switch (type) {
-                    case 'fullscreenWeb':
-                        if (data) {
-                            $iframe.classList.add('fullscreenWeb');
-                        } else {
-                            $iframe.classList.remove('fullscreenWeb');
-                        }
-                        break;
-                    default:
-                        break;
-                }
-            });
-
-            iframe.commit(() => {
-                var art = new Artplayer({
-                    container: '.artplayer-app',
-                    url: 'path/to/video.mp4',
-                });
-
-                art.on('fullscreenWeb', (state) => {
-                    ArtplayerPluginIframe.postMessage({
-                        type: 'fullscreenWeb',
-                        data: state,
-                    });
-                });
-            });
-        </script>
-    </body>
-</html>
html

-<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-        <style>
-            html,
-            body {
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                padding: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
-        <script src="path/to/artplayer.js"></script>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            ArtplayerPluginIframe.inject();
-        </script>
-    </body>
-</html>
`,32),h=[p];function e(t,k,r,E,d,g){return a(),i("div",null,h)}const b=s(l,[["render",e]]);export{y as __pageData,b as default}; diff --git a/docs/document/assets/plugin_iframe.md._V2kijq2.lean.js b/docs/document/assets/plugin_iframe.md._V2kijq2.lean.js deleted file mode 100644 index 57cfc3f11..000000000 --- a/docs/document/assets/plugin_iframe.md._V2kijq2.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as s,c as i,o as a,R as n}from"./chunks/framework.0i_P4VHR.js";const y=JSON.parse('{"title":"Iframe 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/iframe.md","filePath":"plugin/iframe.md","lastUpdated":1680272727000}'),l={name:"plugin/iframe.md"},p=n("",32),h=[p];function e(t,k,r,E,d,g){return a(),i("div",null,h)}const b=s(l,[["render",e]]);export{y as __pageData,b as default}; diff --git a/docs/document/assets/start_i18n.md.1612b4a2.js b/docs/document/assets/start_i18n.md.1612b4a2.js new file mode 100644 index 000000000..809aefd81 --- /dev/null +++ b/docs/document/assets/start_i18n.md.1612b4a2.js @@ -0,0 +1,52 @@ +import{_ as s,c as a,o as n,V as l}from"./chunks/framework.5c8808ab.js";const A=JSON.parse('{"title":"语言设置","description":"","frontmatter":{},"headers":[],"relativePath":"start/i18n.md","filePath":"start/i18n.md","lastUpdated":1693027339000}'),p={name:"start/i18n.md"},o=l(`

语言设置 ​

DANGER

鉴于捆绑的多国语言越来越多, 从 5.1.0 版本开始, artplayer.js 核心代码除了包含 简体中文 和 英文 外, 不再捆绑其它多国语言, 需要自行导入需要的语言。

WARNING

当无法匹配到语言时, 会默认显示英文, i18n 写法参考: artplayer/types/i18n.d.ts

默认语言 ​

默认语言有: en, zh-cn, 无需手动导入

js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'zh-cn', // or 'en'
+});

导入语言 ​

打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言

打包后的语言文件存放于: artplayer/dist/i18n/*.js

手动导入的语言有: cs, es, fa, fr, id, pl, ru, zh-tw

js
import id from 'artplayer/dist/i18n/id.js';
+import zhTw from 'artplayer/dist/i18n/zh-tw.js';
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: { 
+        id: id,
+        'zh-tw': zhTw,
+    },
+    lang: 'zh-tw',
+});
js
<script src="artplayer/dist/i18n/id.js"></script>
+<script src="artplayer/dist/i18n/zh-tw.js"></script>
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: { 
+        id: window['artplayer-i18n-id'],
+        'zh-tw': window['artplayer-i18n-zh-tw'],
+    },
+    lang: 'zh-tw',
+});

新增语言 ​

js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'your-lang',
+    i18n: {
+        'your-lang': {
+            Play: 'Your Play'
+        },
+    },
+});

修改语言 ​

js
import zhTw from 'artplayer/i18n/zh-tw.js';
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: {
+        // Change the default language
+        'zh-cn': {
+            Play: 'Your Play'
+        },
+        // Change the imported language
+        'zh-tw': {
+            ...zhTw,
+            Play: 'Your Play'
+        },
+    },
+});
`,15),e=[o];function r(c,t,D,y,F,i){return n(),a("div",null,e)}const d=s(p,[["render",r]]);export{A as __pageData,d as default}; diff --git a/docs/document/assets/start_i18n.md.1612b4a2.lean.js b/docs/document/assets/start_i18n.md.1612b4a2.lean.js new file mode 100644 index 000000000..76b30c217 --- /dev/null +++ b/docs/document/assets/start_i18n.md.1612b4a2.lean.js @@ -0,0 +1 @@ +import{_ as s,c as a,o as n,V as l}from"./chunks/framework.5c8808ab.js";const A=JSON.parse('{"title":"语言设置","description":"","frontmatter":{},"headers":[],"relativePath":"start/i18n.md","filePath":"start/i18n.md","lastUpdated":1693027339000}'),p={name:"start/i18n.md"},o=l("",15),e=[o];function r(c,t,D,y,F,i){return n(),a("div",null,e)}const d=s(p,[["render",r]]);export{A as __pageData,d as default}; diff --git a/docs/document/assets/start_i18n.md.amUnvbSR.js b/docs/document/assets/start_i18n.md.amUnvbSR.js deleted file mode 100644 index 4fb25683a..000000000 --- a/docs/document/assets/start_i18n.md.amUnvbSR.js +++ /dev/null @@ -1,52 +0,0 @@ -import{_ as s,c as a,o as i,R as n}from"./chunks/framework.0i_P4VHR.js";const y=JSON.parse('{"title":"语言设置","description":"","frontmatter":{},"headers":[],"relativePath":"start/i18n.md","filePath":"start/i18n.md","lastUpdated":1693027339000}'),l={name:"start/i18n.md"},p=n(`

语言设置 ​

DANGER

鉴于捆绑的多国语言越来越多, 从 5.1.0 版本开始, artplayer.js 核心代码除了包含 简体中文 和 英文 外, 不再捆绑其它多国语言, 需要自行导入需要的语言。

WARNING

当无法匹配到语言时, 会默认显示英文, i18n 写法参考: artplayer/types/i18n.d.ts

默认语言 ​

默认语言有: en, zh-cn, 无需手动导入

js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'zh-cn', // or 'en'
-});

导入语言 ​

打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言

打包后的语言文件存放于: artplayer/dist/i18n/*.js

手动导入的语言有: cs, es, fa, fr, id, pl, ru, zh-tw

js
import id from 'artplayer/dist/i18n/id.js';
-import zhTw from 'artplayer/dist/i18n/zh-tw.js';
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: { 
-        id: id,
-        'zh-tw': zhTw,
-    },
-    lang: 'zh-tw',
-});
js
<script src="artplayer/dist/i18n/id.js"></script>
-<script src="artplayer/dist/i18n/zh-tw.js"></script>
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: { 
-        id: window['artplayer-i18n-id'],
-        'zh-tw': window['artplayer-i18n-zh-tw'],
-    },
-    lang: 'zh-tw',
-});

新增语言 ​

js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'your-lang',
-    i18n: {
-        'your-lang': {
-            Play: 'Your Play'
-        },
-    },
-});

修改语言 ​

js
import zhTw from 'artplayer/i18n/zh-tw.js';
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: {
-        // Change the default language
-        'zh-cn': {
-            Play: 'Your Play'
-        },
-        // Change the imported language
-        'zh-tw': {
-            ...zhTw,
-            Play: 'Your Play'
-        },
-    },
-});
`,15),e=[p];function h(t,k,r,E,d,c){return i(),a("div",null,e)}const o=s(l,[["render",h]]);export{y as __pageData,o as default}; diff --git a/docs/document/assets/start_i18n.md.amUnvbSR.lean.js b/docs/document/assets/start_i18n.md.amUnvbSR.lean.js deleted file mode 100644 index d18e1f411..000000000 --- a/docs/document/assets/start_i18n.md.amUnvbSR.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as s,c as a,o as i,R as n}from"./chunks/framework.0i_P4VHR.js";const y=JSON.parse('{"title":"语言设置","description":"","frontmatter":{},"headers":[],"relativePath":"start/i18n.md","filePath":"start/i18n.md","lastUpdated":1693027339000}'),l={name:"start/i18n.md"},p=n("",15),e=[p];function h(t,k,r,E,d,c){return i(),a("div",null,e)}const o=s(l,[["render",h]]);export{y as __pageData,o as default}; diff --git a/docs/document/assets/start_option.md.93a8abff.js b/docs/document/assets/start_option.md.93a8abff.js new file mode 100644 index 000000000..7fdcd478f --- /dev/null +++ b/docs/document/assets/start_option.md.93a8abff.js @@ -0,0 +1,380 @@ +import{_ as n,c as l,o as p,V as s,z as a}from"./chunks/framework.5c8808ab.js";const ra=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1700581325000}'),e={name:"start/option.md"},o=s('

基础选项 ​

container ​

  • Type: String, Element
  • Default: #artplayer

播放器挂载的 DOM 容器

',4),c=a("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app', 
+    // container: document.querySelector('.artplayer-app'),
+    url: '/assets/sample/video.mp4',
+});

您可能需要初始化容器元素的大小，如:

css
.artplayer-app {
+    width: 400px;
+    height: 300px;
+}

或者使用 aspect-ratio：

css
.artplayer-app {
+    aspect-ratio: 16/9;
+}

提示

全部选项里，只有 container 是必填的

url ​

  • Type: String
  • Default: ''

视频源地址

`,9),t=a("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

有时候 url 地址没那么快知道，这时候你可以异步设置 url

`,2),i=a("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+});
+
+setTimeout(() => {
+    art.url = '/assets/sample/video.mp4';
+}, 1000);

提示

默认支持三种视频文件格式：.mp4, .ogg, .webm

如需要播放 .m3u8 或者 .flv 等其它格式，请参考左侧的 第三方库

id ​

  • Type: String
  • Default: ''

播放器的唯一标识，目前只用于记忆播放 autoplayback

`,5),F=a("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
+    id: 'your-url-id',
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

onReady ​

  • Type: Function
  • Default: undefined

构造函数接受一个函数作为第二个参数，播放器初始化成功且视频可以播放时触发，和ready事件一样

`,4),A=a("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer(
+    {
+        container: '.artplayer-app',
+        url: '/assets/sample/video.mp4',
+        muted: true,
+    },
+    function onReady(art) {
+        this.play()
+    },
+);

等同于:

js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    art.play();
+});

提示

回调函数里的this就是播放器实例，但回调函数假如使用了箭头函数，this则不会指向播放器实例

poster ​

  • Type: String
  • Default: ''

视频的海报，只会出现在播放器初始化且未播放的状态下

`,7),h=a("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    poster: '/assets/sample/poster.jpg',
+});

theme ​

  • Type: String
  • Default: #f00

播放器主题颜色，目前用于 进度条 和 高亮元素 上

`,4),b=a("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    theme: '#ffad00',
+});

volume ​

  • Type: Number
  • Default: 0.7

播放器的默认音量

`,4),g=a("div",{className:"run-code"},"▶ Run Code",-1),_=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    volume: 0.5,
+});

提示

播放器会缓存最后一次音量的大小，下次初始化时（如刷新页面）播放器会读取该缓存值

isLive ​

  • Type: Boolean
  • Default: false

使用直播模式，会隐藏进度条和播放时间

`,5),v=a("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    isLive: true,
+});

muted ​

  • Type: Boolean
  • Default: false

是否默认静音

`,4),E=a("div",{className:"run-code"},"▶ Run Code",-1),f=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});

autoplay ​

  • Type: Boolean
  • Default: false

是否自动播放

`,4),S=a("div",{className:"run-code"},"▶ Run Code",-1),k=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoplay: true,
+    muted: true,
+});

提示

假如希望默认进入页面就能自动播放视频，muted 必需为 true，更多信息请阅读 Autoplay Policy Changes

autoSize ​

  • Type: Boolean
  • Default: false

播放器的尺寸默认会填充整个 container 容器尺寸，所以经常出现黑边，该值能自动调整播放器尺寸以隐藏黑边，类似 css 的 object-fit: cover;

`,5),P=a("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+});

autoMini ​

  • Type: Boolean
  • Default: false

当播放器滚动到浏览器视口以外时，自动进入 迷你播放 模式

`,4),V=a("div",{className:"run-code"},"▶ Run Code",-1),R=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoMini: true,
+});

loop ​

  • Type: Boolean
  • Default: false

是否循环播放

`,4),j=a("div",{className:"run-code"},"▶ Run Code",-1),q=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    loop: true,
+});

flip ​

  • Type: Boolean
  • Default: false

是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单 里

`,4),N=a("div",{className:"run-code"},"▶ Run Code",-1),I=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    flip: true,
+    setting: true,
+});

playbackRate ​

  • Type: Boolean
  • Default: false

是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里

`,4),x=a("div",{className:"run-code"},"▶ Run Code",-1),B=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    playbackRate: true,
+    setting: true,
+});

aspectRatio ​

  • Type: Boolean
  • Default: false

是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里

`,4),O=a("div",{className:"run-code"},"▶ Run Code",-1),z=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    aspectRatio: true,
+    setting: true,
+});

screenshot ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示 视频截图 功能

`,4),L=a("div",{className:"run-code"},"▶ Run Code",-1),M=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    screenshot: true,
+});

提示

由于浏览器安全机制，假如视频源地址和网站是跨域的，可能会出现截图失败

setting ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示 设置面板 的开关按钮

`,5),$=a("div",{className:"run-code"},"▶ Run Code",-1),H=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});

hotkey ​

  • Type: Boolean
  • Default: true

是否使用快捷键

`,4),Y=a("div",{className:"run-code"},"▶ Run Code",-1),W=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    hotkey: true,
+});
热键描述
↑增加音量
↓降低音量
←视频快进
→视频快退
space切换播放/暂停

提示

只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效

pip ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示 画中画 的开关按钮

`,6),J=a("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    pip: true,
+});

mutex ​

  • Type: Boolean
  • Default: true

假如页面里同时存在多个播放器，是否只能让一个播放器播放

`,4),G=a("div",{className:"run-code"},"▶ Run Code",-1),K=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    mutex: true,
+});

fullscreen ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示播放器 窗口全屏 按钮

`,4),Q=a("div",{className:"run-code"},"▶ Run Code",-1),X=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+});

fullscreenWeb ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示播放器 网页全屏 按钮

`,4),Z=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});

subtitleOffset ​

  • Type: Boolean
  • Default: false

字幕时间偏移，范围在 [-5s, 5s]，出现在 设置面板 里

`,4),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitleOffset: true,
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+    setting: true,
+});

miniProgressBar ​

  • Type: Boolean
  • Default: false

迷你进度条，只在播放器失去焦点后且正在播放时出现

`,4),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    miniProgressBar: true,
+});

useSSR ​

  • Type: Boolean
  • Default: false

是否使用 SSR 挂载模式，假如你希望在播放器挂载前，就提前渲染好播放器所需的 HTML 时有用

你可以通过 Artplayer.html 访问到播放器所需的 HTML

`,5),es=a("div",{className:"run-code"},"▶ Run Code",-1),os=s(`
js
var $container = document.querySelector('.artplayer-app');
+$container.innerHTML = Artplayer.html;
+
+var art = new Artplayer({
+    container: $container,
+    url: '/assets/sample/video.mp4',
+    useSSR: true,
+});

playsInline ​

  • Type: Boolean
  • Default: true

在移动端是否使用 playsInline 模式

`,4),cs=a("div",{className:"run-code"},"▶ Run Code",-1),rs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    playsInline: true,
+});

layers ​

  • Type: Array
  • Default: []

初始化自定义的 层

`,4),ts=a("div",{className:"run-code"},"▶ Run Code",-1),Ds=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'potser',
+            html: \`<img style="width: 100px" src="\${img}">\`,
+            style: {
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+                opacity: '.9',
+            },
+            click: function (...args) {
+                console.info('click', args);
+                art.layers.show = false;
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+    ],
+});

组件配置 请参考以下地址：

/component/layers.html

settings ​

  • Type: Array
  • Default: []

初始化自定义的 设置面板

`,5),is=a("div",{className:"run-code"},"▶ Run Code",-1),ys=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'setting01',
+            selector: [
+                {
+                    html: 'setting01-01',
+                },
+                {
+                    html: 'setting01-02',
+                },
+            ],
+            onSelect: function (...args) {
+                console.info(args);
+            },
+        },
+        {
+            html: 'setting02',
+            selector: [
+                {
+                    html: 'setting02-01',
+                },
+                {
+                    html: 'setting02-02',
+                },
+            ],
+            onSelect: function (...args) {
+                console.info(args);
+            },
+        },
+    ],
+});

设置面板 请参考以下地址

/component/setting.html

contextmenu ​

  • Type: Array
  • Default: []

初始化自定义的 右键菜单

`,5),Fs=a("div",{className:"run-code"},"▶ Run Code",-1),Cs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            html: 'your-menu',
+            click: function (...args) {
+                console.info('click', args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});

组件配置 请参考以下地址：

/component/contextmenu.html- Type:

controls ​

  • Type: Array
  • Default: []

初始化自定义的底部 控制栏

`,5),As=a("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'left',
+            html: 'your-control',
+            tooltip: 'Your Control',
+            style: {
+                color: 'green',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+        },
+    ],
+});

组件配置 请参考以下地址：

/component/controls.html

quality ​

  • Type: Array
  • Default: []

是否在底部控制栏里显示 画质选择 列表

属性类型描述
defaultBoolean默认画质
htmlString画质名字
urlString画质地址
`,6),hs=a("div",{className:"run-code"},"▶ Run Code",-1),us=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    quality: [
+        {
+            default: true,
+            html: 'SD 480P',
+            url: '/assets/sample/video.mp4',
+        },
+        {
+            html: 'HD 720P',
+            url: '/assets/sample/video.mp4',
+        },
+    ],
+});

highlight ​

  • Type: Array
  • Default: []

在进度条上显示 高亮信息

属性类型描述
timeNumber高亮时间（单位秒）
textString高亮文本
`,5),bs=a("div",{className:"run-code"},"▶ Run Code",-1),ms=s(`
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: '－－终わり－－',
+        },
+    ],
+});

plugins ​

  • Type: Array
  • Default: []

初始化自定义的 插件

`,4),gs=a("div",{className:"run-code"},"▶ Run Code",-1),_s=s(`
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [myPlugin],
+});

thumbnails ​

  • Type: Object
  • Default: {}

在进度条上设置 预览图

属性类型描述
urlString预览图地址
numberNumber预览图数量
columnNumber预览图列数
widthNumber预览图宽度
heightNumber预览图高度
`,5),vs=a("div",{className:"run-code"},"▶ Run Code",-1),Ts=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    thumbnails: {
+        url: '/assets/sample/thumbnails.png',
+        number: 60,
+        column: 10,
+    },
+});

在线生成预览图

artplayer-tool-thumbnail

subtitle ​

  • Type: Object
  • Default: {}

设置视频的字幕，支持字幕格式：vtt, srt, ass

属性类型描述
nameString字幕名字
urlString字幕地址
typeString字幕类型，可选 vtt, srt, ass
styleObject字幕样式
encodingString字幕编码，默认 utf-8
escapeBoolean是否转义 html 标签，默认为 true
onVttLoadFunction用于修改 vtt 文本的函数
`,6),Es=a("div",{className:"run-code"},"▶ Run Code",-1),fs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+        type: 'srt',
+        encoding: 'utf-8',
+        escape: true,
+        style: {
+            color: '#03A9F4',
+            'font-size': '30px',
+        },
+    },
+});

moreVideoAttr ​

  • Type: Object
  • Default: {'controls': false,'preload': 'metadata'}

更多视频属性，这些属性将直接写入视频元素里

`,4),Ss=a("div",{className:"run-code"},"▶ Run Code",-1),ks=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    moreVideoAttr: {
+        'webkit-playsinline': true,
+        playsInline: true,
+    },
+});

icons ​

  • Type: Object
  • Default: {}

用于替换默认图标，支持 Html 字符串和 HTMLElement

`,4),Ps=a("div",{className:"run-code"},"▶ Run Code",-1),ws=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    icons: {
+        loading: '<img src="/assets/img/ploading.gif">',
+        state: '<img src="/assets/img/state.png">',
+    },
+});

全部图标的定义

artplayer/types/icons.d.ts

type ​

  • Type: String
  • Default: ''

用于指明视频的格式，需要配合 customType 一起使用，默认视频的格式就是视频地址的后缀（如 .m3u8, .mkv, .ts），但有时候视频地地址没有正确的后缀，所以需要特别指明

`,5),Vs=a("div",{className:"run-code"},"▶ Run Code",-1),Rs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.m3u8',
+    type: 'm3u8',
+});

后缀的识别

播放器只能解析这种后缀：/assets/sample/video.m3u8

但无法解析这种后缀：/assets/sample/video?type=m3u8

所以假如你使用了 customType，最好同时要指明 type

customType ​

  • Type: Object
  • Default: {}

通过视频的 type 进行匹配，把视频解码权交给第三方程序进行处理，处理的函数能接收三个参数

  • video : 视频 DOM 元素
  • url : 视频地址
  • art : 当前实例
`,6),js=a("div",{className:"run-code"},"▶ Run Code",-1),qs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.m3u8',
+    customType: {
+        m3u8: function (video, url, art) {
+            //
+        },
+    },
+});

lang ​

  • Type: String
  • Default: navigator.language.toLowerCase()

默认显示语言，目前支持：en, zh-cn

`,4),Ns=a("div",{className:"run-code"},"▶ Run Code",-1),Is=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'en',
+});

更多的语言设置

/start/i18n.html

i18n ​

  • Type: Object
  • Default: {}

自定义 i18n 配置，该配置会和自带的 i18n 进行深度合并

新增你的语言:

`,6),xs=a("div",{className:"run-code"},"▶ Run Code",-1),Bs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'your-lang',
+    i18n: {
+        'your-lang': {
+            Play: 'Your Play'
+        },
+    },
+});

修改现有的语言

`,2),Os=a("div",{className:"run-code"},"▶ Run Code",-1),zs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: {
+        'zh-cn': {
+            Play: 'Your Play'
+        },
+        'zh-tw': {
+            Play: 'Your Play'
+        },
+    },
+});

更多的语言设置

/start/i18n.html

lock ​

  • Type: Boolean
  • Default: false

是否在移动端显示一个 锁定按钮 ，用于隐藏底部 控制栏

`,5),Ls=a("div",{className:"run-code"},"▶ Run Code",-1),Ms=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lock: true,
+});

fastForward ​

  • Type: Boolean
  • Default: false

是否在移动端添加长按视频快进功能

`,4),$s=a("div",{className:"run-code"},"▶ Run Code",-1),Hs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});

autoPlayback ​

  • Type: Boolean
  • Default: false

是否使用自动 回放功能

`,4),Ys=a("div",{className:"run-code"},"▶ Run Code",-1),Ws=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    id: 'your-url-id',
+    autoPlayback: true,
+});

提示

因为播放器默认使用 url 作为 key 来缓存播放进度的

但假如你的同一个视频的 url 是不同的话，那么你需要使用 id 来标识视频的唯一 key

autoOrientation ​

  • Type: Boolean
  • Default: false

是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器

`,5),Js=a("div",{className:"run-code"},"▶ Run Code",-1),Us=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoOrientation: true,
+});

airplay ​

  • Type: Boolean
  • Default: false

是否显示 airplay 按钮，当前只有部分浏览器支持该功能

`,4),Gs=a("div",{className:"run-code"},"▶ Run Code",-1),Ks=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    airplay: true,
+});

cssVar ​

  • Type: Object
  • Default: {}

用于改变内置的css变量

`,4),Qs=a("div",{className:"run-code"},"▶ Run Code",-1),Xs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    cssVar: {
+        //
+    },
+});

cssVar 写法参考

artplayer/types/cssVar.d.d.ts

`,2),Zs=[o,c,r,t,D,i,y,F,C,A,d,h,u,b,m,g,_,v,T,E,f,S,k,P,w,V,R,j,q,N,I,x,B,O,z,L,M,$,H,Y,W,J,U,G,K,Q,X,Z,ss,as,ns,ls,ps,es,os,cs,rs,ts,Ds,is,ys,Fs,Cs,As,ds,hs,us,bs,ms,gs,_s,vs,Ts,Es,fs,Ss,ks,Ps,ws,Vs,Rs,js,qs,Ns,Is,xs,Bs,Os,zs,Ls,Ms,$s,Hs,Ys,Ws,Js,Us,Gs,Ks,Qs,Xs];function sa(aa,na,la,pa,ea,oa){return p(),l("div",null,Zs)}const ta=n(e,[["render",sa]]);export{ra as __pageData,ta as default}; diff --git a/docs/document/assets/start_option.md.93a8abff.lean.js b/docs/document/assets/start_option.md.93a8abff.lean.js new file mode 100644 index 000000000..a31033a55 --- /dev/null +++ b/docs/document/assets/start_option.md.93a8abff.lean.js @@ -0,0 +1 @@ +import{_ as n,c as l,o as p,V as s,z as a}from"./chunks/framework.5c8808ab.js";const ra=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1700581325000}'),e={name:"start/option.md"},o=s("",4),c=a("div",{className:"run-code"},"▶ Run Code",-1),r=s("",9),t=a("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),i=a("div",{className:"run-code"},"▶ Run Code",-1),y=s("",5),F=a("div",{className:"run-code"},"▶ Run Code",-1),C=s("",4),A=a("div",{className:"run-code"},"▶ Run Code",-1),d=s("",7),h=a("div",{className:"run-code"},"▶ Run Code",-1),u=s("",4),b=a("div",{className:"run-code"},"▶ Run Code",-1),m=s("",4),g=a("div",{className:"run-code"},"▶ Run Code",-1),_=s("",5),v=a("div",{className:"run-code"},"▶ Run Code",-1),T=s("",4),E=a("div",{className:"run-code"},"▶ Run Code",-1),f=s("",4),S=a("div",{className:"run-code"},"▶ Run Code",-1),k=s("",5),P=a("div",{className:"run-code"},"▶ Run Code",-1),w=s("",4),V=a("div",{className:"run-code"},"▶ Run Code",-1),R=s("",4),j=a("div",{className:"run-code"},"▶ Run Code",-1),q=s("",4),N=a("div",{className:"run-code"},"▶ Run Code",-1),I=s("",4),x=a("div",{className:"run-code"},"▶ Run Code",-1),B=s("",4),O=a("div",{className:"run-code"},"▶ Run Code",-1),z=s("",4),L=a("div",{className:"run-code"},"▶ Run Code",-1),M=s("",5),$=a("div",{className:"run-code"},"▶ Run Code",-1),H=s("",4),Y=a("div",{className:"run-code"},"▶ Run Code",-1),W=s("",6),J=a("div",{className:"run-code"},"▶ Run Code",-1),U=s("",4),G=a("div",{className:"run-code"},"▶ Run Code",-1),K=s("",4),Q=a("div",{className:"run-code"},"▶ Run Code",-1),X=s("",4),Z=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s("",4),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",5),es=a("div",{className:"run-code"},"▶ Run Code",-1),os=s("",4),cs=a("div",{className:"run-code"},"▶ Run Code",-1),rs=s("",4),ts=a("div",{className:"run-code"},"▶ Run Code",-1),Ds=s("",5),is=a("div",{className:"run-code"},"▶ Run Code",-1),ys=s("",5),Fs=a("div",{className:"run-code"},"▶ Run Code",-1),Cs=s("",5),As=a("div",{className:"run-code"},"▶ Run Code",-1),ds=s("",6),hs=a("div",{className:"run-code"},"▶ Run Code",-1),us=s("",5),bs=a("div",{className:"run-code"},"▶ Run Code",-1),ms=s("",4),gs=a("div",{className:"run-code"},"▶ Run Code",-1),_s=s("",5),vs=a("div",{className:"run-code"},"▶ Run Code",-1),Ts=s("",6),Es=a("div",{className:"run-code"},"▶ Run Code",-1),fs=s("",4),Ss=a("div",{className:"run-code"},"▶ Run Code",-1),ks=s("",4),Ps=a("div",{className:"run-code"},"▶ Run Code",-1),ws=s("",5),Vs=a("div",{className:"run-code"},"▶ Run Code",-1),Rs=s("",6),js=a("div",{className:"run-code"},"▶ Run Code",-1),qs=s("",4),Ns=a("div",{className:"run-code"},"▶ Run Code",-1),Is=s("",6),xs=a("div",{className:"run-code"},"▶ Run Code",-1),Bs=s("",2),Os=a("div",{className:"run-code"},"▶ Run Code",-1),zs=s("",5),Ls=a("div",{className:"run-code"},"▶ Run Code",-1),Ms=s("",4),$s=a("div",{className:"run-code"},"▶ Run Code",-1),Hs=s("",4),Ys=a("div",{className:"run-code"},"▶ Run Code",-1),Ws=s("",5),Js=a("div",{className:"run-code"},"▶ Run Code",-1),Us=s("",4),Gs=a("div",{className:"run-code"},"▶ Run Code",-1),Ks=s("",4),Qs=a("div",{className:"run-code"},"▶ Run Code",-1),Xs=s("",2),Zs=[o,c,r,t,D,i,y,F,C,A,d,h,u,b,m,g,_,v,T,E,f,S,k,P,w,V,R,j,q,N,I,x,B,O,z,L,M,$,H,Y,W,J,U,G,K,Q,X,Z,ss,as,ns,ls,ps,es,os,cs,rs,ts,Ds,is,ys,Fs,Cs,As,ds,hs,us,bs,ms,gs,_s,vs,Ts,Es,fs,Ss,ks,Ps,ws,Vs,Rs,js,qs,Ns,Is,xs,Bs,Os,zs,Ls,Ms,$s,Hs,Ys,Ws,Js,Us,Gs,Ks,Qs,Xs];function sa(aa,na,la,pa,ea,oa){return p(),l("div",null,Zs)}const ta=n(e,[["render",sa]]);export{ra as __pageData,ta as default}; diff --git a/docs/document/assets/start_option.md.K_YHCZdS.js b/docs/document/assets/start_option.md.K_YHCZdS.js deleted file mode 100644 index d6e2bd15e..000000000 --- a/docs/document/assets/start_option.md.K_YHCZdS.js +++ /dev/null @@ -1,380 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const ti=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1700581325000}'),e={name:"start/option.md"},p=s('

基础选项 ​

container ​

  • Type: String, Element
  • Default: #artplayer

播放器挂载的 DOM 容器

',4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app', 
-    // container: document.querySelector('.artplayer-app'),
-    url: '/assets/sample/video.mp4',
-});

您可能需要初始化容器元素的大小，如:

css
.artplayer-app {
-    width: 400px;
-    height: 300px;
-}

或者使用 aspect-ratio：

css
.artplayer-app {
-    aspect-ratio: 16/9;
-}

提示

全部选项里，只有 container 是必填的

url ​

  • Type: String
  • Default: ''

视频源地址

`,9),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

有时候 url 地址没那么快知道，这时候你可以异步设置 url

`,2),d=i("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-});
-
-setTimeout(() => {
-    art.url = '/assets/sample/video.mp4';
-}, 1000);

提示

默认支持三种视频文件格式：.mp4, .ogg, .webm

如需要播放 .m3u8 或者 .flv 等其它格式，请参考左侧的 第三方库

id ​

  • Type: String
  • Default: ''

播放器的唯一标识，目前只用于记忆播放 autoplayback

`,5),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s(`
js
var art = new Artplayer({
-    id: 'your-url-id',
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

onReady ​

  • Type: Function
  • Default: undefined

构造函数接受一个函数作为第二个参数，播放器初始化成功且视频可以播放时触发，和ready事件一样

`,4),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer(
-    {
-        container: '.artplayer-app',
-        url: '/assets/sample/video.mp4',
-        muted: true,
-    },
-    function onReady(art) {
-        this.play()
-    },
-);

等同于:

js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    art.play();
-});

提示

回调函数里的this就是播放器实例，但回调函数假如使用了箭头函数，this则不会指向播放器实例

poster ​

  • Type: String
  • Default: ''

视频的海报，只会出现在播放器初始化且未播放的状态下

`,7),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    poster: '/assets/sample/poster.jpg',
-});

theme ​

  • Type: String
  • Default: #f00

播放器主题颜色，目前用于 进度条 和 高亮元素 上

`,4),m=i("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    theme: '#ffad00',
-});

volume ​

  • Type: Number
  • Default: 0.7

播放器的默认音量

`,4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    volume: 0.5,
-});

提示

播放器会缓存最后一次音量的大小，下次初始化时（如刷新页面）播放器会读取该缓存值

isLive ​

  • Type: Boolean
  • Default: false

使用直播模式，会隐藏进度条和播放时间

`,5),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    isLive: true,
-});

muted ​

  • Type: Boolean
  • Default: false

是否默认静音

`,4),T=i("div",{className:"run-code"},"▶ Run Code",-1),B=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});

autoplay ​

  • Type: Boolean
  • Default: false

是否自动播放

`,4),D=i("div",{className:"run-code"},"▶ Run Code",-1),f=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoplay: true,
-    muted: true,
-});

提示

假如希望默认进入页面就能自动播放视频，muted 必需为 true，更多信息请阅读 Autoplay Policy Changes

autoSize ​

  • Type: Boolean
  • Default: false

播放器的尺寸默认会填充整个 container 容器尺寸，所以经常出现黑边，该值能自动调整播放器尺寸以隐藏黑边，类似 css 的 object-fit: cover;

`,5),S=i("div",{className:"run-code"},"▶ Run Code",-1),P=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-});

autoMini ​

  • Type: Boolean
  • Default: false

当播放器滚动到浏览器视口以外时，自动进入 迷你播放 模式

`,4),w=i("div",{className:"run-code"},"▶ Run Code",-1),R=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoMini: true,
-});

loop ​

  • Type: Boolean
  • Default: false

是否循环播放

`,4),V=i("div",{className:"run-code"},"▶ Run Code",-1),j=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    loop: true,
-});

flip ​

  • Type: Boolean
  • Default: false

是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单 里

`,4),q=i("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    flip: true,
-    setting: true,
-});

playbackRate ​

  • Type: Boolean
  • Default: false

是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里

`,4),I=i("div",{className:"run-code"},"▶ Run Code",-1),x=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    playbackRate: true,
-    setting: true,
-});

aspectRatio ​

  • Type: Boolean
  • Default: false

是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里

`,4),O=i("div",{className:"run-code"},"▶ Run Code",-1),z=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    aspectRatio: true,
-    setting: true,
-});

screenshot ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示 视频截图 功能

`,4),L=i("div",{className:"run-code"},"▶ Run Code",-1),M=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    screenshot: true,
-});

提示

由于浏览器安全机制，假如视频源地址和网站是跨域的，可能会出现截图失败

setting ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示 设置面板 的开关按钮

`,5),$=i("div",{className:"run-code"},"▶ Run Code",-1),H=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});

hotkey ​

  • Type: Boolean
  • Default: true

是否使用快捷键

`,4),Y=i("div",{className:"run-code"},"▶ Run Code",-1),W=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    hotkey: true,
-});
热键描述
↑增加音量
↓降低音量
←视频快进
→视频快退
space切换播放/暂停

提示

只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效

pip ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示 画中画 的开关按钮

`,6),J=i("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    pip: true,
-});

mutex ​

  • Type: Boolean
  • Default: true

假如页面里同时存在多个播放器，是否只能让一个播放器播放

`,4),G=i("div",{className:"run-code"},"▶ Run Code",-1),K=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    mutex: true,
-});

fullscreen ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示播放器 窗口全屏 按钮

`,4),Q=i("div",{className:"run-code"},"▶ Run Code",-1),X=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-});

fullscreenWeb ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示播放器 网页全屏 按钮

`,4),Z=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});

subtitleOffset ​

  • Type: Boolean
  • Default: false

字幕时间偏移，范围在 [-5s, 5s]，出现在 设置面板 里

`,4),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitleOffset: true,
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-    setting: true,
-});

miniProgressBar ​

  • Type: Boolean
  • Default: false

迷你进度条，只在播放器失去焦点后且正在播放时出现

`,4),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    miniProgressBar: true,
-});

useSSR ​

  • Type: Boolean
  • Default: false

是否使用 SSR 挂载模式，假如你希望在播放器挂载前，就提前渲染好播放器所需的 HTML 时有用

你可以通过 Artplayer.html 访问到播放器所需的 HTML

`,5),es=i("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
var $container = document.querySelector('.artplayer-app');
-$container.innerHTML = Artplayer.html;
-
-var art = new Artplayer({
-    container: $container,
-    url: '/assets/sample/video.mp4',
-    useSSR: true,
-});

playsInline ​

  • Type: Boolean
  • Default: true

在移动端是否使用 playsInline 模式

`,4),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    playsInline: true,
-});

layers ​

  • Type: Array
  • Default: []

初始化自定义的 层

`,4),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: \`<img style="width: 100px" src="\${img}">\`,
-            style: {
-                position: 'absolute',
-                top: '20px',
-                right: '20px',
-                opacity: '.9',
-            },
-            click: function (...args) {
-                console.info('click', args);
-                art.layers.show = false;
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-    ],
-});

组件配置 请参考以下地址：

/component/layers.html

settings ​

  • Type: Array
  • Default: []

初始化自定义的 设置面板

`,5),ds=i("div",{className:"run-code"},"▶ Run Code",-1),Es=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'setting01',
-            selector: [
-                {
-                    html: 'setting01-01',
-                },
-                {
-                    html: 'setting01-02',
-                },
-            ],
-            onSelect: function (...args) {
-                console.info(args);
-            },
-        },
-        {
-            html: 'setting02',
-            selector: [
-                {
-                    html: 'setting02-01',
-                },
-                {
-                    html: 'setting02-02',
-                },
-            ],
-            onSelect: function (...args) {
-                console.info(args);
-            },
-        },
-    ],
-});

设置面板 请参考以下地址

/component/setting.html

contextmenu ​

  • Type: Array
  • Default: []

初始化自定义的 右键菜单

`,5),cs=i("div",{className:"run-code"},"▶ Run Code",-1),os=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            html: 'your-menu',
-            click: function (...args) {
-                console.info('click', args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});

组件配置 请参考以下地址：

/component/contextmenu.html- Type:

controls ​

  • Type: Array
  • Default: []

初始化自定义的底部 控制栏

`,5),gs=i("div",{className:"run-code"},"▶ Run Code",-1),ys=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'left',
-            html: 'your-control',
-            tooltip: 'Your Control',
-            style: {
-                color: 'green',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-        },
-    ],
-});

组件配置 请参考以下地址：

/component/controls.html

quality ​

  • Type: Array
  • Default: []

是否在底部控制栏里显示 画质选择 列表

属性类型描述
defaultBoolean默认画质
htmlString画质名字
urlString画质地址
`,6),us=i("div",{className:"run-code"},"▶ Run Code",-1),bs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    quality: [
-        {
-            default: true,
-            html: 'SD 480P',
-            url: '/assets/sample/video.mp4',
-        },
-        {
-            html: 'HD 720P',
-            url: '/assets/sample/video.mp4',
-        },
-    ],
-});

highlight ​

  • Type: Array
  • Default: []

在进度条上显示 高亮信息

属性类型描述
timeNumber高亮时间（单位秒）
textString高亮文本
`,5),ms=i("div",{className:"run-code"},"▶ Run Code",-1),Fs=s(`
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: '－－终わり－－',
-        },
-    ],
-});

plugins ​

  • Type: Array
  • Default: []

初始化自定义的 插件

`,4),_s=i("div",{className:"run-code"},"▶ Run Code",-1),Cs=s(`
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [myPlugin],
-});

thumbnails ​

  • Type: Object
  • Default: {}

在进度条上设置 预览图

属性类型描述
urlString预览图地址
numberNumber预览图数量
columnNumber预览图列数
widthNumber预览图宽度
heightNumber预览图高度
`,5),vs=i("div",{className:"run-code"},"▶ Run Code",-1),As=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    thumbnails: {
-        url: '/assets/sample/thumbnails.png',
-        number: 60,
-        column: 10,
-    },
-});

在线生成预览图

artplayer-tool-thumbnail

subtitle ​

  • Type: Object
  • Default: {}

设置视频的字幕，支持字幕格式：vtt, srt, ass

属性类型描述
nameString字幕名字
urlString字幕地址
typeString字幕类型，可选 vtt, srt, ass
styleObject字幕样式
encodingString字幕编码，默认 utf-8
escapeBoolean是否转义 html 标签，默认为 true
onVttLoadFunction用于修改 vtt 文本的函数
`,6),Ts=i("div",{className:"run-code"},"▶ Run Code",-1),Bs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-        type: 'srt',
-        encoding: 'utf-8',
-        escape: true,
-        style: {
-            color: '#03A9F4',
-            'font-size': '30px',
-        },
-    },
-});

moreVideoAttr ​

  • Type: Object
  • Default: {'controls': false,'preload': 'metadata'}

更多视频属性，这些属性将直接写入视频元素里

`,4),Ds=i("div",{className:"run-code"},"▶ Run Code",-1),fs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    moreVideoAttr: {
-        'webkit-playsinline': true,
-        playsInline: true,
-    },
-});

icons ​

  • Type: Object
  • Default: {}

用于替换默认图标，支持 Html 字符串和 HTMLElement

`,4),Ss=i("div",{className:"run-code"},"▶ Run Code",-1),Ps=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    icons: {
-        loading: '<img src="/assets/img/ploading.gif">',
-        state: '<img src="/assets/img/state.png">',
-    },
-});

全部图标的定义

artplayer/types/icons.d.ts

type ​

  • Type: String
  • Default: ''

用于指明视频的格式，需要配合 customType 一起使用，默认视频的格式就是视频地址的后缀（如 .m3u8, .mkv, .ts），但有时候视频地地址没有正确的后缀，所以需要特别指明

`,5),ws=i("div",{className:"run-code"},"▶ Run Code",-1),Rs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.m3u8',
-    type: 'm3u8',
-});

后缀的识别

播放器只能解析这种后缀：/assets/sample/video.m3u8

但无法解析这种后缀：/assets/sample/video?type=m3u8

所以假如你使用了 customType，最好同时要指明 type

customType ​

  • Type: Object
  • Default: {}

通过视频的 type 进行匹配，把视频解码权交给第三方程序进行处理，处理的函数能接收三个参数

  • video : 视频 DOM 元素
  • url : 视频地址
  • art : 当前实例
`,6),Vs=i("div",{className:"run-code"},"▶ Run Code",-1),js=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.m3u8',
-    customType: {
-        m3u8: function (video, url, art) {
-            //
-        },
-    },
-});

lang ​

  • Type: String
  • Default: navigator.language.toLowerCase()

默认显示语言，目前支持：en, zh-cn

`,4),qs=i("div",{className:"run-code"},"▶ Run Code",-1),Ns=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'en',
-});

更多的语言设置

/start/i18n.html

i18n ​

  • Type: Object
  • Default: {}

自定义 i18n 配置，该配置会和自带的 i18n 进行深度合并

新增你的语言:

`,6),Is=i("div",{className:"run-code"},"▶ Run Code",-1),xs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'your-lang',
-    i18n: {
-        'your-lang': {
-            Play: 'Your Play'
-        },
-    },
-});

修改现有的语言

`,2),Os=i("div",{className:"run-code"},"▶ Run Code",-1),zs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: {
-        'zh-cn': {
-            Play: 'Your Play'
-        },
-        'zh-tw': {
-            Play: 'Your Play'
-        },
-    },
-});

更多的语言设置

/start/i18n.html

lock ​

  • Type: Boolean
  • Default: false

是否在移动端显示一个 锁定按钮 ，用于隐藏底部 控制栏

`,5),Ls=i("div",{className:"run-code"},"▶ Run Code",-1),Ms=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lock: true,
-});

fastForward ​

  • Type: Boolean
  • Default: false

是否在移动端添加长按视频快进功能

`,4),$s=i("div",{className:"run-code"},"▶ Run Code",-1),Hs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});

autoPlayback ​

  • Type: Boolean
  • Default: false

是否使用自动 回放功能

`,4),Ys=i("div",{className:"run-code"},"▶ Run Code",-1),Ws=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    id: 'your-url-id',
-    autoPlayback: true,
-});

提示

因为播放器默认使用 url 作为 key 来缓存播放进度的

但假如你的同一个视频的 url 是不同的话，那么你需要使用 id 来标识视频的唯一 key

autoOrientation ​

  • Type: Boolean
  • Default: false

是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器

`,5),Js=i("div",{className:"run-code"},"▶ Run Code",-1),Us=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoOrientation: true,
-});

airplay ​

  • Type: Boolean
  • Default: false

是否显示 airplay 按钮，当前只有部分浏览器支持该功能

`,4),Gs=i("div",{className:"run-code"},"▶ Run Code",-1),Ks=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    airplay: true,
-});

cssVar ​

  • Type: Object
  • Default: {}

用于改变内置的css变量

`,4),Qs=i("div",{className:"run-code"},"▶ Run Code",-1),Xs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    cssVar: {
-        //
-    },
-});

cssVar 写法参考

artplayer/types/cssVar.d.d.ts

`,2),Zs=[p,h,t,k,r,d,E,c,o,g,y,u,b,m,F,_,C,v,A,T,B,D,f,S,P,w,R,V,j,q,N,I,x,O,z,L,M,$,H,Y,W,J,U,G,K,Q,X,Z,ss,is,as,ns,ls,es,ps,hs,ts,ks,rs,ds,Es,cs,os,gs,ys,us,bs,ms,Fs,_s,Cs,vs,As,Ts,Bs,Ds,fs,Ss,Ps,ws,Rs,Vs,js,qs,Ns,Is,xs,Os,zs,Ls,Ms,$s,Hs,Ys,Ws,Js,Us,Gs,Ks,Qs,Xs];function si(ii,ai,ni,li,ei,pi){return l(),n("div",null,Zs)}const ki=a(e,[["render",si]]);export{ti as __pageData,ki as default}; diff --git a/docs/document/assets/start_option.md.K_YHCZdS.lean.js b/docs/document/assets/start_option.md.K_YHCZdS.lean.js deleted file mode 100644 index 15fa70506..000000000 --- a/docs/document/assets/start_option.md.K_YHCZdS.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,c as n,o as l,R as s,k as i}from"./chunks/framework.0i_P4VHR.js";const ti=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1700581325000}'),e={name:"start/option.md"},p=s("",4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",9),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),d=i("div",{className:"run-code"},"▶ Run Code",-1),E=s("",5),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s("",4),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s("",7),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s("",4),m=i("div",{className:"run-code"},"▶ Run Code",-1),F=s("",4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s("",5),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),T=i("div",{className:"run-code"},"▶ Run Code",-1),B=s("",4),D=i("div",{className:"run-code"},"▶ Run Code",-1),f=s("",5),S=i("div",{className:"run-code"},"▶ Run Code",-1),P=s("",4),w=i("div",{className:"run-code"},"▶ Run Code",-1),R=s("",4),V=i("div",{className:"run-code"},"▶ Run Code",-1),j=s("",4),q=i("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),I=i("div",{className:"run-code"},"▶ Run Code",-1),x=s("",4),O=i("div",{className:"run-code"},"▶ Run Code",-1),z=s("",4),L=i("div",{className:"run-code"},"▶ Run Code",-1),M=s("",5),$=i("div",{className:"run-code"},"▶ Run Code",-1),H=s("",4),Y=i("div",{className:"run-code"},"▶ Run Code",-1),W=s("",6),J=i("div",{className:"run-code"},"▶ Run Code",-1),U=s("",4),G=i("div",{className:"run-code"},"▶ Run Code",-1),K=s("",4),Q=i("div",{className:"run-code"},"▶ Run Code",-1),X=s("",4),Z=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s("",4),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s("",5),es=i("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",4),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s("",4),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s("",5),ds=i("div",{className:"run-code"},"▶ Run Code",-1),Es=s("",5),cs=i("div",{className:"run-code"},"▶ Run Code",-1),os=s("",5),gs=i("div",{className:"run-code"},"▶ Run Code",-1),ys=s("",6),us=i("div",{className:"run-code"},"▶ Run Code",-1),bs=s("",5),ms=i("div",{className:"run-code"},"▶ Run Code",-1),Fs=s("",4),_s=i("div",{className:"run-code"},"▶ Run Code",-1),Cs=s("",5),vs=i("div",{className:"run-code"},"▶ Run Code",-1),As=s("",6),Ts=i("div",{className:"run-code"},"▶ Run Code",-1),Bs=s("",4),Ds=i("div",{className:"run-code"},"▶ Run Code",-1),fs=s("",4),Ss=i("div",{className:"run-code"},"▶ Run Code",-1),Ps=s("",5),ws=i("div",{className:"run-code"},"▶ Run Code",-1),Rs=s("",6),Vs=i("div",{className:"run-code"},"▶ Run Code",-1),js=s("",4),qs=i("div",{className:"run-code"},"▶ Run Code",-1),Ns=s("",6),Is=i("div",{className:"run-code"},"▶ Run Code",-1),xs=s("",2),Os=i("div",{className:"run-code"},"▶ Run Code",-1),zs=s("",5),Ls=i("div",{className:"run-code"},"▶ Run Code",-1),Ms=s("",4),$s=i("div",{className:"run-code"},"▶ Run Code",-1),Hs=s("",4),Ys=i("div",{className:"run-code"},"▶ Run Code",-1),Ws=s("",5),Js=i("div",{className:"run-code"},"▶ Run Code",-1),Us=s("",4),Gs=i("div",{className:"run-code"},"▶ Run Code",-1),Ks=s("",4),Qs=i("div",{className:"run-code"},"▶ Run Code",-1),Xs=s("",2),Zs=[p,h,t,k,r,d,E,c,o,g,y,u,b,m,F,_,C,v,A,T,B,D,f,S,P,w,R,V,j,q,N,I,x,O,z,L,M,$,H,Y,W,J,U,G,K,Q,X,Z,ss,is,as,ns,ls,es,ps,hs,ts,ks,rs,ds,Es,cs,os,gs,ys,us,bs,ms,Fs,_s,Cs,vs,As,Ts,Bs,Ds,fs,Ss,Ps,ws,Rs,Vs,js,qs,Ns,Is,xs,Os,zs,Ls,Ms,$s,Hs,Ys,Ws,Js,Us,Gs,Ks,Qs,Xs];function si(ii,ai,ni,li,ei,pi){return l(),n("div",null,Zs)}const ki=a(e,[["render",si]]);export{ti as __pageData,ki as default}; diff --git a/docs/document/assets/style.3e7a6588.css b/docs/document/assets/style.3e7a6588.css new file mode 100644 index 000000000..2e78240eb --- /dev/null +++ b/docs/document/assets/style.3e7a6588.css @@ -0,0 +1 @@ +@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-cyrillic.5f2c6c8c.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-cyrillic-ext.e75737ce.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-greek.d5a6d92a.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-greek-ext.ab0619bc.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-latin.2ed14f66.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-latin-ext.0030eebd.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-vietnamese.14ce25a6.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-cyrillic.ea42a392.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-greek.8f4463c4.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-greek-ext.4fbe9427.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-latin.bd3b6f56.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-latin-ext.bd8920cc.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-vietnamese.6ce511fb.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Chinese Quotes;src:local("PingFang SC Regular"),local("PingFang SC"),local("SimHei"),local("Source Han Sans SC");unicode-range:U+2018,U+2019,U+201C,U+201D}:root{--vp-c-white: #ffffff;--vp-c-black: #000000;--vp-c-gray: #8e8e93;--vp-c-text-light-1: rgba(60, 60, 67);--vp-c-text-light-2: rgba(60, 60, 67, .75);--vp-c-text-light-3: rgba(60, 60, 67, .33);--vp-c-text-dark-1: rgba(255, 255, 245, .86);--vp-c-text-dark-2: rgba(235, 235, 245, .6);--vp-c-text-dark-3: rgba(235, 235, 245, .38);--vp-c-green: #10b981;--vp-c-green-light: #34d399;--vp-c-green-lighter: #6ee7b7;--vp-c-green-dark: #059669;--vp-c-green-darker: #047857;--vp-c-green-dimm-1: rgba(16, 185, 129, .05);--vp-c-green-dimm-2: rgba(16, 185, 129, .2);--vp-c-green-dimm-3: rgba(16, 185, 129, .5);--vp-c-yellow: #d97706;--vp-c-yellow-light: #f59e0b;--vp-c-yellow-lighter: #fbbf24;--vp-c-yellow-dark: #b45309;--vp-c-yellow-darker: #92400e;--vp-c-yellow-dimm-1: rgba(234, 179, 8, .05);--vp-c-yellow-dimm-2: rgba(234, 179, 8, .2);--vp-c-yellow-dimm-3: rgba(234, 179, 8, .5);--vp-c-red: #f43f5e;--vp-c-red-light: #fb7185;--vp-c-red-lighter: #fda4af;--vp-c-red-dark: #e11d48;--vp-c-red-darker: #be123c;--vp-c-red-dimm-1: rgba(244, 63, 94, .05);--vp-c-red-dimm-2: rgba(244, 63, 94, .2);--vp-c-red-dimm-3: rgba(244, 63, 94, .5);--vp-c-sponsor: #db2777}:root{--vp-c-bg: #ffffff;--vp-c-bg-elv: #ffffff;--vp-c-bg-elv-up: #ffffff;--vp-c-bg-elv-down: #f6f6f7;--vp-c-bg-elv-mute: #f6f6f7;--vp-c-bg-soft: #f6f6f7;--vp-c-bg-soft-up: #f9f9fa;--vp-c-bg-soft-down: #e3e3e5;--vp-c-bg-soft-mute: #e3e3e5;--vp-c-bg-alt: #f6f6f7;--vp-c-border: rgba(60, 60, 67, .29);--vp-c-divider: rgba(60, 60, 67, .12);--vp-c-gutter: rgba(60, 60, 67, .12);--vp-c-neutral: var(--vp-c-black);--vp-c-neutral-inverse: var(--vp-c-white);--vp-c-text-1: var(--vp-c-text-light-1);--vp-c-text-2: var(--vp-c-text-light-2);--vp-c-text-3: var(--vp-c-text-light-3);--vp-c-text-inverse-1: var(--vp-c-text-dark-1);--vp-c-text-inverse-2: var(--vp-c-text-dark-2);--vp-c-text-inverse-3: var(--vp-c-text-dark-3);--vp-c-text-code: #476582;--vp-c-brand: var(--vp-c-green);--vp-c-brand-light: var(--vp-c-green-light);--vp-c-brand-lighter: var(--vp-c-green-lighter);--vp-c-brand-dark: var(--vp-c-green-dark);--vp-c-brand-darker: var(--vp-c-green-darker);--vp-c-mute: #f6f6f7;--vp-c-mute-light: #f9f9fc;--vp-c-mute-lighter: #ffffff;--vp-c-mute-dark: #e3e3e5;--vp-c-mute-darker: #d7d7d9}.dark{--vp-c-bg: #1e1e20;--vp-c-bg-elv: #252529;--vp-c-bg-elv-up: #313136;--vp-c-bg-elv-down: #1e1e20;--vp-c-bg-elv-mute: #313136;--vp-c-bg-soft: #252529;--vp-c-bg-soft-up: #313136;--vp-c-bg-soft-down: #1e1e20;--vp-c-bg-soft-mute: #313136;--vp-c-bg-alt: #161618;--vp-c-border: rgba(82, 82, 89, .68);--vp-c-divider: rgba(82, 82, 89, .32);--vp-c-gutter: #000000;--vp-c-neutral: var(--vp-c-white);--vp-c-neutral-inverse: var(--vp-c-black);--vp-c-text-1: var(--vp-c-text-dark-1);--vp-c-text-2: var(--vp-c-text-dark-2);--vp-c-text-3: var(--vp-c-text-dark-3);--vp-c-text-inverse-1: var(--vp-c-text-light-1);--vp-c-text-inverse-2: var(--vp-c-text-light-2);--vp-c-text-inverse-3: var(--vp-c-text-light-3);--vp-c-text-code: #c9def1;--vp-c-mute: #313136;--vp-c-mute-light: #3a3a3c;--vp-c-mute-lighter: #505053;--vp-c-mute-dark: #2c2c30;--vp-c-mute-darker: #252529}:root{--vp-font-family-base: "Chinese Quotes", "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--vp-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}:root{--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--vp-shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);--vp-shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);--vp-shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16)}:root{--vp-z-index-local-nav: 10;--vp-z-index-nav: 20;--vp-z-index-layout-top: 30;--vp-z-index-backdrop: 40;--vp-z-index-sidebar: 50;--vp-z-index-footer: 60}:root{--vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");--vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E")}:root{--vp-layout-max-width: 1440px}:root{--vp-header-anchor-symbol: "#"}:root{--vp-code-line-height: 1.7;--vp-code-font-size: .875em;--vp-c-code-dimm: var(--vp-c-text-dark-3);--vp-code-block-color: var(--vp-c-text-dark-1);--vp-code-block-bg: #292b30;--vp-code-block-bg-light: #1e1e20;--vp-code-block-divider-color: #000000;--vp-code-line-highlight-color: rgba(0, 0, 0, .5);--vp-code-line-number-color: var(--vp-c-code-dimm);--vp-code-line-diff-add-color: var(--vp-c-green-dimm-2);--vp-code-line-diff-add-symbol-color: var(--vp-c-green);--vp-code-line-diff-remove-color: var(--vp-c-red-dimm-2);--vp-code-line-diff-remove-symbol-color: var(--vp-c-red);--vp-code-line-warning-color: var(--vp-c-yellow-dimm-2);--vp-code-line-error-color: var(--vp-c-red-dimm-2);--vp-code-copy-code-border-color: transparent;--vp-code-copy-code-bg: var(--vp-code-block-bg-light);--vp-code-copy-code-hover-border-color: var(--vp-c-divider);--vp-code-copy-code-hover-bg: var(--vp-code-block-bg-light);--vp-code-copy-code-active-text: var(--vp-c-text-dark-2);--vp-code-tab-divider: var(--vp-code-block-divider-color);--vp-code-tab-text-color: var(--vp-c-text-dark-2);--vp-code-tab-bg: var(--vp-code-block-bg);--vp-code-tab-hover-text-color: var(--vp-c-text-dark-1);--vp-code-tab-active-text-color: var(--vp-c-text-dark-1);--vp-code-tab-active-bar-color: var(--vp-c-brand)}.dark{--vp-code-block-bg: #161618}:root:not(.dark) .vp-adaptive-theme{--vp-c-code-dimm: var(--vp-c-text-2);--vp-code-block-color: var(--vp-c-text-1);--vp-code-block-bg: #f8f8f8;--vp-code-block-divider-color: var(--vp-c-divider);--vp-code-line-highlight-color: #ececec;--vp-code-line-number-color: var(--vp-c-code-dimm);--vp-code-copy-code-bg: #e2e2e2;--vp-code-copy-code-hover-bg: #dcdcdc;--vp-code-copy-code-active-text: var(--vp-c-text-2);--vp-code-tab-divider: var(--vp-c-divider);--vp-code-tab-text-color: var(--vp-c-text-2);--vp-code-tab-bg: var(--vp-code-block-bg);--vp-code-tab-hover-text-color: var(--vp-c-text-1);--vp-code-tab-active-text-color: var(--vp-c-text-1)}:root{--vp-button-brand-border: var(--vp-c-brand-lighter);--vp-button-brand-text: var(--vp-c-white);--vp-button-brand-bg: var(--vp-c-brand);--vp-button-brand-hover-border: var(--vp-c-brand-lighter);--vp-button-brand-hover-text: var(--vp-c-white);--vp-button-brand-hover-bg: var(--vp-c-brand-dark);--vp-button-brand-active-border: var(--vp-c-brand-lighter);--vp-button-brand-active-text: var(--vp-c-white);--vp-button-brand-active-bg: var(--vp-c-brand-darker);--vp-button-alt-border: var(--vp-c-border);--vp-button-alt-text: var(--vp-c-neutral);--vp-button-alt-bg: var(--vp-c-mute);--vp-button-alt-hover-border: var(--vp-c-border);--vp-button-alt-hover-text: var(--vp-c-neutral);--vp-button-alt-hover-bg: var(--vp-c-mute-dark);--vp-button-alt-active-border: var(--vp-c-border);--vp-button-alt-active-text: var(--vp-c-neutral);--vp-button-alt-active-bg: var(--vp-c-mute-darker);--vp-button-sponsor-border: var(--vp-c-gray-light-3);--vp-button-sponsor-text: var(--vp-c-text-light-2);--vp-button-sponsor-bg: transparent;--vp-button-sponsor-hover-border: var(--vp-c-sponsor);--vp-button-sponsor-hover-text: var(--vp-c-sponsor);--vp-button-sponsor-hover-bg: transparent;--vp-button-sponsor-active-border: var(--vp-c-sponsor);--vp-button-sponsor-active-text: var(--vp-c-sponsor);--vp-button-sponsor-active-bg: transparent}.dark{--vp-button-sponsor-border: var(--vp-c-gray-dark-1);--vp-button-sponsor-text: var(--vp-c-text-dark-2)}:root{--vp-custom-block-font-size: 14px;--vp-custom-block-code-font-size: 13px;--vp-custom-block-info-border: var(--vp-c-border);--vp-custom-block-info-text: var(--vp-c-text-2);--vp-custom-block-info-bg: var(--vp-c-bg-soft-up);--vp-custom-block-info-code-bg: var(--vp-c-bg-soft);--vp-custom-block-tip-border: var(--vp-c-green);--vp-custom-block-tip-text: var(--vp-c-green-dark);--vp-custom-block-tip-bg: var(--vp-c-bg-soft-up);--vp-custom-block-tip-code-bg: var(--vp-c-bg-soft);--vp-custom-block-warning-border: var(--vp-c-yellow);--vp-custom-block-warning-text: var(--vp-c-yellow);--vp-custom-block-warning-bg: var(--vp-c-bg-soft-up);--vp-custom-block-warning-code-bg: var(--vp-c-bg-soft);--vp-custom-block-danger-border: var(--vp-c-red);--vp-custom-block-danger-text: var(--vp-c-red);--vp-custom-block-danger-bg: var(--vp-c-bg-soft-up);--vp-custom-block-danger-code-bg: var(--vp-c-bg-soft);--vp-custom-block-details-border: var(--vp-custom-block-info-border);--vp-custom-block-details-text: var(--vp-custom-block-info-text);--vp-custom-block-details-bg: var(--vp-custom-block-info-bg);--vp-custom-block-details-code-bg: var(--vp-custom-block-details-bg)}:root{--vp-input-border-color: var(--vp-c-border);--vp-input-bg-color: var(--vp-c-bg-alt);--vp-input-hover-border-color: var(--vp-c-gray);--vp-input-switch-bg-color: var(--vp-c-mute)}:root{--vp-nav-height: 64px;--vp-nav-bg-color: var(--vp-c-bg);--vp-nav-screen-bg-color: var(--vp-c-bg)}:root{--vp-local-nav-bg-color: var(--vp-c-bg)}:root{--vp-sidebar-width: 272px;--vp-sidebar-bg-color: var(--vp-c-bg-alt)}:root{--vp-backdrop-bg-color: rgba(0, 0, 0, .6)}:root{--vp-home-hero-name-color: var(--vp-c-brand);--vp-home-hero-name-background: transparent;--vp-home-hero-image-background-image: none;--vp-home-hero-image-filter: none}:root{--vp-badge-info-border: var(--vp-c-border);--vp-badge-info-text: var(--vp-c-text-2);--vp-badge-info-bg: var(--vp-c-bg-soft-up);--vp-badge-tip-border: var(--vp-c-green-dark);--vp-badge-tip-text: var(--vp-c-green);--vp-badge-tip-bg: var(--vp-c-green-dimm-1);--vp-badge-warning-border: var(--vp-c-yellow-dark);--vp-badge-warning-text: var(--vp-c-yellow);--vp-badge-warning-bg: var(--vp-c-yellow-dimm-1);--vp-badge-danger-border: var(--vp-c-red-dark);--vp-badge-danger-text: var(--vp-c-red);--vp-badge-danger-bg: var(--vp-c-red-dimm-1)}:root{--vp-carbon-ads-text-color: var(--vp-c-text-1);--vp-carbon-ads-poweredby-color: var(--vp-c-text-2);--vp-carbon-ads-bg-color: var(--vp-c-bg-soft);--vp-carbon-ads-hover-text-color: var(--vp-c-brand);--vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1)}:root{--vp-local-search-bg: var(--vp-c-bg);--vp-local-search-result-bg: var(--vp-c-bg);--vp-local-search-result-border: var(--vp-c-divider);--vp-local-search-result-selected-bg: var(--vp-c-bg);--vp-local-search-result-selected-border: var(--vp-c-brand);--vp-local-search-highlight-bg: var(--vp-c-green-lighter);--vp-local-search-highlight-text: var(--vp-c-black)}*,:before,:after{box-sizing:border-box}html{line-height:1.4;font-size:16px;-webkit-text-size-adjust:100%}html.dark{color-scheme:dark}body{margin:0;width:100%;min-width:320px;min-height:100vh;line-height:24px;font-family:var(--vp-font-family-base);font-size:16px;font-weight:400;color:var(--vp-c-text-1);background-color:var(--vp-c-bg);direction:ltr;font-synthesis:style;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}h1,h2,h3,h4,h5,h6{margin:0;line-height:24px;font-size:16px;font-weight:400}p{margin:0}strong,b{font-weight:600}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}a{color:inherit;text-decoration:inherit}ol,ul{list-style:none;margin:0;padding:0}blockquote{margin:0}pre,code,kbd,samp{font-family:var(--vp-font-family-mono)}img,svg,video,canvas,audio,iframe,embed,object{display:block}figure{margin:0}img,video{max-width:100%;height:auto}button,input,optgroup,select,textarea{border:0;padding:0;line-height:inherit;color:inherit}button{padding:0;font-family:inherit;background-color:transparent;background-image:none}button:enabled,[role=button]:enabled{cursor:pointer}button:focus,button:focus-visible{outline:1px dotted;outline:4px auto -webkit-focus-ring-color}button:focus:not(:focus-visible){outline:none!important}input:focus,textarea:focus,select:focus{outline:none}table{border-collapse:collapse}input{background-color:transparent}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:var(--vp-c-text-3)}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:var(--vp-c-text-3)}input::placeholder,textarea::placeholder{color:var(--vp-c-text-3)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}textarea{resize:vertical}select{-webkit-appearance:none}fieldset{margin:0;padding:0}h1,h2,h3,h4,h5,h6,li,p{overflow-wrap:break-word}vite-error-overlay{z-index:9999}.visually-hidden{position:absolute;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden}.custom-block{border:1px solid transparent;border-radius:8px;padding:16px 16px 8px;line-height:24px;font-size:var(--vp-custom-block-font-size);color:var(--vp-c-text-2)}.custom-block.info{border-color:var(--vp-custom-block-info-border);color:var(--vp-custom-block-info-text);background-color:var(--vp-custom-block-info-bg)}.custom-block.custom-block th,.custom-block.custom-block blockquote>p{font-size:var(--vp-custom-block-font-size);color:inherit}.custom-block.info code{background-color:var(--vp-custom-block-info-code-bg)}.custom-block.tip{border-color:var(--vp-custom-block-tip-border);color:var(--vp-custom-block-tip-text);background-color:var(--vp-custom-block-tip-bg)}.custom-block.tip code{background-color:var(--vp-custom-block-tip-code-bg)}.custom-block.warning{border-color:var(--vp-custom-block-warning-border);color:var(--vp-custom-block-warning-text);background-color:var(--vp-custom-block-warning-bg)}.custom-block.warning code{background-color:var(--vp-custom-block-warning-code-bg)}.custom-block.danger{border-color:var(--vp-custom-block-danger-border);color:var(--vp-custom-block-danger-text);background-color:var(--vp-custom-block-danger-bg)}.custom-block.danger code{background-color:var(--vp-custom-block-danger-code-bg)}.custom-block.details{border-color:var(--vp-custom-block-details-border);color:var(--vp-custom-block-details-text);background-color:var(--vp-custom-block-details-bg)}.custom-block.details code{background-color:var(--vp-custom-block-details-code-bg)}.custom-block-title{font-weight:600}.custom-block p+p{margin:8px 0}.custom-block.details summary{margin:0 0 8px;font-weight:700;cursor:pointer}.custom-block.details summary+p{margin:8px 0}.custom-block a{color:inherit;font-weight:600}.custom-block a:hover{text-decoration:underline}.custom-block code{font-size:var(--vp-custom-block-code-font-size)}.dark .vp-code-light{display:none}html:not(.dark) .vp-code-dark{display:none}.vp-code-group{margin-top:16px}.vp-code-group .tabs{position:relative;display:flex;margin-right:-24px;margin-left:-24px;padding:0 12px;background-color:var(--vp-code-tab-bg);overflow-x:auto;overflow-y:hidden}.vp-code-group .tabs:after{position:absolute;right:0;bottom:0;left:0;height:1px;background-color:var(--vp-code-tab-divider);content:""}@media (min-width: 640px){.vp-code-group .tabs{margin-right:0;margin-left:0;border-radius:8px 8px 0 0}}.vp-code-group .tabs input{position:absolute;opacity:0;pointer-events:none}.vp-code-group .tabs label{position:relative;display:inline-block;border-bottom:1px solid transparent;padding:0 12px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-code-tab-text-color);white-space:nowrap;cursor:pointer;transition:color .25s}.vp-code-group .tabs label:after{position:absolute;right:8px;bottom:-1px;left:8px;z-index:10;height:1px;content:"";background-color:transparent;transition:background-color .25s}.vp-code-group label:hover{color:var(--vp-code-tab-hover-text-color)}.vp-code-group input:checked+label{color:var(--vp-code-tab-active-text-color)}.vp-code-group input:checked+label:after{background-color:var(--vp-code-tab-active-bar-color)}.vp-code-group div[class*=language-]{display:none;margin-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important}.vp-code-group div[class*=language-].active{display:block}.vp-doc h1,.vp-doc h2,.vp-doc h3,.vp-doc h4,.vp-doc h5,.vp-doc h6{position:relative;font-weight:600;outline:none}.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:28px}.vp-doc h2{margin:48px 0 16px;border-top:1px solid var(--vp-c-divider);padding-top:24px;letter-spacing:-.02em;line-height:32px;font-size:24px}.vp-doc h3{margin:32px 0 0;letter-spacing:-.01em;line-height:28px;font-size:20px}.vp-doc .header-anchor{float:left;margin-left:-.87em;padding-right:.23em;font-weight:500;user-select:none;opacity:0;transition:color .25s,opacity .25s}.vp-doc .header-anchor:before{content:var(--vp-header-anchor-symbol)}.vp-doc h1:hover .header-anchor,.vp-doc h1 .header-anchor:focus,.vp-doc h2:hover .header-anchor,.vp-doc h2 .header-anchor:focus,.vp-doc h3:hover .header-anchor,.vp-doc h3 .header-anchor:focus,.vp-doc h4:hover .header-anchor,.vp-doc h4 .header-anchor:focus,.vp-doc h5:hover .header-anchor,.vp-doc h5 .header-anchor:focus,.vp-doc h6:hover .header-anchor,.vp-doc h6 .header-anchor:focus{opacity:1}@media (min-width: 768px){.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:32px}}.vp-doc p,.vp-doc summary{margin:16px 0}.vp-doc p{line-height:28px}.vp-doc blockquote{margin:16px 0;border-left:2px solid var(--vp-c-divider);padding-left:16px;transition:border-color .5s}.vp-doc blockquote>p{margin:0;font-size:16px;color:var(--vp-c-text-2);transition:color .5s}.vp-doc a{font-weight:500;color:var(--vp-c-brand);text-decoration-style:dotted;transition:color .25s}.vp-doc a:hover{text-decoration:underline}.vp-doc strong{font-weight:600}.vp-doc ul,.vp-doc ol{padding-left:1.25rem;margin:16px 0}.vp-doc ul{list-style:disc}.vp-doc ol{list-style:decimal}.vp-doc li+li{margin-top:8px}.vp-doc li>ol,.vp-doc li>ul{margin:8px 0 0}.vp-doc table{display:block;border-collapse:collapse;margin:20px 0;overflow-x:auto}.vp-doc tr{border-top:1px solid var(--vp-c-divider);transition:background-color .5s}.vp-doc tr:nth-child(2n){background-color:var(--vp-c-bg-soft)}.vp-doc th,.vp-doc td{border:1px solid var(--vp-c-divider);padding:8px 16px}.vp-doc th{text-align:left;font-size:14px;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-doc td{font-size:14px}.vp-doc hr{margin:16px 0;border:none;border-top:1px solid var(--vp-c-divider)}.vp-doc .custom-block{margin:16px 0}.vp-doc .custom-block p{margin:8px 0;line-height:24px}.vp-doc .custom-block p:first-child{margin:0}.vp-doc .custom-block a{color:inherit;font-weight:600}.vp-doc .custom-block a:hover{text-decoration:underline}.vp-doc .custom-block code{font-size:var(--vp-custom-block-code-font-size);font-weight:700;color:inherit}.vp-doc .custom-block div[class*=language-]{margin:8px 0}.vp-doc .custom-block div[class*=language-] code{font-weight:400;background-color:transparent}.vp-doc :not(pre,h1,h2,h3,h4,h5,h6)>code{font-size:var(--vp-code-font-size)}.vp-doc :not(pre)>code{border-radius:4px;padding:3px 6px;color:var(--vp-c-text-code);background-color:var(--vp-c-mute);transition:color .5s,background-color .5s}.vp-doc h1>code,.vp-doc h2>code,.vp-doc h3>code{font-size:.9em}.vp-doc a>code{color:var(--vp-c-brand);transition:color .25s}.vp-doc a:hover>code{color:var(--vp-c-brand-dark)}.vp-doc div[class*=language-]{position:relative;margin:16px -24px;background-color:var(--vp-code-block-bg);overflow-x:auto;transition:background-color .5s}@media (min-width: 640px){.vp-doc div[class*=language-]{border-radius:8px;margin:16px 0}}@media (max-width: 639px){.vp-doc li div[class*=language-]{border-radius:8px 0 0 8px}}.vp-doc div[class*=language-]+div[class*=language-],.vp-doc div[class$=-api]+div[class*=language-],.vp-doc div[class*=language-]+div[class$=-api]>div[class*=language-]{margin-top:-8px}.vp-doc [class*=language-] pre,.vp-doc [class*=language-] code{direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.vp-doc [class*=language-] pre{position:relative;z-index:1;margin:0;padding:20px 0;background:transparent;overflow-x:auto}.vp-doc [class*=language-] code{display:block;padding:0 24px;width:fit-content;min-width:100%;line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-block-color);transition:color .5s}.vp-doc [class*=language-] code .highlighted{background-color:var(--vp-code-line-highlight-color);transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .highlighted.error{background-color:var(--vp-code-line-error-color)}.vp-doc [class*=language-] code .highlighted.warning{background-color:var(--vp-code-line-warning-color)}.vp-doc [class*=language-] code .diff{transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .diff:before{position:absolute;left:10px}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){filter:blur(.095rem);opacity:.4;transition:filter .35s,opacity .35s}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){opacity:.7;transition:filter .35s,opacity .35s}.vp-doc [class*=language-]:hover .has-focused-lines .line:not(.has-focus){filter:blur(0);opacity:1}.vp-doc [class*=language-] code .diff.remove{background-color:var(--vp-code-line-diff-remove-color);opacity:.7}.vp-doc [class*=language-] code .diff.remove:before{content:"-";color:var(--vp-code-line-diff-remove-symbol-color)}.vp-doc [class*=language-] code .diff.add{background-color:var(--vp-code-line-diff-add-color)}.vp-doc [class*=language-] code .diff.add:before{content:"+";color:var(--vp-code-line-diff-add-symbol-color)}.vp-doc div[class*=language-].line-numbers-mode{padding-left:32px}.vp-doc .line-numbers-wrapper{position:absolute;top:0;bottom:0;left:0;z-index:3;border-right:1px solid var(--vp-code-block-divider-color);padding-top:20px;width:32px;text-align:center;font-family:var(--vp-font-family-mono);line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-line-number-color);transition:border-color .5s,color .5s}.vp-doc [class*=language-]>button.copy{direction:ltr;position:absolute;top:12px;right:12px;z-index:3;border:1px solid var(--vp-code-copy-code-border-color);border-radius:4px;width:40px;height:40px;background-color:var(--vp-code-copy-code-bg);opacity:0;cursor:pointer;background-image:var(--vp-icon-copy);background-position:50%;background-size:20px;background-repeat:no-repeat;transition:border-color .25s,background-color .25s,opacity .25s}.vp-doc [class*=language-]:hover>button.copy,.vp-doc [class*=language-]>button.copy:focus{opacity:1}.vp-doc [class*=language-]>button.copy:hover,.vp-doc [class*=language-]>button.copy.copied{border-color:var(--vp-code-copy-code-hover-border-color);background-color:var(--vp-code-copy-code-hover-bg)}.vp-doc [class*=language-]>button.copy.copied,.vp-doc [class*=language-]>button.copy:hover.copied{border-radius:0 4px 4px 0;background-color:var(--vp-code-copy-code-hover-bg);background-image:var(--vp-icon-copied)}.vp-doc [class*=language-]>button.copy.copied:before,.vp-doc [class*=language-]>button.copy:hover.copied:before{position:relative;top:-1px;left:-65px;display:flex;justify-content:center;align-items:center;border:1px solid var(--vp-code-copy-code-hover-border-color);border-right:0;border-radius:4px 0 0 4px;width:64px;height:40px;text-align:center;font-size:12px;font-weight:500;color:var(--vp-code-copy-code-active-text);background-color:var(--vp-code-copy-code-hover-bg);white-space:nowrap;content:"Copied"}.vp-doc [class*=language-]>span.lang{position:absolute;top:2px;right:8px;z-index:2;font-size:12px;font-weight:500;color:var(--vp-c-code-dimm);transition:color .4s,opacity .4s}.vp-doc [class*=language-]:hover>button.copy+span.lang,.vp-doc [class*=language-]>button.copy:focus+span.lang{opacity:0}.vp-doc .VPTeamMembers{margin-top:24px}.vp-doc .VPTeamMembers.small.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}.vp-doc .VPTeamMembers.small.count-2 .container,.vp-doc .VPTeamMembers.small.count-3 .container{max-width:100%!important}.vp-doc .VPTeamMembers.medium.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}.vp-sponsor{border-radius:16px;overflow:hidden}.vp-sponsor.aside{border-radius:12px}.vp-sponsor-section+.vp-sponsor-section{margin-top:4px}.vp-sponsor-tier{margin-bottom:4px;text-align:center;letter-spacing:1px;line-height:24px;width:100%;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-sponsor.normal .vp-sponsor-tier{padding:13px 0 11px;font-size:14px}.vp-sponsor.aside .vp-sponsor-tier{padding:9px 0 7px;font-size:12px}.vp-sponsor-grid+.vp-sponsor-tier{margin-top:4px}.vp-sponsor-grid{display:flex;flex-wrap:wrap;gap:4px}.vp-sponsor-grid.xmini .vp-sponsor-grid-link{height:64px}.vp-sponsor-grid.xmini .vp-sponsor-grid-image{max-width:64px;max-height:22px}.vp-sponsor-grid.mini .vp-sponsor-grid-link{height:72px}.vp-sponsor-grid.mini .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.small .vp-sponsor-grid-link{height:96px}.vp-sponsor-grid.small .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.medium .vp-sponsor-grid-link{height:112px}.vp-sponsor-grid.medium .vp-sponsor-grid-image{max-width:120px;max-height:36px}.vp-sponsor-grid.big .vp-sponsor-grid-link{height:184px}.vp-sponsor-grid.big .vp-sponsor-grid-image{max-width:192px;max-height:56px}.vp-sponsor-grid[data-vp-grid="2"] .vp-sponsor-grid-item{width:calc((100% - 4px)/2)}.vp-sponsor-grid[data-vp-grid="3"] .vp-sponsor-grid-item{width:calc((100% - 4px * 2) / 3)}.vp-sponsor-grid[data-vp-grid="4"] .vp-sponsor-grid-item{width:calc((100% - 12px)/4)}.vp-sponsor-grid[data-vp-grid="5"] .vp-sponsor-grid-item{width:calc((100% - 16px)/5)}.vp-sponsor-grid[data-vp-grid="6"] .vp-sponsor-grid-item{width:calc((100% - 4px * 5) / 6)}.vp-sponsor-grid-item{flex-shrink:0;width:100%;background-color:var(--vp-c-bg-soft);transition:background-color .25s}.vp-sponsor-grid-item:hover{background-color:var(--vp-c-bg-soft-down)}.vp-sponsor-grid-item:hover .vp-sponsor-grid-image{filter:grayscale(0) invert(0)}.vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.dark .vp-sponsor-grid-item:hover{background-color:var(--vp-c-white)}.dark .vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.vp-sponsor-grid-link{display:flex}.vp-sponsor-grid-box{display:flex;justify-content:center;align-items:center;width:100%}.vp-sponsor-grid-image{max-width:100%;filter:grayscale(1);transition:filter .25s}.dark .vp-sponsor-grid-image{filter:grayscale(1) invert(1)}.VPBadge[data-v-e233384c]{display:inline-block;margin-left:2px;border:1px solid transparent;border-radius:10px;padding:0 8px;line-height:18px;font-size:12px;font-weight:600;transform:translateY(-2px)}h1 .VPBadge[data-v-e233384c],h2 .VPBadge[data-v-e233384c],h3 .VPBadge[data-v-e233384c],h4 .VPBadge[data-v-e233384c],h5 .VPBadge[data-v-e233384c],h6 .VPBadge[data-v-e233384c]{vertical-align:top}h2 .VPBadge[data-v-e233384c]{border-radius:11px;line-height:20px}.VPBadge.info[data-v-e233384c]{border-color:var(--vp-badge-info-border);color:var(--vp-badge-info-text);background-color:var(--vp-badge-info-bg)}.VPBadge.tip[data-v-e233384c]{border-color:var(--vp-badge-tip-border);color:var(--vp-badge-tip-text);background-color:var(--vp-badge-tip-bg)}.VPBadge.warning[data-v-e233384c]{border-color:var(--vp-badge-warning-border);color:var(--vp-badge-warning-text);background-color:var(--vp-badge-warning-bg)}.VPBadge.danger[data-v-e233384c]{border-color:var(--vp-badge-danger-border);color:var(--vp-badge-danger-text);background-color:var(--vp-badge-danger-bg)}.VPSkipLink[data-v-994b33bc]{top:8px;left:8px;padding:8px 16px;z-index:999;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none;color:var(--vp-c-brand);box-shadow:var(--vp-shadow-3);background-color:var(--vp-c-bg)}.VPSkipLink[data-v-994b33bc]:focus{height:auto;width:auto;clip:auto;clip-path:none}.dark .VPSkipLink[data-v-994b33bc]{color:var(--vp-c-green)}@media (min-width: 1280px){.VPSkipLink[data-v-994b33bc]{top:14px;left:16px}}.VPBackdrop[data-v-b2600058]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--vp-z-index-backdrop);background:var(--vp-backdrop-bg-color);transition:opacity .5s}.VPBackdrop.fade-enter-from[data-v-b2600058],.VPBackdrop.fade-leave-to[data-v-b2600058]{opacity:0}.VPBackdrop.fade-leave-active[data-v-b2600058]{transition-duration:.25s}@media (min-width: 1280px){.VPBackdrop[data-v-b2600058]{display:none}}html:not(.dark) .VPImage.dark[data-v-74766fef]{display:none}.dark .VPImage.light[data-v-74766fef]{display:none}.title[data-v-bd15f18e]{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;height:var(--vp-nav-height);font-size:16px;font-weight:600;color:var(--vp-c-text-1);transition:opacity .25s}.title[data-v-bd15f18e]:hover{opacity:.6}@media (min-width: 960px){.title[data-v-bd15f18e]{flex-shrink:0}.VPNavBarTitle.has-sidebar .title[data-v-bd15f18e]{border-bottom-color:var(--vp-c-divider)}}[data-v-bd15f18e] .logo{margin-right:8px;height:24px}.VPPluginSearch-flex-logo{width:80px;margin-left:calc(100% - 90px);padding-bottom:10px}.VPPluginSearch-search-list{padding:1rem;max-height:calc(100vh - 230px);overflow-x:auto}.VPPluginSearch-search-item-icon{font-family:none;align-self:center;padding:0 1rem 0 0;font-size:x-large}.VPPluginSearch-search-list>div{color:var(--vp-c-brand-dark);font-weight:700}.VPPluginSearch-search-item{padding:.25rem 1rem;margin:8px 0 0;border:solid 1px;border-radius:6px;display:flex;border-color:var(--vp-custom-block-details-border);color:var(--vp-custom-block-details-text);background-color:var(--vp-custom-block-details-bg)}.VPPluginSearch-search-item p{margin:0;font-size:smaller;color:var(--c-text-light-3)}.VPPluginSearch-search-item:hover{color:#fff;background:var(--vp-c-brand-dark)}.VPPluginSearch-search-item:hover>p{color:#fff}.VPNavBarSearch{display:flex;align-items:center;padding-left:16px}.DocSearch-MagnifierLabel{margin:16px;color:var(--c-brand-light);stroke-width:2px}.DocSearch-Input{appearance:none;background:#58565636;border:solid 1px var(--c-brand-light);color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;width:80%;margin:8px;padding:8px;border-radius:6px}.dark .DocSearch-Input{color:var(--vp-c-text-1)}.VPPluginSearch-modal-back{left:0;right:0;top:0;bottom:0;background:#545454b3;position:fixed;z-index:65}.dark .VPPluginSearch-modal{background-color:#242424}.VPPluginSearch-modal{background-color:#f9f9f9;border-radius:6px;box-shadow:none;flex-direction:column;margin:80px auto auto;max-width:560px;position:relative}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}@media (max-width: 768px){.VPPluginSearch-modal{max-width:100%;border-radius:0}}.dark .DocSearch-Form{background-color:var(--vt-c-bg-mute)}.DocSearch-Form{background-color:#fff;border:1px solid var(--vt-c-brand);padding:6px}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Button-Key{align-items:center;background:var(--c-brand-light);border-radius:3px;box-shadow:var(--c-brand);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:2px;position:relative;top:-1px;width:20px}body.dark .DocSearch-Button:hover{box-shadow:none}.DocSearch{--docsearch-primary-color: var(--vt-c-brand);--docsearch-highlight-color: var(--docsearch-primary-color);--docsearch-text-color: var(--vt-c-text-1);--docsearch-muted-color: #ebebeb99;--docsearch-searchbox-shadow: none;--docsearch-searchbox-focus-background: transparent;--docsearch-key-gradient: transparent;--docsearch-key-shadow: none;--docsearch-modal-background: var(--vt-c-bg-soft);--docsearch-footer-background: var(--vt-c-bg)}.dark .DocSearch{--docsearch-modal-shadow: none;--docsearch-footer-shadow: none;--docsearch-logo-color: #ebebeb99;--docsearch-hit-background: #2f2f2f;--docsearch-hit-color: #ebebeb99;--docsearch-hit-shadow: none}.dark .DocSearch-Footer{border-top:1px solid var(--vt-c-divider)}.DocSearch-Form{background-color:#fff;border:1px solid var(--vt-c-brand)}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Button{display:flex;justify-content:center;align-items:center;margin:0;width:48px;height:55px;background:transparent;border:none}.DocSearch-Button:hover{background:transparent}.DocSearch-Button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}.DocSearch-Button:focus:not(:focus-visible){outline:none!important}@media (min-width: 768px){.DocSearch-Button{justify-content:flex-start;width:100%}}.DocSearch-MagnifierLabel{color:var(--vp-c-brand-dark)}.DocSearch-Button .DocSearch-Search-Icon{transition:color .5s;fill:currentColor;width:18px;height:18px;position:relative}@media (min-width: 768px){.DocSearch-Button .DocSearch-Search-Icon{top:1px;margin-right:10px;width:15px;height:15px}}.DocSearch-Button:hover .DocSearch-Search-Icon{color:var(--vt-c-text-1)}.DocSearch-Button-Placeholder{transition:color .5s;font-size:13px;font-weight:500;color:#6669;display:none;padding:0 10px 0 0}@media (min-width: 960px){.DocSearch-Button-Placeholder{display:inline-block}}.DocSearch-Button:hover .DocSearch-Button-Placeholder{color:var(--vt-c-text-1)}.DocSearch-Button .DocSearch-Button-Key{margin-top:2px;border:1px solid var(--vt-c-divider);border-right:none;border-radius:4px 0 0 4px;display:none;padding-left:6px;height:22px;line-height:22px;transition:color .5s,border-color .5s;min-width:0}.DocSearch-Button .DocSearch-Button-Key+.DocSearch-Button-Key{border-right:1px solid var(--vt-c-divider);border-left:none;border-radius:0 4px 4px 0;padding-left:2px;padding-right:6px}.DocSearch-Button:hover .DocSearch-Button-Key{color:var(--vt-c-brand-light)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Key{display:inline-block}}.DocSearch-Button-Key{font-size:12px;font-weight:500;height:20px;margin:0;width:auto;color:var(--vt-c-text-3);transition:color .5s;display:inline-block;padding:0 1px}.icon[data-v-87683ad2]{display:inline-block;margin-top:-1px;margin-left:4px;width:11px;height:11px;fill:var(--vp-c-text-3);transition:fill .25s;flex-shrink:0}.VPNavBarMenuLink[data-v-6dd6d312]{display:flex;align-items:center;padding:0 12px;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.VPNavBarMenuLink.active[data-v-6dd6d312],.VPNavBarMenuLink[data-v-6dd6d312]:hover{color:var(--vp-c-brand)}.VPMenuGroup+.VPMenuLink[data-v-b9520bf2]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.link[data-v-b9520bf2]{display:block;border-radius:6px;padding:0 12px;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);white-space:nowrap;transition:background-color .25s,color .25s}.link[data-v-b9520bf2]:hover{color:var(--vp-c-brand);background-color:var(--vp-c-bg-elv-mute)}.link.active[data-v-b9520bf2]{color:var(--vp-c-brand)}.VPMenuGroup[data-v-2bec9359]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.VPMenuGroup[data-v-2bec9359]:first-child{margin-top:0;border-top:0;padding-top:0}.VPMenuGroup+.VPMenuGroup[data-v-2bec9359]{margin-top:12px;border-top:1px solid var(--vp-c-divider)}.title[data-v-2bec9359]{padding:0 12px;line-height:32px;font-size:14px;font-weight:600;color:var(--vp-c-text-2);white-space:nowrap;transition:color .25s}.VPMenu[data-v-7bffa9cd]{border-radius:12px;padding:12px;min-width:128px;border:1px solid var(--vp-c-divider);background-color:var(--vp-c-bg-elv);box-shadow:var(--vp-shadow-3);transition:background-color .5s;max-height:calc(100vh - var(--vp-nav-height));overflow-y:auto}.VPMenu[data-v-7bffa9cd] .group{margin:0 -12px;padding:0 12px 12px}.VPMenu[data-v-7bffa9cd] .group+.group{border-top:1px solid var(--vp-c-divider);padding:11px 12px 12px}.VPMenu[data-v-7bffa9cd] .group:last-child{padding-bottom:0}.VPMenu[data-v-7bffa9cd] .group+.item{border-top:1px solid var(--vp-c-divider);padding:11px 16px 0}.VPMenu[data-v-7bffa9cd] .item{padding:0 16px;white-space:nowrap}.VPMenu[data-v-7bffa9cd] .label{flex-grow:1;line-height:28px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.VPMenu[data-v-7bffa9cd] .action{padding-left:24px}.VPFlyout[data-v-64c29883]{position:relative}.VPFlyout[data-v-64c29883]:hover{color:var(--vp-c-brand);transition:color .25s}.VPFlyout:hover .text[data-v-64c29883]{color:var(--vp-c-text-2)}.VPFlyout:hover .icon[data-v-64c29883]{fill:var(--vp-c-text-2)}.VPFlyout.active .text[data-v-64c29883]{color:var(--vp-c-brand)}.VPFlyout.active:hover .text[data-v-64c29883]{color:var(--vp-c-brand-dark)}.VPFlyout:hover .menu[data-v-64c29883],.button[aria-expanded=true]+.menu[data-v-64c29883]{opacity:1;visibility:visible;transform:translateY(0)}.button[data-v-64c29883]{display:flex;align-items:center;padding:0 12px;height:var(--vp-nav-height);color:var(--vp-c-text-1);transition:color .5s}.text[data-v-64c29883]{display:flex;align-items:center;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.option-icon[data-v-64c29883]{margin-right:0;width:16px;height:16px;fill:currentColor}.text-icon[data-v-64c29883]{margin-left:4px;width:14px;height:14px;fill:currentColor}.icon[data-v-64c29883]{width:20px;height:20px;fill:currentColor;transition:fill .25s}.menu[data-v-64c29883]{position:absolute;top:calc(var(--vp-nav-height) / 2 + 20px);right:0;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,transform .25s}.VPNavBarMenu[data-v-c6c3e6d4]{display:none}@media (min-width: 768px){.VPNavBarMenu[data-v-c6c3e6d4]{display:flex}}.VPNavBarTranslations[data-v-3bf1c934]{display:none}@media (min-width: 1280px){.VPNavBarTranslations[data-v-3bf1c934]{display:flex;align-items:center}}.title[data-v-3bf1c934]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.VPSwitch[data-v-0a2eba70]{position:relative;border-radius:11px;display:block;width:40px;height:22px;flex-shrink:0;border:1px solid var(--vp-input-border-color);background-color:var(--vp-input-switch-bg-color);transition:border-color .25s}.VPSwitch[data-v-0a2eba70]:hover{border-color:var(--vp-input-hover-border-color)}.check[data-v-0a2eba70]{position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background-color:var(--vp-c-neutral-inverse);box-shadow:var(--vp-shadow-1);transition:transform .25s}.icon[data-v-0a2eba70]{position:relative;display:block;width:18px;height:18px;border-radius:50%;overflow:hidden}.icon[data-v-0a2eba70] svg{position:absolute;top:3px;left:3px;width:12px;height:12px;fill:var(--vp-c-text-2)}.dark .icon[data-v-0a2eba70] svg{fill:var(--vp-c-text-1);transition:opacity .25s}.sun[data-v-f37e294f]{opacity:1}.moon[data-v-f37e294f],.dark .sun[data-v-f37e294f]{opacity:0}.dark .moon[data-v-f37e294f]{opacity:1}.dark .VPSwitchAppearance[data-v-f37e294f] .check{transform:translate(18px)}.VPNavBarAppearance[data-v-88042fc7]{display:none}@media (min-width: 1280px){.VPNavBarAppearance[data-v-88042fc7]{display:flex;align-items:center}}.VPSocialLink[data-v-ca994af5]{display:flex;justify-content:center;align-items:center;width:36px;height:36px;color:var(--vp-c-text-2);transition:color .5s}.VPSocialLink[data-v-ca994af5]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPSocialLink[data-v-ca994af5]>svg{width:20px;height:20px;fill:currentColor}.VPSocialLinks[data-v-de2bf516]{display:flex;flex-wrap:wrap;justify-content:center}.VPNavBarSocialLinks[data-v-08b35e6f]{display:none}@media (min-width: 1280px){.VPNavBarSocialLinks[data-v-08b35e6f]{display:flex;align-items:center}}.VPNavBarExtra[data-v-47bb42ad]{display:none;margin-right:-12px}@media (min-width: 768px){.VPNavBarExtra[data-v-47bb42ad]{display:block}}@media (min-width: 1280px){.VPNavBarExtra[data-v-47bb42ad]{display:none}}.trans-title[data-v-47bb42ad]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.item.appearance[data-v-47bb42ad],.item.social-links[data-v-47bb42ad]{display:flex;align-items:center;padding:0 12px}.item.appearance[data-v-47bb42ad]{min-width:176px}.appearance-action[data-v-47bb42ad]{margin-right:-2px}.social-links-list[data-v-47bb42ad]{margin:-4px -8px}.VPNavBarHamburger[data-v-670493dd]{display:flex;justify-content:center;align-items:center;width:48px;height:var(--vp-nav-height)}@media (min-width: 768px){.VPNavBarHamburger[data-v-670493dd]{display:none}}.container[data-v-670493dd]{position:relative;width:16px;height:14px;overflow:hidden}.VPNavBarHamburger:hover .top[data-v-670493dd]{top:0;left:0;transform:translate(4px)}.VPNavBarHamburger:hover .middle[data-v-670493dd]{top:6px;left:0;transform:translate(0)}.VPNavBarHamburger:hover .bottom[data-v-670493dd]{top:12px;left:0;transform:translate(8px)}.VPNavBarHamburger.active .top[data-v-670493dd]{top:6px;transform:translate(0) rotate(225deg)}.VPNavBarHamburger.active .middle[data-v-670493dd]{top:6px;transform:translate(16px)}.VPNavBarHamburger.active .bottom[data-v-670493dd]{top:6px;transform:translate(0) rotate(135deg)}.VPNavBarHamburger.active:hover .top[data-v-670493dd],.VPNavBarHamburger.active:hover .middle[data-v-670493dd],.VPNavBarHamburger.active:hover .bottom[data-v-670493dd]{background-color:var(--vp-c-text-2);transition:top .25s,background-color .25s,transform .25s}.top[data-v-670493dd],.middle[data-v-670493dd],.bottom[data-v-670493dd]{position:absolute;width:16px;height:2px;background-color:var(--vp-c-text-1);transition:top .25s,background-color .5s,transform .25s}.top[data-v-670493dd]{top:0;left:0;transform:translate(0)}.middle[data-v-670493dd]{top:6px;left:0;transform:translate(8px)}.bottom[data-v-670493dd]{top:12px;left:0;transform:translate(4px)}.VPNavBar[data-v-82c325fa]{position:relative;border-bottom:1px solid transparent;padding:0 8px 0 24px;height:var(--vp-nav-height);transition:border-color .5s,background-color .5s;pointer-events:none;white-space:nowrap}.VPNavBar.has-sidebar[data-v-82c325fa]{border-bottom-color:var(--vp-c-gutter)}@media (min-width: 768px){.VPNavBar[data-v-82c325fa]{padding:0 32px}}@media (min-width: 960px){.VPNavBar.has-sidebar[data-v-82c325fa]{border-bottom-color:transparent;padding:0}.VPNavBar.fill[data-v-82c325fa]:not(.has-sidebar){border-bottom-color:var(--vp-c-gutter);background-color:var(--vp-nav-bg-color)}}.container[data-v-82c325fa]{display:flex;justify-content:space-between;margin:0 auto;max-width:calc(var(--vp-layout-max-width) - 64px);height:var(--vp-nav-height);pointer-events:none}.container>.title[data-v-82c325fa],.container>.content[data-v-82c325fa]{pointer-events:none}.container[data-v-82c325fa] *{pointer-events:auto}@media (min-width: 960px){.VPNavBar.has-sidebar .container[data-v-82c325fa]{max-width:100%}}.title[data-v-82c325fa]{flex-shrink:0;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar.has-sidebar .title[data-v-82c325fa]{position:absolute;top:0;left:0;z-index:2;padding:0 32px;width:var(--vp-sidebar-width);height:var(--vp-nav-height);background-color:transparent}}@media (min-width: 1440px){.VPNavBar.has-sidebar .title[data-v-82c325fa]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}.content[data-v-82c325fa]{flex-grow:1}@media (min-width: 960px){.VPNavBar.has-sidebar .content[data-v-82c325fa]{position:relative;z-index:1;padding-right:32px;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPNavBar.has-sidebar .content[data-v-82c325fa]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.content-body[data-v-82c325fa]{display:flex;justify-content:flex-end;align-items:center;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar.has-sidebar .content-body[data-v-82c325fa],.VPNavBar.fill .content-body[data-v-82c325fa]{position:relative;background-color:var(--vp-nav-bg-color)}}.menu+.translations[data-v-82c325fa]:before,.menu+.appearance[data-v-82c325fa]:before,.menu+.social-links[data-v-82c325fa]:before,.translations+.appearance[data-v-82c325fa]:before,.appearance+.social-links[data-v-82c325fa]:before{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--vp-c-divider);content:""}.menu+.appearance[data-v-82c325fa]:before,.translations+.appearance[data-v-82c325fa]:before{margin-right:16px}.appearance+.social-links[data-v-82c325fa]:before{margin-left:16px}.social-links[data-v-82c325fa]{margin-right:-8px}@media (min-width: 960px){.VPNavBar.has-sidebar .curtain[data-v-82c325fa]{position:absolute;right:0;bottom:-31px;width:calc(100% - var(--vp-sidebar-width));height:32px}.VPNavBar.has-sidebar .curtain[data-v-82c325fa]:before{display:block;width:100%;height:32px;background:linear-gradient(var(--vp-c-bg),transparent 70%);content:""}}@media (min-width: 1440px){.VPNavBar.has-sidebar .curtain[data-v-82c325fa]{width:calc(100% - ((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)))}}.VPNavScreenMenuLink[data-v-0162d08e]{display:block;border-bottom:1px solid var(--vp-c-divider);padding:12px 0 11px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:border-color .25s,color .25s}.VPNavScreenMenuLink[data-v-0162d08e]:hover{color:var(--vp-c-brand)}.VPNavScreenMenuGroupLink[data-v-7fd086c3]{display:block;margin-left:12px;line-height:32px;font-size:14px;font-weight:400;color:var(--vp-c-text-1);transition:color .25s}.VPNavScreenMenuGroupLink[data-v-7fd086c3]:hover{color:var(--vp-c-brand)}.VPNavScreenMenuGroupSection[data-v-eb049aaa]{display:block}.title[data-v-eb049aaa]{line-height:32px;font-size:13px;font-weight:700;color:var(--vp-c-text-2);transition:color .25s}.VPNavScreenMenuGroup[data-v-48a8b068]{border-bottom:1px solid var(--vp-c-divider);height:48px;overflow:hidden;transition:border-color .5s}.VPNavScreenMenuGroup .items[data-v-48a8b068]{visibility:hidden}.VPNavScreenMenuGroup.open .items[data-v-48a8b068]{visibility:visible}.VPNavScreenMenuGroup.open[data-v-48a8b068]{padding-bottom:10px;height:auto}.VPNavScreenMenuGroup.open .button[data-v-48a8b068]{padding-bottom:6px;color:var(--vp-c-brand)}.VPNavScreenMenuGroup.open .button-icon[data-v-48a8b068]{transform:rotate(45deg)}.button[data-v-48a8b068]{display:flex;justify-content:space-between;align-items:center;padding:12px 4px 11px 0;width:100%;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.button[data-v-48a8b068]:hover{color:var(--vp-c-brand)}.button-icon[data-v-48a8b068]{width:14px;height:14px;fill:var(--vp-c-text-2);transition:fill .5s,transform .25s}.group[data-v-48a8b068]:first-child{padding-top:0}.group+.group[data-v-48a8b068],.group+.item[data-v-48a8b068]{padding-top:4px}.VPNavScreenAppearance[data-v-8d2d8cf1]{display:flex;justify-content:space-between;align-items:center;border-radius:8px;padding:12px 14px 12px 16px;background-color:var(--vp-c-bg-soft)}.text[data-v-8d2d8cf1]{line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.VPNavScreenTranslations[data-v-b72581fd]{height:24px;overflow:hidden}.VPNavScreenTranslations.open[data-v-b72581fd]{height:auto}.title[data-v-b72581fd]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-text-1)}.icon[data-v-b72581fd]{width:16px;height:16px;fill:currentColor}.icon.lang[data-v-b72581fd]{margin-right:8px}.icon.chevron[data-v-b72581fd]{margin-left:4px}.list[data-v-b72581fd]{padding:4px 0 0 24px}.link[data-v-b72581fd]{line-height:32px;font-size:13px;color:var(--vp-c-text-1)}.VPNavScreen[data-v-ea8d6f65]{position:fixed;top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px);right:0;bottom:0;left:0;padding:0 32px;width:100%;background-color:var(--vp-nav-screen-bg-color);overflow-y:auto;transition:background-color .5s;pointer-events:auto}.VPNavScreen.fade-enter-active[data-v-ea8d6f65],.VPNavScreen.fade-leave-active[data-v-ea8d6f65]{transition:opacity .25s}.VPNavScreen.fade-enter-active .container[data-v-ea8d6f65],.VPNavScreen.fade-leave-active .container[data-v-ea8d6f65]{transition:transform .25s ease}.VPNavScreen.fade-enter-from[data-v-ea8d6f65],.VPNavScreen.fade-leave-to[data-v-ea8d6f65]{opacity:0}.VPNavScreen.fade-enter-from .container[data-v-ea8d6f65],.VPNavScreen.fade-leave-to .container[data-v-ea8d6f65]{transform:translateY(-8px)}@media (min-width: 768px){.VPNavScreen[data-v-ea8d6f65]{display:none}}.container[data-v-ea8d6f65]{margin:0 auto;padding:24px 0 96px;max-width:288px}.menu+.translations[data-v-ea8d6f65],.menu+.appearance[data-v-ea8d6f65],.translations+.appearance[data-v-ea8d6f65]{margin-top:24px}.menu+.social-links[data-v-ea8d6f65]{margin-top:16px}.appearance+.social-links[data-v-ea8d6f65]{margin-top:16px}.VPNav[data-v-b1949460]{position:relative;top:var(--vp-layout-top-height, 0px);left:0;z-index:var(--vp-z-index-nav);width:100%;pointer-events:none;transition:background-color .5s}@media (min-width: 960px){.VPNav[data-v-b1949460]{position:fixed}}.root[data-v-efc119ee]{position:relative;z-index:1}.nested[data-v-efc119ee]{padding-left:13px}.outline-link[data-v-efc119ee]{display:block;line-height:28px;color:var(--vp-c-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .5s;font-weight:500}.outline-link[data-v-efc119ee]:hover,.outline-link.active[data-v-efc119ee]{color:var(--vp-c-text-1);transition:color .25s}.outline-link.nested[data-v-efc119ee]{padding-left:13px}.VPLocalNavOutlineDropdown[data-v-07aca99e]{padding:12px 20px 11px}.VPLocalNavOutlineDropdown button[data-v-07aca99e]{display:block;font-size:12px;font-weight:500;line-height:24px;color:var(--vp-c-text-2);transition:color .5s;position:relative}.VPLocalNavOutlineDropdown button[data-v-07aca99e]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPLocalNavOutlineDropdown button.open[data-v-07aca99e]{color:var(--vp-c-text-1)}.icon[data-v-07aca99e]{display:inline-block;vertical-align:middle;margin-left:2px;width:14px;height:14px;fill:currentColor}[data-v-07aca99e] .outline-link{font-size:14px;padding:2px 0}.open>.icon[data-v-07aca99e]{transform:rotate(90deg)}.items[data-v-07aca99e]{position:absolute;left:20px;right:20px;top:64px;background-color:var(--vp-local-nav-bg-color);padding:4px 10px 16px;border:1px solid var(--vp-c-divider);border-radius:8px;max-height:calc(var(--vp-vh, 100vh) - 86px);overflow:hidden auto;box-shadow:var(--vp-shadow-3)}.top-link[data-v-07aca99e]{display:block;color:var(--vp-c-brand);font-size:13px;font-weight:500;padding:6px 0;margin:0 13px 10px;border-bottom:1px solid var(--vp-c-divider)}.flyout-enter-active[data-v-07aca99e]{transition:all .2s ease-out}.flyout-leave-active[data-v-07aca99e]{transition:all .15s ease-in}.flyout-enter-from[data-v-07aca99e],.flyout-leave-to[data-v-07aca99e]{opacity:0;transform:translateY(-16px)}.VPLocalNav[data-v-9a33564b]{position:sticky;top:0;left:0;z-index:var(--vp-z-index-local-nav);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--vp-c-gutter);padding-top:var(--vp-layout-top-height, 0px);width:100%;background-color:var(--vp-local-nav-bg-color);transition:border-color .5s,background-color .5s}@media (min-width: 960px){.VPLocalNav[data-v-9a33564b]{display:none}}.menu[data-v-9a33564b]{display:flex;align-items:center;padding:12px 24px 11px;line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.menu[data-v-9a33564b]:hover{color:var(--vp-c-text-1);transition:color .25s}@media (min-width: 768px){.menu[data-v-9a33564b]{padding:0 32px}}.menu-icon[data-v-9a33564b]{margin-right:8px;width:16px;height:16px;fill:currentColor}.VPOutlineDropdown[data-v-9a33564b]{padding:12px 24px 11px}@media (min-width: 768px){.VPOutlineDropdown[data-v-9a33564b]{padding:12px 32px 11px}}.VPSidebarItem.level-0[data-v-77d7a963]{padding-bottom:24px}.VPSidebarItem.collapsed.level-0[data-v-77d7a963]{padding-bottom:10px}.item[data-v-77d7a963]{position:relative;display:flex;width:100%}.VPSidebarItem.collapsible>.item[data-v-77d7a963]{cursor:pointer}.indicator[data-v-77d7a963]{position:absolute;top:6px;bottom:6px;left:-17px;width:1px;transition:background-color .25s}.VPSidebarItem.level-2.is-active>.item>.indicator[data-v-77d7a963],.VPSidebarItem.level-3.is-active>.item>.indicator[data-v-77d7a963],.VPSidebarItem.level-4.is-active>.item>.indicator[data-v-77d7a963],.VPSidebarItem.level-5.is-active>.item>.indicator[data-v-77d7a963]{background-color:var(--vp-c-brand)}.link[data-v-77d7a963]{display:flex;align-items:center;flex-grow:1}.text[data-v-77d7a963]{flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;transition:color .25s}.VPSidebarItem.level-0 .text[data-v-77d7a963]{font-weight:700;color:var(--vp-c-text-1)}.VPSidebarItem.level-1 .text[data-v-77d7a963],.VPSidebarItem.level-2 .text[data-v-77d7a963],.VPSidebarItem.level-3 .text[data-v-77d7a963],.VPSidebarItem.level-4 .text[data-v-77d7a963],.VPSidebarItem.level-5 .text[data-v-77d7a963]{font-weight:500;color:var(--vp-c-text-2)}.VPSidebarItem.level-0.is-link>.item>.link:hover .text[data-v-77d7a963],.VPSidebarItem.level-1.is-link>.item>.link:hover .text[data-v-77d7a963],.VPSidebarItem.level-2.is-link>.item>.link:hover .text[data-v-77d7a963],.VPSidebarItem.level-3.is-link>.item>.link:hover .text[data-v-77d7a963],.VPSidebarItem.level-4.is-link>.item>.link:hover .text[data-v-77d7a963],.VPSidebarItem.level-5.is-link>.item>.link:hover .text[data-v-77d7a963]{color:var(--vp-c-brand)}.VPSidebarItem.level-0.has-active>.item>.link>.text[data-v-77d7a963],.VPSidebarItem.level-1.has-active>.item>.link>.text[data-v-77d7a963],.VPSidebarItem.level-2.has-active>.item>.link>.text[data-v-77d7a963],.VPSidebarItem.level-3.has-active>.item>.link>.text[data-v-77d7a963],.VPSidebarItem.level-4.has-active>.item>.link>.text[data-v-77d7a963],.VPSidebarItem.level-5.has-active>.item>.link>.text[data-v-77d7a963]{color:var(--vp-c-text-1)}.VPSidebarItem.level-0.is-active>.item .link>.text[data-v-77d7a963],.VPSidebarItem.level-1.is-active>.item .link>.text[data-v-77d7a963],.VPSidebarItem.level-2.is-active>.item .link>.text[data-v-77d7a963],.VPSidebarItem.level-3.is-active>.item .link>.text[data-v-77d7a963],.VPSidebarItem.level-4.is-active>.item .link>.text[data-v-77d7a963],.VPSidebarItem.level-5.is-active>.item .link>.text[data-v-77d7a963]{color:var(--vp-c-brand)}.caret[data-v-77d7a963]{display:flex;justify-content:center;align-items:center;margin-right:-7px;width:32px;height:32px;color:var(--vp-c-text-3);cursor:pointer;transition:color .25s}.item:hover .caret[data-v-77d7a963]{color:var(--vp-c-text-2)}.item:hover .caret[data-v-77d7a963]:hover{color:var(--vp-c-text-1)}.caret-icon[data-v-77d7a963]{width:18px;height:18px;fill:currentColor;transform:rotate(90deg);transition:transform .25s}.VPSidebarItem.collapsed .caret-icon[data-v-77d7a963]{transform:rotate(0)}.VPSidebarItem.level-1 .items[data-v-77d7a963],.VPSidebarItem.level-2 .items[data-v-77d7a963],.VPSidebarItem.level-3 .items[data-v-77d7a963],.VPSidebarItem.level-4 .items[data-v-77d7a963],.VPSidebarItem.level-5 .items[data-v-77d7a963]{border-left:1px solid var(--vp-c-divider);padding-left:16px}.VPSidebarItem.collapsed .items[data-v-77d7a963]{display:none}.VPSidebar[data-v-a2c0de1b]{position:fixed;top:var(--vp-layout-top-height, 0px);bottom:0;left:0;z-index:var(--vp-z-index-sidebar);padding:32px 32px 96px;width:calc(100vw - 64px);max-width:320px;background-color:var(--vp-sidebar-bg-color);opacity:0;box-shadow:var(--vp-c-shadow-3);overflow-x:hidden;overflow-y:auto;transform:translate(-100%);transition:opacity .5s,transform .25s ease;overscroll-behavior:contain}.VPSidebar.open[data-v-a2c0de1b]{opacity:1;visibility:visible;transform:translate(0);transition:opacity .25s,transform .5s cubic-bezier(.19,1,.22,1)}.dark .VPSidebar[data-v-a2c0de1b]{box-shadow:var(--vp-shadow-1)}@media (min-width: 960px){.VPSidebar[data-v-a2c0de1b]{z-index:1;padding-top:var(--vp-nav-height);padding-bottom:128px;width:var(--vp-sidebar-width);max-width:100%;background-color:var(--vp-sidebar-bg-color);opacity:1;visibility:visible;box-shadow:none;transform:translate(0)}}@media (min-width: 1440px){.VPSidebar[data-v-a2c0de1b]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}@media (min-width: 960px){.curtain[data-v-a2c0de1b]{position:sticky;top:-64px;left:0;z-index:1;margin-top:calc(var(--vp-nav-height) * -1);margin-right:-32px;margin-left:-32px;height:var(--vp-nav-height);background-color:var(--vp-sidebar-bg-color)}}.nav[data-v-a2c0de1b]{outline:0}.group+.group[data-v-a2c0de1b]{border-top:1px solid var(--vp-c-divider);padding-top:10px}@media (min-width: 960px){.group[data-v-a2c0de1b]{padding-top:10px;width:calc(var(--vp-sidebar-width) - 64px)}}.VPButton[data-v-a4b757f0]{display:inline-block;border:1px solid transparent;text-align:center;font-weight:600;white-space:nowrap;transition:color .25s,border-color .25s,background-color .25s}.VPButton[data-v-a4b757f0]:active{transition:color .1s,border-color .1s,background-color .1s}.VPButton.medium[data-v-a4b757f0]{border-radius:20px;padding:0 20px;line-height:38px;font-size:14px}.VPButton.big[data-v-a4b757f0]{border-radius:24px;padding:0 24px;line-height:46px;font-size:16px}.VPButton.brand[data-v-a4b757f0]{border-color:var(--vp-button-brand-border);color:var(--vp-button-brand-text);background-color:var(--vp-button-brand-bg)}.VPButton.brand[data-v-a4b757f0]:hover{border-color:var(--vp-button-brand-hover-border);color:var(--vp-button-brand-hover-text);background-color:var(--vp-button-brand-hover-bg)}.VPButton.brand[data-v-a4b757f0]:active{border-color:var(--vp-button-brand-active-border);color:var(--vp-button-brand-active-text);background-color:var(--vp-button-brand-active-bg)}.VPButton.alt[data-v-a4b757f0]{border-color:var(--vp-button-alt-border);color:var(--vp-button-alt-text);background-color:var(--vp-button-alt-bg)}.VPButton.alt[data-v-a4b757f0]:hover{border-color:var(--vp-button-alt-hover-border);color:var(--vp-button-alt-hover-text);background-color:var(--vp-button-alt-hover-bg)}.VPButton.alt[data-v-a4b757f0]:active{border-color:var(--vp-button-alt-active-border);color:var(--vp-button-alt-active-text);background-color:var(--vp-button-alt-active-bg)}.VPButton.sponsor[data-v-a4b757f0]{border-color:var(--vp-button-sponsor-border);color:var(--vp-button-sponsor-text);background-color:var(--vp-button-sponsor-bg)}.VPButton.sponsor[data-v-a4b757f0]:hover{border-color:var(--vp-button-sponsor-hover-border);color:var(--vp-button-sponsor-hover-text);background-color:var(--vp-button-sponsor-hover-bg)}.VPButton.sponsor[data-v-a4b757f0]:active{border-color:var(--vp-button-sponsor-active-border);color:var(--vp-button-sponsor-active-text);background-color:var(--vp-button-sponsor-active-bg)}.VPHero[data-v-3b95c4f3]{margin-top:calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px}@media (min-width: 640px){.VPHero[data-v-3b95c4f3]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px}}@media (min-width: 960px){.VPHero[data-v-3b95c4f3]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px}}.container[data-v-3b95c4f3]{display:flex;flex-direction:column;margin:0 auto;max-width:1152px}@media (min-width: 960px){.container[data-v-3b95c4f3]{flex-direction:row}}.main[data-v-3b95c4f3]{position:relative;z-index:10;order:2;flex-grow:1;flex-shrink:0}.VPHero.has-image .container[data-v-3b95c4f3]{text-align:center}@media (min-width: 960px){.VPHero.has-image .container[data-v-3b95c4f3]{text-align:left}}@media (min-width: 960px){.main[data-v-3b95c4f3]{order:1;width:calc((100% / 3) * 2)}.VPHero.has-image .main[data-v-3b95c4f3]{max-width:592px}}.name[data-v-3b95c4f3],.text[data-v-3b95c4f3]{max-width:392px;letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;white-space:pre-wrap}.VPHero.has-image .name[data-v-3b95c4f3],.VPHero.has-image .text[data-v-3b95c4f3]{margin:0 auto}.name[data-v-3b95c4f3]{color:var(--vp-home-hero-name-color)}.clip[data-v-3b95c4f3]{background:var(--vp-home-hero-name-background);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--vp-home-hero-name-color)}@media (min-width: 640px){.name[data-v-3b95c4f3],.text[data-v-3b95c4f3]{max-width:576px;line-height:56px;font-size:48px}}@media (min-width: 960px){.name[data-v-3b95c4f3],.text[data-v-3b95c4f3]{line-height:64px;font-size:56px}.VPHero.has-image .name[data-v-3b95c4f3],.VPHero.has-image .text[data-v-3b95c4f3]{margin:0}}.tagline[data-v-3b95c4f3]{padding-top:8px;max-width:392px;line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--vp-c-text-2)}.VPHero.has-image .tagline[data-v-3b95c4f3]{margin:0 auto}@media (min-width: 640px){.tagline[data-v-3b95c4f3]{padding-top:12px;max-width:576px;line-height:32px;font-size:20px}}@media (min-width: 960px){.tagline[data-v-3b95c4f3]{line-height:36px;font-size:24px}.VPHero.has-image .tagline[data-v-3b95c4f3]{margin:0}}.actions[data-v-3b95c4f3]{display:flex;flex-wrap:wrap;margin:-6px;padding-top:24px}.VPHero.has-image .actions[data-v-3b95c4f3]{justify-content:center}@media (min-width: 640px){.actions[data-v-3b95c4f3]{padding-top:32px}}@media (min-width: 960px){.VPHero.has-image .actions[data-v-3b95c4f3]{justify-content:flex-start}}.action[data-v-3b95c4f3]{flex-shrink:0;padding:6px}.image[data-v-3b95c4f3]{order:1;margin:-76px -24px -48px}@media (min-width: 640px){.image[data-v-3b95c4f3]{margin:-108px -24px -48px}}@media (min-width: 960px){.image[data-v-3b95c4f3]{flex-grow:1;order:2;margin:0;min-height:100%}}.image-container[data-v-3b95c4f3]{position:relative;margin:0 auto;width:320px;height:320px}@media (min-width: 640px){.image-container[data-v-3b95c4f3]{width:392px;height:392px}}@media (min-width: 960px){.image-container[data-v-3b95c4f3]{display:flex;justify-content:center;align-items:center;width:100%;height:100%;transform:translate(-32px,-32px)}}.image-bg[data-v-3b95c4f3]{position:absolute;top:50%;left:50%;border-radius:50%;width:192px;height:192px;background-image:var(--vp-home-hero-image-background-image);filter:var(--vp-home-hero-image-filter);transform:translate(-50%,-50%)}@media (min-width: 640px){.image-bg[data-v-3b95c4f3]{width:256px;height:256px}}@media (min-width: 960px){.image-bg[data-v-3b95c4f3]{width:320px;height:320px}}[data-v-3b95c4f3] .image-src{position:absolute;top:50%;left:50%;max-width:192px;max-height:192px;transform:translate(-50%,-50%)}@media (min-width: 640px){[data-v-3b95c4f3] .image-src{max-width:256px;max-height:256px}}@media (min-width: 960px){[data-v-3b95c4f3] .image-src{max-width:320px;max-height:320px}}.VPFeature[data-v-fdb307a3]{display:block;border:1px solid var(--vp-c-bg-soft);border-radius:12px;height:100%;background-color:var(--vp-c-bg-soft);transition:border-color .25s,background-color .25s}.VPFeature.link[data-v-fdb307a3]:hover{border-color:var(--vp-c-brand);background-color:var(--vp-c-bg-soft-up)}.box[data-v-fdb307a3]{display:flex;flex-direction:column;padding:24px;height:100%}.VPFeature[data-v-fdb307a3] .VPImage{width:48px;height:48px;margin-bottom:20px}.icon[data-v-fdb307a3]{display:flex;justify-content:center;align-items:center;margin-bottom:20px;border-radius:6px;background-color:var(--vp-c-bg-soft-down);width:48px;height:48px;font-size:24px;transition:background-color .25s}.title[data-v-fdb307a3]{line-height:24px;font-size:16px;font-weight:600}.details[data-v-fdb307a3]{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.link-text[data-v-fdb307a3]{padding-top:8px}.link-text-value[data-v-fdb307a3]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-brand)}.link-text-icon[data-v-fdb307a3]{display:inline-block;margin-left:6px;width:14px;height:14px;fill:currentColor}.VPFeatures[data-v-5e2470ab]{position:relative;padding:0 24px}@media (min-width: 640px){.VPFeatures[data-v-5e2470ab]{padding:0 48px}}@media (min-width: 960px){.VPFeatures[data-v-5e2470ab]{padding:0 64px}}.container[data-v-5e2470ab]{margin:0 auto;max-width:1152px}.items[data-v-5e2470ab]{display:flex;flex-wrap:wrap;margin:-8px}.item[data-v-5e2470ab]{padding:8px;width:100%}@media (min-width: 640px){.item.grid-2[data-v-5e2470ab],.item.grid-4[data-v-5e2470ab],.item.grid-6[data-v-5e2470ab]{width:50%}}@media (min-width: 768px){.item.grid-2[data-v-5e2470ab],.item.grid-4[data-v-5e2470ab]{width:50%}.item.grid-3[data-v-5e2470ab],.item.grid-6[data-v-5e2470ab]{width:calc(100% / 3)}}@media (min-width: 960px){.item.grid-4[data-v-5e2470ab]{width:25%}}.VPHome[data-v-8ebac4ee]{padding-bottom:96px}.VPHome[data-v-8ebac4ee] .VPHomeSponsors{margin-top:112px;margin-bottom:-128px}@media (min-width: 768px){.VPHome[data-v-8ebac4ee]{padding-bottom:128px}}.VPDocAsideOutline[data-v-c3ff47cc]{display:none}.VPDocAsideOutline.has-outline[data-v-c3ff47cc]{display:block}.content[data-v-c3ff47cc]{position:relative;border-left:1px solid var(--vp-c-divider);padding-left:16px;font-size:13px;font-weight:500}.outline-marker[data-v-c3ff47cc]{position:absolute;top:32px;left:-1px;z-index:0;opacity:0;width:1px;height:18px;background-color:var(--vp-c-brand);transition:top .25s cubic-bezier(0,1,.5,1),background-color .5s,opacity .25s}.outline-title[data-v-c3ff47cc]{letter-spacing:.4px;line-height:28px;font-size:13px;font-weight:600}.VPDocAside[data-v-79cae1a0]{display:flex;flex-direction:column;flex-grow:1}.spacer[data-v-79cae1a0]{flex-grow:1}.VPDocAside[data-v-79cae1a0] .spacer+.VPDocAsideSponsors,.VPDocAside[data-v-79cae1a0] .spacer+.VPDocAsideCarbonAds{margin-top:24px}.VPDocAside[data-v-79cae1a0] .VPDocAsideSponsors+.VPDocAsideCarbonAds{margin-top:16px}.VPLastUpdated[data-v-f00606ba]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 640px){.VPLastUpdated[data-v-f00606ba]{line-height:32px;font-size:14px;font-weight:500}}.VPDocFooter[data-v-31cb5067]{margin-top:64px}.edit-info[data-v-31cb5067]{padding-bottom:18px}@media (min-width: 640px){.edit-info[data-v-31cb5067]{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px}}.edit-link-button[data-v-31cb5067]{display:flex;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-brand);transition:color .25s}.edit-link-button[data-v-31cb5067]:hover{color:var(--vp-c-brand-dark)}.edit-link-icon[data-v-31cb5067]{margin-right:8px;width:14px;height:14px;fill:currentColor}.prev-next[data-v-31cb5067]{border-top:1px solid var(--vp-c-divider);padding-top:24px}@media (min-width: 640px){.prev-next[data-v-31cb5067]{display:flex}}.pager.has-prev[data-v-31cb5067]{padding-top:8px}@media (min-width: 640px){.pager[data-v-31cb5067]{display:flex;flex-direction:column;flex-shrink:0;width:50%}.pager.has-prev[data-v-31cb5067]{padding-top:0;padding-left:16px}}.pager-link[data-v-31cb5067]{display:block;border:1px solid var(--vp-c-divider);border-radius:8px;padding:11px 16px 13px;width:100%;height:100%;transition:border-color .25s}.pager-link[data-v-31cb5067]:hover{border-color:var(--vp-c-brand)}.pager-link.next[data-v-31cb5067]{margin-left:auto;text-align:right}.desc[data-v-31cb5067]{display:block;line-height:20px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.title[data-v-31cb5067]{display:block;line-height:20px;font-size:14px;font-weight:500;color:var(--vp-c-brand);transition:color .25s}.VPDocOutlineDropdown[data-v-f751778e]{margin-bottom:42px}.VPDocOutlineDropdown button[data-v-f751778e]{display:block;font-size:14px;font-weight:500;line-height:24px;color:var(--vp-c-text-2);transition:color .5s;border:1px solid var(--vp-c-border);padding:4px 12px;border-radius:8px}.VPDocOutlineDropdown button[data-v-f751778e]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPDocOutlineDropdown button.open[data-v-f751778e]{color:var(--vp-c-text-1)}.icon[data-v-f751778e]{display:inline-block;vertical-align:middle;margin-left:2px;width:14px;height:14px;fill:currentColor}[data-v-f751778e] .outline-link{font-size:13px}.open>.icon[data-v-f751778e]{transform:rotate(90deg)}.items[data-v-f751778e]{margin-top:10px;border-left:1px solid var(--vp-c-divider)}.VPDoc[data-v-5aafa2ac]{padding:32px 24px 96px;width:100%}.VPDoc .VPDocOutlineDropdown[data-v-5aafa2ac]{display:none}@media (min-width: 960px) and (max-width: 1280px){.VPDoc .VPDocOutlineDropdown[data-v-5aafa2ac]{display:block}}@media (min-width: 768px){.VPDoc[data-v-5aafa2ac]{padding:48px 32px 128px}}@media (min-width: 960px){.VPDoc[data-v-5aafa2ac]{padding:32px 32px 0}.VPDoc:not(.has-sidebar) .container[data-v-5aafa2ac]{display:flex;justify-content:center;max-width:992px}.VPDoc:not(.has-sidebar) .content[data-v-5aafa2ac]{max-width:752px}}@media (min-width: 1280px){.VPDoc .container[data-v-5aafa2ac]{display:flex;justify-content:center}.VPDoc .aside[data-v-5aafa2ac]{display:block}}@media (min-width: 1440px){.VPDoc:not(.has-sidebar) .content[data-v-5aafa2ac]{max-width:784px}.VPDoc:not(.has-sidebar) .container[data-v-5aafa2ac]{max-width:1104px}}.container[data-v-5aafa2ac]{margin:0 auto;width:100%}.aside[data-v-5aafa2ac]{position:relative;display:none;order:2;flex-grow:1;padding-left:32px;width:100%;max-width:256px}.left-aside[data-v-5aafa2ac]{order:1;padding-left:unset;padding-right:32px}.aside-container[data-v-5aafa2ac]{position:fixed;top:0;padding-top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 32px);width:224px;height:100vh;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}.aside-container[data-v-5aafa2ac]::-webkit-scrollbar{display:none}.aside-curtain[data-v-5aafa2ac]{position:fixed;bottom:0;z-index:10;width:224px;height:32px;background:linear-gradient(transparent,var(--vp-c-bg) 70%)}.aside-content[data-v-5aafa2ac]{display:flex;flex-direction:column;min-height:calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px));padding-bottom:32px}.content[data-v-5aafa2ac]{position:relative;margin:0 auto;width:100%}@media (min-width: 960px){.content[data-v-5aafa2ac]{padding:0 32px 128px}}@media (min-width: 1280px){.content[data-v-5aafa2ac]{order:1;margin:0;min-width:640px}}.content-container[data-v-5aafa2ac]{margin:0 auto}.VPDoc.has-aside .content-container[data-v-5aafa2ac]{max-width:688px}.NotFound[data-v-42c0c3ae]{padding:64px 24px 96px;text-align:center}@media (min-width: 768px){.NotFound[data-v-42c0c3ae]{padding:96px 32px 168px}}.code[data-v-42c0c3ae]{line-height:64px;font-size:64px;font-weight:600}.title[data-v-42c0c3ae]{padding-top:12px;letter-spacing:2px;line-height:20px;font-size:20px;font-weight:700}.divider[data-v-42c0c3ae]{margin:24px auto 18px;width:64px;height:1px;background-color:var(--vp-c-divider)}.quote[data-v-42c0c3ae]{margin:0 auto;max-width:256px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.action[data-v-42c0c3ae]{padding-top:20px}.link[data-v-42c0c3ae]{display:inline-block;border:1px solid var(--vp-c-brand);border-radius:16px;padding:3px 16px;font-size:14px;font-weight:500;color:var(--vp-c-brand);transition:border-color .25s,color .25s}.link[data-v-42c0c3ae]:hover{border-color:var(--vp-c-brand-dark);color:var(--vp-c-brand-dark)}.VPContent[data-v-7f38fbbe]{flex-grow:1;flex-shrink:0;margin:var(--vp-layout-top-height, 0px) auto 0;width:100%}.VPContent.is-home[data-v-7f38fbbe]{width:100%;max-width:100%}.VPContent.has-sidebar[data-v-7f38fbbe]{margin:0}@media (min-width: 960px){.VPContent[data-v-7f38fbbe]{padding-top:var(--vp-nav-height)}.VPContent.has-sidebar[data-v-7f38fbbe]{margin:var(--vp-layout-top-height, 0px) 0 0;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPContent.has-sidebar[data-v-7f38fbbe]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.VPFooter[data-v-2425ede7]{position:relative;z-index:var(--vp-z-index-footer);border-top:1px solid var(--vp-c-gutter);padding:32px 24px;background-color:var(--vp-c-bg)}.VPFooter.has-sidebar[data-v-2425ede7]{display:none}@media (min-width: 768px){.VPFooter[data-v-2425ede7]{padding:32px}}.container[data-v-2425ede7]{margin:0 auto;max-width:var(--vp-layout-max-width);text-align:center}.message[data-v-2425ede7],.copyright[data-v-2425ede7]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.message[data-v-2425ede7]{order:2}.copyright[data-v-2425ede7]{order:1}.Layout[data-v-bd8710d4]{display:flex;flex-direction:column;min-height:100vh}.VPHomeSponsors[data-v-a4b81f3b]{border-top:1px solid var(--vp-c-gutter);padding:88px 24px 96px;background-color:var(--vp-c-bg)}.container[data-v-a4b81f3b]{margin:0 auto;max-width:1152px}.love[data-v-a4b81f3b]{margin:0 auto;width:28px;height:28px;color:var(--vp-c-text-3)}.icon[data-v-a4b81f3b]{width:28px;height:28px;fill:currentColor}.message[data-v-a4b81f3b]{margin:0 auto;padding-top:10px;max-width:320px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.sponsors[data-v-a4b81f3b]{padding-top:32px}.action[data-v-a4b81f3b]{padding-top:40px;text-align:center}.VPTeamPage[data-v-05fecbf1]{padding-bottom:96px}@media (min-width: 768px){.VPTeamPage[data-v-05fecbf1]{padding-bottom:128px}}.VPTeamPageSection+.VPTeamPageSection[data-v-05fecbf1-s],.VPTeamMembers+.VPTeamPageSection[data-v-05fecbf1-s]{margin-top:64px}.VPTeamMembers+.VPTeamMembers[data-v-05fecbf1-s]{margin-top:24px}@media (min-width: 768px){.VPTeamPageTitle+.VPTeamPageSection[data-v-05fecbf1-s]{margin-top:16px}.VPTeamPageSection+.VPTeamPageSection[data-v-05fecbf1-s],.VPTeamMembers+.VPTeamPageSection[data-v-05fecbf1-s]{margin-top:96px}}.VPTeamMembers[data-v-05fecbf1-s]{padding:0 24px}@media (min-width: 768px){.VPTeamMembers[data-v-05fecbf1-s]{padding:0 48px}}@media (min-width: 960px){.VPTeamMembers[data-v-05fecbf1-s]{padding:0 64px}}.VPTeamPageTitle[data-v-6ce551d6]{padding:48px 32px;text-align:center}@media (min-width: 768px){.VPTeamPageTitle[data-v-6ce551d6]{padding:64px 48px 48px}}@media (min-width: 960px){.VPTeamPageTitle[data-v-6ce551d6]{padding:80px 64px 48px}}.title[data-v-6ce551d6]{letter-spacing:0;line-height:44px;font-size:36px;font-weight:500}@media (min-width: 768px){.title[data-v-6ce551d6]{letter-spacing:-.5px;line-height:56px;font-size:48px}}.lead[data-v-6ce551d6]{margin:0 auto;max-width:512px;padding-top:12px;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 768px){.lead[data-v-6ce551d6]{max-width:592px;letter-spacing:.15px;line-height:28px;font-size:20px}}.VPTeamPageSection[data-v-1ac32f26]{padding:0 32px}@media (min-width: 768px){.VPTeamPageSection[data-v-1ac32f26]{padding:0 48px}}@media (min-width: 960px){.VPTeamPageSection[data-v-1ac32f26]{padding:0 64px}}.title[data-v-1ac32f26]{position:relative;margin:0 auto;max-width:1152px;text-align:center;color:var(--vp-c-text-2)}.title-line[data-v-1ac32f26]{position:absolute;top:16px;left:0;width:100%;height:1px;background-color:var(--vp-c-divider)}.title-text[data-v-1ac32f26]{position:relative;display:inline-block;padding:0 24px;letter-spacing:0;line-height:32px;font-size:20px;font-weight:500;background-color:var(--vp-c-bg)}.lead[data-v-1ac32f26]{margin:0 auto;max-width:480px;padding-top:12px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.members[data-v-1ac32f26]{padding-top:40px}.VPTeamMembersItem[data-v-cb9b61e6]{display:flex;flex-direction:column;gap:2px;border-radius:12px;width:100%;height:100%;overflow:hidden}.VPTeamMembersItem.small .profile[data-v-cb9b61e6]{padding:32px}.VPTeamMembersItem.small .data[data-v-cb9b61e6]{padding-top:20px}.VPTeamMembersItem.small .avatar[data-v-cb9b61e6]{width:64px;height:64px}.VPTeamMembersItem.small .name[data-v-cb9b61e6]{line-height:24px;font-size:16px}.VPTeamMembersItem.small .affiliation[data-v-cb9b61e6]{padding-top:4px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .desc[data-v-cb9b61e6]{padding-top:12px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .links[data-v-cb9b61e6]{margin:0 -16px -20px;padding:10px 0 0}.VPTeamMembersItem.medium .profile[data-v-cb9b61e6]{padding:48px 32px}.VPTeamMembersItem.medium .data[data-v-cb9b61e6]{padding-top:24px;text-align:center}.VPTeamMembersItem.medium .avatar[data-v-cb9b61e6]{width:96px;height:96px}.VPTeamMembersItem.medium .name[data-v-cb9b61e6]{letter-spacing:.15px;line-height:28px;font-size:20px}.VPTeamMembersItem.medium .affiliation[data-v-cb9b61e6]{padding-top:4px;font-size:16px}.VPTeamMembersItem.medium .desc[data-v-cb9b61e6]{padding-top:16px;max-width:288px;font-size:16px}.VPTeamMembersItem.medium .links[data-v-cb9b61e6]{margin:0 -16px -12px;padding:16px 12px 0}.profile[data-v-cb9b61e6]{flex-grow:1;background-color:var(--vp-c-bg-soft)}.data[data-v-cb9b61e6]{text-align:center}.avatar[data-v-cb9b61e6]{position:relative;flex-shrink:0;margin:0 auto;border-radius:50%;box-shadow:var(--vp-shadow-3)}.avatar-img[data-v-cb9b61e6]{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;object-fit:cover}.name[data-v-cb9b61e6]{margin:0;font-weight:600}.affiliation[data-v-cb9b61e6]{margin:0;font-weight:500;color:var(--vp-c-text-2)}.org.link[data-v-cb9b61e6]{color:var(--vp-c-text-2);transition:color .25s}.org.link[data-v-cb9b61e6]:hover{color:var(--vp-c-brand)}.desc[data-v-cb9b61e6]{margin:0 auto}.desc[data-v-cb9b61e6] a{font-weight:500;color:var(--vp-c-brand);text-decoration-style:dotted;transition:color .25s}.links[data-v-cb9b61e6]{display:flex;justify-content:center;height:56px}.sp-link[data-v-cb9b61e6]{display:flex;justify-content:center;align-items:center;text-align:center;padding:16px;font-size:14px;font-weight:500;color:var(--vp-c-sponsor);background-color:var(--vp-c-bg-soft);transition:color .25s,background-color .25s}.sp .sp-link.link[data-v-cb9b61e6]:hover,.sp .sp-link.link[data-v-cb9b61e6]:focus{outline:none;color:var(--vp-c-white);background-color:var(--vp-c-sponsor)}.sp-icon[data-v-cb9b61e6]{margin-right:8px;width:16px;height:16px;fill:currentColor}.VPTeamMembers.small .container[data-v-ed08c3d1]{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}.VPTeamMembers.small.count-1 .container[data-v-ed08c3d1]{max-width:276px}.VPTeamMembers.small.count-2 .container[data-v-ed08c3d1]{max-width:576px}.VPTeamMembers.small.count-3 .container[data-v-ed08c3d1]{max-width:876px}.VPTeamMembers.medium .container[data-v-ed08c3d1]{grid-template-columns:repeat(auto-fit,minmax(256px,1fr))}@media (min-width: 375px){.VPTeamMembers.medium .container[data-v-ed08c3d1]{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}}.VPTeamMembers.medium.count-1 .container[data-v-ed08c3d1]{max-width:368px}.VPTeamMembers.medium.count-2 .container[data-v-ed08c3d1]{max-width:760px}.container[data-v-ed08c3d1]{display:grid;gap:24px;margin:0 auto;max-width:1152px} diff --git a/docs/document/assets/style.mFuQsvju.css b/docs/document/assets/style.mFuQsvju.css deleted file mode 100644 index 944e27899..000000000 --- a/docs/document/assets/style.mFuQsvju.css +++ /dev/null @@ -1 +0,0 @@ -@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-cyrillic.jIZ9REo5.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-cyrillic-ext.8T9wMG5w.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-greek.Cb5wWeGA.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-greek-ext.9JiNzaSO.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-latin.bvIUbFQP.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-latin-ext.GZWE-KO4.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-vietnamese.paY3CzEB.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-cyrillic.-nLMcIwj.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-cyrillic-ext.OVycGSDq.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-greek.PSfer2Kc.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-greek-ext.hznxWNZO.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-latin.27E69YJn.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-latin-ext.RnFly65-.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-vietnamese.xzQHe1q1.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Chinese Quotes;src:local("PingFang SC Regular"),local("PingFang SC"),local("SimHei"),local("Source Han Sans SC");unicode-range:U+2018,U+2019,U+201C,U+201D}:root{--vp-c-white: #ffffff;--vp-c-black: #000000;--vp-c-neutral: var(--vp-c-black);--vp-c-neutral-inverse: var(--vp-c-white)}.dark{--vp-c-neutral: var(--vp-c-white);--vp-c-neutral-inverse: var(--vp-c-black)}:root{--vp-c-gray-1: #dddde3;--vp-c-gray-2: #e4e4e9;--vp-c-gray-3: #ebebef;--vp-c-gray-soft: rgba(142, 150, 170, .14);--vp-c-indigo-1: #3451b2;--vp-c-indigo-2: #3a5ccc;--vp-c-indigo-3: #5672cd;--vp-c-indigo-soft: rgba(100, 108, 255, .14);--vp-c-green-1: #18794e;--vp-c-green-2: #299764;--vp-c-green-3: #30a46c;--vp-c-green-soft: rgba(16, 185, 129, .14);--vp-c-yellow-1: #915930;--vp-c-yellow-2: #946300;--vp-c-yellow-3: #9f6a00;--vp-c-yellow-soft: rgba(234, 179, 8, .14);--vp-c-red-1: #b8272c;--vp-c-red-2: #d5393e;--vp-c-red-3: #e0575b;--vp-c-red-soft: rgba(244, 63, 94, .14);--vp-c-sponsor: #db2777}.dark{--vp-c-gray-1: #515c67;--vp-c-gray-2: #414853;--vp-c-gray-3: #32363f;--vp-c-gray-soft: rgba(101, 117, 133, .16);--vp-c-indigo-1: #a8b1ff;--vp-c-indigo-2: #5c73e7;--vp-c-indigo-3: #3e63dd;--vp-c-indigo-soft: rgba(100, 108, 255, .16);--vp-c-green-1: #3dd68c;--vp-c-green-2: #30a46c;--vp-c-green-3: #298459;--vp-c-green-soft: rgba(16, 185, 129, .16);--vp-c-yellow-1: #f9b44e;--vp-c-yellow-2: #da8b17;--vp-c-yellow-3: #a46a0a;--vp-c-yellow-soft: rgba(234, 179, 8, .16);--vp-c-red-1: #f66f81;--vp-c-red-2: #f14158;--vp-c-red-3: #b62a3c;--vp-c-red-soft: rgba(244, 63, 94, .16)}:root{--vp-c-bg: #ffffff;--vp-c-bg-alt: #f6f6f7;--vp-c-bg-elv: #ffffff;--vp-c-bg-soft: #f6f6f7}.dark{--vp-c-bg: #1b1b1f;--vp-c-bg-alt: #161618;--vp-c-bg-elv: #202127;--vp-c-bg-soft: #202127}:root{--vp-c-border: #c2c2c4;--vp-c-divider: #e2e2e3;--vp-c-gutter: #e2e2e3}.dark{--vp-c-border: #3c3f44;--vp-c-divider: #2e2e32;--vp-c-gutter: #000000}:root{--vp-c-text-1: rgba(60, 60, 67);--vp-c-text-2: rgba(60, 60, 67, .78);--vp-c-text-3: rgba(60, 60, 67, .56)}.dark{--vp-c-text-1: rgba(255, 255, 245, .86);--vp-c-text-2: rgba(235, 235, 245, .6);--vp-c-text-3: rgba(235, 235, 245, .38)}:root{--vp-c-default-1: var(--vp-c-gray-1);--vp-c-default-2: var(--vp-c-gray-2);--vp-c-default-3: var(--vp-c-gray-3);--vp-c-default-soft: var(--vp-c-gray-soft);--vp-c-brand-1: var(--vp-c-indigo-1);--vp-c-brand-2: var(--vp-c-indigo-2);--vp-c-brand-3: var(--vp-c-indigo-3);--vp-c-brand-soft: var(--vp-c-indigo-soft);--vp-c-brand: var(--vp-c-brand-1);--vp-c-tip-1: var(--vp-c-brand-1);--vp-c-tip-2: var(--vp-c-brand-2);--vp-c-tip-3: var(--vp-c-brand-3);--vp-c-tip-soft: var(--vp-c-brand-soft);--vp-c-warning-1: var(--vp-c-yellow-1);--vp-c-warning-2: var(--vp-c-yellow-2);--vp-c-warning-3: var(--vp-c-yellow-3);--vp-c-warning-soft: var(--vp-c-yellow-soft);--vp-c-danger-1: var(--vp-c-red-1);--vp-c-danger-2: var(--vp-c-red-2);--vp-c-danger-3: var(--vp-c-red-3);--vp-c-danger-soft: var(--vp-c-red-soft)}:root{--vp-font-family-base: "Chinese Quotes", "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--vp-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}:root{--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--vp-shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);--vp-shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);--vp-shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16)}:root{--vp-z-index-footer: 10;--vp-z-index-local-nav: 20;--vp-z-index-nav: 30;--vp-z-index-layout-top: 40;--vp-z-index-backdrop: 50;--vp-z-index-sidebar: 60}:root{--vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");--vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E")}:root{--vp-layout-max-width: 1440px}:root{--vp-header-anchor-symbol: "#"}:root{--vp-code-line-height: 1.7;--vp-code-font-size: .875em;--vp-code-color: var(--vp-c-brand-1);--vp-code-link-color: var(--vp-c-brand-1);--vp-code-link-hover-color: var(--vp-c-brand-2);--vp-code-bg: var(--vp-c-default-soft);--vp-code-block-color: var(--vp-c-text-2);--vp-code-block-bg: var(--vp-c-bg-alt);--vp-code-block-divider-color: var(--vp-c-gutter);--vp-code-lang-color: var(--vp-c-text-3);--vp-code-line-highlight-color: var(--vp-c-default-soft);--vp-code-line-number-color: var(--vp-c-text-3);--vp-code-line-diff-add-color: var(--vp-c-green-soft);--vp-code-line-diff-add-symbol-color: var(--vp-c-green-1);--vp-code-line-diff-remove-color: var(--vp-c-red-soft);--vp-code-line-diff-remove-symbol-color: var(--vp-c-red-1);--vp-code-line-warning-color: var(--vp-c-yellow-soft);--vp-code-line-error-color: var(--vp-c-red-soft);--vp-code-copy-code-border-color: var(--vp-c-divider);--vp-code-copy-code-bg: var(--vp-c-bg-soft);--vp-code-copy-code-hover-border-color: var(--vp-c-divider);--vp-code-copy-code-hover-bg: var(--vp-c-bg);--vp-code-copy-code-active-text: var(--vp-c-text-2);--vp-code-copy-copied-text-content: "Copied";--vp-code-tab-divider: var(--vp-code-block-divider-color);--vp-code-tab-text-color: var(--vp-c-text-2);--vp-code-tab-bg: var(--vp-code-block-bg);--vp-code-tab-hover-text-color: var(--vp-c-text-1);--vp-code-tab-active-text-color: var(--vp-c-text-1);--vp-code-tab-active-bar-color: var(--vp-c-brand-1)}:root{--vp-button-brand-border: transparent;--vp-button-brand-text: var(--vp-c-white);--vp-button-brand-bg: var(--vp-c-brand-3);--vp-button-brand-hover-border: transparent;--vp-button-brand-hover-text: var(--vp-c-white);--vp-button-brand-hover-bg: var(--vp-c-brand-2);--vp-button-brand-active-border: transparent;--vp-button-brand-active-text: var(--vp-c-white);--vp-button-brand-active-bg: var(--vp-c-brand-1);--vp-button-alt-border: transparent;--vp-button-alt-text: var(--vp-c-text-1);--vp-button-alt-bg: var(--vp-c-default-3);--vp-button-alt-hover-border: transparent;--vp-button-alt-hover-text: var(--vp-c-text-1);--vp-button-alt-hover-bg: var(--vp-c-default-2);--vp-button-alt-active-border: transparent;--vp-button-alt-active-text: var(--vp-c-text-1);--vp-button-alt-active-bg: var(--vp-c-default-1);--vp-button-sponsor-border: var(--vp-c-text-2);--vp-button-sponsor-text: var(--vp-c-text-2);--vp-button-sponsor-bg: transparent;--vp-button-sponsor-hover-border: var(--vp-c-sponsor);--vp-button-sponsor-hover-text: var(--vp-c-sponsor);--vp-button-sponsor-hover-bg: transparent;--vp-button-sponsor-active-border: var(--vp-c-sponsor);--vp-button-sponsor-active-text: var(--vp-c-sponsor);--vp-button-sponsor-active-bg: transparent}:root{--vp-custom-block-font-size: 14px;--vp-custom-block-code-font-size: 13px;--vp-custom-block-info-border: transparent;--vp-custom-block-info-text: var(--vp-c-text-1);--vp-custom-block-info-bg: var(--vp-c-default-soft);--vp-custom-block-info-code-bg: var(--vp-c-default-soft);--vp-custom-block-tip-border: transparent;--vp-custom-block-tip-text: var(--vp-c-text-1);--vp-custom-block-tip-bg: var(--vp-c-brand-soft);--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);--vp-custom-block-warning-border: transparent;--vp-custom-block-warning-text: var(--vp-c-text-1);--vp-custom-block-warning-bg: var(--vp-c-warning-soft);--vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);--vp-custom-block-danger-border: transparent;--vp-custom-block-danger-text: var(--vp-c-text-1);--vp-custom-block-danger-bg: var(--vp-c-danger-soft);--vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);--vp-custom-block-details-border: var(--vp-custom-block-info-border);--vp-custom-block-details-text: var(--vp-custom-block-info-text);--vp-custom-block-details-bg: var(--vp-custom-block-info-bg);--vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg)}:root{--vp-input-border-color: var(--vp-c-border);--vp-input-bg-color: var(--vp-c-bg-alt);--vp-input-switch-bg-color: var(--vp-c-gray-soft)}:root{--vp-nav-height: 64px;--vp-nav-bg-color: var(--vp-c-bg);--vp-nav-screen-bg-color: var(--vp-c-bg);--vp-nav-logo-height: 24px}.hide-nav{--vp-nav-height: 0px}.hide-nav .VPSidebar{--vp-nav-height: 22px}:root{--vp-local-nav-bg-color: var(--vp-c-bg)}:root{--vp-sidebar-width: 272px;--vp-sidebar-bg-color: var(--vp-c-bg-alt)}:root{--vp-backdrop-bg-color: rgba(0, 0, 0, .6)}:root{--vp-home-hero-name-color: var(--vp-c-brand-1);--vp-home-hero-name-background: transparent;--vp-home-hero-image-background-image: none;--vp-home-hero-image-filter: none}:root{--vp-badge-info-border: transparent;--vp-badge-info-text: var(--vp-c-text-2);--vp-badge-info-bg: var(--vp-c-default-soft);--vp-badge-tip-border: transparent;--vp-badge-tip-text: var(--vp-c-brand-1);--vp-badge-tip-bg: var(--vp-c-brand-soft);--vp-badge-warning-border: transparent;--vp-badge-warning-text: var(--vp-c-warning-1);--vp-badge-warning-bg: var(--vp-c-warning-soft);--vp-badge-danger-border: transparent;--vp-badge-danger-text: var(--vp-c-danger-1);--vp-badge-danger-bg: var(--vp-c-danger-soft)}:root{--vp-carbon-ads-text-color: var(--vp-c-text-1);--vp-carbon-ads-poweredby-color: var(--vp-c-text-2);--vp-carbon-ads-bg-color: var(--vp-c-bg-soft);--vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);--vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1)}:root{--vp-local-search-bg: var(--vp-c-bg);--vp-local-search-result-bg: var(--vp-c-bg);--vp-local-search-result-border: var(--vp-c-divider);--vp-local-search-result-selected-bg: var(--vp-c-bg);--vp-local-search-result-selected-border: var(--vp-c-brand-1);--vp-local-search-highlight-bg: var(--vp-c-brand-1);--vp-local-search-highlight-text: var(--vp-c-neutral-inverse)}@media (prefers-reduced-motion: reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-duration:0s!important;transition-delay:0s!important}}*,:before,:after{box-sizing:border-box}html{line-height:1.4;font-size:16px;-webkit-text-size-adjust:100%}html.dark{color-scheme:dark}body{margin:0;width:100%;min-width:320px;min-height:100vh;line-height:24px;font-family:var(--vp-font-family-base);font-size:16px;font-weight:400;color:var(--vp-c-text-1);background-color:var(--vp-c-bg);direction:ltr;font-synthesis:style;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}h1,h2,h3,h4,h5,h6{margin:0;line-height:24px;font-size:16px;font-weight:400}p{margin:0}strong,b{font-weight:600}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}a{color:inherit;text-decoration:inherit}ol,ul{list-style:none;margin:0;padding:0}blockquote{margin:0}pre,code,kbd,samp{font-family:var(--vp-font-family-mono)}img,svg,video,canvas,audio,iframe,embed,object{display:block}figure{margin:0}img,video{max-width:100%;height:auto}button,input,optgroup,select,textarea{border:0;padding:0;line-height:inherit;color:inherit}button{padding:0;font-family:inherit;background-color:transparent;background-image:none}button:enabled,[role=button]:enabled{cursor:pointer}button:focus,button:focus-visible{outline:1px dotted;outline:4px auto -webkit-focus-ring-color}button:focus:not(:focus-visible){outline:none!important}input:focus,textarea:focus,select:focus{outline:none}table{border-collapse:collapse}input{background-color:transparent}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:var(--vp-c-text-3)}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:var(--vp-c-text-3)}input::placeholder,textarea::placeholder{color:var(--vp-c-text-3)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}textarea{resize:vertical}select{-webkit-appearance:none}fieldset{margin:0;padding:0}h1,h2,h3,h4,h5,h6,li,p{overflow-wrap:break-word}vite-error-overlay{z-index:9999}mjx-container{display:inline-block;margin:auto 2px -2px}mjx-container>svg{margin:auto}.visually-hidden{position:absolute;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden}.custom-block{border:1px solid transparent;border-radius:8px;padding:16px 16px 8px;line-height:24px;font-size:var(--vp-custom-block-font-size);color:var(--vp-c-text-2)}.custom-block.info{border-color:var(--vp-custom-block-info-border);color:var(--vp-custom-block-info-text);background-color:var(--vp-custom-block-info-bg)}.custom-block.info a,.custom-block.info code{color:var(--vp-c-brand-1)}.custom-block.info a:hover{color:var(--vp-c-brand-2)}.custom-block.info code{background-color:var(--vp-custom-block-info-code-bg)}.custom-block.tip{border-color:var(--vp-custom-block-tip-border);color:var(--vp-custom-block-tip-text);background-color:var(--vp-custom-block-tip-bg)}.custom-block.tip a,.custom-block.tip code{color:var(--vp-c-brand-1)}.custom-block.tip a:hover{color:var(--vp-c-brand-2)}.custom-block.tip code{background-color:var(--vp-custom-block-tip-code-bg)}.custom-block.warning{border-color:var(--vp-custom-block-warning-border);color:var(--vp-custom-block-warning-text);background-color:var(--vp-custom-block-warning-bg)}.custom-block.warning a,.custom-block.warning code{color:var(--vp-c-warning-1)}.custom-block.warning a:hover{color:var(--vp-c-warning-2)}.custom-block.warning code{background-color:var(--vp-custom-block-warning-code-bg)}.custom-block.danger{border-color:var(--vp-custom-block-danger-border);color:var(--vp-custom-block-danger-text);background-color:var(--vp-custom-block-danger-bg)}.custom-block.danger a,.custom-block.danger code{color:var(--vp-c-danger-1)}.custom-block.danger a:hover{color:var(--vp-c-danger-2)}.custom-block.danger code{background-color:var(--vp-custom-block-danger-code-bg)}.custom-block.details{border-color:var(--vp-custom-block-details-border);color:var(--vp-custom-block-details-text);background-color:var(--vp-custom-block-details-bg)}.custom-block.details a{color:var(--vp-c-brand-1)}.custom-block.details a:hover{color:var(--vp-c-brand-2)}.custom-block.details code{background-color:var(--vp-custom-block-details-code-bg)}.custom-block-title{font-weight:600}.custom-block p+p{margin:8px 0}.custom-block.details summary{margin:0 0 8px;font-weight:700;cursor:pointer}.custom-block.details summary+p{margin:8px 0}.custom-block a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;transition:opacity .25s}.custom-block a:hover{opacity:.75}.custom-block code{font-size:var(--vp-custom-block-code-font-size)}.custom-block.custom-block th,.custom-block.custom-block blockquote>p{font-size:var(--vp-custom-block-font-size);color:inherit}.dark .vp-code span{color:var(--shiki-dark, inherit)}html:not(.dark) .vp-code span{color:var(--shiki-light, inherit)}.vp-code-group{margin-top:16px}.vp-code-group .tabs{position:relative;display:flex;margin-right:-24px;margin-left:-24px;padding:0 12px;background-color:var(--vp-code-tab-bg);overflow-x:auto;overflow-y:hidden;box-shadow:inset 0 -1px var(--vp-code-tab-divider)}@media (min-width: 640px){.vp-code-group .tabs{margin-right:0;margin-left:0;border-radius:8px 8px 0 0}}.vp-code-group .tabs input{position:fixed;opacity:0;pointer-events:none}.vp-code-group .tabs label{position:relative;display:inline-block;border-bottom:1px solid transparent;padding:0 12px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-code-tab-text-color);white-space:nowrap;cursor:pointer;transition:color .25s}.vp-code-group .tabs label:after{position:absolute;right:8px;bottom:-1px;left:8px;z-index:1;height:2px;border-radius:2px;content:"";background-color:transparent;transition:background-color .25s}.vp-code-group label:hover{color:var(--vp-code-tab-hover-text-color)}.vp-code-group input:checked+label{color:var(--vp-code-tab-active-text-color)}.vp-code-group input:checked+label:after{background-color:var(--vp-code-tab-active-bar-color)}.vp-code-group div[class*=language-],.vp-block{display:none;margin-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important}.vp-code-group div[class*=language-].active,.vp-block.active{display:block}.vp-block{padding:20px 24px}.vp-doc h1,.vp-doc h2,.vp-doc h3,.vp-doc h4,.vp-doc h5,.vp-doc h6{position:relative;font-weight:600;outline:none}.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:28px}.vp-doc h2{margin:48px 0 16px;border-top:1px solid var(--vp-c-divider);padding-top:24px;letter-spacing:-.02em;line-height:32px;font-size:24px}.vp-doc h3{margin:32px 0 0;letter-spacing:-.01em;line-height:28px;font-size:20px}.vp-doc .header-anchor{position:absolute;top:0;left:0;margin-left:-.87em;font-weight:500;-webkit-user-select:none;user-select:none;opacity:0;text-decoration:none;transition:color .25s,opacity .25s}.vp-doc .header-anchor:before{content:var(--vp-header-anchor-symbol)}.vp-doc h1:hover .header-anchor,.vp-doc h1 .header-anchor:focus,.vp-doc h2:hover .header-anchor,.vp-doc h2 .header-anchor:focus,.vp-doc h3:hover .header-anchor,.vp-doc h3 .header-anchor:focus,.vp-doc h4:hover .header-anchor,.vp-doc h4 .header-anchor:focus,.vp-doc h5:hover .header-anchor,.vp-doc h5 .header-anchor:focus,.vp-doc h6:hover .header-anchor,.vp-doc h6 .header-anchor:focus{opacity:1}@media (min-width: 768px){.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:32px}}.vp-doc h2 .header-anchor{top:24px}.vp-doc p,.vp-doc summary{margin:16px 0}.vp-doc p{line-height:28px}.vp-doc blockquote{margin:16px 0;border-left:2px solid var(--vp-c-divider);padding-left:16px;transition:border-color .5s}.vp-doc blockquote>p{margin:0;font-size:16px;color:var(--vp-c-text-2);transition:color .5s}.vp-doc a{font-weight:500;color:var(--vp-c-brand-1);text-decoration:underline;text-underline-offset:2px;transition:color .25s,opacity .25s}.vp-doc a:hover{color:var(--vp-c-brand-2)}.vp-doc strong{font-weight:600}.vp-doc ul,.vp-doc ol{padding-left:1.25rem;margin:16px 0}.vp-doc ul{list-style:disc}.vp-doc ol{list-style:decimal}.vp-doc li+li{margin-top:8px}.vp-doc li>ol,.vp-doc li>ul{margin:8px 0 0}.vp-doc table{display:block;border-collapse:collapse;margin:20px 0;overflow-x:auto}.vp-doc tr{background-color:var(--vp-c-bg);border-top:1px solid var(--vp-c-divider);transition:background-color .5s}.vp-doc tr:nth-child(2n){background-color:var(--vp-c-bg-soft)}.vp-doc th,.vp-doc td{border:1px solid var(--vp-c-divider);padding:8px 16px}.vp-doc th{text-align:left;font-size:14px;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-doc td{font-size:14px}.vp-doc hr{margin:16px 0;border:none;border-top:1px solid var(--vp-c-divider)}.vp-doc .custom-block{margin:16px 0}.vp-doc .custom-block p{margin:8px 0;line-height:24px}.vp-doc .custom-block p:first-child{margin:0}.vp-doc .custom-block div[class*=language-]{margin:8px 0;border-radius:8px}.vp-doc .custom-block div[class*=language-] code{font-weight:400;background-color:transparent}.vp-doc .custom-block .vp-code-group .tabs{margin:0;border-radius:8px 8px 0 0}.vp-doc :not(pre,h1,h2,h3,h4,h5,h6)>code{font-size:var(--vp-code-font-size);color:var(--vp-code-color)}.vp-doc :not(pre)>code{border-radius:4px;padding:3px 6px;background-color:var(--vp-code-bg);transition:color .25s,background-color .5s}.vp-doc a>code{color:var(--vp-code-link-color)}.vp-doc a:hover>code{color:var(--vp-code-link-hover-color)}.vp-doc h1>code,.vp-doc h2>code,.vp-doc h3>code{font-size:.9em}.vp-doc div[class*=language-],.vp-block{position:relative;margin:16px -24px;background-color:var(--vp-code-block-bg);overflow-x:auto;transition:background-color .5s}@media (min-width: 640px){.vp-doc div[class*=language-],.vp-block{border-radius:8px;margin:16px 0}}@media (max-width: 639px){.vp-doc li div[class*=language-]{border-radius:8px 0 0 8px}}.vp-doc div[class*=language-]+div[class*=language-],.vp-doc div[class$=-api]+div[class*=language-],.vp-doc div[class*=language-]+div[class$=-api]>div[class*=language-]{margin-top:-8px}.vp-doc [class*=language-] pre,.vp-doc [class*=language-] code{direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.vp-doc [class*=language-] pre{position:relative;z-index:1;margin:0;padding:20px 0;background:transparent;overflow-x:auto}.vp-doc [class*=language-] code{display:block;padding:0 24px;width:fit-content;min-width:100%;line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-block-color);transition:color .5s}.vp-doc [class*=language-] code .highlighted{background-color:var(--vp-code-line-highlight-color);transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .highlighted.error{background-color:var(--vp-code-line-error-color)}.vp-doc [class*=language-] code .highlighted.warning{background-color:var(--vp-code-line-warning-color)}.vp-doc [class*=language-] code .diff{transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .diff:before{position:absolute;left:10px}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){filter:blur(.095rem);opacity:.4;transition:filter .35s,opacity .35s}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){opacity:.7;transition:filter .35s,opacity .35s}.vp-doc [class*=language-]:hover .has-focused-lines .line:not(.has-focus){filter:blur(0);opacity:1}.vp-doc [class*=language-] code .diff.remove{background-color:var(--vp-code-line-diff-remove-color);opacity:.7}.vp-doc [class*=language-] code .diff.remove:before{content:"-";color:var(--vp-code-line-diff-remove-symbol-color)}.vp-doc [class*=language-] code .diff.add{background-color:var(--vp-code-line-diff-add-color)}.vp-doc [class*=language-] code .diff.add:before{content:"+";color:var(--vp-code-line-diff-add-symbol-color)}.vp-doc div[class*=language-].line-numbers-mode{padding-left:32px}.vp-doc .line-numbers-wrapper{position:absolute;top:0;bottom:0;left:0;z-index:3;border-right:1px solid var(--vp-code-block-divider-color);padding-top:20px;width:32px;text-align:center;font-family:var(--vp-font-family-mono);line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-line-number-color);transition:border-color .5s,color .5s}.vp-doc [class*=language-]>button.copy{direction:ltr;position:absolute;top:12px;right:12px;z-index:3;border:1px solid var(--vp-code-copy-code-border-color);border-radius:4px;width:40px;height:40px;background-color:var(--vp-code-copy-code-bg);opacity:0;cursor:pointer;background-image:var(--vp-icon-copy);background-position:50%;background-size:20px;background-repeat:no-repeat;transition:border-color .25s,background-color .25s,opacity .25s}.vp-doc [class*=language-]:hover>button.copy,.vp-doc [class*=language-]>button.copy:focus{opacity:1}.vp-doc [class*=language-]>button.copy:hover,.vp-doc [class*=language-]>button.copy.copied{border-color:var(--vp-code-copy-code-hover-border-color);background-color:var(--vp-code-copy-code-hover-bg)}.vp-doc [class*=language-]>button.copy.copied,.vp-doc [class*=language-]>button.copy:hover.copied{border-radius:0 4px 4px 0;background-color:var(--vp-code-copy-code-hover-bg);background-image:var(--vp-icon-copied)}.vp-doc [class*=language-]>button.copy.copied:before,.vp-doc [class*=language-]>button.copy:hover.copied:before{position:relative;top:-1px;transform:translate(calc(-100% - 1px));display:flex;justify-content:center;align-items:center;border:1px solid var(--vp-code-copy-code-hover-border-color);border-right:0;border-radius:4px 0 0 4px;padding:0 10px;width:fit-content;height:40px;text-align:center;font-size:12px;font-weight:500;color:var(--vp-code-copy-code-active-text);background-color:var(--vp-code-copy-code-hover-bg);white-space:nowrap;content:var(--vp-code-copy-copied-text-content)}.vp-doc [class*=language-]>span.lang{position:absolute;top:2px;right:8px;z-index:2;font-size:12px;font-weight:500;color:var(--vp-code-lang-color);transition:color .4s,opacity .4s}.vp-doc [class*=language-]:hover>button.copy+span.lang,.vp-doc [class*=language-]>button.copy:focus+span.lang{opacity:0}.vp-doc .VPTeamMembers{margin-top:24px}.vp-doc .VPTeamMembers.small.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}.vp-doc .VPTeamMembers.small.count-2 .container,.vp-doc .VPTeamMembers.small.count-3 .container{max-width:100%!important}.vp-doc .VPTeamMembers.medium.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}:is(.vp-external-link-icon,.vp-doc a[href*="://"],.vp-doc a[target=_blank]):not(.no-icon):after{display:inline-block;margin-top:-1px;margin-left:4px;width:11px;height:11px;background:currentColor;color:var(--vp-c-text-3);flex-shrink:0;--icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");-webkit-mask-image:var(--icon);mask-image:var(--icon)}.vp-external-link-icon:after{content:""}.vp-sponsor{border-radius:16px;overflow:hidden}.vp-sponsor.aside{border-radius:12px}.vp-sponsor-section+.vp-sponsor-section{margin-top:4px}.vp-sponsor-tier{margin-bottom:4px;text-align:center;letter-spacing:1px;line-height:24px;width:100%;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-sponsor.normal .vp-sponsor-tier{padding:13px 0 11px;font-size:14px}.vp-sponsor.aside .vp-sponsor-tier{padding:9px 0 7px;font-size:12px}.vp-sponsor-grid+.vp-sponsor-tier{margin-top:4px}.vp-sponsor-grid{display:flex;flex-wrap:wrap;gap:4px}.vp-sponsor-grid.xmini .vp-sponsor-grid-link{height:64px}.vp-sponsor-grid.xmini .vp-sponsor-grid-image{max-width:64px;max-height:22px}.vp-sponsor-grid.mini .vp-sponsor-grid-link{height:72px}.vp-sponsor-grid.mini .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.small .vp-sponsor-grid-link{height:96px}.vp-sponsor-grid.small .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.medium .vp-sponsor-grid-link{height:112px}.vp-sponsor-grid.medium .vp-sponsor-grid-image{max-width:120px;max-height:36px}.vp-sponsor-grid.big .vp-sponsor-grid-link{height:184px}.vp-sponsor-grid.big .vp-sponsor-grid-image{max-width:192px;max-height:56px}.vp-sponsor-grid[data-vp-grid="2"] .vp-sponsor-grid-item{width:calc((100% - 4px)/2)}.vp-sponsor-grid[data-vp-grid="3"] .vp-sponsor-grid-item{width:calc((100% - 4px * 2) / 3)}.vp-sponsor-grid[data-vp-grid="4"] .vp-sponsor-grid-item{width:calc((100% - 12px)/4)}.vp-sponsor-grid[data-vp-grid="5"] .vp-sponsor-grid-item{width:calc((100% - 16px)/5)}.vp-sponsor-grid[data-vp-grid="6"] .vp-sponsor-grid-item{width:calc((100% - 4px * 5) / 6)}.vp-sponsor-grid-item{flex-shrink:0;width:100%;background-color:var(--vp-c-bg-soft);transition:background-color .25s}.vp-sponsor-grid-item:hover{background-color:var(--vp-c-default-soft)}.vp-sponsor-grid-item:hover .vp-sponsor-grid-image{filter:grayscale(0) invert(0)}.vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.dark .vp-sponsor-grid-item:hover{background-color:var(--vp-c-white)}.dark .vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.vp-sponsor-grid-link{display:flex}.vp-sponsor-grid-box{display:flex;justify-content:center;align-items:center;width:100%}.vp-sponsor-grid-image{max-width:100%;filter:grayscale(1);transition:filter .25s}.dark .vp-sponsor-grid-image{filter:grayscale(1) invert(1)}.VPBadge[data-v-57f18589]{display:inline-block;margin-left:2px;border:1px solid transparent;border-radius:12px;padding:0 10px;line-height:22px;font-size:12px;font-weight:500;transform:translateY(-2px)}.vp-doc h1>.VPBadge[data-v-57f18589]{margin-top:4px;vertical-align:top}.vp-doc h2>.VPBadge[data-v-57f18589]{margin-top:3px;padding:0 8px;vertical-align:top}.vp-doc h3>.VPBadge[data-v-57f18589]{vertical-align:middle}.vp-doc h4>.VPBadge[data-v-57f18589],.vp-doc h5>.VPBadge[data-v-57f18589],.vp-doc h6>.VPBadge[data-v-57f18589]{vertical-align:middle;line-height:18px}.VPBadge.info[data-v-57f18589]{border-color:var(--vp-badge-info-border);color:var(--vp-badge-info-text);background-color:var(--vp-badge-info-bg)}.VPBadge.tip[data-v-57f18589]{border-color:var(--vp-badge-tip-border);color:var(--vp-badge-tip-text);background-color:var(--vp-badge-tip-bg)}.VPBadge.warning[data-v-57f18589]{border-color:var(--vp-badge-warning-border);color:var(--vp-badge-warning-text);background-color:var(--vp-badge-warning-bg)}.VPBadge.danger[data-v-57f18589]{border-color:var(--vp-badge-danger-border);color:var(--vp-badge-danger-text);background-color:var(--vp-badge-danger-bg)}.VPBackdrop[data-v-b30612d7]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--vp-z-index-backdrop);background:var(--vp-backdrop-bg-color);transition:opacity .5s}.VPBackdrop.fade-enter-from[data-v-b30612d7],.VPBackdrop.fade-leave-to[data-v-b30612d7]{opacity:0}.VPBackdrop.fade-leave-active[data-v-b30612d7]{transition-duration:.25s}@media (min-width: 1280px){.VPBackdrop[data-v-b30612d7]{display:none}}.NotFound[data-v-56f8922b]{padding:64px 24px 96px;text-align:center}@media (min-width: 768px){.NotFound[data-v-56f8922b]{padding:96px 32px 168px}}.code[data-v-56f8922b]{line-height:64px;font-size:64px;font-weight:600}.title[data-v-56f8922b]{padding-top:12px;letter-spacing:2px;line-height:20px;font-size:20px;font-weight:700}.divider[data-v-56f8922b]{margin:24px auto 18px;width:64px;height:1px;background-color:var(--vp-c-divider)}.quote[data-v-56f8922b]{margin:0 auto;max-width:256px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.action[data-v-56f8922b]{padding-top:20px}.link[data-v-56f8922b]{display:inline-block;border:1px solid var(--vp-c-brand-1);border-radius:16px;padding:3px 16px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:border-color .25s,color .25s}.link[data-v-56f8922b]:hover{border-color:var(--vp-c-brand-2);color:var(--vp-c-brand-2)}.root[data-v-42243c90]{position:relative;z-index:1}.nested[data-v-42243c90]{padding-left:16px}.outline-link[data-v-42243c90]{display:block;line-height:28px;color:var(--vp-c-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .5s;font-weight:400}.outline-link[data-v-42243c90]:hover,.outline-link.active[data-v-42243c90]{color:var(--vp-c-text-1);transition:color .25s}.outline-link.nested[data-v-42243c90]{padding-left:13px}.VPDocAsideOutline[data-v-986658a7]{display:none}.VPDocAsideOutline.has-outline[data-v-986658a7]{display:block}.content[data-v-986658a7]{position:relative;border-left:1px solid var(--vp-c-divider);padding-left:16px;font-size:13px;font-weight:500}.outline-marker[data-v-986658a7]{position:absolute;top:32px;left:-1px;z-index:0;opacity:0;width:2px;border-radius:2px;height:18px;background-color:var(--vp-c-brand-1);transition:top .25s cubic-bezier(0,1,.5,1),background-color .5s,opacity .25s}.outline-title[data-v-986658a7]{letter-spacing:.4px;line-height:28px;font-size:13px;font-weight:600}.VPDocAside[data-v-872cba46]{display:flex;flex-direction:column;flex-grow:1}.spacer[data-v-872cba46]{flex-grow:1}.VPDocAside[data-v-872cba46] .spacer+.VPDocAsideSponsors,.VPDocAside[data-v-872cba46] .spacer+.VPDocAsideCarbonAds{margin-top:24px}.VPDocAside[data-v-872cba46] .VPDocAsideSponsors+.VPDocAsideCarbonAds{margin-top:16px}.VPLastUpdated[data-v-f0eb8be1]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 640px){.VPLastUpdated[data-v-f0eb8be1]{line-height:32px;font-size:14px;font-weight:500}}.VPDocFooter[data-v-72d7bc68]{margin-top:64px}.edit-info[data-v-72d7bc68]{padding-bottom:18px}@media (min-width: 640px){.edit-info[data-v-72d7bc68]{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px}}.edit-link-button[data-v-72d7bc68]{display:flex;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:color .25s}.edit-link-button[data-v-72d7bc68]:hover{color:var(--vp-c-brand-2)}.edit-link-icon[data-v-72d7bc68]{margin-right:8px;width:14px;height:14px;fill:currentColor}.prev-next[data-v-72d7bc68]{border-top:1px solid var(--vp-c-divider);padding-top:24px;display:grid;grid-row-gap:8px}@media (min-width: 640px){.prev-next[data-v-72d7bc68]{grid-template-columns:repeat(2,1fr);grid-column-gap:16px}}.pager-link[data-v-72d7bc68]{display:block;border:1px solid var(--vp-c-divider);border-radius:8px;padding:11px 16px 13px;width:100%;height:100%;transition:border-color .25s}.pager-link[data-v-72d7bc68]:hover{border-color:var(--vp-c-brand-1)}.pager-link.next[data-v-72d7bc68]{margin-left:auto;text-align:right}.desc[data-v-72d7bc68]{display:block;line-height:20px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.title[data-v-72d7bc68]{display:block;line-height:20px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:color .25s}.VPDocOutlineDropdown[data-v-47981750]{margin-bottom:48px}.VPDocOutlineDropdown button[data-v-47981750]{display:block;font-size:14px;font-weight:500;line-height:24px;border:1px solid var(--vp-c-border);padding:4px 12px;color:var(--vp-c-text-2);background-color:var(--vp-c-default-soft);border-radius:8px;transition:color .5s}.VPDocOutlineDropdown button[data-v-47981750]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPDocOutlineDropdown button.open[data-v-47981750]{color:var(--vp-c-text-1)}.icon[data-v-47981750]{display:inline-block;vertical-align:middle;width:16px;height:16px;fill:currentColor}[data-v-47981750] .outline-link{font-size:14px;font-weight:400}.open>.icon[data-v-47981750]{transform:rotate(90deg)}.items[data-v-47981750]{margin-top:12px;border-left:1px solid var(--vp-c-divider)}.VPDoc[data-v-e2d7a8eb]{padding:32px 24px 96px;width:100%}.VPDoc .VPDocOutlineDropdown[data-v-e2d7a8eb]{display:none}@media (min-width: 960px) and (max-width: 1279px){.VPDoc .VPDocOutlineDropdown[data-v-e2d7a8eb]{display:block}}@media (min-width: 768px){.VPDoc[data-v-e2d7a8eb]{padding:48px 32px 128px}}@media (min-width: 960px){.VPDoc[data-v-e2d7a8eb]{padding:32px 32px 0}.VPDoc:not(.has-sidebar) .container[data-v-e2d7a8eb]{display:flex;justify-content:center;max-width:992px}.VPDoc:not(.has-sidebar) .content[data-v-e2d7a8eb]{max-width:752px}}@media (min-width: 1280px){.VPDoc .container[data-v-e2d7a8eb]{display:flex;justify-content:center}.VPDoc .aside[data-v-e2d7a8eb]{display:block}}@media (min-width: 1440px){.VPDoc:not(.has-sidebar) .content[data-v-e2d7a8eb]{max-width:784px}.VPDoc:not(.has-sidebar) .container[data-v-e2d7a8eb]{max-width:1104px}}.container[data-v-e2d7a8eb]{margin:0 auto;width:100%}.aside[data-v-e2d7a8eb]{position:relative;display:none;order:2;flex-grow:1;padding-left:32px;width:100%;max-width:256px}.left-aside[data-v-e2d7a8eb]{order:1;padding-left:unset;padding-right:32px}.aside-container[data-v-e2d7a8eb]{position:fixed;top:0;padding-top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 32px);width:224px;height:100vh;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}.aside-container[data-v-e2d7a8eb]::-webkit-scrollbar{display:none}.aside-curtain[data-v-e2d7a8eb]{position:fixed;bottom:0;z-index:10;width:224px;height:32px;background:linear-gradient(transparent,var(--vp-c-bg) 70%)}.aside-content[data-v-e2d7a8eb]{display:flex;flex-direction:column;min-height:calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px));padding-bottom:32px}.content[data-v-e2d7a8eb]{position:relative;margin:0 auto;width:100%}@media (min-width: 960px){.content[data-v-e2d7a8eb]{padding:0 32px 128px}}@media (min-width: 1280px){.content[data-v-e2d7a8eb]{order:1;margin:0;min-width:640px}}.content-container[data-v-e2d7a8eb]{margin:0 auto}.VPDoc.has-aside .content-container[data-v-e2d7a8eb]{max-width:688px}.external-link-icon-enabled :is(.vp-doc a[href*="://"][data-v-e2d7a8eb],.vp-doc a[target=_blank][data-v-e2d7a8eb]):after{content:"";color:currentColor}.VPButton[data-v-33603068]{display:inline-block;border:1px solid transparent;text-align:center;font-weight:600;white-space:nowrap;transition:color .25s,border-color .25s,background-color .25s}.VPButton[data-v-33603068]:active{transition:color .1s,border-color .1s,background-color .1s}.VPButton.medium[data-v-33603068]{border-radius:20px;padding:0 20px;line-height:38px;font-size:14px}.VPButton.big[data-v-33603068]{border-radius:24px;padding:0 24px;line-height:46px;font-size:16px}.VPButton.brand[data-v-33603068]{border-color:var(--vp-button-brand-border);color:var(--vp-button-brand-text);background-color:var(--vp-button-brand-bg)}.VPButton.brand[data-v-33603068]:hover{border-color:var(--vp-button-brand-hover-border);color:var(--vp-button-brand-hover-text);background-color:var(--vp-button-brand-hover-bg)}.VPButton.brand[data-v-33603068]:active{border-color:var(--vp-button-brand-active-border);color:var(--vp-button-brand-active-text);background-color:var(--vp-button-brand-active-bg)}.VPButton.alt[data-v-33603068]{border-color:var(--vp-button-alt-border);color:var(--vp-button-alt-text);background-color:var(--vp-button-alt-bg)}.VPButton.alt[data-v-33603068]:hover{border-color:var(--vp-button-alt-hover-border);color:var(--vp-button-alt-hover-text);background-color:var(--vp-button-alt-hover-bg)}.VPButton.alt[data-v-33603068]:active{border-color:var(--vp-button-alt-active-border);color:var(--vp-button-alt-active-text);background-color:var(--vp-button-alt-active-bg)}.VPButton.sponsor[data-v-33603068]{border-color:var(--vp-button-sponsor-border);color:var(--vp-button-sponsor-text);background-color:var(--vp-button-sponsor-bg)}.VPButton.sponsor[data-v-33603068]:hover{border-color:var(--vp-button-sponsor-hover-border);color:var(--vp-button-sponsor-hover-text);background-color:var(--vp-button-sponsor-hover-bg)}.VPButton.sponsor[data-v-33603068]:active{border-color:var(--vp-button-sponsor-active-border);color:var(--vp-button-sponsor-active-text);background-color:var(--vp-button-sponsor-active-bg)}html:not(.dark) .VPImage.dark[data-v-57d5aa95]{display:none}.dark .VPImage.light[data-v-57d5aa95]{display:none}.VPHero[data-v-96363d7a]{margin-top:calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px}@media (min-width: 640px){.VPHero[data-v-96363d7a]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px}}@media (min-width: 960px){.VPHero[data-v-96363d7a]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px}}.container[data-v-96363d7a]{display:flex;flex-direction:column;margin:0 auto;max-width:1152px}@media (min-width: 960px){.container[data-v-96363d7a]{flex-direction:row}}.main[data-v-96363d7a]{position:relative;z-index:10;order:2;flex-grow:1;flex-shrink:0}.VPHero.has-image .container[data-v-96363d7a]{text-align:center}@media (min-width: 960px){.VPHero.has-image .container[data-v-96363d7a]{text-align:left}}@media (min-width: 960px){.main[data-v-96363d7a]{order:1;width:calc((100% / 3) * 2)}.VPHero.has-image .main[data-v-96363d7a]{max-width:592px}}.name[data-v-96363d7a],.text[data-v-96363d7a]{max-width:392px;letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;white-space:pre-wrap}.VPHero.has-image .name[data-v-96363d7a],.VPHero.has-image .text[data-v-96363d7a]{margin:0 auto}.name[data-v-96363d7a]{color:var(--vp-home-hero-name-color)}.clip[data-v-96363d7a]{background:var(--vp-home-hero-name-background);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--vp-home-hero-name-color)}@media (min-width: 640px){.name[data-v-96363d7a],.text[data-v-96363d7a]{max-width:576px;line-height:56px;font-size:48px}}@media (min-width: 960px){.name[data-v-96363d7a],.text[data-v-96363d7a]{line-height:64px;font-size:56px}.VPHero.has-image .name[data-v-96363d7a],.VPHero.has-image .text[data-v-96363d7a]{margin:0}}.tagline[data-v-96363d7a]{padding-top:8px;max-width:392px;line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--vp-c-text-2)}.VPHero.has-image .tagline[data-v-96363d7a]{margin:0 auto}@media (min-width: 640px){.tagline[data-v-96363d7a]{padding-top:12px;max-width:576px;line-height:32px;font-size:20px}}@media (min-width: 960px){.tagline[data-v-96363d7a]{line-height:36px;font-size:24px}.VPHero.has-image .tagline[data-v-96363d7a]{margin:0}}.actions[data-v-96363d7a]{display:flex;flex-wrap:wrap;margin:-6px;padding-top:24px}.VPHero.has-image .actions[data-v-96363d7a]{justify-content:center}@media (min-width: 640px){.actions[data-v-96363d7a]{padding-top:32px}}@media (min-width: 960px){.VPHero.has-image .actions[data-v-96363d7a]{justify-content:flex-start}}.action[data-v-96363d7a]{flex-shrink:0;padding:6px}.image[data-v-96363d7a]{order:1;margin:-76px -24px -48px}@media (min-width: 640px){.image[data-v-96363d7a]{margin:-108px -24px -48px}}@media (min-width: 960px){.image[data-v-96363d7a]{flex-grow:1;order:2;margin:0;min-height:100%}}.image-container[data-v-96363d7a]{position:relative;margin:0 auto;width:320px;height:320px}@media (min-width: 640px){.image-container[data-v-96363d7a]{width:392px;height:392px}}@media (min-width: 960px){.image-container[data-v-96363d7a]{display:flex;justify-content:center;align-items:center;width:100%;height:100%;transform:translate(-32px,-32px)}}.image-bg[data-v-96363d7a]{position:absolute;top:50%;left:50%;border-radius:50%;width:192px;height:192px;background-image:var(--vp-home-hero-image-background-image);filter:var(--vp-home-hero-image-filter);transform:translate(-50%,-50%)}@media (min-width: 640px){.image-bg[data-v-96363d7a]{width:256px;height:256px}}@media (min-width: 960px){.image-bg[data-v-96363d7a]{width:320px;height:320px}}[data-v-96363d7a] .image-src{position:absolute;top:50%;left:50%;max-width:192px;max-height:192px;transform:translate(-50%,-50%)}@media (min-width: 640px){[data-v-96363d7a] .image-src{max-width:256px;max-height:256px}}@media (min-width: 960px){[data-v-96363d7a] .image-src{max-width:320px;max-height:320px}}.VPFeature[data-v-dc571927]{display:block;border:1px solid var(--vp-c-bg-soft);border-radius:12px;height:100%;background-color:var(--vp-c-bg-soft);transition:border-color .25s,background-color .25s}.VPFeature.link[data-v-dc571927]:hover{border-color:var(--vp-c-brand-1)}.box[data-v-dc571927]{display:flex;flex-direction:column;padding:24px;height:100%}.box[data-v-dc571927]>.VPImage{margin-bottom:20px}.icon[data-v-dc571927]{display:flex;justify-content:center;align-items:center;margin-bottom:20px;border-radius:6px;background-color:var(--vp-c-default-soft);width:48px;height:48px;font-size:24px;transition:background-color .25s}.title[data-v-dc571927]{line-height:24px;font-size:16px;font-weight:600}.details[data-v-dc571927]{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.link-text[data-v-dc571927]{padding-top:8px}.link-text-value[data-v-dc571927]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-brand-1)}.link-text-icon[data-v-dc571927]{display:inline-block;margin-left:6px;width:14px;height:14px;fill:currentColor}.VPFeatures[data-v-7fdf4b60]{position:relative;padding:0 24px}@media (min-width: 640px){.VPFeatures[data-v-7fdf4b60]{padding:0 48px}}@media (min-width: 960px){.VPFeatures[data-v-7fdf4b60]{padding:0 64px}}.container[data-v-7fdf4b60]{margin:0 auto;max-width:1152px}.items[data-v-7fdf4b60]{display:flex;flex-wrap:wrap;margin:-8px}.item[data-v-7fdf4b60]{padding:8px;width:100%}@media (min-width: 640px){.item.grid-2[data-v-7fdf4b60],.item.grid-4[data-v-7fdf4b60],.item.grid-6[data-v-7fdf4b60]{width:50%}}@media (min-width: 768px){.item.grid-2[data-v-7fdf4b60],.item.grid-4[data-v-7fdf4b60]{width:50%}.item.grid-3[data-v-7fdf4b60],.item.grid-6[data-v-7fdf4b60]{width:calc(100% / 3)}}@media (min-width: 960px){.item.grid-4[data-v-7fdf4b60]{width:25%}}.VPHome[data-v-4b752bfa]{padding-bottom:96px}.VPHome[data-v-4b752bfa] .VPHomeSponsors{margin-top:112px;margin-bottom:-128px}@media (min-width: 768px){.VPHome[data-v-4b752bfa]{padding-bottom:128px}}.VPContent[data-v-e84d086a]{flex-grow:1;flex-shrink:0;margin:var(--vp-layout-top-height, 0px) auto 0;width:100%}.VPContent.is-home[data-v-e84d086a]{width:100%;max-width:100%}.VPContent.has-sidebar[data-v-e84d086a]{margin:0}@media (min-width: 960px){.VPContent[data-v-e84d086a]{padding-top:var(--vp-nav-height)}.VPContent.has-sidebar[data-v-e84d086a]{margin:var(--vp-layout-top-height, 0px) 0 0;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPContent.has-sidebar[data-v-e84d086a]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.VPFooter[data-v-c4442a57]{position:relative;z-index:var(--vp-z-index-footer);border-top:1px solid var(--vp-c-gutter);padding:32px 24px;background-color:var(--vp-c-bg)}.VPFooter.has-sidebar[data-v-c4442a57]{display:none}.VPFooter[data-v-c4442a57] a{text-decoration-line:underline;text-underline-offset:2px;transition:color .25s}.VPFooter[data-v-c4442a57] a:hover{color:var(--vp-c-text-1)}@media (min-width: 768px){.VPFooter[data-v-c4442a57]{padding:32px}}.container[data-v-c4442a57]{margin:0 auto;max-width:var(--vp-layout-max-width);text-align:center}.message[data-v-c4442a57],.copyright[data-v-c4442a57]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.VPLocalNavOutlineDropdown[data-v-be609a8b]{padding:12px 20px 11px}.VPLocalNavOutlineDropdown button[data-v-be609a8b]{display:block;font-size:12px;font-weight:500;line-height:24px;color:var(--vp-c-text-2);transition:color .5s;position:relative}.VPLocalNavOutlineDropdown button[data-v-be609a8b]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPLocalNavOutlineDropdown button.open[data-v-be609a8b]{color:var(--vp-c-text-1)}.icon[data-v-be609a8b]{display:inline-block;vertical-align:middle;margin-left:2px;width:14px;height:14px;fill:currentColor}[data-v-be609a8b] .outline-link{font-size:14px;padding:2px 0}.open>.icon[data-v-be609a8b]{transform:rotate(90deg)}.items[data-v-be609a8b]{position:absolute;top:64px;right:16px;left:16px;display:grid;gap:1px;border:1px solid var(--vp-c-border);border-radius:8px;background-color:var(--vp-c-gutter);max-height:calc(var(--vp-vh, 100vh) - 86px);overflow:hidden auto;box-shadow:var(--vp-shadow-3)}.header[data-v-be609a8b]{background-color:var(--vp-c-bg-soft)}.top-link[data-v-be609a8b]{display:block;padding:0 16px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1)}.outline[data-v-be609a8b]{padding:8px 0;background-color:var(--vp-c-bg-soft)}.flyout-enter-active[data-v-be609a8b]{transition:all .2s ease-out}.flyout-leave-active[data-v-be609a8b]{transition:all .15s ease-in}.flyout-enter-from[data-v-be609a8b],.flyout-leave-to[data-v-be609a8b]{opacity:0;transform:translateY(-16px)}.VPLocalNav[data-v-49954ad8]{position:sticky;top:0;left:0;z-index:var(--vp-z-index-local-nav);display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--vp-c-gutter);border-bottom:1px solid var(--vp-c-gutter);padding-top:var(--vp-layout-top-height, 0px);width:100%;background-color:var(--vp-local-nav-bg-color)}.VPLocalNav.fixed[data-v-49954ad8]{position:fixed}.VPLocalNav.reached-top[data-v-49954ad8]{border-top-color:transparent}@media (min-width: 960px){.VPLocalNav[data-v-49954ad8]{display:none}}.menu[data-v-49954ad8]{display:flex;align-items:center;padding:12px 24px 11px;line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.menu[data-v-49954ad8]:hover{color:var(--vp-c-text-1);transition:color .25s}@media (min-width: 768px){.menu[data-v-49954ad8]{padding:0 32px}}.menu-icon[data-v-49954ad8]{margin-right:8px;width:16px;height:16px;fill:currentColor}.VPOutlineDropdown[data-v-49954ad8]{padding:12px 24px 11px}@media (min-width: 768px){.VPOutlineDropdown[data-v-49954ad8]{padding:12px 32px 11px}}.VPSwitch[data-v-37264fd4]{position:relative;border-radius:11px;display:block;width:40px;height:22px;flex-shrink:0;border:1px solid var(--vp-input-border-color);background-color:var(--vp-input-switch-bg-color);transition:border-color .25s!important}.VPSwitch[data-v-37264fd4]:hover{border-color:var(--vp-c-brand-1)}.check[data-v-37264fd4]{position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background-color:var(--vp-c-neutral-inverse);box-shadow:var(--vp-shadow-1);transition:transform .25s!important}.icon[data-v-37264fd4]{position:relative;display:block;width:18px;height:18px;border-radius:50%;overflow:hidden}.icon[data-v-37264fd4] svg{position:absolute;top:3px;left:3px;width:12px;height:12px;fill:var(--vp-c-text-2)}.dark .icon[data-v-37264fd4] svg{fill:var(--vp-c-text-1);transition:opacity .25s!important}.sun[data-v-35fbcff7]{opacity:1}.moon[data-v-35fbcff7],.dark .sun[data-v-35fbcff7]{opacity:0}.dark .moon[data-v-35fbcff7]{opacity:1}.dark .VPSwitchAppearance[data-v-35fbcff7] .check{transform:translate(18px)}.VPNavBarAppearance[data-v-09531cc8]{display:none}@media (min-width: 1280px){.VPNavBarAppearance[data-v-09531cc8]{display:flex;align-items:center}}.VPMenuGroup+.VPMenuLink[data-v-97be8de0]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.link[data-v-97be8de0]{display:block;border-radius:6px;padding:0 12px;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);white-space:nowrap;transition:background-color .25s,color .25s}.link[data-v-97be8de0]:hover{color:var(--vp-c-brand-1);background-color:var(--vp-c-default-soft)}.link.active[data-v-97be8de0]{color:var(--vp-c-brand-1)}.VPMenuGroup[data-v-7e01b81c]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.VPMenuGroup[data-v-7e01b81c]:first-child{margin-top:0;border-top:0;padding-top:0}.VPMenuGroup+.VPMenuGroup[data-v-7e01b81c]{margin-top:12px;border-top:1px solid var(--vp-c-divider)}.title[data-v-7e01b81c]{padding:0 12px;line-height:32px;font-size:14px;font-weight:600;color:var(--vp-c-text-2);white-space:nowrap;transition:color .25s}.VPMenu[data-v-6e39bf37]{border-radius:12px;padding:12px;min-width:128px;border:1px solid var(--vp-c-divider);background-color:var(--vp-c-bg-elv);box-shadow:var(--vp-shadow-3);transition:background-color .5s;max-height:calc(100vh - var(--vp-nav-height));overflow-y:auto}.VPMenu[data-v-6e39bf37] .group{margin:0 -12px;padding:0 12px 12px}.VPMenu[data-v-6e39bf37] .group+.group{border-top:1px solid var(--vp-c-divider);padding:11px 12px 12px}.VPMenu[data-v-6e39bf37] .group:last-child{padding-bottom:0}.VPMenu[data-v-6e39bf37] .group+.item{border-top:1px solid var(--vp-c-divider);padding:11px 16px 0}.VPMenu[data-v-6e39bf37] .item{padding:0 16px;white-space:nowrap}.VPMenu[data-v-6e39bf37] .label{flex-grow:1;line-height:28px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.VPMenu[data-v-6e39bf37] .action{padding-left:24px}.VPFlyout[data-v-4f176a56]{position:relative}.VPFlyout[data-v-4f176a56]:hover{color:var(--vp-c-brand-1);transition:color .25s}.VPFlyout:hover .text[data-v-4f176a56]{color:var(--vp-c-text-2)}.VPFlyout:hover .icon[data-v-4f176a56]{fill:var(--vp-c-text-2)}.VPFlyout.active .text[data-v-4f176a56]{color:var(--vp-c-brand-1)}.VPFlyout.active:hover .text[data-v-4f176a56]{color:var(--vp-c-brand-2)}.VPFlyout:hover .menu[data-v-4f176a56],.button[aria-expanded=true]+.menu[data-v-4f176a56]{opacity:1;visibility:visible;transform:translateY(0)}.button[aria-expanded=false]+.menu[data-v-4f176a56]{opacity:0;visibility:hidden;transform:translateY(0)}.button[data-v-4f176a56]{display:flex;align-items:center;padding:0 12px;height:var(--vp-nav-height);color:var(--vp-c-text-1);transition:color .5s}.text[data-v-4f176a56]{display:flex;align-items:center;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.option-icon[data-v-4f176a56]{margin-right:0;width:16px;height:16px;fill:currentColor}.text-icon[data-v-4f176a56]{margin-left:4px;width:14px;height:14px;fill:currentColor}.icon[data-v-4f176a56]{width:20px;height:20px;fill:currentColor;transition:fill .25s}.menu[data-v-4f176a56]{position:absolute;top:calc(var(--vp-nav-height) / 2 + 20px);right:0;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,transform .25s}.VPSocialLink[data-v-1feba81e]{display:flex;justify-content:center;align-items:center;width:36px;height:36px;color:var(--vp-c-text-2);transition:color .5s}.VPSocialLink[data-v-1feba81e]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPSocialLink[data-v-1feba81e]>svg{width:20px;height:20px;fill:currentColor}.VPSocialLinks[data-v-ef495ef8]{display:flex;justify-content:center}.VPNavBarExtra[data-v-e4296c54]{display:none;margin-right:-12px}@media (min-width: 768px){.VPNavBarExtra[data-v-e4296c54]{display:block}}@media (min-width: 1280px){.VPNavBarExtra[data-v-e4296c54]{display:none}}.trans-title[data-v-e4296c54]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.item.appearance[data-v-e4296c54],.item.social-links[data-v-e4296c54]{display:flex;align-items:center;padding:0 12px}.item.appearance[data-v-e4296c54]{min-width:176px}.appearance-action[data-v-e4296c54]{margin-right:-2px}.social-links-list[data-v-e4296c54]{margin:-4px -8px}.VPNavBarHamburger[data-v-38d1bd19]{display:flex;justify-content:center;align-items:center;width:48px;height:var(--vp-nav-height)}@media (min-width: 768px){.VPNavBarHamburger[data-v-38d1bd19]{display:none}}.container[data-v-38d1bd19]{position:relative;width:16px;height:14px;overflow:hidden}.VPNavBarHamburger:hover .top[data-v-38d1bd19]{top:0;left:0;transform:translate(4px)}.VPNavBarHamburger:hover .middle[data-v-38d1bd19]{top:6px;left:0;transform:translate(0)}.VPNavBarHamburger:hover .bottom[data-v-38d1bd19]{top:12px;left:0;transform:translate(8px)}.VPNavBarHamburger.active .top[data-v-38d1bd19]{top:6px;transform:translate(0) rotate(225deg)}.VPNavBarHamburger.active .middle[data-v-38d1bd19]{top:6px;transform:translate(16px)}.VPNavBarHamburger.active .bottom[data-v-38d1bd19]{top:6px;transform:translate(0) rotate(135deg)}.VPNavBarHamburger.active:hover .top[data-v-38d1bd19],.VPNavBarHamburger.active:hover .middle[data-v-38d1bd19],.VPNavBarHamburger.active:hover .bottom[data-v-38d1bd19]{background-color:var(--vp-c-text-2);transition:top .25s,background-color .25s,transform .25s}.top[data-v-38d1bd19],.middle[data-v-38d1bd19],.bottom[data-v-38d1bd19]{position:absolute;width:16px;height:2px;background-color:var(--vp-c-text-1);transition:top .25s,background-color .5s,transform .25s}.top[data-v-38d1bd19]{top:0;left:0;transform:translate(0)}.middle[data-v-38d1bd19]{top:6px;left:0;transform:translate(8px)}.bottom[data-v-38d1bd19]{top:12px;left:0;transform:translate(4px)}.VPNavBarMenuLink[data-v-12d14006]{display:flex;align-items:center;padding:0 12px;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.VPNavBarMenuLink.active[data-v-12d14006],.VPNavBarMenuLink[data-v-12d14006]:hover{color:var(--vp-c-brand-1)}.VPNavBarMenu[data-v-09e66f57]{display:none}@media (min-width: 768px){.VPNavBarMenu[data-v-09e66f57]{display:flex}}.VPPluginSearch-flex-logo{width:80px;margin-left:calc(100% - 90px);padding-bottom:10px}.VPPluginSearch-search-list{padding:1rem;max-height:calc(100vh - 230px);overflow-x:auto}.VPPluginSearch-search-item-icon{font-family:none;align-self:center;padding:0 1rem 0 0;font-size:x-large}.VPPluginSearch-search-list>div{color:var(--vp-c-brand-dark);font-weight:700}.VPPluginSearch-search-item{padding:.25rem 1rem;margin:8px 0 0;border:solid 1px;border-radius:6px;display:flex;border-color:var(--vp-custom-block-details-border);color:var(--vp-custom-block-details-text);background-color:var(--vp-custom-block-details-bg)}.VPPluginSearch-search-item p{margin:0;font-size:smaller;color:var(--c-text-light-3)}a.link-focused .VPPluginSearch-search-item,.VPPluginSearch-search-item:hover{color:#fff;background:var(--vp-local-search-highlight-bg)}a.link-focused .VPPluginSearch-search-item,.VPPluginSearch-search-item:hover>p{color:#fff}.VPNavBarSearch{display:flex;align-items:center;padding-left:16px}.DocSearch-MagnifierLabel{margin:16px;color:var(--c-brand-light);stroke-width:2px}.DocSearch-Input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#58565636;border:solid 1px var(--c-brand-light);color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;width:80%;margin:8px;padding:8px;border-radius:6px}.dark .DocSearch-Input{color:var(--vp-c-text-1)}.VPPluginSearch-modal-back{left:0;right:0;top:0;bottom:0;background:#545454b3;position:fixed;z-index:65}.dark .VPPluginSearch-modal{background-color:#242424}.VPPluginSearch-modal{background-color:#f9f9f9;border-radius:6px;box-shadow:none;flex-direction:column;margin:80px auto auto;max-width:560px;position:relative}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}@media (max-width: 768px){.VPPluginSearch-modal{max-width:100%;border-radius:0}}.dark .DocSearch-Form{background-color:var(--vt-c-bg-mute)}.DocSearch-Form{background-color:#fff;border:1px solid var(--vt-c-brand);padding:6px}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Button-Key{align-items:center;background:var(--c-brand-light);border-radius:3px;box-shadow:var(--c-brand);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:2px;position:relative;top:-1px;width:20px}body.dark .DocSearch-Button:hover{box-shadow:none}.DocSearch{--docsearch-primary-color: var(--vt-c-brand);--docsearch-highlight-color: var(--docsearch-primary-color);--docsearch-text-color: var(--vt-c-text-1);--docsearch-muted-color: #ebebeb99;--docsearch-searchbox-shadow: none;--docsearch-searchbox-focus-background: transparent;--docsearch-key-gradient: transparent;--docsearch-key-shadow: none;--docsearch-modal-background: var(--vt-c-bg-soft);--docsearch-footer-background: var(--vt-c-bg)}.dark .DocSearch{--docsearch-modal-shadow: none;--docsearch-footer-shadow: none;--docsearch-logo-color: #ebebeb99;--docsearch-hit-background: #2f2f2f;--docsearch-hit-color: #ebebeb99;--docsearch-hit-shadow: none}.dark .DocSearch-Footer{border-top:1px solid var(--vt-c-divider)}.DocSearch-Form{background-color:#fff;border:1px solid var(--vt-c-brand)}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Button{display:flex;justify-content:center;align-items:center;margin:0;width:48px;height:55px;background:transparent;border:none}.DocSearch-Button:hover{background:transparent}.DocSearch-Button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}.DocSearch-Button:focus:not(:focus-visible){outline:none!important}@media (min-width: 768px){.DocSearch-Button{justify-content:flex-start;width:100%}}.DocSearch-MagnifierLabel{color:var(--vp-c-brand-dark)}.DocSearch-Button .DocSearch-Search-Icon{transition:color .5s;fill:currentColor;width:18px;height:18px;position:relative}@media (min-width: 768px){.DocSearch-Button .DocSearch-Search-Icon{top:1px;margin-right:10px;width:15px;height:15px}}.DocSearch-Button:hover .DocSearch-Search-Icon{color:var(--vt-c-text-1)}.DocSearch-Button-Placeholder{transition:color .5s;font-size:13px;font-weight:500;color:#6669;display:none;padding:0 10px 0 0}@media (min-width: 960px){.DocSearch-Button-Placeholder{display:inline-block}}.DocSearch-Button:hover .DocSearch-Button-Placeholder{color:var(--vt-c-text-1)}.DocSearch-Button .DocSearch-Button-Key{margin-top:2px;border:1px solid var(--vt-c-divider);border-right:none;border-radius:4px 0 0 4px;display:none;padding-left:6px;height:22px;line-height:22px;transition:color .5s,border-color .5s;min-width:0}.DocSearch-Button .DocSearch-Button-Key+.DocSearch-Button-Key{border-right:1px solid var(--vt-c-divider);border-left:none;border-radius:0 4px 4px 0;padding-left:2px;padding-right:6px}.DocSearch-Button:hover .DocSearch-Button-Key{color:var(--vt-c-brand-light)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Key{display:inline-block}}.DocSearch-Button-Key{font-size:12px;font-weight:500;height:20px;margin:0;width:auto;color:var(--vt-c-text-3);transition:color .5s;display:inline-block;padding:0 1px}.VPPluginSearch-search-group{color:var(--vp-c-brand-1)}.VPNavBarSocialLinks[data-v-d8e1041f]{display:none}@media (min-width: 1280px){.VPNavBarSocialLinks[data-v-d8e1041f]{display:flex;align-items:center}}.title[data-v-5606815e]{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;height:var(--vp-nav-height);font-size:16px;font-weight:600;color:var(--vp-c-text-1);transition:opacity .25s}@media (min-width: 960px){.title[data-v-5606815e]{flex-shrink:0}.VPNavBarTitle.has-sidebar .title[data-v-5606815e]{border-bottom-color:var(--vp-c-divider)}}[data-v-5606815e] .logo{margin-right:8px;height:var(--vp-nav-logo-height)}.VPNavBarTranslations[data-v-97e27cc0]{display:none}@media (min-width: 1280px){.VPNavBarTranslations[data-v-97e27cc0]{display:flex;align-items:center}}.title[data-v-97e27cc0]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.VPNavBar[data-v-80433010]{position:relative;border-bottom:1px solid transparent;padding:0 8px 0 24px;height:var(--vp-nav-height);pointer-events:none;white-space:nowrap}@media (min-width: 768px){.VPNavBar[data-v-80433010]{padding:0 32px}}@media (min-width: 960px){.VPNavBar.has-sidebar[data-v-80433010]{padding:0}.VPNavBar[data-v-80433010]:not(.has-sidebar):not(.top){border-bottom-color:var(--vp-c-gutter);background-color:var(--vp-nav-bg-color)}}.container[data-v-80433010]{display:flex;justify-content:space-between;margin:0 auto;max-width:calc(var(--vp-layout-max-width) - 64px);height:var(--vp-nav-height);pointer-events:none}.container>.title[data-v-80433010],.container>.content[data-v-80433010]{pointer-events:none}.container[data-v-80433010] *{pointer-events:auto}@media (min-width: 960px){.VPNavBar.has-sidebar .container[data-v-80433010]{max-width:100%}}.title[data-v-80433010]{flex-shrink:0;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar.has-sidebar .title[data-v-80433010]{position:absolute;top:0;left:0;z-index:2;padding:0 32px;width:var(--vp-sidebar-width);height:var(--vp-nav-height);background-color:transparent}}@media (min-width: 1440px){.VPNavBar.has-sidebar .title[data-v-80433010]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}.content[data-v-80433010]{flex-grow:1}@media (min-width: 960px){.VPNavBar.has-sidebar .content[data-v-80433010]{position:relative;z-index:1;padding-right:32px;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPNavBar.has-sidebar .content[data-v-80433010]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.content-body[data-v-80433010]{display:flex;justify-content:flex-end;align-items:center;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar:not(.top) .content-body[data-v-80433010]{position:relative;background-color:var(--vp-nav-bg-color)}}@media (max-width: 767px){.content-body[data-v-80433010]{column-gap:.5rem}}.menu+.translations[data-v-80433010]:before,.menu+.appearance[data-v-80433010]:before,.menu+.social-links[data-v-80433010]:before,.translations+.appearance[data-v-80433010]:before,.appearance+.social-links[data-v-80433010]:before{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--vp-c-divider);content:""}.menu+.appearance[data-v-80433010]:before,.translations+.appearance[data-v-80433010]:before{margin-right:16px}.appearance+.social-links[data-v-80433010]:before{margin-left:16px}.social-links[data-v-80433010]{margin-right:-8px}@media (min-width: 960px){.VPNavBar.has-sidebar .curtain[data-v-80433010]{position:absolute;right:0;bottom:-31px;width:calc(100% - var(--vp-sidebar-width));height:32px}.VPNavBar.has-sidebar .curtain[data-v-80433010]:before{display:block;width:100%;height:32px;background:linear-gradient(var(--vp-c-bg),transparent 70%);content:""}}@media (min-width: 1440px){.VPNavBar.has-sidebar .curtain[data-v-80433010]{width:calc(100% - ((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)))}}.VPNavScreenAppearance[data-v-6e00bd7a]{display:flex;justify-content:space-between;align-items:center;border-radius:8px;padding:12px 14px 12px 16px;background-color:var(--vp-c-bg-soft)}.text[data-v-6e00bd7a]{line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.VPNavScreenMenuLink[data-v-f1dc5061]{display:block;border-bottom:1px solid var(--vp-c-divider);padding:12px 0 11px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:border-color .25s,color .25s}.VPNavScreenMenuLink[data-v-f1dc5061]:hover{color:var(--vp-c-brand-1)}.VPNavScreenMenuGroupLink[data-v-5fa73bc4]{display:block;margin-left:12px;line-height:32px;font-size:14px;font-weight:400;color:var(--vp-c-text-1);transition:color .25s}.VPNavScreenMenuGroupLink[data-v-5fa73bc4]:hover{color:var(--vp-c-brand-1)}.VPNavScreenMenuGroupSection[data-v-78554050]{display:block}.title[data-v-78554050]{line-height:32px;font-size:13px;font-weight:700;color:var(--vp-c-text-2);transition:color .25s}.VPNavScreenMenuGroup[data-v-71478f73]{border-bottom:1px solid var(--vp-c-divider);height:48px;overflow:hidden;transition:border-color .5s}.VPNavScreenMenuGroup .items[data-v-71478f73]{visibility:hidden}.VPNavScreenMenuGroup.open .items[data-v-71478f73]{visibility:visible}.VPNavScreenMenuGroup.open[data-v-71478f73]{padding-bottom:10px;height:auto}.VPNavScreenMenuGroup.open .button[data-v-71478f73]{padding-bottom:6px;color:var(--vp-c-brand-1)}.VPNavScreenMenuGroup.open .button-icon[data-v-71478f73]{transform:rotate(45deg)}.button[data-v-71478f73]{display:flex;justify-content:space-between;align-items:center;padding:12px 4px 11px 0;width:100%;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.button[data-v-71478f73]:hover{color:var(--vp-c-brand-1)}.button-icon[data-v-71478f73]{width:14px;height:14px;fill:var(--vp-c-text-2);transition:fill .5s,transform .25s}.group[data-v-71478f73]:first-child{padding-top:0}.group+.group[data-v-71478f73],.group+.item[data-v-71478f73]{padding-top:4px}.VPNavScreenTranslations[data-v-3dee8c57]{height:24px;overflow:hidden}.VPNavScreenTranslations.open[data-v-3dee8c57]{height:auto}.title[data-v-3dee8c57]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-text-1)}.icon[data-v-3dee8c57]{width:16px;height:16px;fill:currentColor}.icon.lang[data-v-3dee8c57]{margin-right:8px}.icon.chevron[data-v-3dee8c57]{margin-left:4px}.list[data-v-3dee8c57]{padding:4px 0 0 24px}.link[data-v-3dee8c57]{line-height:32px;font-size:13px;color:var(--vp-c-text-1)}.VPNavScreen[data-v-05ed51bf]{position:fixed;top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px);right:0;bottom:0;left:0;padding:0 32px;width:100%;background-color:var(--vp-nav-screen-bg-color);overflow-y:auto;transition:background-color .5s;pointer-events:auto}.VPNavScreen.fade-enter-active[data-v-05ed51bf],.VPNavScreen.fade-leave-active[data-v-05ed51bf]{transition:opacity .25s}.VPNavScreen.fade-enter-active .container[data-v-05ed51bf],.VPNavScreen.fade-leave-active .container[data-v-05ed51bf]{transition:transform .25s ease}.VPNavScreen.fade-enter-from[data-v-05ed51bf],.VPNavScreen.fade-leave-to[data-v-05ed51bf]{opacity:0}.VPNavScreen.fade-enter-from .container[data-v-05ed51bf],.VPNavScreen.fade-leave-to .container[data-v-05ed51bf]{transform:translateY(-8px)}@media (min-width: 768px){.VPNavScreen[data-v-05ed51bf]{display:none}}.container[data-v-05ed51bf]{margin:0 auto;padding:24px 0 96px;max-width:288px}.menu+.translations[data-v-05ed51bf],.menu+.appearance[data-v-05ed51bf],.translations+.appearance[data-v-05ed51bf]{margin-top:24px}.menu+.social-links[data-v-05ed51bf]{margin-top:16px}.appearance+.social-links[data-v-05ed51bf]{margin-top:16px}.VPNav[data-v-ebb023b0]{position:relative;top:var(--vp-layout-top-height, 0px);left:0;z-index:var(--vp-z-index-nav);width:100%;pointer-events:none;transition:background-color .5s}@media (min-width: 960px){.VPNav[data-v-ebb023b0]{position:fixed}}.VPSidebarItem.level-0[data-v-cf728725]{padding-bottom:24px}.VPSidebarItem.collapsed.level-0[data-v-cf728725]{padding-bottom:10px}.item[data-v-cf728725]{position:relative;display:flex;width:100%}.VPSidebarItem.collapsible>.item[data-v-cf728725]{cursor:pointer}.indicator[data-v-cf728725]{position:absolute;top:6px;bottom:6px;left:-17px;width:2px;border-radius:2px;transition:background-color .25s}.VPSidebarItem.level-2.is-active>.item>.indicator[data-v-cf728725],.VPSidebarItem.level-3.is-active>.item>.indicator[data-v-cf728725],.VPSidebarItem.level-4.is-active>.item>.indicator[data-v-cf728725],.VPSidebarItem.level-5.is-active>.item>.indicator[data-v-cf728725]{background-color:var(--vp-c-brand-1)}.link[data-v-cf728725]{display:flex;align-items:center;flex-grow:1}.text[data-v-cf728725]{flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;transition:color .25s}.VPSidebarItem.level-0 .text[data-v-cf728725]{font-weight:700;color:var(--vp-c-text-1)}.VPSidebarItem.level-1 .text[data-v-cf728725],.VPSidebarItem.level-2 .text[data-v-cf728725],.VPSidebarItem.level-3 .text[data-v-cf728725],.VPSidebarItem.level-4 .text[data-v-cf728725],.VPSidebarItem.level-5 .text[data-v-cf728725]{font-weight:500;color:var(--vp-c-text-2)}.VPSidebarItem.level-0.is-link>.item>.link:hover .text[data-v-cf728725],.VPSidebarItem.level-1.is-link>.item>.link:hover .text[data-v-cf728725],.VPSidebarItem.level-2.is-link>.item>.link:hover .text[data-v-cf728725],.VPSidebarItem.level-3.is-link>.item>.link:hover .text[data-v-cf728725],.VPSidebarItem.level-4.is-link>.item>.link:hover .text[data-v-cf728725],.VPSidebarItem.level-5.is-link>.item>.link:hover .text[data-v-cf728725]{color:var(--vp-c-brand-1)}.VPSidebarItem.level-0.has-active>.item>.text[data-v-cf728725],.VPSidebarItem.level-1.has-active>.item>.text[data-v-cf728725],.VPSidebarItem.level-2.has-active>.item>.text[data-v-cf728725],.VPSidebarItem.level-3.has-active>.item>.text[data-v-cf728725],.VPSidebarItem.level-4.has-active>.item>.text[data-v-cf728725],.VPSidebarItem.level-5.has-active>.item>.text[data-v-cf728725],.VPSidebarItem.level-0.has-active>.item>.link>.text[data-v-cf728725],.VPSidebarItem.level-1.has-active>.item>.link>.text[data-v-cf728725],.VPSidebarItem.level-2.has-active>.item>.link>.text[data-v-cf728725],.VPSidebarItem.level-3.has-active>.item>.link>.text[data-v-cf728725],.VPSidebarItem.level-4.has-active>.item>.link>.text[data-v-cf728725],.VPSidebarItem.level-5.has-active>.item>.link>.text[data-v-cf728725]{color:var(--vp-c-text-1)}.VPSidebarItem.level-0.is-active>.item .link>.text[data-v-cf728725],.VPSidebarItem.level-1.is-active>.item .link>.text[data-v-cf728725],.VPSidebarItem.level-2.is-active>.item .link>.text[data-v-cf728725],.VPSidebarItem.level-3.is-active>.item .link>.text[data-v-cf728725],.VPSidebarItem.level-4.is-active>.item .link>.text[data-v-cf728725],.VPSidebarItem.level-5.is-active>.item .link>.text[data-v-cf728725]{color:var(--vp-c-brand-1)}.caret[data-v-cf728725]{display:flex;justify-content:center;align-items:center;margin-right:-7px;width:32px;height:32px;color:var(--vp-c-text-3);cursor:pointer;transition:color .25s;flex-shrink:0}.item:hover .caret[data-v-cf728725]{color:var(--vp-c-text-2)}.item:hover .caret[data-v-cf728725]:hover{color:var(--vp-c-text-1)}.caret-icon[data-v-cf728725]{width:18px;height:18px;fill:currentColor;transform:rotate(90deg);transition:transform .25s}.VPSidebarItem.collapsed .caret-icon[data-v-cf728725]{transform:rotate(0)}.VPSidebarItem.level-1 .items[data-v-cf728725],.VPSidebarItem.level-2 .items[data-v-cf728725],.VPSidebarItem.level-3 .items[data-v-cf728725],.VPSidebarItem.level-4 .items[data-v-cf728725],.VPSidebarItem.level-5 .items[data-v-cf728725]{border-left:1px solid var(--vp-c-divider);padding-left:16px}.VPSidebarItem.collapsed .items[data-v-cf728725]{display:none}.VPSidebar[data-v-4dca7019]{position:fixed;top:var(--vp-layout-top-height, 0px);bottom:0;left:0;z-index:var(--vp-z-index-sidebar);padding:32px 32px 96px;width:calc(100vw - 64px);max-width:320px;background-color:var(--vp-sidebar-bg-color);opacity:0;box-shadow:var(--vp-c-shadow-3);overflow-x:hidden;overflow-y:auto;transform:translate(-100%);transition:opacity .5s,transform .25s ease;overscroll-behavior:contain}.VPSidebar.open[data-v-4dca7019]{opacity:1;visibility:visible;transform:translate(0);transition:opacity .25s,transform .5s cubic-bezier(.19,1,.22,1)}.dark .VPSidebar[data-v-4dca7019]{box-shadow:var(--vp-shadow-1)}@media (min-width: 960px){.VPSidebar[data-v-4dca7019]{z-index:1;padding-top:var(--vp-nav-height);width:var(--vp-sidebar-width);max-width:100%;background-color:var(--vp-sidebar-bg-color);opacity:1;visibility:visible;box-shadow:none;transform:translate(0)}}@media (min-width: 1440px){.VPSidebar[data-v-4dca7019]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}@media (min-width: 960px){.curtain[data-v-4dca7019]{position:sticky;top:-64px;left:0;z-index:1;margin-top:calc(var(--vp-nav-height) * -1);margin-right:-32px;margin-left:-32px;height:var(--vp-nav-height);background-color:var(--vp-sidebar-bg-color)}}.nav[data-v-4dca7019]{outline:0}.group+.group[data-v-4dca7019]{border-top:1px solid var(--vp-c-divider);padding-top:10px}@media (min-width: 960px){.group[data-v-4dca7019]{padding-top:10px;width:calc(var(--vp-sidebar-width) - 64px)}}.VPSkipLink[data-v-6972e190]{top:8px;left:8px;padding:8px 16px;z-index:999;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none;color:var(--vp-c-brand-1);box-shadow:var(--vp-shadow-3);background-color:var(--vp-c-bg)}.VPSkipLink[data-v-6972e190]:focus{height:auto;width:auto;clip:auto;clip-path:none}@media (min-width: 1280px){.VPSkipLink[data-v-6972e190]{top:14px;left:16px}}.Layout[data-v-7694a090]{display:flex;flex-direction:column;min-height:100vh}.VPHomeSponsors[data-v-95dc13bd]{border-top:1px solid var(--vp-c-gutter);padding:88px 24px 96px;background-color:var(--vp-c-bg)}.container[data-v-95dc13bd]{margin:0 auto;max-width:1152px}.love[data-v-95dc13bd]{margin:0 auto;width:28px;height:28px;color:var(--vp-c-text-3)}.icon[data-v-95dc13bd]{width:28px;height:28px;fill:currentColor}.message[data-v-95dc13bd]{margin:0 auto;padding-top:10px;max-width:320px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.sponsors[data-v-95dc13bd]{padding-top:32px}.action[data-v-95dc13bd]{padding-top:40px;text-align:center}.VPTeamPage[data-v-583b0894]{padding-bottom:96px}@media (min-width: 768px){.VPTeamPage[data-v-583b0894]{padding-bottom:128px}}.VPTeamPageSection+.VPTeamPageSection[data-v-583b0894-s],.VPTeamMembers+.VPTeamPageSection[data-v-583b0894-s]{margin-top:64px}.VPTeamMembers+.VPTeamMembers[data-v-583b0894-s]{margin-top:24px}@media (min-width: 768px){.VPTeamPageTitle+.VPTeamPageSection[data-v-583b0894-s]{margin-top:16px}.VPTeamPageSection+.VPTeamPageSection[data-v-583b0894-s],.VPTeamMembers+.VPTeamPageSection[data-v-583b0894-s]{margin-top:96px}}.VPTeamMembers[data-v-583b0894-s]{padding:0 24px}@media (min-width: 768px){.VPTeamMembers[data-v-583b0894-s]{padding:0 48px}}@media (min-width: 960px){.VPTeamMembers[data-v-583b0894-s]{padding:0 64px}}.VPTeamPageTitle[data-v-c1d6606e]{padding:48px 32px;text-align:center}@media (min-width: 768px){.VPTeamPageTitle[data-v-c1d6606e]{padding:64px 48px 48px}}@media (min-width: 960px){.VPTeamPageTitle[data-v-c1d6606e]{padding:80px 64px 48px}}.title[data-v-c1d6606e]{letter-spacing:0;line-height:44px;font-size:36px;font-weight:500}@media (min-width: 768px){.title[data-v-c1d6606e]{letter-spacing:-.5px;line-height:56px;font-size:48px}}.lead[data-v-c1d6606e]{margin:0 auto;max-width:512px;padding-top:12px;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 768px){.lead[data-v-c1d6606e]{max-width:592px;letter-spacing:.15px;line-height:28px;font-size:20px}}.VPTeamPageSection[data-v-53af65c3]{padding:0 32px}@media (min-width: 768px){.VPTeamPageSection[data-v-53af65c3]{padding:0 48px}}@media (min-width: 960px){.VPTeamPageSection[data-v-53af65c3]{padding:0 64px}}.title[data-v-53af65c3]{position:relative;margin:0 auto;max-width:1152px;text-align:center;color:var(--vp-c-text-2)}.title-line[data-v-53af65c3]{position:absolute;top:16px;left:0;width:100%;height:1px;background-color:var(--vp-c-divider)}.title-text[data-v-53af65c3]{position:relative;display:inline-block;padding:0 24px;letter-spacing:0;line-height:32px;font-size:20px;font-weight:500;background-color:var(--vp-c-bg)}.lead[data-v-53af65c3]{margin:0 auto;max-width:480px;padding-top:12px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.members[data-v-53af65c3]{padding-top:40px}.VPTeamMembersItem[data-v-331c3275]{display:flex;flex-direction:column;gap:2px;border-radius:12px;width:100%;height:100%;overflow:hidden}.VPTeamMembersItem.small .profile[data-v-331c3275]{padding:32px}.VPTeamMembersItem.small .data[data-v-331c3275]{padding-top:20px}.VPTeamMembersItem.small .avatar[data-v-331c3275]{width:64px;height:64px}.VPTeamMembersItem.small .name[data-v-331c3275]{line-height:24px;font-size:16px}.VPTeamMembersItem.small .affiliation[data-v-331c3275]{padding-top:4px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .desc[data-v-331c3275]{padding-top:12px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .links[data-v-331c3275]{margin:0 -16px -20px;padding:10px 0 0}.VPTeamMembersItem.medium .profile[data-v-331c3275]{padding:48px 32px}.VPTeamMembersItem.medium .data[data-v-331c3275]{padding-top:24px;text-align:center}.VPTeamMembersItem.medium .avatar[data-v-331c3275]{width:96px;height:96px}.VPTeamMembersItem.medium .name[data-v-331c3275]{letter-spacing:.15px;line-height:28px;font-size:20px}.VPTeamMembersItem.medium .affiliation[data-v-331c3275]{padding-top:4px;font-size:16px}.VPTeamMembersItem.medium .desc[data-v-331c3275]{padding-top:16px;max-width:288px;font-size:16px}.VPTeamMembersItem.medium .links[data-v-331c3275]{margin:0 -16px -12px;padding:16px 12px 0}.profile[data-v-331c3275]{flex-grow:1;background-color:var(--vp-c-bg-soft)}.data[data-v-331c3275]{text-align:center}.avatar[data-v-331c3275]{position:relative;flex-shrink:0;margin:0 auto;border-radius:50%;box-shadow:var(--vp-shadow-3)}.avatar-img[data-v-331c3275]{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;object-fit:cover}.name[data-v-331c3275]{margin:0;font-weight:600}.affiliation[data-v-331c3275]{margin:0;font-weight:500;color:var(--vp-c-text-2)}.org.link[data-v-331c3275]{color:var(--vp-c-text-2);transition:color .25s}.org.link[data-v-331c3275]:hover{color:var(--vp-c-brand-1)}.desc[data-v-331c3275]{margin:0 auto}.desc[data-v-331c3275] a{font-weight:500;color:var(--vp-c-brand-1);text-decoration-style:dotted;transition:color .25s}.links[data-v-331c3275]{display:flex;justify-content:center;height:56px}.sp-link[data-v-331c3275]{display:flex;justify-content:center;align-items:center;text-align:center;padding:16px;font-size:14px;font-weight:500;color:var(--vp-c-sponsor);background-color:var(--vp-c-bg-soft);transition:color .25s,background-color .25s}.sp .sp-link.link[data-v-331c3275]:hover,.sp .sp-link.link[data-v-331c3275]:focus{outline:none;color:var(--vp-c-white);background-color:var(--vp-c-sponsor)}.sp-icon[data-v-331c3275]{margin-right:8px;width:16px;height:16px;fill:currentColor}.VPTeamMembers.small .container[data-v-03565459]{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}.VPTeamMembers.small.count-1 .container[data-v-03565459]{max-width:276px}.VPTeamMembers.small.count-2 .container[data-v-03565459]{max-width:576px}.VPTeamMembers.small.count-3 .container[data-v-03565459]{max-width:876px}.VPTeamMembers.medium .container[data-v-03565459]{grid-template-columns:repeat(auto-fit,minmax(256px,1fr))}@media (min-width: 375px){.VPTeamMembers.medium .container[data-v-03565459]{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}}.VPTeamMembers.medium.count-1 .container[data-v-03565459]{max-width:368px}.VPTeamMembers.medium.count-2 .container[data-v-03565459]{max-width:760px}.container[data-v-03565459]{display:grid;gap:24px;margin:0 auto;max-width:1152px} diff --git a/docs/document/component/contextmenu.html b/docs/document/component/contextmenu.html index 473c23056..6c3723af1 100644 --- a/docs/document/component/contextmenu.html +++ b/docs/document/component/contextmenu.html @@ -5,105 +5,103 @@ 右键菜单 | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

右键菜单 ​

配置 ​

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本

创建 ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
+    
Artplayer.js
Appearance
On this page
右键菜单 ​
配置 ​
属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
创建 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
 
-art.contextmenu.show = true;
+art.contextmenu.show = true;
 
-// Get the Element of contextmenu by name
-console.info(art.contextmenu['your-menu']);
添加 ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+// Get the Element of contextmenu by name
+console.info(art.contextmenu['your-menu']);
添加 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.contextmenu.add({
-    name: 'your-menu',
-    html: 'Your Menu',
-    click: function (...args) {
-        console.info(args);
-        art.contextmenu.show = false;
-    },
-});
+art.contextmenu.add({
+    name: 'your-menu',
+    html: 'Your Menu',
+    click: function (...args) {
+        console.info(args);
+        art.contextmenu.show = false;
+    },
+});
 
-art.contextmenu.show = true;
+art.contextmenu.show = true;
 
-// Get the Element of contextmenu by name
-console.info(art.contextmenu['your-menu']);
删除 ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
+// Get the Element of contextmenu by name
+console.info(art.contextmenu['your-menu']);
删除 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
 
-art.contextmenu.show = true;
+art.contextmenu.show = true;
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the contextmenu by name
-        art.contextmenu.remove('your-menu')
-    }, 3000);
-});
更新 ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the contextmenu by name
+        art.contextmenu.remove('your-menu')
+    }, 3000);
+});
更新 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
 
-art.contextmenu.show = true;
+art.contextmenu.show = true;
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the contextmenu by name
-        art.contextmenu.update({
-            name: 'your-menu',
-            html: 'Your New Menu',
-        })
-    }, 3000);
-});

-    
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the contextmenu by name
+        art.contextmenu.update({
+            name: 'your-menu',
+            html: 'Your New Menu',
+        })
+    }, 3000);
+});
+ \ No newline at end of file diff --git a/docs/document/component/controls.html b/docs/document/component/controls.html index 2e4fa8efb..a967fef5e 100644 --- a/docs/document/component/controls.html +++ b/docs/document/component/controls.html @@ -5,152 +5,150 @@ 控制器 | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

控制器 ​

配置 ​

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
positionStringleft 和 right 控制控制器出现的左右位置
selectorArray选择列表的对象数组
onSelectFunction选择列表的元素被点击时触发的函数

创建 ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'your-button',
-            index: 10,
-            position: 'left',
-            html: 'Your Button',
-            tooltip: 'Your Button',
-            style: {
-                color: 'red',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-        {
-            name: 'subtitle',
-            position: 'right',
-            html: 'Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: '<span style="color:red">subtitle 01</span>',
-                },
-                {
-                    html: '<span style="color:yellow">subtitle 02</span>',
-                },
-            ],
-            onSelect: function (item, $dom) {
-                console.info(item, $dom);
-                return 'Your ' + item.html;
-            },
-        },
-    ],
-});
+    
Artplayer.js
Appearance
On this page
控制器 ​
配置 ​
属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
positionStringleft 和 right 控制控制器出现的左右位置
selectorArray选择列表的对象数组
onSelectFunction选择列表的元素被点击时触发的函数
创建 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'your-button',
+            index: 10,
+            position: 'left',
+            html: 'Your Button',
+            tooltip: 'Your Button',
+            style: {
+                color: 'red',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+        {
+            name: 'subtitle',
+            position: 'right',
+            html: 'Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">subtitle 01</span>',
+                },
+                {
+                    html: '<span style="color:yellow">subtitle 02</span>',
+                },
+            ],
+            onSelect: function (item, $dom) {
+                console.info(item, $dom);
+                return 'Your ' + item.html;
+            },
+        },
+    ],
+});
 
-// Get the Element of control by name
-console.info(art.controls['your-button']);
-console.info(art.controls['subtitle']);
添加 ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+// Get the Element of control by name
+console.info(art.controls['your-button']);
+console.info(art.controls['subtitle']);
添加 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.controls.add({
-    name: 'button1',
-    index: 10,
-    position: 'left',
-    html: 'Your Button',
-    tooltip: 'Your Button',
-    style: {
-        color: 'red',
-    },
-    click: function (...args) {
-        console.info('click', args);
-    },
-    mounted: function (...args) {
-        console.info('mounted', args);
-    },
-});
+art.controls.add({
+    name: 'button1',
+    index: 10,
+    position: 'left',
+    html: 'Your Button',
+    tooltip: 'Your Button',
+    style: {
+        color: 'red',
+    },
+    click: function (...args) {
+        console.info('click', args);
+    },
+    mounted: function (...args) {
+        console.info('mounted', args);
+    },
+});
 
-// Get the Element of control by name
-console.info(art.controls['button1']);
删除 ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'Your Button',
-            tooltip: 'Your Button',
-            style: {
-                color: 'red',
-            },
-        }
-    ]
-});
+// Get the Element of control by name
+console.info(art.controls['button1']);
删除 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'Your Button',
+            tooltip: 'Your Button',
+            style: {
+                color: 'red',
+            },
+        }
+    ]
+});
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the control by name
-        art.controls.remove('button1');
-    }, 3000);
-});
更新 ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: 'subtitle 01',
-                },
-                {
-                    html: 'subtitle 02',
-                },
-            ],
-        }
-    ]
-});
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the control by name
+        art.controls.remove('button1');
+    }, 3000);
+});
更新 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: 'subtitle 01',
+                },
+                {
+                    html: 'subtitle 02',
+                },
+            ],
+        }
+    ]
+});
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the control by name
-        art.controls.update({
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'New Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: 'new subtitle 01',
-                },
-                {
-                    html: 'new subtitle 02',
-                },
-            ],
-        });
-    }, 3000);
-});

-    
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the control by name
+        art.controls.update({
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'New Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: 'new subtitle 01',
+                },
+                {
+                    html: 'new subtitle 02',
+                },
+            ],
+        });
+    }, 3000);
+});
+ \ No newline at end of file diff --git a/docs/document/component/layers.html b/docs/document/component/layers.html index e284b844b..ceea38da9 100644 --- a/docs/document/component/layers.html +++ b/docs/document/component/layers.html @@ -5,124 +5,122 @@ 业务层 | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

业务层 ​

配置 ​

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本

创建 ​

▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: `<img style="width: 100px" src="${img}">`,
-            tooltip: 'Potser Tip',
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-    ],
-});
+    
Artplayer.js
Appearance
On this page
业务层 ​
配置 ​
属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
创建 ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'potser',
+            html: `<img style="width: 100px" src="${img}">`,
+            tooltip: 'Potser Tip',
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+    ],
+});
 
-// Get the Element of layer by name
-console.info(art.layers['potser']);
添加 ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+// Get the Element of layer by name
+console.info(art.layers['potser']);
添加 ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.layers.add({
-    name: 'potser',
-    html: `<img style="width: 100px" src="${img}">`,
-    tooltip: 'Potser Tip',
-    style: {
-        position: 'absolute',
-        top: '50px',
-        right: '50px',
-    },
-    click: function (...args) {
-        console.info('click', args);
-    },
-    mounted: function (...args) {
-        console.info('mounted', args);
-    },
-});
+art.layers.add({
+    name: 'potser',
+    html: `<img style="width: 100px" src="${img}">`,
+    tooltip: 'Potser Tip',
+    style: {
+        position: 'absolute',
+        top: '50px',
+        right: '50px',
+    },
+    click: function (...args) {
+        console.info('click', args);
+    },
+    mounted: function (...args) {
+        console.info('mounted', args);
+    },
+});
 
-// Get the Element of layer by name
-console.info(art.layers['potser']);
删除 ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: `<img style="width: 100px" src="${img}">`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-        },
-    ],
-});
+// Get the Element of layer by name
+console.info(art.layers['potser']);
删除 ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'potser',
+            html: `<img style="width: 100px" src="${img}">`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+        },
+    ],
+});
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the layer by name
-        art.layers.remove('potser');
-    }, 3000);
-});
更新 ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: `<img style="width: 100px" src="${img}">`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-        },
-    ],
-});
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the layer by name
+        art.layers.remove('potser');
+    }, 3000);
+});
更新 ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'potser',
+            html: `<img style="width: 100px" src="${img}">`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+        },
+    ],
+});
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the layer by name
-        art.layers.update({
-            name: 'potser',
-            html: `<img style="width: 200px" src="${img}">`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                left: '50px',
-            },
-        });
-    }, 3000);
-});

-    
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the layer by name
+        art.layers.update({
+            name: 'potser',
+            html: `<img style="width: 200px" src="${img}">`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                left: '50px',
+            },
+        });
+    }, 3000);
+});
+ \ No newline at end of file diff --git a/docs/document/component/setting.html b/docs/document/component/setting.html index ad49f0db8..ca2c6bc46 100644 --- a/docs/document/component/setting.html +++ b/docs/document/component/setting.html @@ -5,229 +5,227 @@ 设置面板 | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

设置面板 ​

内置 ​

须先打开设置面板，然后自带四个内置项：flip, playbackRate, aspectRatio, subtitleOffset

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-	setting: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-    subtitleOffset: true,
-});

创建 - 选择列表 ​

属性类型描述
htmlString, Element元素的 DOM
iconString, Element元素的图标
selectorArray元素列表
onSelectFunction元素点击事件
widthNumber列表宽度
tooltipString提示文本
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Subtitle',
-            width: 250,
-            tooltip: 'Subtitle 01',
-            selector: [
-                {
-                    default: true,
-                    html: '<span style="color:red">Subtitle 01</span>',
-                    url: '/assets/sample/subtitle.srt?id=1',
-                },
-                {
-                    html: '<span style="color:yellow">Subtitle 02</span>',
-                    url: '/assets/sample/subtitle.srt?id=2',
-                },
-            ],
-            onSelect: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                art.subtitle.url = item.url;
-                return item.html;
-            },
-        },
-        {
-            html: 'Quality',
-            width: 150,
-            tooltip: '1080P',
-            selector: [
-                {
-                    default: true,
-                    html: '1080P',
-                    url: '/assets/sample/video.mp4?id=1080',
-                },
-                {
-                    html: '720P',
-                    url: '/assets/sample/video.mp4?id=720',
-                },
-                {
-                    html: '360P',
-                    url: '/assets/sample/video.mp4?id=360',
-                },
-            ],
-            onSelect: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                art.switchQuality(item.url, item.html);
-                return item.html;
-            },
-        },
-    ],
-});

创建 - 列表嵌套 ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Multi-level',
-            selector: [
-                {
-                    html: 'Setting 01',
-                    width: 150,
-                    selector: [
-                        {
-                            html: 'Setting 01 - 01',
-                        },
-                        {
-                            html: 'Setting 01 - 02',
-                        },
-                    ],
-                    onSelect: function (item, $dom, event) {
-                        console.info(item, $dom, event);
-                        return item.html;
-                    },
-                },
-                {
-                    html: 'Setting 02',
-                    width: 150,
-                    selector: [
-                        {
-                            html: 'Setting 02 - 01',
-                        },
-                        {
-                            html: 'Setting 02 - 02',
-                        },
-                    ],
-                    onSelect: function (item, $dom, event) {
-                        console.info(item, $dom, event);
-                        return item.html;
-                    },
-                },
-            ],
-        },
-    ],
-});

创建 - 切换按钮 ​

属性类型描述
htmlString, Element元素的 DOM 元素
iconString, Element元素的图标
switchBoolean按钮默认状态
onSwitchFunction按钮切换事件
tooltipString提示文本
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'PIP Mode',
-            tooltip: 'Close',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            switch: false,
-            onSwitch: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                const nextState = !item.switch;
-                art.pip = nextState;
-                item.tooltip = nextState ? 'Open' : 'Close';
-                return nextState;
-            },
-        },
-    ],
-});

创建 - 范围滑块 ​

属性类型描述
htmlString, Element元素的 DOM 元素
iconString, Element元素的图标
rangeArray默认状态数组
onRangeFunction完成时触发的事件
onChangeFunction变化时触发的事件
tooltipString提示文本
js
const range = [5, 1, 10, 1];
-const value = range[0];
-const min = range[1];
-const max = range[2];
-const step = range[3];
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-            onChange: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                return item.range + 'x';
-            },
-        },
-    ],
-});

添加 ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
+    
Artplayer.js
Appearance
On this page
设置面板 ​
内置 ​
须先打开设置面板，然后自带四个内置项：flip, playbackRate, aspectRatio, subtitleOffset
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+	setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    subtitleOffset: true,
+});
创建 - 选择列表 ​
属性类型描述
htmlString, Element元素的 DOM
iconString, Element元素的图标
selectorArray元素列表
onSelectFunction元素点击事件
widthNumber列表宽度
tooltipString提示文本
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Subtitle',
+            width: 250,
+            tooltip: 'Subtitle 01',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">Subtitle 01</span>',
+                    url: '/assets/sample/subtitle.srt?id=1',
+                },
+                {
+                    html: '<span style="color:yellow">Subtitle 02</span>',
+                    url: '/assets/sample/subtitle.srt?id=2',
+                },
+            ],
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                art.subtitle.url = item.url;
+                return item.html;
+            },
+        },
+        {
+            html: 'Quality',
+            width: 150,
+            tooltip: '1080P',
+            selector: [
+                {
+                    default: true,
+                    html: '1080P',
+                    url: '/assets/sample/video.mp4?id=1080',
+                },
+                {
+                    html: '720P',
+                    url: '/assets/sample/video.mp4?id=720',
+                },
+                {
+                    html: '360P',
+                    url: '/assets/sample/video.mp4?id=360',
+                },
+            ],
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                art.switchQuality(item.url, item.html);
+                return item.html;
+            },
+        },
+    ],
+});
创建 - 列表嵌套 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Multi-level',
+            selector: [
+                {
+                    html: 'Setting 01',
+                    width: 150,
+                    selector: [
+                        {
+                            html: 'Setting 01 - 01',
+                        },
+                        {
+                            html: 'Setting 01 - 02',
+                        },
+                    ],
+                    onSelect: function (item, $dom, event) {
+                        console.info(item, $dom, event);
+                        return item.html;
+                    },
+                },
+                {
+                    html: 'Setting 02',
+                    width: 150,
+                    selector: [
+                        {
+                            html: 'Setting 02 - 01',
+                        },
+                        {
+                            html: 'Setting 02 - 02',
+                        },
+                    ],
+                    onSelect: function (item, $dom, event) {
+                        console.info(item, $dom, event);
+                        return item.html;
+                    },
+                },
+            ],
+        },
+    ],
+});
创建 - 切换按钮 ​
属性类型描述
htmlString, Element元素的 DOM 元素
iconString, Element元素的图标
switchBoolean按钮默认状态
onSwitchFunction按钮切换事件
tooltipString提示文本
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'PIP Mode',
+            tooltip: 'Close',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            switch: false,
+            onSwitch: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                const nextState = !item.switch;
+                art.pip = nextState;
+                item.tooltip = nextState ? 'Open' : 'Close';
+                return nextState;
+            },
+        },
+    ],
+});
创建 - 范围滑块 ​
属性类型描述
htmlString, Element元素的 DOM 元素
iconString, Element元素的图标
rangeArray默认状态数组
onRangeFunction完成时触发的事件
onChangeFunction变化时触发的事件
tooltipString提示文本
js
const range = [5, 1, 10, 1];
+const value = range[0];
+const min = range[1];
+const max = range[2];
+const step = range[3];
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+            onChange: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                return item.range + 'x';
+            },
+        },
+    ],
+});
添加 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
 
-art.setting.show = true;
+art.setting.show = true;
 
-art.setting.add({
-    html: 'Slider',
-    tooltip: '5x',
-    icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-    range: [5, 1, 10, 1],
-});
删除 ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-    settings: [
-        {
-            name: 'slider',
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-        },
-    ],
-});
+art.setting.add({
+    html: 'Slider',
+    tooltip: '5x',
+    icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+    range: [5, 1, 10, 1],
+});
删除 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    settings: [
+        {
+            name: 'slider',
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+        },
+    ],
+});
 
-art.setting.show = true;
+art.setting.show = true;
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the setting by name
-        art.setting.remove('slider');
-    }, 3000);
-});
更新 ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            name: 'slider',
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-        },
-    ],
-});
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the setting by name
+        art.setting.remove('slider');
+    }, 3000);
+});
更新 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            name: 'slider',
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+        },
+    ],
+});
 
-art.setting.show = true;
+art.setting.show = true;
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the setting by name
-        art.setting.update({
-            name: 'slider',
-            html: 'PIP Mode',
-            tooltip: 'Close',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            switch: false,
-        });
-    }, 3000);
-});

-    
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the setting by name
+        art.setting.update({
+            name: 'slider',
+            html: 'PIP Mode',
+            tooltip: 'Close',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            switch: false,
+        });
+    }, 3000);
+});
+ \ No newline at end of file diff --git a/docs/document/en/advanced/built-in.html b/docs/document/en/advanced/built-in.html index 9d8c4ec66..7c95a33aa 100644 --- a/docs/document/en/advanced/built-in.html +++ b/docs/document/en/advanced/built-in.html @@ -5,209 +5,207 @@ Advanced Properties | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

Advanced Properties ​

The advanced properties here refer to the secondary attributes mounted on the instance, which are less commonly used

option ​

Options for the player

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    
Artplayer.js
Appearance
On this page
Advanced Properties ​
The advanced properties here refer to the secondary attributes mounted on the instance, which are less commonly used
option ​
Options for the player
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info(art.option);
Reminder
If you directly modify this option object, the player will not respond immediately.
template ​
Manages all of the DOM elements of the player
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+console.info(art.option);
Reminder
If you directly modify this option object, the player will not respond immediately.
template ​
Manages all of the DOM elements of the player
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info(art.template);
-console.info(art.template.$video);
Warning
To easily distinguish between DOM elements and plain objects, all DOM elements in the player are named starting with a $
Here is the definition of all DOM elements: artplayer/types/template.d.ts
events ​
Manages all DOM events in the player, which is essentially a proxy for addEventListener and removeEventListener. When using the following methods to handle events, the event will also be automatically destroyed when the player is destroyed.
  • The proxy method is used to proxy DOM events
  • The hover method is used to proxy custom hover events
  • The loadImg method is used to listen for the load event of images
▶ Run Code
js
var container = document.querySelector('.artplayer-app');
+console.info(art.template);
+console.info(art.template.$video);
Warning
To easily distinguish between DOM elements and plain objects, all DOM elements in the player are named starting with a $
Here is the definition of all DOM elements: artplayer/types/template.d.ts
events ​
Manages all DOM events in the player, which is essentially a proxy for addEventListener and removeEventListener. When using the following methods to handle events, the event will also be automatically destroyed when the player is destroyed.
  • The proxy method is used to proxy DOM events
  • The hover method is used to proxy custom hover events
  • The loadImg method is used to listen for the load event of images
▶ Run Code
js
var container = document.querySelector('.artplayer-app');
 
-var art = new Artplayer({
-    container: container,
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: container,
+    url: '/assets/sample/video.mp4',
+});
 
-art.events.proxy(container, 'click', event => {
-    console.info('click', event);
-});
+art.events.proxy(container, 'click', event => {
+    console.info('click', event);
+});
 
-art.events.hover(container, (event) => {
-    console.info('mouseenter', event);
-}, (event) => {
-    console.info('mouseleave', event);
-});
+art.events.hover(container, (event) => {
+    console.info('mouseenter', event);
+}, (event) => {
+    console.info('mouseleave', event);
+});
 
-art.events.loadImg('/assets/sample/poster.jpg').then(img => {
-    console.info('loadImg', img);
-});
Warning
If you need some DOM events to only exist during the lifecycle of the player, it is strongly recommended to use these functions to avoid causing memory leaks
storage ​
Manages the local storage of the player
  • The name attribute is used to set the cache key
  • The set method is used to set the cache
  • The get method is used to get the cache
  • The del method is used to delete the cache
  • The clear method is used to clear the cache
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.events.loadImg('/assets/sample/poster.jpg').then(img => {
+    console.info('loadImg', img);
+});
Warning
If you need some DOM events to only exist during the lifecycle of the player, it is strongly recommended to use these functions to avoid causing memory leaks
storage ​
Manages the local storage of the player
  • The name attribute is used to set the cache key
  • The set method is used to set the cache
  • The get method is used to get the cache
  • The del method is used to delete the cache
  • The clear method is used to clear the cache
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.storage.set('test', { foo: 'bar' });
-const test = art.storage.get('test');
-console.info(test);
-art.storage.del('test');
-art.storage.clear();
Warning
By default, all player instances share the same localStorage, and the default key is artplayer_settings
If you want different players to use different localStorage, you can modify art.storage.name accordingly
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.storage.set('test', { foo: 'bar' });
+const test = art.storage.get('test');
+console.info(test);
+art.storage.del('test');
+art.storage.clear();
Warning
By default, all player instances share the same localStorage, and the default key is artplayer_settings
If you want different players to use different localStorage, you can modify art.storage.name accordingly
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.storage.name = 'your-storage-key';
-art.storage.set('test', { foo: 'bar' });
icons ​
Manage all the svg icons of the player
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.storage.name = 'your-storage-key';
+art.storage.set('test', { foo: 'bar' });
icons ​
Manage all the svg icons of the player
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info(art.icons.loading);
This is the definition of all icons:
artplayer/types/icons.d.ts
i18n ​
Manage the player's i18n
  • The get method is used to retrieve the value of i18n
  • The update method is used to update the i18n object
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+console.info(art.icons.loading);
This is the definition of all icons:
artplayer/types/icons.d.ts
i18n ​
Manage the player's i18n
  • The get method is used to retrieve the value of i18n
  • The update method is used to update the i18n object
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info(art.i18n.get('Play'));
+console.info(art.i18n.get('Play'));
 
-art.i18n.update({
-    'zh-cn': {
-        Play: 'Your Play'
-    }
-});
WARNING
Using art.i18n.update can only update i18n after instantiation. If you want to update i18n before instantiation, please use the i18n from the basic options for the update.
notice ​
Manage the player's notices, there's only one show property used to display notices.
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.i18n.update({
+    'zh-cn': {
+        Play: 'Your Play'
+    }
+});
WARNING
Using art.i18n.update can only update i18n after instantiation. If you want to update i18n before instantiation, please use the i18n from the basic options for the update.
notice ​
Manage the player's notices, there's only one show property used to display notices.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.notice.show = 'Video Ready To Play';
-})
WARNING
To immediately hide the display of notice: art.notice.show = '';
layers ​
Manage the layers of the player
  • The add method is used for dynamically adding layers
  • The remove method is used for dynamically removing layers
  • The update method is used for dynamically updating layers
  • The show property is used to set whether to display all layers or not
  • The toggle method is used to toggle the display of all layers
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.notice.show = 'Video Ready To Play';
+})
WARNING
To immediately hide the display of notice: art.notice.show = '';
layers ​
Manage the layers of the player
  • The add method is used for dynamically adding layers
  • The remove method is used for dynamically removing layers
  • The update method is used for dynamically updating layers
  • The show property is used to set whether to display all layers or not
  • The toggle method is used to toggle the display of all layers
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.layers.add({
-        html: 'Some Text',
-    });
+art.on('ready', () => {
+    art.layers.add({
+        html: 'Some Text',
+    });
 
-	setTimeout(() => {
-		art.layers.show = false;
-	}, 1000);
-});
Component configuration Please refer to the following address:
/component/layers.html
controls ​
Manage the player's controllers
  • add method is used to dynamically add controllers
  • remove method is used to dynamically remove controllers
  • update method is used to dynamically update controllers
  • show property is used to set whether to display all controllers
  • toggle method is used to toggle the display of all controllers
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+	setTimeout(() => {
+		art.layers.show = false;
+	}, 1000);
+});
Component configuration Please refer to the following address:
/component/layers.html
controls ​
Manage the player's controllers
  • add method is used to dynamically add controllers
  • remove method is used to dynamically remove controllers
  • update method is used to dynamically update controllers
  • show property is used to set whether to display all controllers
  • toggle method is used to toggle the display of all controllers
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.controls.add({
-        html: 'Some Text',
-        position: 'left',
-    });
+art.on('ready', () => {
+    art.controls.add({
+        html: 'Some Text',
+        position: 'left',
+    });
 
-	setTimeout(() => {
-		art.controls.show = false;
-	}, 1000);
-});
Component Configuration Please refer to the following address:
/component/controls.html
contextmenu ​
Manage the right-click context menu of the player
  • The add method is used to dynamically add menu items
  • The remove method is used to dynamically remove menu items
  • The update method is used to dynamically update menu items
  • The show attribute is used to set whether to show all menu items
  • The toggle method is used to switch the visibility of all menu items
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+	setTimeout(() => {
+		art.controls.show = false;
+	}, 1000);
+});
Component Configuration Please refer to the following address:
/component/controls.html
contextmenu ​
Manage the right-click context menu of the player
  • The add method is used to dynamically add menu items
  • The remove method is used to dynamically remove menu items
  • The update method is used to dynamically update menu items
  • The show attribute is used to set whether to show all menu items
  • The toggle method is used to switch the visibility of all menu items
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.contextmenu.add({
-        html: 'Some Text',
-    });
+art.on('ready', () => {
+    art.contextmenu.add({
+        html: 'Some Text',
+    });
 
-    art.contextmenu.show = true;
-    setTimeout(() => {
-        art.contextmenu.show = false;
-    }, 1000);
-});
Component Configuration Please refer to the following address:
/component/contextmenu.html
subtitle ​
Manage the subtitle features of the player
  • url property sets and returns the current subtitle address
  • style method sets the style of the current subtitle
  • switch method sets the current subtitle address and options
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    art.contextmenu.show = true;
+    setTimeout(() => {
+        art.contextmenu.show = false;
+    }, 1000);
+});
Component Configuration Please refer to the following address:
/component/contextmenu.html
subtitle ​
Manage the subtitle features of the player
  • url property sets and returns the current subtitle address
  • style method sets the style of the current subtitle
  • switch method sets the current subtitle address and options
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.subtitle.url = '/assets/sample/subtitle.srt'
-    art.subtitle.style({
-        color: 'red',
-    });
-});
loading ​
Manage the loading layer of the player
  • show property is used to set whether to display the loading layer
  • The toggle attribute is used to toggle the display of the loading layer
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.subtitle.url = '/assets/sample/subtitle.srt'
+    art.subtitle.style({
+        color: 'red',
+    });
+});
loading ​
Manage the loading layer of the player
  • show property is used to set whether to display the loading layer
  • The toggle attribute is used to toggle the display of the loading layer
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.loading.show = true;
-	setTimeout(() => {
-		art.loading.show = false;
-	}, 1000);
-});
hotkey ​
Manage the hotkey functionality of the player
  • The add method is used to add a hotkey
  • The remove method is used to remove a hotkey
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.loading.show = true;
+	setTimeout(() => {
+		art.loading.show = false;
+	}, 1000);
+});
hotkey ​
Manage the hotkey functionality of the player
  • The add method is used to add a hotkey
  • The remove method is used to remove a hotkey
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-function hotkeyEvent(event) {
-    console.info('click', event);
-}
+function hotkeyEvent(event) {
+    console.info('click', event);
+}
 
-art.on('ready', () => {
-    art.hotkey.add(32, hotkeyEvent);
-    setTimeout(() => {
-		art.hotkey.remove(32, hotkeyEvent);
-	}, 5000);
-});
Warning
Shortcut keys will only work after the player has gained focus (e.g., after clicking on the player).
mask ​
Manage the player's mask layer
  • show property is used to set whether to display the mask layer
  • toggle property is used to toggle the display of the mask layer
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.hotkey.add(32, hotkeyEvent);
+    setTimeout(() => {
+		art.hotkey.remove(32, hotkeyEvent);
+	}, 5000);
+});
Warning
Shortcut keys will only work after the player has gained focus (e.g., after clicking on the player).
mask ​
Manage the player's mask layer
  • show property is used to set whether to display the mask layer
  • toggle property is used to toggle the display of the mask layer
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.mask.show = false;
-    setTimeout(() => {
-        art.mask.show = true;
-    }, 1000);
-});
setting ​
Manage the player's settings panel
  • add method is used to dynamically add a setting item
  • remove method is used to dynamically remove a setting item
  • update method is used to dynamically update a setting item
  • show property is used to set whether to display all the setting items
  • toggle method is used to toggle whether to display all the setting items
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-    subtitleOffset: true,
-});
+art.on('ready', () => {
+    art.mask.show = false;
+    setTimeout(() => {
+        art.mask.show = true;
+    }, 1000);
+});
setting ​
Manage the player's settings panel
  • add method is used to dynamically add a setting item
  • remove method is used to dynamically remove a setting item
  • update method is used to dynamically update a setting item
  • show property is used to set whether to display all the setting items
  • toggle method is used to toggle whether to display all the setting items
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    subtitleOffset: true,
+});
 
-art.on('ready', () => {
-    art.setting.show = true;
-	setTimeout(() => {
-		art.setting.show = false;
-	}, 1000);
-});
Settings Panel Please refer to the following link
/component/setting.html
plugins ​
Manage the player's plugin features, with only one method add to dynamically add plugins
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.setting.show = true;
+	setTimeout(() => {
+		art.setting.show = false;
+	}, 1000);
+});
Settings Panel Please refer to the following link
/component/setting.html
plugins ​
Manage the player's plugin features, with only one method add to dynamically add plugins
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
+function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
 
-art.on('ready', () => {
-    art.plugins.add(myPlugin);
-});

-    
+art.on('ready', () => {
+    art.plugins.add(myPlugin);
+});
+ \ No newline at end of file diff --git a/docs/document/en/advanced/class.html b/docs/document/en/advanced/class.html index 3f17b259b..7a7a2dce0 100644 --- a/docs/document/en/advanced/class.html +++ b/docs/document/en/advanced/class.html @@ -5,30 +5,28 @@ Static Properties | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

Static Properties ​

Here, Static Properties refer to the first-level properties mounted on the constructor, which are very rarely used.

instances ​

Returns an array of all player instances. You can use this property when you want to manage multiple players at the same time.

▶ Run Code
js
console.info([...Artplayer.instances]);
+    
Artplayer.js
Appearance
On this page
Static Properties ​
Here, Static Properties refer to the first-level properties mounted on the constructor, which are very rarely used.
instances ​
Returns an array of all player instances. You can use this property when you want to manage multiple players at the same time.
▶ Run Code
js
console.info([...Artplayer.instances]);
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info([...Artplayer.instances]);
version ​
Returns the version information of the player.
▶ Run Code
js
console.info(Artplayer.version);
env ​
Returns the environment variables of the player.
▶ Run Code
js
console.info(Artplayer.env);
build ​
Returns the build time of the player
▶ Run Code
js
console.info(Artplayer.build);
config ​
Returns the default configuration of the video
▶ Run Code
js
console.info(Artplayer.config);
utils ​
Returns a collection of utility functions for the player
▶ Run Code
js
console.info(Artplayer.utils);
For the full list of utility functions, please refer to the following address:
artplayer/types/utils.d.ts
scheme ​
Returns the validation scheme for the player options
▶ Run Code
js
console.info(Artplayer.scheme);
Emitter ​
Returns the constructor for the event dispatcher
▶ Run Code
js
console.info(Artplayer.Emitter);
validator ​
Returns the validation function for options
▶ Run Code
js
console.info(Artplayer.validator);
kindOf ​
Returns the function tool for type checking
▶ Run Code
js
console.info(Artplayer.kindOf);
html ​
Returns the html string required for the player
▶ Run Code
js
console.info(Artplayer.html);
option ​
Returns the player's default options
▶ Run Code
js
console.info(Artplayer.option);

-    
+console.info([...Artplayer.instances]);

version ​

Returns the version information of the player.

▶ Run Code
js
console.info(Artplayer.version);

env ​

Returns the environment variables of the player.

▶ Run Code
js
console.info(Artplayer.env);

build ​

Returns the build time of the player

▶ Run Code
js
console.info(Artplayer.build);

config ​

Returns the default configuration of the video

▶ Run Code
js
console.info(Artplayer.config);

utils ​

Returns a collection of utility functions for the player

▶ Run Code
js
console.info(Artplayer.utils);

For the full list of utility functions, please refer to the following address:

artplayer/types/utils.d.ts

scheme ​

Returns the validation scheme for the player options

▶ Run Code
js
console.info(Artplayer.scheme);

Emitter ​

Returns the constructor for the event dispatcher

▶ Run Code
js
console.info(Artplayer.Emitter);

validator ​

Returns the validation function for options

▶ Run Code
js
console.info(Artplayer.validator);

kindOf ​

Returns the function tool for type checking

▶ Run Code
js
console.info(Artplayer.kindOf);

html ​

Returns the html string required for the player

▶ Run Code
js
console.info(Artplayer.html);

option ​

Returns the player's default options

▶ Run Code
js
console.info(Artplayer.option);
+ \ No newline at end of file diff --git a/docs/document/en/advanced/event.html b/docs/document/en/advanced/event.html index fb78196db..8d89be727 100644 --- a/docs/document/en/advanced/event.html +++ b/docs/document/en/advanced/event.html @@ -5,431 +5,368 @@ Example Events | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

Example Events ​

Player events are divided into two types, one is the video's native events (prefix video:), the other is custom events

Listening to events:

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    
Artplayer.js
Appearance
On this page
Example Events ​
Player events are divided into two types, one is the video's native events (prefix video:), the other is custom events
Listening to events:
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('video:canplay', () => {
-    console.info('video:canplay');
-});
Listen to an event only once:
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('video:canplay', () => {
+    console.info('video:canplay');
+});
Listen to an event only once:
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.once('video:canplay', () => {
-    console.info('video:canplay');
-});
Manually trigger an event:
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.once('video:canplay', () => {
+    console.info('video:canplay');
+});
Manually trigger an event:
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.emit('focus');
Remove an event:
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.emit('focus');
Remove an event:
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-const onReady = () => {
-    console.info('ready');
-    art.off('ready', onReady);
-}
+const onReady = () => {
+    console.info('ready');
+    art.off('ready', onReady);
+}
 
-art.on('ready', onReady);
For a full list of events, please refer to the following address:
artplayer/types/events.d.ts
ready ​
Triggered when the player is able to play for the first time
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', onReady);
For a full list of events, please refer to the following address:
artplayer/types/events.d.ts
ready ​
Triggered when the player is able to play for the first time
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info('ready');
-});
restart ​
Triggered when the player switches the address and is able to play
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info('ready');
+});
restart ​
Triggered when the player switches the address and is able to play
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.url = '/assets/sample/video.mp4'
-});
+art.on('ready', () => {
+    art.url = '/assets/sample/video.mp4'
+});
 
-art.on('restart', (url) => {
-    console.info('restart', url);
-});
pause ​
Triggered when the player is paused
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('restart', (url) => {
+    console.info('restart', url);
+});
pause ​
Triggered when the player is paused
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('pause', () => {
-    console.info('pause');
-});
play ​
Triggered when the player starts playing
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('pause', () => {
+    console.info('pause');
+});
play ​
Triggered when the player starts playing
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('play', () => {
-    console.info('play');
-});
hotkey ​
Triggered when a hotkey on the player is pressed
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('play', () => {
+    console.info('play');
+});
hotkey ​
Triggered when a hotkey on the player is pressed
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('hotkey', (event) => {
-    console.info('hotkey', event);
-});
destroy ​
Triggered when the player is destroyed
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('hotkey', (event) => {
+    console.info('hotkey', event);
+});
destroy ​
Triggered when the player is destroyed
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.destroy();
-});
+art.on('ready', () => {
+    art.destroy();
+});
 
-art.on('destroy', () => {
-    console.info('destroy');
-});
focus ​
Triggered when the player gains focus
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('destroy', () => {
+    console.info('destroy');
+});
focus ​
Triggered when the player gains focus
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('focus', (event) => {
-    console.info('focus', event);
-});
blur ​
Triggered when the player loses focus
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('focus', (event) => {
+    console.info('focus', event);
+});
blur ​
Triggered when the player loses focus
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('blur', (event) => {
-    console.info('blur', event);
-});
dblclick ​
Triggered when the player is double-clicked
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('blur', (event) => {
+    console.info('blur', event);
+});
dblclick ​
Triggered when the player is double-clicked
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('dblclick', (event) => {
-    console.info('dblclick', event);
-});
click ​
Triggered when the player is clicked
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('dblclick', (event) => {
+    console.info('dblclick', event);
+});
click ​
Triggered when the player is clicked
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('click', (event) => {
-    console.info('click', event);
-});
error ​
Triggered when an error occurs while the player is loading the video
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});
+art.on('click', (event) => {
+    console.info('click', event);
+});
error ​
Triggered when an error occurs while the player is loading the video
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});
 
-art.on('error', (error, reconnectTime) => {
-    console.info(error, reconnectTime);
-});
hover ​
Triggered when the player is hovered or unhovered by the mouse
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('error', (error, reconnectTime) => {
+    console.info(error, reconnectTime);
+});
hover ​
Triggered when the player is hovered or unhovered by the mouse
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('hover', (state, event) => {
-    console.info('hover', state, event);
-});
mousemove ​
Triggered when the mouse moves over the player
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('hover', (state, event) => {
+    console.info('hover', state, event);
+});
mousemove ​
Triggered when the mouse moves over the player
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('mousemove', (event) => {
-    console.info('mousemove', event);
-});
resize ​
Triggered when the player size changes
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('mousemove', (event) => {
+    console.info('mousemove', event);
+});
resize ​
Triggered when the player size changes
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('resize', () => {
-    console.info('resize');
-});
view ​
Triggered when the player appears in the viewport
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('resize', () => {
+    console.info('resize');
+});
view ​
Triggered when the player appears in the viewport
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('view', (state) => {
-    console.info('view', state);
-});
lock ​
On mobile, triggered when the locked state changes
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lock: true,
-});
+art.on('view', (state) => {
+    console.info('view', state);
+});
lock ​
On mobile, triggered when the locked state changes
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lock: true,
+});
 
-art.on('lock', (state) => {
-    console.info('lock', state);
-});
aspectRatio ​
Triggered when the aspect ratio of the player changes
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    aspectRatio: true,
-    setting: true,
-});
+art.on('lock', (state) => {
+    console.info('lock', state);
+});
aspectRatio ​
Triggered when the aspect ratio of the player changes
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    aspectRatio: true,
+    setting: true,
+});
 
-art.on('aspectRatio', (aspectRatio) => {
-    console.info('aspectRatio', aspectRatio);
-});
autoHeight ​
Triggered when the player automatically sets the height
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('aspectRatio', (aspectRatio) => {
+    console.info('aspectRatio', aspectRatio);
+});
autoHeight ​
Triggered when the player automatically sets the height
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.autoHeight();
-});
+art.on('ready', () => {
+    art.autoHeight();
+});
 
-art.on('autoHeight', (height) => {
-    console.info('autoHeight', height);
-});
autoSize ​
Triggered when the player automatically sets the size
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-});
+art.on('autoHeight', (height) => {
+    console.info('autoHeight', height);
+});
autoSize ​
Triggered when the player automatically sets the size
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+});
 
-art.on('autoSize', () => {
-    console.info('autoSize');
-});
flip ​
Triggered when the player flips
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    flip: true,
-    setting: true,
-});
+art.on('autoSize', () => {
+    console.info('autoSize');
+});
flip ​
Triggered when the player flips
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    flip: true,
+    setting: true,
+});
 
-art.on('flip', (flip) => {
-    console.info('flip', flip);
-});
fullscreen ​
Triggered when the player goes into full screen
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-});
+art.on('flip', (flip) => {
+    console.info('flip', flip);
+});
fullscreen ​
Triggered when the player goes into full screen
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+});
 
-art.on('fullscreen', (state) => {
-    console.info('fullscreen', state);
-});
fullscreenWeb ​
Triggered when the player enters web fullscreen
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
+art.on('fullscreen', (state) => {
+    console.info('fullscreen', state);
+});
fullscreenWeb ​
Triggered when the player enters web fullscreen
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
 
-art.on('fullscreenWeb', (state) => {
-    console.info('fullscreenWeb', state);
-});
mini ​
Triggered when the player enters mini mode
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('fullscreenWeb', (state) => {
+    console.info('fullscreenWeb', state);
+});
mini ​
Triggered when the player enters mini mode
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.mini = true;
-});
+art.on('ready', () => {
+    art.mini = true;
+});
 
-art.on('mini', (state) => {
-    console.info('mini', state);
-});
pip ​
Triggered when the player enters Picture-in-Picture mode
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    pip: true,
-});
+art.on('mini', (state) => {
+    console.info('mini', state);
+});
pip ​
Triggered when the player enters Picture-in-Picture mode
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    pip: true,
+});
 
-art.on('pip', (state) => {
-    console.info('pip', state);
-});
screenshot ​
Triggered when the player takes a screenshot
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    screenshot: true,
-});
+art.on('pip', (state) => {
+    console.info('pip', state);
+});
screenshot ​
Triggered when the player takes a screenshot
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    screenshot: true,
+});
 
-art.on('screenshot', (dataUri) => {
-    console.info('screenshot', dataUri);
-});
seek ​
Triggered when the player jumps in time
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('screenshot', (dataUri) => {
+    console.info('screenshot', dataUri);
+});
seek ​
Triggered when the player jumps in time
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('seek', (currentTime) => {
-    console.info('seek', currentTime);
-});
subtitleOffset ​
Triggered when the subtitle offset occurs in the player
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitleOffset: true,
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-    setting: true,
-});
+art.on('seek', (currentTime) => {
+    console.info('seek', currentTime);
+});
subtitleOffset ​
Triggered when the subtitle offset occurs in the player
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitleOffset: true,
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+    setting: true,
+});
 
-art.on('subtitleOffset', (offset) => {
-    console.info('subtitleOffset', offset);
-});
subtitleUpdate ​
Triggered when the subtitle updates
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
+art.on('subtitleOffset', (offset) => {
+    console.info('subtitleOffset', offset);
+});
subtitleUpdate ​
Triggered when the subtitle updates
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
 
-art.on('subtitleUpdate', (text) => {
-    console.info('subtitleUpdate', text);
-});
subtitleLoad ​
Triggered when the subtitle loads
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
+art.on('subtitleUpdate', (text) => {
+    console.info('subtitleUpdate', text);
+});
subtitleLoad ​
Triggered when the subtitle loads
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
 
-art.on('subtitleLoad', (url) => {
-    console.info('subtitleLoad', url);
-});
subtitleSwitch ​
Triggered when subtitles switch
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
+art.on('subtitleLoad', (url) => {
+    console.info('subtitleLoad', url);
+});
subtitleSwitch ​
Triggered when subtitles switch
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
 
-art.on('ready', () => {
-    art.subtitle.url = '/assets/sample/subtitle.ass';
-});
+art.on('ready', () => {
+    art.subtitle.url = '/assets/sample/subtitle.ass';
+});
 
-art.on('subtitleSwitch', (url) => {
-    console.info('subtitleSwitch', url);
-});
info ​
Triggered when the information panel is shown or hidden
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('subtitleSwitch', (url) => {
+    console.info('subtitleSwitch', url);
+});
info ​
Triggered when the information panel is shown or hidden
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('info', (state) => {
-    console.log(state);
-});
layer ​
Triggered when a custom layer is shown or hidden
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('info', (state) => {
+    console.log(state);
+});
layer ​
Triggered when a custom layer is shown or hidden
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('layer', (state) => {
-    console.log(state);
-});
loading ​
Triggered when a loader is shown or hidden
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('layer', (state) => {
+    console.log(state);
+});
loading ​
Triggered when a loader is shown or hidden
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('loading', (state) => {
-    console.log(state);
-});
mask ​
Triggered when a mask layer is shown or hidden
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('loading', (state) => {
+    console.log(state);
+});
mask ​
Triggered when a mask layer is shown or hidden
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('mask', (state) => {
-    console.log(state);
-});
subtitle ​
Triggered when the subtitle layer is shown or hidden
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('mask', (state) => {
+    console.log(state);
+});
subtitle ​
Triggered when the subtitle layer is shown or hidden
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('subtitle', (state) => {
-    console.log(state);
-});
contextmenu ​
Triggered when the right-click menu is shown or hidden
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('subtitle', (state) => {
+    console.log(state);
+});
contextmenu ​
Triggered when the right-click menu is shown or hidden
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('contextmenu', (state) => {
-    console.log(state);
-});
control ​
Triggered when the controller is shown or hidden
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('contextmenu', (state) => {
+    console.log(state);
+});
control ​
Triggered when the controller is shown or hidden
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('control', (state) => {
-    console.log(state);
-});
setting ​
Triggered when the settings panel is shown or hidden
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
+art.on('control', (state) => {
+    console.log(state);
+});
setting ​
Triggered when the settings panel is shown or hidden
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
 
-art.on('setting', (state) => {
-    console.log(state);
-});
muted ​
Triggered when the muted state changes
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('setting', (state) => {
+    console.log(state);
+});
muted ​
Triggered when the muted state changes
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('muted', (state) => {
-    console.log(state);
-});
video:canplay ​
The browser can play the media file, but estimates there is not enough data to play through to the end without having to stop for further buffering
video:canplaythrough ​
The browser estimates it can play the media through to the end without stopping for content buffering
video:complete ​
OfflineAudioContext rendering is complete
video:durationchange ​
Triggered when the value of the duration property changes
video:emptied ​
The media content becomes empty; for example, when this media has been completely loaded (or partially loaded), this event is sent and the load() method is called to reload it
## `video:ended`
-
-The video has stopped because the media reached the end point
-
-## `video:error`
-
-An error occurred while fetching media data, or the resource type is not a supported media format
-
-## `video:loadeddata`
-
-The first frame of the media has finished loading
-
-## `video:loadedmetadata`
-
-Metadata has been loaded
-
-## `video:pause`
-
-Playback has been paused
-
-## `video:play`
-
-Playback has started
-
-## `video:playing`
-
-Playback is ready to start following a pause or delay due to lack of data
-
-## `video:progress`
-
-Periodically triggered while the browser is loading resources
-
-## `video:ratechange`
-
-The playback rate has changed
-
-## `video:seeked`
-
-A seek (frame skipping) operation has completed
-
-## `video:seeking`
-
-A seek (frame skipping) operation has started
-
-## `video:stalled`
-
-The user agent is trying to fetch media data, but the data unexpectedly has not appeared
-
-## `video:suspend`
-
-Media data loading has been suspended
-
-## `video:timeupdate`
-
-The time specified by the currentTime attribute has changed
-## `video:volumechange`
-
-Volume changed
-
-## `video:waiting`
-
-Playback has stopped due to temporarily missing data

-    
+art.on('muted', (state) => {
+    console.log(state);
+});

video:canplay ​

The browser can play the media file, but estimates there is not enough data to play through to the end without having to stop for further buffering

video:canplaythrough ​

The browser estimates it can play the media through to the end without stopping for content buffering

video:complete ​

OfflineAudioContext rendering is complete

video:durationchange ​

Triggered when the value of the duration property changes

video:emptied ​

The media content becomes empty; for example, when this media has been completely loaded (or partially loaded), this event is sent and the load() method is called to reload it

video:ended ​

The video has stopped because the media reached the end point

video:error ​

An error occurred while fetching media data, or the resource type is not a supported media format

video:loadeddata ​

The first frame of the media has finished loading

video:loadedmetadata ​

Metadata has been loaded

video:pause ​

Playback has been paused

video:play ​

Playback has started

video:playing ​

Playback is ready to start following a pause or delay due to lack of data

video:progress ​

Periodically triggered while the browser is loading resources

video:ratechange ​

The playback rate has changed

video:seeked ​

A seek (frame skipping) operation has completed

video:seeking ​

A seek (frame skipping) operation has started

video:stalled ​

The user agent is trying to fetch media data, but the data unexpectedly has not appeared

video:suspend ​

Media data loading has been suspended

video:timeupdate ​

The time specified by the currentTime attribute has changed

video:volumechange ​

Volume changed

video:waiting ​

Playback has stopped due to temporarily missing data

+ \ No newline at end of file diff --git a/docs/document/en/advanced/global.html b/docs/document/en/advanced/global.html index ece4b19a5..a70c2ad15 100644 --- a/docs/document/en/advanced/global.html +++ b/docs/document/en/advanced/global.html @@ -5,244 +5,242 @@ Global Attributes | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

Global Attributes ​

Here, Global Attributes refer to the first-level properties mounted on the constructor. Property names are all in uppercase, subject to change in the future and basically not needed.

DEBUG ​

Whether to start debug mode, which can print out all built-in events of the video by default is turned off.

▶ Run Code
js
Artplayer.DEBUG = true;
+    
Artplayer.js
Appearance
On this page
Global Attributes ​
Here, Global Attributes refer to the first-level properties mounted on the constructor. Property names are all in uppercase, subject to change in the future and basically not needed.
DEBUG ​
Whether to start debug mode, which can print out all built-in events of the video by default is turned off.
▶ Run Code
js
Artplayer.DEBUG = true;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
CONTEXTMENU ​
Whether to enable the right-click context menu, enabled by default.
▶ Run Code
js
Artplayer.CONTEXTMENU = false;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
CONTEXTMENU ​
Whether to enable the right-click context menu, enabled by default.
▶ Run Code
js
Artplayer.CONTEXTMENU = false;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
NOTICE_TIME ​
The display duration of the notification message, in milliseconds, defaults to 2000
▶ Run Code
js
Artplayer.NOTICE_TIME = 5000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
NOTICE_TIME ​
The display duration of the notification message, in milliseconds, defaults to 2000
▶ Run Code
js
Artplayer.NOTICE_TIME = 5000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
SETTING_WIDTH ​
The default width of the settings panel, in pixels, defaults to 250
▶ Run Code
js
Artplayer.SETTING_WIDTH = 300;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
SETTING_WIDTH ​
The default width of the settings panel, in pixels, defaults to 250
▶ Run Code
js
Artplayer.SETTING_WIDTH = 300;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});
SETTING_ITEM_WIDTH ​
Set the default width of the settings items in the panel, in pixels, the default is 200.
▶ Run Code
js
Artplayer.SETTING_ITEM_WIDTH = 300;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});
SETTING_ITEM_WIDTH ​
Set the default width of the settings items in the panel, in pixels, the default is 200.
▶ Run Code
js
Artplayer.SETTING_ITEM_WIDTH = 300;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});
SETTING_ITEM_HEIGHT ​
Set the default height of the settings items in the panel, in pixels, the default is 35.
▶ Run Code
js
Artplayer.SETTING_ITEM_HEIGHT = 40;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});
SETTING_ITEM_HEIGHT ​
Set the default height of the settings items in the panel, in pixels, the default is 35.
▶ Run Code
js
Artplayer.SETTING_ITEM_HEIGHT = 40;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});
RESIZE_TIME ​
Throttle time for the resize event, in milliseconds, defaults to 200
▶ Run Code
js
Artplayer.RESIZE_TIME = 500;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});
RESIZE_TIME ​
Throttle time for the resize event, in milliseconds, defaults to 200
▶ Run Code
js
Artplayer.RESIZE_TIME = 500;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('resize', () => {
-    console.log('resize');
-});
SCROLL_TIME ​
Throttle time for the scroll event, in milliseconds, defaults to 200
▶ Run Code
js
Artplayer.SCROLL_TIME = 500;
+art.on('resize', () => {
+    console.log('resize');
+});
SCROLL_TIME ​
Throttle time for the scroll event, in milliseconds, defaults to 200
▶ Run Code
js
Artplayer.SCROLL_TIME = 500;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('scroll', () => {
-    console.log('scroll');
-});
SCROLL_GAP ​
The boundary tolerance distance for the view event, in pixels, default is 50
▶ Run Code
js
Artplayer.SCROLL_GAP = 100;
+art.on('scroll', () => {
+    console.log('scroll');
+});
SCROLL_GAP ​
The boundary tolerance distance for the view event, in pixels, default is 50
▶ Run Code
js
Artplayer.SCROLL_GAP = 100;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('scroll', () => {
-    console.log('scroll');
-});
AUTO_PLAYBACK_MAX ​
The maximum number of records for the automatic playback feature, default is 10
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_MAX = 20;
+art.on('scroll', () => {
+    console.log('scroll');
+});
AUTO_PLAYBACK_MAX ​
The maximum number of records for the automatic playback feature, default is 10
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_MAX = 20;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});
AUTO_PLAYBACK_MIN ​
The minimum duration for the auto playback feature, in seconds, with a default of 5.
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_MIN = 10;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});
AUTO_PLAYBACK_MIN ​
The minimum duration for the auto playback feature, in seconds, with a default of 5.
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_MIN = 10;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});
AUTO_PLAYBACK_TIMEOUT ​
The delay duration for hiding the auto playback feature, in milliseconds, with a default of 3000.
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});
AUTO_PLAYBACK_TIMEOUT ​
The delay duration for hiding the auto playback feature, in milliseconds, with a default of 3000.
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});
RECONNECT_TIME_MAX ​
The maximum number of automatic reconnection attempts when a connection error occurs, default is 5
▶ Run Code
js
Artplayer.RECONNECT_TIME_MAX = 10;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});
RECONNECT_TIME_MAX ​
The maximum number of automatic reconnection attempts when a connection error occurs, default is 5
▶ Run Code
js
Artplayer.RECONNECT_TIME_MAX = 10;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});
RECONNECT_SLEEP_TIME ​
The delay time for the automatic reconnection attempt when a connection error occurs, in milliseconds, default is 1000
▶ Run Code
js
Artplayer.RECONNECT_SLEEP_TIME = 3000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});
RECONNECT_SLEEP_TIME ​
The delay time for the automatic reconnection attempt when a connection error occurs, in milliseconds, default is 1000
▶ Run Code
js
Artplayer.RECONNECT_SLEEP_TIME = 3000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});
CONTROL_HIDE_TIME ​
...
Auto-hide delay time for the bottom control bar, measured in milliseconds, default is 3000
▶ Run Code
js
Artplayer.CONTROL_HIDE_TIME = 5000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});
CONTROL_HIDE_TIME ​
...
Auto-hide delay time for the bottom control bar, measured in milliseconds, default is 3000
▶ Run Code
js
Artplayer.CONTROL_HIDE_TIME = 5000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
DBCLICK_TIME ​
Double-click event delay time, measured in milliseconds, default is 300
▶ Run Code
js
Artplayer.DBCLICK_TIME = 500;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
DBCLICK_TIME ​
Double-click event delay time, measured in milliseconds, default is 300
▶ Run Code
js
Artplayer.DBCLICK_TIME = 500;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('dblclick', () => {
-    console.log('dblclick');
-});
DBCLICK_FULLSCREEN ​
On desktop, whether to switch to fullscreen on double click, default is true
▶ Run Code
js
Artplayer.DBCLICK_FULLSCREEN = false;
+art.on('dblclick', () => {
+    console.log('dblclick');
+});
DBCLICK_FULLSCREEN ​
On desktop, whether to switch to fullscreen on double click, default is true
▶ Run Code
js
Artplayer.DBCLICK_FULLSCREEN = false;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
MOBILE_DBCLICK_PLAY ​
On mobile, whether to toggle play/pause on double click, default is true
▶ Run Code
js
Artplayer.MOBILE_DBCLICK_PLAY = false;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
MOBILE_DBCLICK_PLAY ​
On mobile, whether to toggle play/pause on double click, default is true
▶ Run Code
js
Artplayer.MOBILE_DBCLICK_PLAY = false;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
MOBILE_CLICK_PLAY ​
On mobile, whether to play/pause on single click, default is false
▶ Run Code
js
Artplayer.MOBILE_CLICK_PLAY = true;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
MOBILE_CLICK_PLAY ​
On mobile, whether to play/pause on single click, default is false
▶ Run Code
js
Artplayer.MOBILE_CLICK_PLAY = true;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
On mobile devices, whether a tap toggles play/pause, defaults to false
▶ Run Code
js
Artplayer.MOBILE_CLICK_PLAY = true;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
On mobile devices, whether a tap toggles play/pause, defaults to false
▶ Run Code
js
Artplayer.MOBILE_CLICK_PLAY = true;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
AUTO_ORIENTATION_TIME ​
On mobile devices, the delay time for auto-rotation, in milliseconds, defaults to 200
▶ Run Code
js
Artplayer.AUTO_ORIENTATION_TIME = 500;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
AUTO_ORIENTATION_TIME ​
On mobile devices, the delay time for auto-rotation, in milliseconds, defaults to 200
▶ Run Code
js
Artplayer.AUTO_ORIENTATION_TIME = 500;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoOrientation: true,
-});
INFO_LOOP_TIME ​
Info panel refresh time, unit in milliseconds, default is 1000
▶ Run Code
js
Artplayer.INFO_LOOP_TIME = 2000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoOrientation: true,
+});
INFO_LOOP_TIME ​
Info panel refresh time, unit in milliseconds, default is 1000
▶ Run Code
js
Artplayer.INFO_LOOP_TIME = 2000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.info.show = true;
FAST_FORWARD_VALUE ​
On mobile, the multiplier rate of the speed when long-pressing for fast-forward, default is 3
▶ Run Code
js
Artplayer.FAST_FORWARD_VALUE = 5;
+art.info.show = true;
FAST_FORWARD_VALUE ​
On mobile, the multiplier rate of the speed when long-pressing for fast-forward, default is 3
▶ Run Code
js
Artplayer.FAST_FORWARD_VALUE = 5;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});
FAST_FORWARD_TIME ​
The time, in milliseconds, to fast-forward when double-tapped, default is 10 On mobile, the delay time of the long-press acceleration, in milliseconds, default is 1000
▶ Run Code
js
Artplayer.FAST_FORWARD_TIME = 2000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});
FAST_FORWARD_TIME ​
The time, in milliseconds, to fast-forward when double-tapped, default is 10 On mobile, the delay time of the long-press acceleration, in milliseconds, default is 1000
▶ Run Code
js
Artplayer.FAST_FORWARD_TIME = 2000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});
TOUCH_MOVE_RATIO ​
On mobile, the ratio of the speed of sliding left and right to seek, default is 0.5
▶ Run Code
js
Artplayer.TOUCH_MOVE_RATIO = 1;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});
TOUCH_MOVE_RATIO ​
On mobile, the ratio of the speed of sliding left and right to seek, default is 0.5
▶ Run Code
js
Artplayer.TOUCH_MOVE_RATIO = 1;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
VOLUME_STEP ​
The step ratio of adjusting volume with shortcuts, default is 0.1
▶ Run Code
js
Artplayer.VOLUME_STEP = 0.2;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
VOLUME_STEP ​
The step ratio of adjusting volume with shortcuts, default is 0.1
▶ Run Code
js
Artplayer.VOLUME_STEP = 0.2;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
SEEK_STEP ​
The increment by which the playback progress is adjusted via keyboard shortcuts, in seconds, the default is 5
▶ Run Code
js
Artplayer.SEEK_STEP = 10;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
SEEK_STEP ​
The increment by which the playback progress is adjusted via keyboard shortcuts, in seconds, the default is 5
▶ Run Code
js
Artplayer.SEEK_STEP = 10;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
PLAYBACK_RATE ​
The list of built-in playback speeds, by default [0.5, 0.75, 1, 1.25, 1.5, 2]
▶ Run Code
js
Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5];
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
PLAYBACK_RATE ​
The list of built-in playback speeds, by default [0.5, 0.75, 1, 1.25, 1.5, 2]
▶ Run Code
js
Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5];
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    playbackRate: true,
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    playbackRate: true,
+});
 
-art.contextmenu.show = true;
-art.setting.show = true;
ASPECT_RATIO ​
Built-in list of video aspect ratios, default is ['default', '4:3', '16:9']
▶ Run Code
js
Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5'];
+art.contextmenu.show = true;
+art.setting.show = true;
ASPECT_RATIO ​
Built-in list of video aspect ratios, default is ['default', '4:3', '16:9']
▶ Run Code
js
Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5'];
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    aspectRatio: true,
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    aspectRatio: true,
+});
 
-art.contextmenu.show = true;
-art.setting.show = true;
FLIP ​
Built-in list of video flips, defaults to ['normal', 'horizontal', 'vertical']
▶ Run Code
js
Artplayer.FLIP = ['normal', 'horizontal'];
+art.contextmenu.show = true;
+art.setting.show = true;
FLIP ​
Built-in list of video flips, defaults to ['normal', 'horizontal', 'vertical']
▶ Run Code
js
Artplayer.FLIP = ['normal', 'horizontal'];
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+});
 
-art.contextmenu.show = true;
-art.setting.show = true;
FULLSCREEN_WEB_IN_BODY ​
When in web fullscreen, whether to mount the player under the body element, defaults to false
▶ Run Code
js
Artplayer.FULLSCREEN_WEB_IN_BODY = true;
+art.contextmenu.show = true;
+art.setting.show = true;
FULLSCREEN_WEB_IN_BODY ​
When in web fullscreen, whether to mount the player under the body element, defaults to false
▶ Run Code
js
Artplayer.FULLSCREEN_WEB_IN_BODY = true;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
LOG_VERSION ​
Setting whether to print the player version, the default is true
▶ Run Code
js
Artplayer.LOG_VERSION = false;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
LOG_VERSION ​
Setting whether to print the player version, the default is true
▶ Run Code
js
Artplayer.LOG_VERSION = false;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
USE_RAF ​
Setting whether to use requestAnimationFrame, the default is false, currently mainly used for smooth progress bar effects
▶ Run Code
js
Artplayer.USE_RAF = true;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
USE_RAF ​
Setting whether to use requestAnimationFrame, the default is false, currently mainly used for smooth progress bar effects
▶ Run Code
js
Artplayer.USE_RAF = true;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    miniProgressBar: true,
-});

-    
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    miniProgressBar: true,
+});
+ \ No newline at end of file diff --git a/docs/document/en/advanced/plugin.html b/docs/document/en/advanced/plugin.html index 06ccfc208..1936faae3 100644 --- a/docs/document/en/advanced/plugin.html +++ b/docs/document/en/advanced/plugin.html @@ -5,121 +5,119 @@ Writing Plugins | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

Writing Plugins ​

Once you know the player's properties, methods, and events, writing plugins is very simple.

You can load the plugin functions when instantiated.

▶ Run Code
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
+    
Artplayer.js
Appearance
On this page
Writing Plugins ​
Once you know the player's properties, methods, and events, writing plugins is very simple.
You can load the plugin functions when instantiated.
▶ Run Code
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [myPlugin],
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [myPlugin],
+});
 
-art.on('ready', () => {
-    console.info(art.plugins.myPlugin);
-});
Here's the translation of the provided text into English while preserving the Markdown formatting:
A function that allows loading plugins after instantiation
▶ Run Code
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
+art.on('ready', () => {
+    console.info(art.plugins.myPlugin);
+});
Here's the translation of the provided text into English while preserving the Markdown formatting:
A function that allows loading plugins after instantiation
▶ Run Code
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.plugins.add(myPlugin);
+art.plugins.add(myPlugin);
 
-art.on('ready', () => {
-    console.info(art.plugins.myPlugin);
-});
For example, I want to write a plugin that displays an image advertisement after the video is paused.
js
function adsPlugin(option) {
-    return (art) => {
-        art.layers.add({
-            name: 'ads',
-            html: `<img style="width: 100px" src="${option.url}">`,
-            style: {
-                display: 'none',
-                position: 'absolute',
-                top: '20px',
-                right: '20px',
-            },
-        });
+art.on('ready', () => {
+    console.info(art.plugins.myPlugin);
+});
For example, I want to write a plugin that displays an image advertisement after the video is paused.
js
function adsPlugin(option) {
+    return (art) => {
+        art.layers.add({
+            name: 'ads',
+            html: `<img style="width: 100px" src="${option.url}">`,
+            style: {
+                display: 'none',
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+            },
+        });
 
-        function show() {
-            art.layers.ads.style.display = 'block';
-        }
+        function show() {
+            art.layers.ads.style.display = 'block';
+        }
 
-        function hide() {
-            art.layers.ads.style.display = 'none';
-        }
+        function hide() {
+            art.layers.ads.style.display = 'none';
+        }
 
-        art.controls.add({
-            name: 'hide-ads',
-            position: 'right',
-            html: 'Hide Ads',
-            tooltip: 'Hide Ads',
-            click: hide,
-            style: {
-                marginRight: '20px'
-            }
-        });
+        art.controls.add({
+            name: 'hide-ads',
+            position: 'right',
+            html: 'Hide Ads',
+            tooltip: 'Hide Ads',
+            click: hide,
+            style: {
+                marginRight: '20px'
+            }
+        });
 
-        art.controls.add({
-            name: 'show-ads',
-            position: 'right',
-            html: 'Show Ads',
-            tooltip: 'Show Ads',
-            click: show,
-        });
+        art.controls.add({
+            name: 'show-ads',
+            position: 'right',
+            html: 'Show Ads',
+            tooltip: 'Show Ads',
+            click: show,
+        });
 
-        art.on('play', hide);
-        art.on('pause', show);
+        art.on('play', hide);
+        art.on('pause', show);
 
-        return {
-            name: 'adsPlugin',
-            show,
-            hide
-        };
-    }
-}
+        return {
+            name: 'adsPlugin',
+            show,
+            hide
+        };
+    }
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        adsPlugin({
-            url: '/assets/sample/layer.png'
-        })
-    ],
-});

-    
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        adsPlugin({
+            url: '/assets/sample/layer.png'
+        })
+    ],
+});
+ \ No newline at end of file diff --git a/docs/document/en/advanced/property.html b/docs/document/en/advanced/property.html index f3d22f79b..ef1663abb 100644 --- a/docs/document/en/advanced/property.html +++ b/docs/document/en/advanced/property.html @@ -5,406 +5,403 @@ Instance Properties | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

Instance Properties ​

Here, instance properties refer to the primary properties mounted on the instance, which are quite commonly used.

play ​

  • Type: Function

Play video

▶ Run Code
js

-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+    
Artplayer.js
Appearance
On this page
Instance Properties ​
Here, instance properties refer to the primary properties mounted on the instance, which are quite commonly used.
play ​
  • Type: Function
Play video
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    art.play();
-});
pause ​
  • Type: Function
Pause video
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+art.on('ready', () => {
+    art.play();
+});
pause ​
  • Type: Function
Pause video
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    art.play();
+art.on('ready', () => {
+    art.play();
 
-    setTimeout(() => {
-        art.pause();
-    }, 3000);
-});
toggle ​
  • Type: Function
Toggle the play and pause state of the video
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+    setTimeout(() => {
+        art.pause();
+    }, 3000);
+});
toggle ​
  • Type: Function
Toggle the play and pause state of the video
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    art.toggle();
+art.on('ready', () => {
+    art.toggle();
 
-    setTimeout(() => {
-        art.toggle();
-    }, 3000);
-});
destroy ​
  • Type: Function
  • Parameter: Boolean
Destroy the player. Accepts a parameter indicating whether to remove the player's html after destruction, which defaults to true
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    setTimeout(() => {
+        art.toggle();
+    }, 3000);
+});
destroy ​
  • Type: Function
  • Parameter: Boolean
Destroy the player. Accepts a parameter indicating whether to remove the player's html after destruction, which defaults to true
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.destroy();
-});
seek ​
  • Type: Setter
  • Parameter: Number
Jump to a specific time in the video, in seconds.
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.destroy();
+});
seek ​
  • Type: Setter
  • Parameter: Number
Jump to a specific time in the video, in seconds.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 5;
-});
forward ​
  • Type: Setter
  • Parameter: Number
Fast forward the video time, in seconds.
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.seek = 5;
+});
forward ​
  • Type: Setter
  • Parameter: Number
Fast forward the video time, in seconds.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.forward = 5;
-});
backward ​
  • Type: Setter
  • Parameter: Number
Video rewind time in seconds
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.forward = 5;
+});
backward ​
  • Type: Setter
  • Parameter: Number
Video rewind time in seconds
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 5;
+art.on('ready', () => {
+    art.seek = 5;
 
-    setTimeout(() => {
-        art.backward = 2;
-    }, 3000);
-});
volume ​
  • Type: Setter/Getter
  • Parameter: Number
Sets and gets the video volume, which ranges from [0, 1]
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    setTimeout(() => {
+        art.backward = 2;
+    }, 3000);
+});
volume ​
  • Type: Setter/Getter
  • Parameter: Number
Sets and gets the video volume, which ranges from [0, 1]
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.volume);
-    art.volume = 0.5;
-    console.info(art.volume);
-});
url ​
  • Type: Setter/Getter
  • Parameter: String
Set and retrieve the video address
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.volume);
+    art.volume = 0.5;
+    console.info(art.volume);
+});
url ​
  • Type: Setter/Getter
  • Parameter: String
Set and retrieve the video address
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.url = '/assets/sample/video.mp4?t=0';
-});
switch ​
  • Type: Setter
  • Parameter: String
Set the video address, which is similar to art.url, but performs some optimization operations
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.url = '/assets/sample/video.mp4?t=0';
+});
switch ​
  • Type: Setter
  • Parameter: String
Set the video address, which is similar to art.url, but performs some optimization operations
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switch = '/assets/sample/video.mp4?t=0';
-    }, 3000);
-});
switchUrl ​
  • Type: Function
  • Parameter: String
Set the video address, similar to setting art.url, but some optimization operations will be executed.
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switch = '/assets/sample/video.mp4?t=0';
+    }, 3000);
+});
switchUrl ​
  • Type: Function
  • Parameter: String
Set the video address, similar to setting art.url, but some optimization operations will be executed.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switchUrl('/assets/sample/video.mp4?t=0');
-    }, 3000);
-});
Warning
art.switch and art.switchUrl have the same functionality. However, the art.switchUrl method will return a Promise. When it resolves, it indicates that the new address can be played; when it rejects, it indicates there was an error loading the new address.
switchQuality ​
  • Type: Function
  • Parameter: String
Set video quality address, similar to art.switchUrl, but it will carry over the previous playback progress.
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchUrl('/assets/sample/video.mp4?t=0');
+    }, 3000);
+});
Warning
art.switch and art.switchUrl have the same functionality. However, the art.switchUrl method will return a Promise. When it resolves, it indicates that the new address can be played; when it rejects, it indicates there was an error loading the new address.
switchQuality ​
  • Type: Function
  • Parameter: String
Set video quality address, similar to art.switchUrl, but it will carry over the previous playback progress.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switchQuality('/assets/sample/video.mp4?t=0');
-    }, 3000);
-});
muted ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get whether the video is muted.
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchQuality('/assets/sample/video.mp4?t=0');
+    }, 3000);
+});
muted ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get whether the video is muted.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.muted);
-    art.muted = true;
-    console.info(art.muted);
-});
currentTime ​
  • Type: Setter/Getter
  • Parameter: Number
Set and get the current time of the video. Setting the time is similar to seek, but it does not trigger additional events.
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.muted);
+    art.muted = true;
+    console.info(art.muted);
+});
currentTime ​
  • Type: Setter/Getter
  • Parameter: Number
Set and get the current time of the video. Setting the time is similar to seek, but it does not trigger additional events.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.currentTime);
-    art.currentTime = 5;
-    console.info(art.currentTime);
-});
duration ​
  • Type: Getter
Get the video duration
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.currentTime);
+    art.currentTime = 5;
+    console.info(art.currentTime);
+});
duration ​
  • Type: Getter
Get the video duration
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.duration);
-});
Note
Some videos do not have a duration, such as videos that are being live streamed or videos that have not been fully decoded, in which case the obtained duration will be 0
screenshot ​
  • Type: Function
Download a screenshot of the current video frame
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.duration);
+});
Note
Some videos do not have a duration, such as videos that are being live streamed or videos that have not been fully decoded, in which case the obtained duration will be 0
screenshot ​
  • Type: Function
Download a screenshot of the current video frame
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.screenshot();
-});
getDataURL ​
  • Type: Function
Gets the base64 address of the screenshot of the current video frame, which returns a Promise.
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.screenshot();
+});
getDataURL ​
  • Type: Function
Gets the base64 address of the screenshot of the current video frame, which returns a Promise.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', async () => {
-    const url = await art.getDataURL();
-    console.info(url)
-});
getBlobUrl ​
  • Type: Function
Gets the blob address of the screenshot of the current video frame, which returns a Promise.
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', async () => {
+    const url = await art.getDataURL();
+    console.info(url)
+});
getBlobUrl ​
  • Type: Function
Gets the blob address of the screenshot of the current video frame, which returns a Promise.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', async () => {
-    const url = await art.getBlobUrl();
-    console.info(url);
-});
fullscreen ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get the player window fullscreen
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'Fullscreen Switch',
-            click: function () {
-                art.fullscreen = !art.fullscreen;
-            },
-        },
-    ],
-});
Note
Due to browser security mechanisms, before triggering the window to fullscreen, the page must have had an interaction (e.g. user clicked on the page).
fullscreenWeb ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get the player web page full screen
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
+art.on('ready', async () => {
+    const url = await art.getBlobUrl();
+    console.info(url);
+});
fullscreen ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get the player window fullscreen
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'Fullscreen Switch',
+            click: function () {
+                art.fullscreen = !art.fullscreen;
+            },
+        },
+    ],
+});
Note
Due to browser security mechanisms, before triggering the window to fullscreen, the page must have had an interaction (e.g. user clicked on the page).
fullscreenWeb ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get the player web page full screen
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
 
-art.on('ready', () => {
-    art.fullscreenWeb = true;
+art.on('ready', () => {
+    art.fullscreenWeb = true;
 
-    setTimeout(() => {
-        art.fullscreenWeb = false;
-    }, 3000);
-});
pip ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get the player picture-in-picture mode
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'PIP',
-            click: function () {
-                art.pip = !art.pip;
-            },
-        },
-    ],
-});
Warning
Due to browser security mechanisms, user interaction (e.g., a user click on the page) must occur before triggering picture-in-picture.
poster ​
  • Type: Setter/Getter
  • Parameter: String
Set and get the video poster, the poster effect is visible only before the video starts playing.
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    poster: '/assets/sample/poster.jpg',
-});
+    setTimeout(() => {
+        art.fullscreenWeb = false;
+    }, 3000);
+});
pip ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get the player picture-in-picture mode
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'PIP',
+            click: function () {
+                art.pip = !art.pip;
+            },
+        },
+    ],
+});
Warning
Due to browser security mechanisms, user interaction (e.g., a user click on the page) must occur before triggering picture-in-picture.
poster ​
  • Type: Setter/Getter
  • Parameter: String
Set and get the video poster, the poster effect is visible only before the video starts playing.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    poster: '/assets/sample/poster.jpg',
+});
 
-art.on('ready', () => {
-    console.info(art.poster);
-    art.poster = '/assets/sample/poster.jpg?t=0';
-    console.info(art.poster);
-});
mini ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get the player's mini mode
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.poster);
+    art.poster = '/assets/sample/poster.jpg?t=0';
+    console.info(art.poster);
+});
mini ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get the player's mini mode
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.mini = true;
-});
playing ​
  • Type: Getter
  • Parameter: Boolean
Get whether the video is currently playing
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+art.on('ready', () => {
+    art.mini = true;
+});
playing ​
  • Type: Getter
  • Parameter: Boolean
Get whether the video is currently playing
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    console.info(art.playing);
-});
autoSize ​
  • Type: Function
Sets whether the video should auto adjust its size
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.playing);
+});
autoSize ​
  • Type: Function
Sets whether the video should auto adjust its size
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.autoSize();
-});
rect ​
  • Type: Getter
Gets the size and position information of the player
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.autoSize();
+});
rect ​
  • Type: Getter
Gets the size and position information of the player
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(JSON.stringify(art.rect));
-});
Warning
The size and coordinates are obtained via getBoundingClientRect
flip ​
  • Type: Setter/Getter
  • Parameter: String
Set and get the player flip, supports normal, horizontal, vertical
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(JSON.stringify(art.rect));
+});
Warning
The size and coordinates are obtained via getBoundingClientRect
flip ​
  • Type: Setter/Getter
  • Parameter: String
Set and get the player flip, supports normal, horizontal, vertical
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.flip);
-    art.flip = 'horizontal';
-    console.info(art.flip);
-});
playbackRate ​
  • Type: Setter/Getter
  • Parameter: Number Set and get the playback speed of the player
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.flip);
+    art.flip = 'horizontal';
+    console.info(art.flip);
+});
playbackRate ​
  • Type: Setter/Getter
  • Parameter: Number Set and get the playback speed of the player
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.playbackRate);
-    art.playbackRate = 2;
-    console.info(art.playbackRate);
-});
aspectRatio ​
  • Type: Setter/Getter
  • Parameter: String
Set and get the aspect ratio of the player
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.playbackRate);
+    art.playbackRate = 2;
+    console.info(art.playbackRate);
+});
aspectRatio ​
  • Type: Setter/Getter
  • Parameter: String
Set and get the aspect ratio of the player
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.aspectRatio);
-    art.aspectRatio = '16:9';
-    console.info(art.aspectRatio);
-});
autoHeight ​
  • Type: Function
When the container has only width, this attribute can automatically calculate and set the height of the video
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.aspectRatio);
+    art.aspectRatio = '16:9';
+    console.info(art.aspectRatio);
+});
autoHeight ​
  • Type: Function
When the container has only width, this attribute can automatically calculate and set the height of the video
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.autoHeight();
-});
+art.on('ready', () => {
+    art.autoHeight();
+});
 
-art.on('resize', () => {
-    art.autoHeight();
-});
Warning
When your container has only width but you do not know the exact height, this property is very useful as it can automatically calculate the video's height, but you need to make sure when to set this property.
attr ​
  • Type: Function
  • Parameter: String
Dynamically get and set the attributes of the video element
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('resize', () => {
+    art.autoHeight();
+});
Warning
When your container has only width but you do not know the exact height, this property is very useful as it can automatically calculate the video's height, but you need to make sure when to set this property.
attr ​
  • Type: Function
  • Parameter: String
Dynamically get and set the attributes of the video element
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.attr('playsInline'));
-    art.attr('playsInline', true);
-    console.info(art.attr('playsInline'));
-});
type ​
  • Type: Setter/Getter
  • Parameter: String
Dynamically get and set the video type
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.attr('playsInline'));
+    art.attr('playsInline', true);
+    console.info(art.attr('playsInline'));
+});
type ​
  • Type: Setter/Getter
  • Parameter: String
Dynamically get and set the video type
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.type);
-    art.type = 'm3u8';
-    console.info(art.type);
-});
theme ​
  • Type: Setter/Getter
  • Parameter: String
Dynamically get and set the player's theme color
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.type);
+    art.type = 'm3u8';
+    console.info(art.type);
+});
theme ​
  • Type: Setter/Getter
  • Parameter: String
Dynamically get and set the player's theme color
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.theme);
-    art.theme = '#000';
-    console.info(art.theme);
-});
airplay ​
  • Type: Function
Activate airplay
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'AirPlay',
-            click: function () {
-                art.airplay();
-            },
-        },
-    ],
-});
loaded ​
  • Type: Getter
The proportion of the video that is cached, ranging from [0, 1], commonly used with the video:timeupdate event.
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.theme);
+    art.theme = '#000';
+    console.info(art.theme);
+});
airplay ​
  • Type: Function
Activate airplay
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'AirPlay',
+            click: function () {
+                art.airplay();
+            },
+        },
+    ],
+});
loaded ​
  • Type: Getter
The proportion of the video that is cached, ranging from [0, 1], commonly used with the video:timeupdate event.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('video:timeupdate', () => {
-    console.info(art.loaded);
-});
played ​
  • Type: Getter
The proportion of the video that has been played, ranging from [0, 1], commonly used with the video:timeupdate event.
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('video:timeupdate', () => {
+    console.info(art.loaded);
+});
played ​
  • Type: Getter
The proportion of the video that has been played, ranging from [0, 1], commonly used with the video:timeupdate event.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('video:timeupdate', () => {
-    console.info(art.played);
-});
proxy ​
  • Type: Function
A proxy function for DOM events, which essentially proxies addEventListener and removeEventListener. When using proxy to handle events, the event will automatically be destroyed when the player is destroyed.
▶ Run Code
js
var container = document.querySelector('.artplayer-app');
+art.on('video:timeupdate', () => {
+    console.info(art.played);
+});
proxy ​
  • Type: Function
A proxy function for DOM events, which essentially proxies addEventListener and removeEventListener. When using proxy to handle events, the event will automatically be destroyed when the player is destroyed.
▶ Run Code
js
var container = document.querySelector('.artplayer-app');
 
-var art = new Artplayer({
-	container: container,
-	url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+	container: container,
+	url: '/assets/sample/video.mp4',
+});
 
-art.proxy(container, 'click', event => {
-	console.info(event);
-});
Tip
If you need some DOM events to exist only during the lifespan of the player, it is highly recommended to use this function to avoid causing memory leaks.
query ​
  • Type: Function
DOM query function, similar to document.querySelector, but the object being queried is limited within the current player, which can prevent errors due to having the same class name.
▶ Run Code
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
+art.proxy(container, 'click', event => {
+	console.info(event);
+});
Tip
If you need some DOM events to exist only during the lifespan of the player, it is highly recommended to use this function to avoid causing memory leaks.
query ​
  • Type: Function
DOM query function, similar to document.querySelector, but the object being queried is limited within the current player, which can prevent errors due to having the same class name.
▶ Run Code
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
 
-console.info(art.query('.art-video'));
video ​
  • Type: Element
A shortcut to return the video element of the player.
▶ Run Code
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
+console.info(art.query('.art-video'));
video ​
  • Type: Element
A shortcut to return the video element of the player.
▶ Run Code
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
 
-console.info(art.video);
cssVar ​
  • Type: Function
Dynamically getting or setting css variables
▶ Run Code
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
+console.info(art.video);
cssVar ​
  • Type: Function
Dynamically getting or setting css variables
▶ Run Code
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.log(art.cssVar('--art-theme'));
-    art.cssVar('--art-theme', 'green');
-    console.log(art.cssVar('--art-theme'));
-});
quality ​
  • Type: Setter
  • Parameter: Array
Dynamically setting the list of qualities
▶ Run Code
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-	quality: [
-		{
-			default: true,
-			html: 'SD 480P',
-			url: '/assets/sample/video.mp4',
-		},
-		{
-			html: 'HD 720P',
-			url: '/assets/sample/video.mp4',
-		},
-	],
-});
+art.on('ready', () => {
+    console.log(art.cssVar('--art-theme'));
+    art.cssVar('--art-theme', 'green');
+    console.log(art.cssVar('--art-theme'));
+});
quality ​
  • Type: Setter
  • Parameter: Array
Dynamically setting the list of qualities
▶ Run Code
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+	quality: [
+		{
+			default: true,
+			html: 'SD 480P',
+			url: '/assets/sample/video.mp4',
+		},
+		{
+			html: 'HD 720P',
+			url: '/assets/sample/video.mp4',
+		},
+	],
+});
 
-art.on('ready', () => {
-	setTimeout(() => {
-		art.quality = [
-			{
-				default: true,
-				html: '1080P',
-				url: '/assets/sample/video.mp4',
-			},
-			{
-				html: '4K',
-				url: '/assets/sample/video.mp4',
-			},
-		];
-	}, 3000);
-})

-    
+art.on('ready', () => {
+	setTimeout(() => {
+		art.quality = [
+			{
+				default: true,
+				html: '1080P',
+				url: '/assets/sample/video.mp4',
+			},
+			{
+				html: '4K',
+				url: '/assets/sample/video.mp4',
+			},
+		];
+	}, 3000);
+})
+ \ No newline at end of file diff --git a/docs/document/en/component/contextmenu.html b/docs/document/en/component/contextmenu.html index 084bfd3b0..7e5b51a8e 100644 --- a/docs/document/en/component/contextmenu.html +++ b/docs/document/en/component/contextmenu.html @@ -5,105 +5,103 @@ Context Menu | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

Context Menu ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique name of the component, used for marking the class name
indexNumberComponent index, used for display priority
htmlString, ElementThe DOM element of the component
styleObjectStyle object for the component
clickFunctionClick event for the component
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component

Creation ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
+    
Artplayer.js
Appearance
On this page
Context Menu ​
Configuration ​
PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique name of the component, used for marking the class name
indexNumberComponent index, used for display priority
htmlString, ElementThe DOM element of the component
styleObjectStyle object for the component
clickFunctionClick event for the component
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component
Creation ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
 
-art.contextmenu.show = true;
+art.contextmenu.show = true;
 
-// Get the Element of contextmenu by name
-console.info(art.contextmenu['your-menu']);
Add ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+// Get the Element of contextmenu by name
+console.info(art.contextmenu['your-menu']);
Add ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.contextmenu.add({
-    name: 'your-menu',
-    html: 'Your Menu',
-    click: function (...args) {
-        console.info(args);
-        art.contextmenu.show = false;
-    },
-});
+art.contextmenu.add({
+    name: 'your-menu',
+    html: 'Your Menu',
+    click: function (...args) {
+        console.info(args);
+        art.contextmenu.show = false;
+    },
+});
 
-art.contextmenu.show = true;
+art.contextmenu.show = true;
 
-// Get the Element of contextmenu by name
-console.info(art.contextmenu['your-menu']);
Delete ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
+// Get the Element of contextmenu by name
+console.info(art.contextmenu['your-menu']);
Delete ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
 
-art.contextmenu.show = true;
+art.contextmenu.show = true;
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the context menu by name
-        art.contextmenu.remove('your-menu')
-    }, 3000);
-});
Updates ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the context menu by name
+        art.contextmenu.remove('your-menu')
+    }, 3000);
+});
Updates ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
 
-art.contextmenu.show = true;
+art.contextmenu.show = true;
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the contextmenu by name
-        art.contextmenu.update({
-            name: 'your-menu',
-            html: 'Your New Menu',
-        })
-    }, 3000);
-});

-    
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the contextmenu by name
+        art.contextmenu.update({
+            name: 'your-menu',
+            html: 'Your New Menu',
+        })
+    }, 3000);
+});
+ \ No newline at end of file diff --git a/docs/document/en/component/controls.html b/docs/document/en/component/controls.html index 95f5313b4..4cb331fd4 100644 --- a/docs/document/en/component/controls.html +++ b/docs/document/en/component/controls.html @@ -5,152 +5,150 @@ Controller | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

Controller ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringThe unique name of the component for class identification
indexNumberThe index of the component, used for display priority
htmlString, ElementThe component's DOM element
styleObjectThe style object for the component
clickFunctionComponent click event
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component
positionStringleft and right control the position of the controller
selectorArrayAn array of objects for the selection list
onSelectFunctionFunction triggered when an item from the selection list is clicked

Creation ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'your-button',
-            index: 10,
-            position: 'left',
-            html: 'Your Button',
-            tooltip: 'Your Button',
-            style: {
-                color: 'red',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-        {
-            name: 'subtitle',
-            position: 'right',
-            html: 'Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: '<span style="color:red">subtitle 01</span>',
-                },
-                {
-                    html: '<span style="color:yellow">subtitle 02</span>',
-                },
-            ],
-            onSelect: function (item, $dom) {
-                console.info(item, $dom);
-                return 'Your ' + item.html;
-            },
-        },
-    ],
-});
+    
Artplayer.js
Appearance
On this page
Controller ​
Configuration ​
PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringThe unique name of the component for class identification
indexNumberThe index of the component, used for display priority
htmlString, ElementThe component's DOM element
styleObjectThe style object for the component
clickFunctionComponent click event
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component
positionStringleft and right control the position of the controller
selectorArrayAn array of objects for the selection list
onSelectFunctionFunction triggered when an item from the selection list is clicked
Creation ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'your-button',
+            index: 10,
+            position: 'left',
+            html: 'Your Button',
+            tooltip: 'Your Button',
+            style: {
+                color: 'red',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+        {
+            name: 'subtitle',
+            position: 'right',
+            html: 'Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">subtitle 01</span>',
+                },
+                {
+                    html: '<span style="color:yellow">subtitle 02</span>',
+                },
+            ],
+            onSelect: function (item, $dom) {
+                console.info(item, $dom);
+                return 'Your ' + item.html;
+            },
+        },
+    ],
+});
 
-// Get the Element of control by name
-console.info(art.controls['your-button']);
-console.info(art.controls['subtitle']);
Adding ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+// Get the Element of control by name
+console.info(art.controls['your-button']);
+console.info(art.controls['subtitle']);
Adding ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.controls.add({
-    name: 'button1',
-    index: 10,
-    position: 'left',
-    html: 'Your Button',
-    tooltip: 'Your Button',
-    style: {
-        color: 'red',
-    },
-    click: function (...args) {
-        console.info('click', args);
-    },
-    mounted: function (...args) {
-        console.info('mounted', args);
-    },
-});
+art.controls.add({
+    name: 'button1',
+    index: 10,
+    position: 'left',
+    html: 'Your Button',
+    tooltip: 'Your Button',
+    style: {
+        color: 'red',
+    },
+    click: function (...args) {
+        console.info('click', args);
+    },
+    mounted: function (...args) {
+        console.info('mounted', args);
+    },
+});
 
-// Get the Element of control by name
-console.info(art.controls['button1']);
Delete ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'Your Button',
-            tooltip: 'Your Button',
-            style: {
-                color: 'red',
-            },
-        }
-    ]
-});
+// Get the Element of control by name
+console.info(art.controls['button1']);
Delete ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'Your Button',
+            tooltip: 'Your Button',
+            style: {
+                color: 'red',
+            },
+        }
+    ]
+});
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the control by name
-        art.controls.remove('button1');
-    }, 3000);
-});
Update ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: 'subtitle 01',
-                },
-                {
-                    html: 'subtitle 02',
-                },
-            ],
-        }
-    ]
-});
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the control by name
+        art.controls.remove('button1');
+    }, 3000);
+});
Update ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: 'subtitle 01',
+                },
+                {
+                    html: 'subtitle 02',
+                },
+            ],
+        }
+    ]
+});
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the control by name
-        art.controls.update({
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'New Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: 'new subtitle 01',
-                },
-                {
-                    html: 'new subtitle 02',
-                },
-            ],
-        });
-    }, 3000);
-});

-    
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the control by name
+        art.controls.update({
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'New Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: 'new subtitle 01',
+                },
+                {
+                    html: 'new subtitle 02',
+                },
+            ],
+        });
+    }, 3000);
+});
+ \ No newline at end of file diff --git a/docs/document/en/component/layers.html b/docs/document/en/component/layers.html index dc6aac71e..d0047e907 100644 --- a/docs/document/en/component/layers.html +++ b/docs/document/en/component/layers.html @@ -5,124 +5,122 @@ Layer | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

Layer ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique name of the component, used for marking class name
indexNumberComponent index, used for display priority
htmlString, ElementThe DOM element of the component
styleObjectStyle object for the component
clickFunctionClick event for the component
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component

Creation ​

▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'poster',
-            html: `<img style="width: 100px" src="${img}">`,
-            tooltip: 'Poster Tip',
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-    ],
-});
+    
Artplayer.js
Appearance
On this page
Layer ​
Configuration ​
PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique name of the component, used for marking class name
indexNumberComponent index, used for display priority
htmlString, ElementThe DOM element of the component
styleObjectStyle object for the component
clickFunctionClick event for the component
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component
Creation ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'poster',
+            html: `<img style="width: 100px" src="${img}">`,
+            tooltip: 'Poster Tip',
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+    ],
+});
 
-// Get the Element of layer by name
-console.info(art.layers['poster']);
Add ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+// Get the Element of layer by name
+console.info(art.layers['poster']);
Add ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.layers.add({
-    name: 'poster',
-    html: `<img style="width: 100px" src="${img}">`,
-    tooltip: 'Poster Tip',
-    style: {
-        position: 'absolute',
-        top: '50px',
-        right: '50px',
-    },
-    click: function (...args) {
-        console.info('click', args);
-    },
-    mounted: function (...args) {
-        console.info('mounted', args);
-    },
-});
+art.layers.add({
+    name: 'poster',
+    html: `<img style="width: 100px" src="${img}">`,
+    tooltip: 'Poster Tip',
+    style: {
+        position: 'absolute',
+        top: '50px',
+        right: '50px',
+    },
+    click: function (...args) {
+        console.info('click', args);
+    },
+    mounted: function (...args) {
+        console.info('mounted', args);
+    },
+});
 
-// Get the Element of layer by name
-console.info(art.layers['poster']);
Delete ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'poster',
-            html: `<img style="width: 100px" src="${img}">`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-        },
-    ],
-});
+// Get the Element of layer by name
+console.info(art.layers['poster']);
Delete ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'poster',
+            html: `<img style="width: 100px" src="${img}">`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+        },
+    ],
+});
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the layer by name
-        art.layers.remove('poster');
-    }, 3000);
-});
Update ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'poster',
-            html: `<img style="width: 100px" src="${img}">`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-        },
-    ],
-});
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the layer by name
+        art.layers.remove('poster');
+    }, 3000);
+});
Update ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'poster',
+            html: `<img style="width: 100px" src="${img}">`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+        },
+    ],
+});
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the layer by name
-        art.layers.update({
-            name: 'poster',
-            html: `<img style="width: 200px" src="${img}">`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                left: '50px',
-            },
-        });
-    }, 3000);
-});

-    
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the layer by name
+        art.layers.update({
+            name: 'poster',
+            html: `<img style="width: 200px" src="${img}">`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                left: '50px',
+            },
+        });
+    }, 3000);
+});
+ \ No newline at end of file diff --git a/docs/document/en/component/setting.html b/docs/document/en/component/setting.html index e881930d6..002ce1ac3 100644 --- a/docs/document/en/component/setting.html +++ b/docs/document/en/component/setting.html @@ -5,229 +5,227 @@ Settings Panel | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

Settings Panel ​

Built-in ​

First, open the settings panel, and then it comes with four built-in items: flip, playbackRate, aspectRatio, subtitleOffset

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-    subtitleOffset: true,
-});

Create - Selection List ​

PropertyTypeDescription
htmlString, ElementElement's DOM

| icon | String, Element | 元素的图标 | | selector | Array | 元素列表 | | onSelect | Function | 元素点击事件 | | width | Number | 列表宽度 | | tooltip | String | 提示文本 |

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Subtitle',
-            width: 250,
-            tooltip: 'Subtitle 01',
-            selector: [
-                {
-                    default: true,
-                    html: '<span style="color:red">Subtitle 01</span>',
-                    url: '/assets/sample/subtitle.srt?id=1',
-                },
-                {
-                    html: '<span style="color:yellow">Subtitle 02</span>',
-                    url: '/assets/sample/subtitle.srt?id=2',
-                },
-            ],
-            onSelect: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                art.subtitle.url = item.url;
-                return item.html;
-            },
-        },
-        {
-            html: 'Quality',
-            width: 150,
-            tooltip: '1080P',
-            selector: [
-                {
-                    default: true,
-                    html: '1080P',
-                    url: '/assets/sample/video.mp4?id=1080',
-                },
-                {
-                    html: '720P',
-                    url: '/assets/sample/video.mp4?id=720',
-                },
-                {
-                    html: '360P',
-                    url: '/assets/sample/video.mp4?id=360',
-                },
-            ],
-            onSelect: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                art.switchQuality(item.url, item.html);
-                return item.html;
-            },
-        },
-    ],
-});

Creating - Nested Lists ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Multi-level',
-            selector: [
-                {
-                    html: 'Setting 01',
-                    width: 150,
-                    selector: [
-                        {
-                            html: 'Setting 01 - 01',
-                        },
-                        {
-                            html: 'Setting 01 - 02',
-                        },
-                    ],
-                    onSelect: function (item, $dom, event) {
-                        console.info(item, $dom, event);
-                        return item.html;
-                    },
-                },
-                {
-                    html: 'Setting 02',
-                    width: 150,
-                    selector: [
-                        {
-                            html: 'Setting 02 - 01',
-                        },
-                        {
-                            html: 'Setting 02 - 02',
-                        },
-                    ],
-                    onSelect: function (item, $dom, event) {
-                        console.info(item, $dom, event);
-                        return item.html;
-                    },
-                },
-            ],
-        },
-    ],
-});

Create - Toggle Button ​

PropertyTypeDescription
htmlString, ElementElement's DOM element
iconString, ElementElement's icon
switchBooleanButton's default state
onSwitchFunctionButton toggle event
tooltipStringTooltip text
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'PIP Mode',
-            tooltip: 'Close',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            switch: false,
-            onSwitch: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                const nextState = !item.switch;
-                art.pip = nextState;
-                item.tooltip = nextState ? 'Open' : 'Close';
-                return nextState;
-            },
-        },
-    ],
-});

Create - Range Slider ​

AttributeTypeDescription
htmlString, ElementThe element's DOM element
iconString, ElementThe element's icon
rangeArrayDefault state array
onRangeFunctionEvent triggered upon completion
onChangeFunctionEvent triggered on change
tooltipStringTooltip text
js
const range = [5, 1, 10, 1];
-const value = range[0];
-const min = range[1];
-const max = range[2];
-const step = range[3];
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" height="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-            onChange: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                return item.range + 'x';
-            },
-        },
-    ],
-});

Add ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
+    
Artplayer.js
Appearance
On this page
Settings Panel ​
Built-in ​
First, open the settings panel, and then it comes with four built-in items: flip, playbackRate, aspectRatio, subtitleOffset
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    subtitleOffset: true,
+});
Create - Selection List ​
PropertyTypeDescription
htmlString, ElementElement's DOM
| icon | String, Element | 元素的图标 | | selector | Array | 元素列表 | | onSelect | Function | 元素点击事件 | | width | Number | 列表宽度 | | tooltip | String | 提示文本 |
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Subtitle',
+            width: 250,
+            tooltip: 'Subtitle 01',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">Subtitle 01</span>',
+                    url: '/assets/sample/subtitle.srt?id=1',
+                },
+                {
+                    html: '<span style="color:yellow">Subtitle 02</span>',
+                    url: '/assets/sample/subtitle.srt?id=2',
+                },
+            ],
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                art.subtitle.url = item.url;
+                return item.html;
+            },
+        },
+        {
+            html: 'Quality',
+            width: 150,
+            tooltip: '1080P',
+            selector: [
+                {
+                    default: true,
+                    html: '1080P',
+                    url: '/assets/sample/video.mp4?id=1080',
+                },
+                {
+                    html: '720P',
+                    url: '/assets/sample/video.mp4?id=720',
+                },
+                {
+                    html: '360P',
+                    url: '/assets/sample/video.mp4?id=360',
+                },
+            ],
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                art.switchQuality(item.url, item.html);
+                return item.html;
+            },
+        },
+    ],
+});
Creating - Nested Lists ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Multi-level',
+            selector: [
+                {
+                    html: 'Setting 01',
+                    width: 150,
+                    selector: [
+                        {
+                            html: 'Setting 01 - 01',
+                        },
+                        {
+                            html: 'Setting 01 - 02',
+                        },
+                    ],
+                    onSelect: function (item, $dom, event) {
+                        console.info(item, $dom, event);
+                        return item.html;
+                    },
+                },
+                {
+                    html: 'Setting 02',
+                    width: 150,
+                    selector: [
+                        {
+                            html: 'Setting 02 - 01',
+                        },
+                        {
+                            html: 'Setting 02 - 02',
+                        },
+                    ],
+                    onSelect: function (item, $dom, event) {
+                        console.info(item, $dom, event);
+                        return item.html;
+                    },
+                },
+            ],
+        },
+    ],
+});
Create - Toggle Button ​
PropertyTypeDescription
htmlString, ElementElement's DOM element
iconString, ElementElement's icon
switchBooleanButton's default state
onSwitchFunctionButton toggle event
tooltipStringTooltip text
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'PIP Mode',
+            tooltip: 'Close',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            switch: false,
+            onSwitch: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                const nextState = !item.switch;
+                art.pip = nextState;
+                item.tooltip = nextState ? 'Open' : 'Close';
+                return nextState;
+            },
+        },
+    ],
+});
Create - Range Slider ​
AttributeTypeDescription
htmlString, ElementThe element's DOM element
iconString, ElementThe element's icon
rangeArrayDefault state array
onRangeFunctionEvent triggered upon completion
onChangeFunctionEvent triggered on change
tooltipStringTooltip text
js
const range = [5, 1, 10, 1];
+const value = range[0];
+const min = range[1];
+const max = range[2];
+const step = range[3];
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" height="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+            onChange: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                return item.range + 'x';
+            },
+        },
+    ],
+});
Add ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
 
-art.setting.show = true;
+art.setting.show = true;
 
-art.setting.add({
-    html: 'Slider',
-    tooltip: '5x',
-    icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-    range: [5, 1, 10, 1],
-});
Delete ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-    settings: [
-        {
-            name: 'slider',
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-        },
-    ],
-});
+art.setting.add({
+    html: 'Slider',
+    tooltip: '5x',
+    icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+    range: [5, 1, 10, 1],
+});
Delete ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    settings: [
+        {
+            name: 'slider',
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+        },
+    ],
+});
 
-art.setting.show = true;
+art.setting.show = true;
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the setting by name
-        art.setting.remove('slider');
-    }, 3000);
-});
Updates ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            name: 'slider',
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-        },
-    ],
-});
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the setting by name
+        art.setting.remove('slider');
+    }, 3000);
+});
Updates ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            name: 'slider',
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+        },
+    ],
+});
 
-art.setting.show = true;
+art.setting.show = true;
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the setting by name
-        art.setting.update({
-            name: 'slider',
-            html: 'PIP Mode',
-            tooltip: 'Close',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            switch: false,
-        });
-    }, 3000);
-});

-    
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the setting by name
+        art.setting.update({
+            name: 'slider',
+            html: 'PIP Mode',
+            tooltip: 'Close',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            switch: false,
+        });
+    }, 3000);
+});
+ \ No newline at end of file diff --git a/docs/document/en/index.html b/docs/document/en/index.html index 1282eb8c8..940192632 100644 --- a/docs/document/en/index.html +++ b/docs/document/en/index.html @@ -5,195 +5,193 @@ Installation and Usage | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

Installation and Usage ​

Installation ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

Usage ​

js
import Artplayer from 'artplayer';
+    
Artplayer.js
Appearance
On this page
Installation and Usage ​
Installation ​
bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js
Usage ​
js
import Artplayer from 'artplayer';
 
-const art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'path/to/video.mp4',
-});
html
<html>
-    <head>
-        <title>ArtPlayer Demo</title>
-        <meta charset="UTF-8" />
-        <style>
-            .artplayer-app {
-                width: 400px;
-                height: 300px;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app"></div>
-    </body>
-</html>
Warning
The player's size depends on the size of the container container, so your container container must have a size.
You can see more examples of use at the following link
/packages/artplayer-template
Vue.js ​
vue
<template>
-  <div ref="artRef"></div>
-</template>
+const art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'path/to/video.mp4',
+});
html
<html>
+    <head>
+        <title>ArtPlayer Demo</title>
+        <meta charset="UTF-8" />
+        <style>
+            .artplayer-app {
+                width: 400px;
+                height: 300px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app"></div>
+    </body>
+</html>
Warning
The player's size depends on the size of the container container, so your container container must have a size.
You can see more examples of use at the following link
/packages/artplayer-template
Vue.js ​
vue
<template>
+  <div ref="artRef"></div>
+</template>
 
-<script>
-import Artplayer from "artplayer";
+<script>
+import Artplayer from "artplayer";
 
-export default {
-  data() {
-    return {
-      instance: null,
-    };
-  },
-  props: {
-    option: {
-      type: Object,
-      required: true,
-    },
-  },
-  mounted() {
-    this.instance = new Artplayer({
-      ...this.option,
-      container: this.$refs.artRef,
-    });
+export default {
+  data() {
+    return {
+      instance: null,
+    };
+  },
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    this.instance = new Artplayer({
+      ...this.option,
+      container: this.$refs.artRef,
+    });
 
-    this.$nextTick(() => {
-      this.$emit("get-instance", this.instance);
-    });
-  },
-  beforeDestroy() {
-    if (this.instance && this.instance.destroy) {
-      this.instance.destroy(false);
-    }
-  },
-};
-</script>
vue
<template>
-  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
-</template>
+    this.$nextTick(() => {
+      this.$emit("get-instance", this.instance);
+    });
+  },
+  beforeDestroy() {
+    if (this.instance && this.instance.destroy) {
+      this.instance.destroy(false);
+    }
+  },
+};
+</script>
vue
<template>
+  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
+</template>
 
-<script>
-import Artplayer from "./Artplayer.vue";
+<script>
+import Artplayer from "./Artplayer.vue";
 
-export default {
-  data() {
-    return {
-      option: {
-        url: "path/to/video.mp4",
-      },
-      style: {
-        width: "600px",
-        height: "400px",
-        margin: "60px auto 0",
-      },
-    };
-  },
-  components: {
-    Artplayer,
-  },
-  methods: {
-    getInstance(art) {
-      console.info(art);
-    },
-  },
-};
-</script>
Artplayer Not Responsive：
Modifying option directly in Vue.js will not change the player
React.js ​
jsx
import { useEffect, useRef } from 'react';
-import Artplayer from 'artplayer';
+export default {
+  data() {
+    return {
+      option: {
+        url: "path/to/video.mp4",
+      },
+      style: {
+        width: "600px",
+        height: "400px",
+        margin: "60px auto 0",
+      },
+    };
+  },
+  components: {
+    Artplayer,
+  },
+  methods: {
+    getInstance(art) {
+      console.info(art);
+    },
+  },
+};
+</script>
Artplayer Not Responsive：
Modifying option directly in Vue.js will not change the player
React.js ​
jsx
import { useEffect, useRef } from 'react';
+import Artplayer from 'artplayer';
 
-export default function Player({ option, getInstance, ...rest }) {
-    const artRef = useRef();
+export default function Player({ option, getInstance, ...rest }) {
+    const artRef = useRef();
 
-    useEffect(() => {
-        const art = new Artplayer({
-            ...option,
-            container: artRef.current,
-        });
+    useEffect(() => {
+        const art = new Artplayer({
+            ...option,
+            container: artRef.current,
+        });
 
-        if (getInstance && typeof getInstance === 'function') {
-            getInstance(art);
-        }
+        if (getInstance && typeof getInstance === 'function') {
+            getInstance(art);
+        }
 
-        return () => {
-            if (art && art.destroy) {
-                art.destroy(false);
-            }
-        };
-    }, []);
+        return () => {
+            if (art && art.destroy) {
+                art.destroy(false);
+            }
+        };
+    }, []);
 
-    return <div ref={artRef} {...rest}></div>;
-}
jsx
import React from 'react';
-import Artplayer from './ArtPlayer.jsx';
+    return <div ref={artRef} {...rest}></div>;
+}
jsx
import React from 'react';
+import Artplayer from './ArtPlayer.jsx';
 
-function App() {
-    return (
-        <div>
-            <Artplayer
-                option={{
-                    url: 'https://artplayer.org/assets/sample/video.mp4',
-                }}
-                style={{
-                    width: '600px',
-                    height: '400px',
-                    margin: '60px auto 0',
-                }}
-                getInstance={(art) => console.info(art)}
-            />
-        </div>
-    );
-}
+function App() {
+    return (
+        <div>
+            <Artplayer
+                option={{
+                    url: 'https://artplayer.org/assets/sample/video.mp4',
+                }}
+                style={{
+                    width: '600px',
+                    height: '400px',
+                    margin: '60px auto 0',
+                }}
+                getInstance={(art) => console.info(art)}
+            />
+        </div>
+    );
+}
 
-export default App;
Non-responsive Artplayer:
In React.js, directly modifying the option will not change the player
TypeScript ​
Importing Artplayer will automatically import artplayer.d.ts
Vue.js ​
vue
<script setup>
-import Artplayer from 'artplayer';
-const art = ref<Artplayer>(null);
-art.value = new Artplayer();
-</script>
React.js ​
jsx
import Artplayer from 'artplayer';
-const art = useRef<Artplayer>(null);
-art.current = new Artplayer();
Option ​
you can also separately import the type for options
ts
import Artplayer from 'artplayer';
-import { type Option } from 'artplayer/types/option';
+export default App;
Non-responsive Artplayer:
In React.js, directly modifying the option will not change the player
TypeScript ​
Importing Artplayer will automatically import artplayer.d.ts
Vue.js ​
vue
<script setup>
+import Artplayer from 'artplayer';
+const art = ref<Artplayer>(null);
+art.value = new Artplayer();
+</script>
React.js ​
jsx
import Artplayer from 'artplayer';
+const art = useRef<Artplayer>(null);
+art.current = new Artplayer();
Option ​
you can also separately import the type for options
ts
import Artplayer from 'artplayer';
+import { type Option } from 'artplayer/types/option';
 
-const option: Option = {
-    container: '.artplayer-app',
-    url: './assets/sample/video.mp4',
-};
+const option: Option = {
+    container: '.artplayer-app',
+    url: './assets/sample/video.mp4',
+};
 
-option.volume = 0.5;
+option.volume = 0.5;
 
-const art = new Artplayer(option);
Complete TypeScript Definitions
packages/artplayer/types
JavaScript ​
Sometimes your js file may lose the TypeScript type hints, in this case, you can manually import the types
Variables:
js
/**
- * @type {import("artplayer")}
- */
-let art = null;
Parameters:
js
/**
- * @param {import("artplayer")} art
- */
-function getInstance(art) {
-  //
-}
Properties:
js
export default {
-  data() {
-    return {
-      /**
-       * @type {import("artplayer")}
-       */
-      art: null,
-    }
-  }
-}
Options:
js
/**
- * @type {import("artplayer/types/option").Option}
- */
+const art = new Artplayer(option);
Complete TypeScript Definitions
packages/artplayer/types
JavaScript ​
Sometimes your js file may lose the TypeScript type hints, in this case, you can manually import the types
Variables:
js
/**
+ * @type {import("artplayer")}
+ */
+let art = null;
Parameters:
js
/**
+ * @param {import("artplayer")} art
+ */
+function getInstance(art) {
+  //
+}
Properties:
js
export default {
+  data() {
+    return {
+      /**
+       * @type {import("artplayer")}
+       */
+      art: null,
+    }
+  }
+}
Options:
js
/**
+ * @type {import("artplayer/types/option").Option}
+ */
 
-const option = {
-    container: '.artplayer-app',
-    url: './assets/sample/video.mp4',
-};
+const option = {
+    container: '.artplayer-app',
+    url: './assets/sample/video.mp4',
+};
 
-option.volume = 0.5;
+option.volume = 0.5;
 
-const art8 = new Artplayer(option);
Ancient Browsers ​
The production build of artplayer.js is only compatible with the latest major version of Chrome: last 1 Chrome version
For ancient browsers, you can use the artplayer.legacy.js file, which is compatible up to: IE 11
js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js
If you need to support even older browsers, please modify the following configuration and then build it yourself:
Build configuration: scripts/build.js
Refer to documentation: browserslist
- +const art8 = new Artplayer(option);

Ancient Browsers ​

The production build of artplayer.js is only compatible with the latest major version of Chrome: last 1 Chrome version

For ancient browsers, you can use the artplayer.legacy.js file, which is compatible up to: IE 11

js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

If you need to support even older browsers, please modify the following configuration and then build it yourself:

Build configuration: scripts/build.js

Refer to documentation: browserslist

+ \ No newline at end of file diff --git a/docs/document/en/library/dash.html b/docs/document/en/library/dash.html index 3031b09b9..25e27a161 100644 --- a/docs/document/en/library/dash.html +++ b/docs/document/en/library/dash.html @@ -5,46 +5,44 @@ dash.js | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

dash.js ​

👉 https://github.com/Dash-Industry-Forum/dash.js

▶ Run Code
js
function playMpd(video, url, art) {
-    if (dashjs.supportsMediaSource()) {
-        if (art.dash) art.dash.destroy();
-        const dash = dashjs.MediaPlayer().create();
-        dash.initialize(video, url, art.option.autoplay);
-        art.dash = dash; 
-        art.on('destroy', () => dash.destroy());
-    } else {
-        art.notice.show = 'Unsupported playback format: mpd';
-    }
-}
+    
Artplayer.js
Appearance
On this page
dash.js ​
👉 https://github.com/Dash-Industry-Forum/dash.js
 ▶ Run Code 
js
function playMpd(video, url, art) {
+    if (dashjs.supportsMediaSource()) {
+        if (art.dash) art.dash.destroy();
+        const dash = dashjs.MediaPlayer().create();
+        dash.initialize(video, url, art.option.autoplay);
+        art.dash = dash; 
+        art.on('destroy', () => dash.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: mpd';
+    }
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
-    type: 'mpd',
-    customType: {
-        mpd: playMpd
-    },
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
+    type: 'mpd',
+    customType: {
+        mpd: playMpd
+    },
+});
 
-art.on('ready', () => {
-    console.info(art.dash);
-});

-    
+art.on('ready', () => {
+    console.info(art.dash);
+});
+ \ No newline at end of file diff --git a/docs/document/en/library/flv.html b/docs/document/en/library/flv.html index 4b949a251..873bf9f90 100644 --- a/docs/document/en/library/flv.html +++ b/docs/document/en/library/flv.html @@ -5,47 +5,45 @@ flv.js | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

flv.js ​

👉 https://github.com/Bilibili/flv.js

▶ Run Code
js
function playFlv(video, url, art) {
-    if (flvjs.isSupported()) {
-        if (art.flv) art.flv.destroy();
-        const flv = flvjs.createPlayer({ type: 'flv', url });
-        flv.attachMediaElement(video);
-        flv.load();
-        art.flv = flv; 
-        art.on('destroy', () => flv.destroy());
-    } else {
-        art.notice.show = 'Unsupported playback format: flv';
-    }
-}
+    
Artplayer.js
Appearance
On this page
flv.js ​
👉 https://github.com/Bilibili/flv.js
 ▶ Run Code 
js
function playFlv(video, url, art) {
+    if (flvjs.isSupported()) {
+        if (art.flv) art.flv.destroy();
+        const flv = flvjs.createPlayer({ type: 'flv', url });
+        flv.attachMediaElement(video);
+        flv.load();
+        art.flv = flv; 
+        art.on('destroy', () => flv.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: flv';
+    }
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.flv',
-    type: 'flv',
-    customType: {
-        flv: playFlv,
-    },
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.flv',
+    type: 'flv',
+    customType: {
+        flv: playFlv,
+    },
+});
 
-art.on('ready', () => {
-    console.info(art.flv);
-});

-    
+art.on('ready', () => {
+    console.info(art.flv);
+});
+ \ No newline at end of file diff --git a/docs/document/en/library/hls.html b/docs/document/en/library/hls.html index 4535dd364..f216eb2e9 100644 --- a/docs/document/en/library/hls.html +++ b/docs/document/en/library/hls.html @@ -5,49 +5,47 @@ hls.js | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

hls.js ​

👉 https://github.com/video-dev/hls.js

▶ Run Code
js
function playM3u8(video, url, art) {
-    if (Hls.isSupported()) {
-        if (art.hls) art.hls.destroy();
-        const hls = new Hls();
-        hls.loadSource(url);
-        hls.attachMedia(video);
-        art.hls = hls;
-        art.on('destroy', () => hls.destroy());
-    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-        video.src = url;
-    } else {
-        art.notice.show = 'Unsupported playback format: m3u8';
-    }
-}
+    
Artplayer.js
Appearance
On this page
hls.js ​
👉 https://github.com/video-dev/hls.js
 ▶ Run Code 
js
function playM3u8(video, url, art) {
+    if (Hls.isSupported()) {
+        if (art.hls) art.hls.destroy();
+        const hls = new Hls();
+        hls.loadSource(url);
+        hls.attachMedia(video);
+        art.hls = hls;
+        art.on('destroy', () => hls.destroy());
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = url;
+    } else {
+        art.notice.show = 'Unsupported playback format: m3u8';
+    }
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
-    type: 'm3u8',
-    customType: {
-        m3u8: playM3u8,
-    },
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+    type: 'm3u8',
+    customType: {
+        m3u8: playM3u8,
+    },
+});
 
-art.on('ready', () => {
-    console.info(art.hls);
-});

-    
+art.on('ready', () => {
+    console.info(art.hls);
+});
+ \ No newline at end of file diff --git a/docs/document/en/plugin/ads.html b/docs/document/en/plugin/ads.html index 1f31d5ce2..5651ede3a 100644 --- a/docs/document/en/plugin/ads.html +++ b/docs/document/en/plugin/ads.html @@ -5,70 +5,68 @@ Video Ads | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

Video Ads ​

Demo ​

👉 View Full Demo

Installation ​

bash
npm install artplayer-plugin-ads
bash
yarn add artplayer-plugin-ads
bash
pnpm add artplayer-plugin-ads
html
<script src="path/to/artplayer-plugin-ads.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
bash
https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js

Usage ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-    fullscreen: true,
-    fullscreenWeb: true,
-    plugins: [
-        artplayerPluginAds({
-            // HTML ad, ignored if it's a video ad
-            html: '<img src="/assets/sample/poster.jpg">',
+    
Artplayer.js
Appearance
On this page
Video Ads ​
Demo ​
👉 View Full Demo
Installation ​
bash
npm install artplayer-plugin-ads
bash
yarn add artplayer-plugin-ads
bash
pnpm add artplayer-plugin-ads
html
<script src="path/to/artplayer-plugin-ads.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
bash
https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
Usage ​
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    plugins: [
+        artplayerPluginAds({
+            // HTML ad, ignored if it's a video ad
+            html: '<img src="/assets/sample/poster.jpg">',
 
-            // URL of the video ad
-            video: '/assets/sample/test1.mp4',
+            // URL of the video ad
+            video: '/assets/sample/test1.mp4',
 
-            // Ad redirect URL, no redirection if empty
-            url: 'http://artplayer.org',
+            // Ad redirect URL, no redirection if empty
+            url: 'http://artplayer.org',
 
-            // The duration that must be watched, which can't be skipped, in seconds
-            // If this value is greater than or equal to totalDuration, the ad can't be closed early
-            // If this value is less than or equal to 0, then the ad can be closed at any time
-            playDuration: 5,
+            // The duration that must be watched, which can't be skipped, in seconds
+            // If this value is greater than or equal to totalDuration, the ad can't be closed early
+            // If this value is less than or equal to 0, then the ad can be closed at any time
+            playDuration: 5,
 
-            // Total duration of the ad, in seconds
-            totalDuration: 10,
+            // Total duration of the ad, in seconds
+            totalDuration: 10,
 
-            // Whether the video ad is muted by default
-            muted: false,
+            // Whether the video ad is muted by default
+            muted: false,
 
-            // Multilingual support
-            i18n: {
-                close: 'Close ad',
-                countdown: '%s seconds',
-                detail: 'See details',
-                canBeClosed: '%s seconds until the ad can be closed',
-            },
-        }),
-    ],
-});
+            // Multilingual support
+            i18n: {
+                close: 'Close ad',
+                countdown: '%s seconds',
+                detail: 'See details',
+                canBeClosed: '%s seconds until the ad can be closed',
+            },
+        }),
+    ],
+});
 
-// ad is clicked
-art.on('artplayerPluginAds:click', (ads) => {
-    console.info(ads);
-});
+// ad is clicked
+art.on('artplayerPluginAds:click', (ads) => {
+    console.info(ads);
+});
 
-// Ad skipped
-art.on('artplayerPluginAds:skip', (ads) => {
-    console.info(ads);
-});

-    
+// Ad skipped
+art.on('artplayerPluginAds:skip', (ads) => {
+    console.info(ads);
+});
+ \ No newline at end of file diff --git a/docs/document/en/plugin/danmuku.html b/docs/document/en/plugin/danmuku.html index 6c1508527..b7fc47852 100644 --- a/docs/document/en/plugin/danmuku.html +++ b/docs/document/en/plugin/danmuku.html @@ -5,306 +5,304 @@ Danmuku | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

Danmuku ​

Demo ​

👉 View Full Demo

Installation ​

bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js

Option ​

js
{
-    danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
-    speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
-    opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
-    fontSize: 25, // 字体大小，支持数字和百分比
-    color: '#FFFFFF', // 默认字体颜色
-    mode: 0, // 默认模式，0-滚动，1-静止
-    margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
-    antiOverlap: true, // 是否防重叠
-    useWorker: true, // 是否使用 web worker
-    synchronousPlayback: false, // 是否同步到播放速度
-    filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
-    lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
-    maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
-    minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
-    maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
-    theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
-    heatmap: true, // 是否开启弹幕热度图, 默认为 false
-    beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
-    // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
-    mount: document.querySelector('.artplayer-danmuku'),
-}

Using Danmuku Array ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            // Danmuku array
-            danmuku: [
-                {
-                    text: '111', // Danmuku text
-                    time: 1, // Send time, in seconds
-                    color: '#fff', // Danmuku local color
-                    border: false, // Whether to display outline
-                    mode: 0, // Danmuku mode: 0 for scrolling, 1 for stationary
-                },
-                {
-                    text: '222',
-                    time: 2,
-                    color: 'red',
-                    border: true,
-                    mode: 0,
-                },
-                {
-                    text: '333',
-                    time: 3,
-                    color: 'green',
-                    border: false,
-                    mode: 1,
-                },
-            ],
-        }),
-    ],
-});

Using Danmuku XML ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            // Danmuku XML file, consistent with the danmuku format of the Bilibili website
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});

Using Asynchronous Call ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            // Use Promise to return asynchronously
-            danmuku: function () {
-                return new Promise((resolve) => {
-                    return resolve([
-                        {
-                            text: '111',
-                            time: 1,
-                        },
-                        {
-                            text: '222',
-                            time: 2,
-                        },
-                        {
-                            text: '333',
-                            time: 3,
-                        },
-                    ]);
-                });
-            },
-        }),
-    ],
-});

hide/show ​

Hide or show the bullet comments with the methods hide and show.

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: 'Hide Danmuku',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.hide();
-            },
-        },
-        {
-            position: 'right',
-            html: 'Show Danmuku',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.show();
-            },
-        },
-    ],
-});

isHide ​

Judge whether the current barrage is hidden or displayed with the isHide property.

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: 'Hide Barrage',
-            click: function (_, event) {
-                if (art.plugins.artplayerPluginDanmuku.isHide) {
-                    art.plugins.artplayerPluginDanmuku.show();
-                    event.target.innerText = 'Hide Barrage';
-                } else {
-                    art.plugins.artplayerPluginDanmuku.hide();
-                    event.target.innerText = 'Show Barrage';
-                }
-            },
-        },
-    ],
-});

emit ​

Send a real-time danmaku message through the emit method

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: 'Send Danmaku',
-            click: function () {
-                var text = prompt('Please enter the danmaku text', 'Danmaku test text');
-                if (!text || !text.trim()) return;
-                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
-                art.plugins.artplayerPluginDanmuku.emit({
-                    text: text,
-                    color: color,
-                    border: true,
-                });
-            },
-        },
-    ],
-});

config ​

Change the barrage configuration in real-time with the config method, supported attributes include:

  • danmuku
  • speed
  • opacity
  • fontSize
  • color
  • mode
  • margin
  • antiOverlap
  • synchronousPlayback
  • filter
  • lockTime
  • beforeEmit
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: 'Danmaku size：<input type="range" min="12" max="50" step="1" value="25">',
-            style: {
-                display: 'flex',
-                alignItems: 'center',
-            },
-            mounted: function ($setting) {
-                const $range = $setting.querySelector('input[type=range]');
-                $range.addEventListener('change', () => {
-                    art.plugins.artplayerPluginDanmuku.config({
-                        fontSize: Number($range.value),
-                    });
-                });
-            },
-        },
-    ],
-});

load ​

The load method can be used to reload the danmu data source or switch to new danmu.

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: 'Reload Danmu',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.load();
-            },
-        },
-        {
-            position: 'right',
-            html: 'Switch Danmu',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.config({
-                    danmuku: '/assets/sample/danmuku-v2.xml',
-                });
-                art.plugins.artplayerPluginDanmuku.load();
-            },
-        },
-    ],
-});

reset ​

Used to clear the current displayed barrages

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
+    
Artplayer.js
Appearance
On this page
Danmuku ​
Demo ​
👉 View Full Demo
Installation ​
bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
Option ​
js
{
+    danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
+    speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
+    opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
+    fontSize: 25, // 字体大小，支持数字和百分比
+    color: '#FFFFFF', // 默认字体颜色
+    mode: 0, // 默认模式，0-滚动，1-静止
+    margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
+    antiOverlap: true, // 是否防重叠
+    useWorker: true, // 是否使用 web worker
+    synchronousPlayback: false, // 是否同步到播放速度
+    filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
+    lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
+    maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
+    minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
+    maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
+    theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
+    heatmap: true, // 是否开启弹幕热度图, 默认为 false
+    beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
+    // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
+    mount: document.querySelector('.artplayer-danmuku'),
+}
Using Danmuku Array ​
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            // Danmuku array
+            danmuku: [
+                {
+                    text: '111', // Danmuku text
+                    time: 1, // Send time, in seconds
+                    color: '#fff', // Danmuku local color
+                    border: false, // Whether to display outline
+                    mode: 0, // Danmuku mode: 0 for scrolling, 1 for stationary
+                },
+                {
+                    text: '222',
+                    time: 2,
+                    color: 'red',
+                    border: true,
+                    mode: 0,
+                },
+                {
+                    text: '333',
+                    time: 3,
+                    color: 'green',
+                    border: false,
+                    mode: 1,
+                },
+            ],
+        }),
+    ],
+});
Using Danmuku XML ​
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            // Danmuku XML file, consistent with the danmuku format of the Bilibili website
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
Using Asynchronous Call ​
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            // Use Promise to return asynchronously
+            danmuku: function () {
+                return new Promise((resolve) => {
+                    return resolve([
+                        {
+                            text: '111',
+                            time: 1,
+                        },
+                        {
+                            text: '222',
+                            time: 2,
+                        },
+                        {
+                            text: '333',
+                            time: 3,
+                        },
+                    ]);
+                });
+            },
+        }),
+    ],
+});
hide/show ​
Hide or show the bullet comments with the methods hide and show.
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Hide Danmuku',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.hide();
+            },
+        },
+        {
+            position: 'right',
+            html: 'Show Danmuku',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.show();
+            },
+        },
+    ],
+});
isHide ​
Judge whether the current barrage is hidden or displayed with the isHide property.
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Hide Barrage',
+            click: function (_, event) {
+                if (art.plugins.artplayerPluginDanmuku.isHide) {
+                    art.plugins.artplayerPluginDanmuku.show();
+                    event.target.innerText = 'Hide Barrage';
+                } else {
+                    art.plugins.artplayerPluginDanmuku.hide();
+                    event.target.innerText = 'Show Barrage';
+                }
+            },
+        },
+    ],
+});
emit ​
Send a real-time danmaku message through the emit method
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Send Danmaku',
+            click: function () {
+                var text = prompt('Please enter the danmaku text', 'Danmaku test text');
+                if (!text || !text.trim()) return;
+                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
+                art.plugins.artplayerPluginDanmuku.emit({
+                    text: text,
+                    color: color,
+                    border: true,
+                });
+            },
+        },
+    ],
+});
config ​
Change the barrage configuration in real-time with the config method, supported attributes include:
  • danmuku
  • speed
  • opacity
  • fontSize
  • color
  • mode
  • margin
  • antiOverlap
  • synchronousPlayback
  • filter
  • lockTime
  • beforeEmit
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Danmaku size：<input type="range" min="12" max="50" step="1" value="25">',
+            style: {
+                display: 'flex',
+                alignItems: 'center',
+            },
+            mounted: function ($setting) {
+                const $range = $setting.querySelector('input[type=range]');
+                $range.addEventListener('change', () => {
+                    art.plugins.artplayerPluginDanmuku.config({
+                        fontSize: Number($range.value),
+                    });
+                });
+            },
+        },
+    ],
+});
load ​
The load method can be used to reload the danmu data source or switch to new danmu.
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Reload Danmu',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+        {
+            position: 'right',
+            html: 'Switch Danmu',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.config({
+                    danmuku: '/assets/sample/danmuku-v2.xml',
+                });
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+    ],
+});
reset ​
Used to clear the current displayed barrages
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
 
-art.on('resize', () => {
-    art.plugins.artplayerPluginDanmuku.reset();
-});
option ​
Used to get the current barrage configuration
 ▶ Run Code 
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
+art.on('resize', () => {
+    art.plugins.artplayerPluginDanmuku.reset();
+});
option ​
Used to get the current barrage configuration
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
 
-art.on('ready', () => {
-    console.info(art.plugins.artplayerPluginDanmuku.option);
-});
Event ​
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
+art.on('ready', () => {
+    console.info(art.plugins.artplayerPluginDanmuku.option);
+});
Event ​
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
 
-art.on('artplayerPluginDanmuku:emit', (danmu) => {
-    console.info('新增弹幕', danmu);
-});
+art.on('artplayerPluginDanmuku:emit', (danmu) => {
+    console.info('新增弹幕', danmu);
+});
 
-art.on('artplayerPluginDanmuku:loaded', (danmus) => {
-    console.info('加载弹幕', danmus.length);
-});
+art.on('artplayerPluginDanmuku:loaded', (danmus) => {
+    console.info('加载弹幕', danmus.length);
+});
 
-art.on('artplayerPluginDanmuku:error', (error) => {
-    console.info('加载错误', error);
-});
+art.on('artplayerPluginDanmuku:error', (error) => {
+    console.info('加载错误', error);
+});
 
-art.on('artplayerPluginDanmuku:config', (option) => {
-    console.info('配置变化', option);
-});
+art.on('artplayerPluginDanmuku:config', (option) => {
+    console.info('配置变化', option);
+});
 
-art.on('artplayerPluginDanmuku:stop', () => {
-    console.info('弹幕停止');
-});
+art.on('artplayerPluginDanmuku:stop', () => {
+    console.info('弹幕停止');
+});
 
-art.on('artplayerPluginDanmuku:start', () => {
-    console.info('弹幕开始');
-});
+art.on('artplayerPluginDanmuku:start', () => {
+    console.info('弹幕开始');
+});
 
-art.on('artplayerPluginDanmuku:hide', () => {
-    console.info('弹幕隐藏');
-});
+art.on('artplayerPluginDanmuku:hide', () => {
+    console.info('弹幕隐藏');
+});
 
-art.on('artplayerPluginDanmuku:show', () => {
-    console.info('弹幕显示');
-});
+art.on('artplayerPluginDanmuku:show', () => {
+    console.info('弹幕显示');
+});
 
-art.on('artplayerPluginDanmuku:destroy', () => {
-    console.info('弹幕销毁');
-});

-    
+art.on('artplayerPluginDanmuku:destroy', () => {
+    console.info('弹幕销毁');
+});
+ \ No newline at end of file diff --git a/docs/document/en/plugin/dash-quality.html b/docs/document/en/plugin/dash-quality.html index 9606760ea..a3c0ed92b 100644 --- a/docs/document/en/plugin/dash-quality.html +++ b/docs/document/en/plugin/dash-quality.html @@ -5,23 +5,21 @@ Dash Video Quality | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

Dash Video Quality ​

Demo ​

👉 View the full demo

Installation ​

bash
npm install artplayer-plugin-dash-quality
bash
yarn add artplayer-plugin-dash-quality
bash
pnpm add artplayer-plugin-dash-quality
html
<script src="path/to/artplayer-plugin-dash-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
bash
https://unpkg.com/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
- +
Artplayer.js

Appearance

On this page

Dash Video Quality ​

Demo ​

👉 View the full demo

Installation ​

bash
npm install artplayer-plugin-dash-quality
bash
yarn add artplayer-plugin-dash-quality
bash
pnpm add artplayer-plugin-dash-quality
html
<script src="path/to/artplayer-plugin-dash-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
bash
https://unpkg.com/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
+ \ No newline at end of file diff --git a/docs/document/en/plugin/hls-quality.html b/docs/document/en/plugin/hls-quality.html index a249388f7..1c6801614 100644 --- a/docs/document/en/plugin/hls-quality.html +++ b/docs/document/en/plugin/hls-quality.html @@ -5,23 +5,21 @@ HLS Quality | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

HLS Quality ​

Demonstration ​

👉 View the full demo

Installation ​

bash
npm install artplayer-plugin-hls-quality
bash
yarn add artplayer-plugin-hls-quality
bash
pnpm add artplayer-plugin-hls-quality
html
<script src="path/to/artplayer-plugin-hls-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
bash
https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
- +
Artplayer.js

Appearance

On this page

HLS Quality ​

Demonstration ​

👉 View the full demo

Installation ​

bash
npm install artplayer-plugin-hls-quality
bash
yarn add artplayer-plugin-hls-quality
bash
pnpm add artplayer-plugin-hls-quality
html
<script src="path/to/artplayer-plugin-hls-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
bash
https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
+ \ No newline at end of file diff --git a/docs/document/en/plugin/iframe.html b/docs/document/en/plugin/iframe.html index b8fbcb976..4cf26b235 100644 --- a/docs/document/en/plugin/iframe.html +++ b/docs/document/en/plugin/iframe.html @@ -5,190 +5,186 @@ Iframe Control | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

Iframe Control ​

Description ​

With this plugin, you can easily control the player inside the cross-domain iframe.html page from within index.html. For example, you can control the functionalities of the iframe.html player from index.html or retrieve the values of the iframe.html player.

Demonstration ​

👉 View full demonstration

Installation ​

bash
npm install artplayer-plugin-iframe
bash
yarn add artplayer-plugin-iframe
bash
pnpm add artplayer-plugin-iframe
html
<script src="path/to/artplayer-plugin-iframe.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
bash
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js

Usage ​

html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-    </head>
-    <body>
-        <iframe id="iframe"></iframe>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            const iframe = new ArtplayerPluginIframe({
-                // Iframe element
-                iframe: document.querySelector('#iframe'),
-                // Iframe url
-                url: 'path/to/iframe.html',
-            });
+    
Artplayer.js
Appearance
On this page
Iframe Control ​
Description ​
With this plugin, you can easily control the player inside the cross-domain iframe.html page from within index.html. For example, you can control the functionalities of the iframe.html player from index.html or retrieve the values of the iframe.html player.
Demonstration ​
👉 View full demonstration
Installation ​
bash
npm install artplayer-plugin-iframe
bash
yarn add artplayer-plugin-iframe
bash
pnpm add artplayer-plugin-iframe
html
<script src="path/to/artplayer-plugin-iframe.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
bash
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
Usage ​
html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <iframe id="iframe"></iframe>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            const iframe = new ArtplayerPluginIframe({
+                // Iframe element
+                iframe: document.querySelector('#iframe'),
+                // Iframe url
+                url: 'path/to/iframe.html',
+            });
 
-            // Send message to iframe
-            iframe.commit(() => {
-                var art = new Artplayer({
-                    container: '.artplayer-app',
-                    url: 'path/to/video.mp4',
-                });
-            });
-        </script>
-    </body>
-</html>
html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-        <style>
-            html,
-            body {
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                padding: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
-        <script src="path/to/artplayer.js"></script>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            // Inject scripts to receive messages from instances
-            ArtplayerPluginIframe.inject();
-        </script>
-    </body>
-</html>
index.html Interface ​
commit ​
Push messages from index.html to iframe.html. This function will run inside iframe.html and can also be used to asynchronously retrieve values from within iframe.html.
js
iframe.commit(() => {
-    var art = new Artplayer({
-        container: '.artplayer-app',
-        url: 'path/to/video.mp4',
-    });
-});
+            // Send message to iframe
+            iframe.commit(() => {
+                var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: 'path/to/video.mp4',
+                });
+            });
+        </script>
+    </body>
+</html>
html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            // Inject scripts to receive messages from instances
+            ArtplayerPluginIframe.inject();
+        </script>
+    </body>
+</html>
index.html Interface ​
commit ​
Push messages from index.html to iframe.html. This function will run inside iframe.html and can also be used to asynchronously retrieve values from within iframe.html.
js
iframe.commit(() => {
+    var art = new Artplayer({
+        container: '.artplayer-app',
+        url: 'path/to/video.mp4',
+    });
+});
 
-iframe.commit(() => {
-    art.seek = 5;
-});
+iframe.commit(() => {
+    art.seek = 5;
+});
 
-// Get the value from the iframe.html
-(async function () {
-    // Use the return keyword
-    var currentTime = await iframe.commit(() => {
-        return art.currentTime;
-    });
+// Get the value from the iframe.html
+(async function () {
+    // Use the return keyword
+    var currentTime = await iframe.commit(() => {
+        return art.currentTime;
+    });
 
-    // or use the resolve method
-    var currentTime2 = await iframe.commit((resolve) => {
-        setTimeout(() => {
-            resolve(art.currentTime);
-        }, 1000);
-    });
-})();
message ​
Receive messages from iframe.html in index.html
js
iframe.message((event) => {
-    console.info(event);
-});
destroy ​
After destruction, index.html can no longer communicate with iframe.html
js
iframe.destroy();
iframe.html Interface ​
Warning
The iframe.html interface can only run inside iframe.html
inject ​
Inject a script, receive messages from index.html
js
ArtplayerPluginIframe.inject();
postMessage ​
Push messages to index.html
js
iframe.message((event) => {
-    console.info(event);
-});
+    // or use the resolve method
+    var currentTime2 = await iframe.commit((resolve) => {
+        setTimeout(() => {
+            resolve(art.currentTime);
+        }, 1000);
+    });
+})();
message ​
Receive messages from iframe.html in index.html
js
iframe.message((event) => {
+    console.info(event);
+});
destroy ​
After destruction, index.html can no longer communicate with iframe.html
js
iframe.destroy();
iframe.html Interface ​
Warning
The iframe.html interface can only run inside iframe.html
inject ​
Inject a script, receive messages from index.html
js
ArtplayerPluginIframe.inject();
postMessage ​
Push messages to index.html
js
iframe.message((event) => {
+    console.info(event);
+});
 
-iframe.commit(() => {
-    ArtplayerPluginIframe.postMessage({
-        type: 'currentTime',
-        data: art.currentTime,
-    });
-});
例子 ​
最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 iframe.html 里的 fullscreenWeb 事件并通知到 index.html 即可
html

-<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-    </head>
-    <body>
-        <iframe id="iframe"></iframe>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <style>
-            .fullscreenWeb {
-                position: fixed;
-                z-index: 9999;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                right: 0;
-                bottom: 0;
-            }
-        </style>
-        <script>
-            const $iframe = document.querySelector('#iframe');
-            const iframe = new ArtplayerPluginIframe({
-                iframe: $iframe,
-                url: 'path/to/iframe.html',
-            });
+iframe.commit(() => {
+    ArtplayerPluginIframe.postMessage({
+        type: 'currentTime',
+        data: art.currentTime,
+    });
+});
例子 ​
最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 iframe.html 里的 fullscreenWeb 事件并通知到 index.html 即可
html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <iframe id="iframe"></iframe>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <style>
+            .fullscreenWeb {
+                position: fixed;
+                z-index: 9999;
+                width: 100%;
+                height: 100%;
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+            }
+        </style>
+        <script>
+            const $iframe = document.querySelector('#iframe');
+            const iframe = new ArtplayerPluginIframe({
+                iframe: $iframe,
+                url: 'path/to/iframe.html',
+            });
 
-            iframe.message(({ type, data }) => {
-                switch (type) {
-                    case 'fullscreenWeb':
-                        if (data) {
-                            $iframe.classList.add('fullscreenWeb');
-                        } else {
-                            $iframe.classList.remove('fullscreenWeb');
-                        }
-                        break;
-                    default:
-                        break;
-                }
-            });
+            iframe.message(({ type, data }) => {
+                switch (type) {
+                    case 'fullscreenWeb':
+                        if (data) {
+                            $iframe.classList.add('fullscreenWeb');
+                        } else {
+                            $iframe.classList.remove('fullscreenWeb');
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            });
 
-            iframe.commit(() => {
-                var art = new Artplayer({
-                    container: '.artplayer-app',
-                    url: 'path/to/video.mp4',
-                });
+            iframe.commit(() => {
+                var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: 'path/to/video.mp4',
+                });
 
-                art.on('fullscreenWeb', (state) => {
-                    ArtplayerPluginIframe.postMessage({
-                        type: 'fullscreenWeb',
-                        data: state,
-                    });
-                });
-            });
-        </script>
-    </body>
-</html>
html

-<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-        <style>
-            html,
-            body {
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                padding: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
-        <script src="path/to/artplayer.js"></script>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            ArtplayerPluginIframe.inject();
-        </script>
-    </body>
-</html>

-    
+                art.on('fullscreenWeb', (state) => {
+                    ArtplayerPluginIframe.postMessage({
+                        type: 'fullscreenWeb',
+                        data: state,
+                    });
+                });
+            });
+        </script>
+    </body>
+</html>
html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            ArtplayerPluginIframe.inject();
+        </script>
+    </body>
+</html>
+ \ No newline at end of file diff --git a/docs/document/en/start/i18n.html b/docs/document/en/start/i18n.html index 4eb9b1f19..76552075a 100644 --- a/docs/document/en/start/i18n.html +++ b/docs/document/en/start/i18n.html @@ -5,74 +5,72 @@ Language Settings | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

Language Settings ​

DANGER

Given the increasing number of bundled multilingual packs, starting from version 5.1.0, the core code of artplayer.js will no longer include other languages besides Simplified Chinese and English. You need to import the required languages on your own.

WARNING

When a language cannot be matched, English will be displayed by default. For i18n usage, refer to: artplayer/types/i18n.d.ts

Default Languages ​

The default languages are: en, zh-cn, which do not require manual import.

js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'zh-cn', // or 'en'
-});

Importing Languages ​

Language files before packaging are located in: artplayer/src/i18n/*.js. You are welcome to add your language. Packaged language files are located at: artplayer/dist/i18n/*.js

Manually imported languages include: cs, es, fa, fr, id, pl, ru, zh-tw

js
import id from 'artplayer/dist/i18n/id.js';
-import zhTw from 'artplayer/dist/i18n/zh-tw.js';
+    
Artplayer.js
Appearance
On this page
Language Settings ​
DANGER
Given the increasing number of bundled multilingual packs, starting from version 5.1.0, the core code of artplayer.js will no longer include other languages besides Simplified Chinese and English. You need to import the required languages on your own.
WARNING
When a language cannot be matched, English will be displayed by default. For i18n usage, refer to: artplayer/types/i18n.d.ts
Default Languages ​
The default languages are: en, zh-cn, which do not require manual import.
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'zh-cn', // or 'en'
+});
Importing Languages ​
Language files before packaging are located in: artplayer/src/i18n/*.js. You are welcome to add your language. Packaged language files are located at: artplayer/dist/i18n/*.js
Manually imported languages include: cs, es, fa, fr, id, pl, ru, zh-tw
js
import id from 'artplayer/dist/i18n/id.js';
+import zhTw from 'artplayer/dist/i18n/zh-tw.js';
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: { 
-        id: id,
-        'zh-tw': zhTw,
-    },
-    lang: 'zh-tw',
-});
js
<script src="artplayer/dist/i18n/id.js"></script>
-<script src="artplayer/dist/i18n/zh-tw.js"></script>
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: { 
+        id: id,
+        'zh-tw': zhTw,
+    },
+    lang: 'zh-tw',
+});
js
<script src="artplayer/dist/i18n/id.js"></script>
+<script src="artplayer/dist/i18n/zh-tw.js"></script>
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: { 
-        id: window['artplayer-i18n-id'],
-        'zh-tw': window['artplayer-i18n-zh-tw'],
-    },
-    lang: 'zh-tw',
-});
Add Language ​
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'your-lang',
-    i18n: {
-        'your-lang': {
-            Play: 'Your Play'
-        },
-    },
-});
Modify Language ​
js
import zhTw from 'artplayer/i18n/zh-tw.js';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: { 
+        id: window['artplayer-i18n-id'],
+        'zh-tw': window['artplayer-i18n-zh-tw'],
+    },
+    lang: 'zh-tw',
+});
Add Language ​
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'your-lang',
+    i18n: {
+        'your-lang': {
+            Play: 'Your Play'
+        },
+    },
+});
Modify Language ​
js
import zhTw from 'artplayer/i18n/zh-tw.js';
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: {
-        // Change the default language
-        'zh-cn': {
-            Play: 'Your Play'
-        },
-        // Change the imported language
-        'zh-tw': {
-            ...zhTw,
-            Play: 'Your Play'
-        },
-    },
-});
- +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + i18n: { + // Change the default language + 'zh-cn': { + Play: 'Your Play' + }, + // Change the imported language + 'zh-tw': { + ...zhTw, + Play: 'Your Play' + }, + }, +}); + \ No newline at end of file diff --git a/docs/document/en/start/option.html b/docs/document/en/start/option.html index 11f8c1580..f8b2f6ebd 100644 --- a/docs/document/en/start/option.html +++ b/docs/document/en/start/option.html @@ -5,402 +5,400 @@ Basic Options | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

Basic Options ​

container ​

  • Type: String, Element
  • Default: #artplayer

The DOM container where the player mounts

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app', 
-    // container: document.querySelector('.artplayer-app'),
-    url: '/assets/sample/video.mp4',
-});

You may need to initialize the size of the container element, like:

css
.artplayer-app {
-    width: 400px;
-    height: 300px;
-}

Or use aspect-ratio:

css
.artplayer-app {
-    aspect-ratio: 16/9;
-}

Tip

Among all options, only container is mandatory.

url ​

  • Type: String
  • Default: ''

The video source address

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

Sometimes the url is not known so quickly, in which case you can set the url asynchronously.

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-});
+    
Artplayer.js
Appearance
On this page
Basic Options ​
container ​
  • Type: String, Element
  • Default: #artplayer
The DOM container where the player mounts
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app', 
+    // container: document.querySelector('.artplayer-app'),
+    url: '/assets/sample/video.mp4',
+});
You may need to initialize the size of the container element, like:
css
.artplayer-app {
+    width: 400px;
+    height: 300px;
+}
Or use aspect-ratio:
css
.artplayer-app {
+    aspect-ratio: 16/9;
+}
Tip
Among all options, only container is mandatory.
url ​
  • Type: String
  • Default: ''
The video source address
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
Sometimes the url is not known so quickly, in which case you can set the url asynchronously.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+});
 
-setTimeout(() => {
-    art.url = '/assets/sample/video.mp4';
-}, 1000);
Note
The default support is for three video file formats: .mp4, .ogg, .webm.
If you need to play other formats such as .m3u8 or .flv, please refer to the Third-party Libraries on the left side.
id ​
  • Type: String
  • Default: ''
The unique identifier of the player, currently used only for remembering playback with autoplayback
▶ Run Code
js
var art = new Artplayer({
-    id: 'your-url-id',
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
onReady ​
  • Type: Function
  • Default: undefined
The constructor accepts a function as the second argument, which is triggered when the player is successfully initialized and the video is ready to play, similar to the ready event
▶ Run Code
js
var art = new Artplayer(
-    {
-        container: '.artplayer-app',
-        url: '/assets/sample/video.mp4',
-        muted: true,
-    },
-    function onReady(art) {
-        this.play()
-    },
-);
Equivalent to:
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+setTimeout(() => {
+    art.url = '/assets/sample/video.mp4';
+}, 1000);
Note
The default support is for three video file formats: .mp4, .ogg, .webm.
If you need to play other formats such as .m3u8 or .flv, please refer to the Third-party Libraries on the left side.
id ​
  • Type: String
  • Default: ''
The unique identifier of the player, currently used only for remembering playback with autoplayback
▶ Run Code
js
var art = new Artplayer({
+    id: 'your-url-id',
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
onReady ​
  • Type: Function
  • Default: undefined
The constructor accepts a function as the second argument, which is triggered when the player is successfully initialized and the video is ready to play, similar to the ready event
▶ Run Code
js
var art = new Artplayer(
+    {
+        container: '.artplayer-app',
+        url: '/assets/sample/video.mp4',
+        muted: true,
+    },
+    function onReady(art) {
+        this.play()
+    },
+);
Equivalent to:
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    art.play();
-});
Warning
The this inside the callback function refers to the player instance, but if an arrow function is used for the callback, this will not point to the player instance.
poster ​
  • Type: String
  • Default: ''
The poster of the video, which only appears when the player is initialized and before it starts playing.
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    poster: '/assets/sample/poster.jpg',
-});
theme ​
  • Type: String
  • Default: #f00
Player theme color, currently used for progress bar and highlight elements
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    theme: '#ffad00',
-});
volume ​
  • Type: Number
  • Default: 0.7
The default volume of the player
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    volume: 0.5,
-});
Warning
The player will cache the size of the last volume. When the player is initialized next time (such as refreshing the page), it will read this cached value.
isLive ​
  • Type: Boolean
  • Default: false
Use live mode, which will hide the progress bar and playback time
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    isLive: true,
-});
muted ​
  • Type: Boolean
  • Default: false
Whether to mute by default
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
autoplay ​
  • Type: Boolean
  • Default: false
Whether to play automatically
  • Default: false
Autoplay
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoplay: true,
-    muted: true,
-});
Warning
If you want the video to autoplay by default upon entering the page, muted must be set to true. For more information, please read Autoplay Policy Changes
autoSize ​
  • Type: Boolean
  • Default: false
The size of the player will by default fill the entire container, which often results in black bars. This value can automatically adjust the player size to hide the black bars, similar to css's object-fit: cover;
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-});
autoMini ​
  • Type: Boolean
  • Default: false
Automatically enter mini mode when the player scrolls out of the browser viewport
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoMini: true,
-});
loop ​
  • Type: Boolean
  • Default: false
Whether to loop the video
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    loop: true,
-});
flip ​
  • Type: Boolean
  • Default: false
Whether to show the video flip feature, currently only available in Settings Panel and Context Menu
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    flip: true,
-    setting: true,
-});
playbackRate ​
  • Type: Boolean
  • Default: false
Whether to show the playback speed feature of the video, it will appear in Settings Panel and Context Menu
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    playbackRate: true,
-    setting: true,
-});
aspectRatio ​
  • Type: Boolean
  • Default: false
Displays the video aspect ratio feature, it will appear in the Settings Panel and Context Menu
▶ Run Code
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 the screenshot button, it will appear in the toolbar and context menu Display Screenshot function in the bottom control bar
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    screenshot: true,
-});
Warning
Due to browser security mechanisms, if the video source address and the website are cross-origin, screenshot failure may occur
setting ​
  • Type: Boolean
  • Default: false
Display the toggle button for the Settings Panel in the bottom control bar
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
hotkey ​
  • Type: Boolean
  • Default: true
Whether to use hotkeys
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    hotkey: true,
-});
HotkeyDescription
↑Increase volume
↓Decrease volume
←Fast forward video
→Rewind video
spaceToggle play/pause
Tip
These hotkeys will only work after the player gains focus (such as after clicking on the player).
pip ​
  • Type: Boolean
  • Default: false Show the Picture in Picture switch button on the bottom control bar
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    pip: true,
-});
mutex ​
  • Type: Boolean
  • Default: true
If there are multiple players on the page, should only one player be allowed to play at a time
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    mutex: true,
-});
fullscreen ​
  • Type: Boolean
  • Default: false Display the Window Fullscreen button on the control bar at the bottom
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-});
fullscreenWeb ​
  • Type: Boolean
  • Default: false
Display the Web Fullscreen button on the control bar at the bottom
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
subtitleOffset ​
  • Type: Boolean
  • Default: false
Subtitle time offset, the range is [-5s, 5s], appearing in the Settings panel
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitleOffset: true,
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-    setting: true,
-});
miniProgressBar ​
  • Type: Boolean
  • Default: false
Mini progress bar, only appears when the player loses focus and is playing
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    miniProgressBar: true,
-});
useSSR ​
  • Type: Boolean
  • Default: false
Whether to use SSR (Server-Side Rendering) mount mode, useful if you want to pre-render the player's required HTML before the player mounts
You can access the player's required HTML through Artplayer.html
▶ Run Code
js
var $container = document.querySelector('.artplayer-app');
-$container.innerHTML = Artplayer.html;
+art.on('ready', () => {
+    art.play();
+});
Warning
The this inside the callback function refers to the player instance, but if an arrow function is used for the callback, this will not point to the player instance.
poster ​
  • Type: String
  • Default: ''
The poster of the video, which only appears when the player is initialized and before it starts playing.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    poster: '/assets/sample/poster.jpg',
+});
theme ​
  • Type: String
  • Default: #f00
Player theme color, currently used for progress bar and highlight elements
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    theme: '#ffad00',
+});
volume ​
  • Type: Number
  • Default: 0.7
The default volume of the player
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    volume: 0.5,
+});
Warning
The player will cache the size of the last volume. When the player is initialized next time (such as refreshing the page), it will read this cached value.
isLive ​
  • Type: Boolean
  • Default: false
Use live mode, which will hide the progress bar and playback time
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    isLive: true,
+});
muted ​
  • Type: Boolean
  • Default: false
Whether to mute by default
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
autoplay ​
  • Type: Boolean
  • Default: false
Whether to play automatically
  • Default: false
Autoplay
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoplay: true,
+    muted: true,
+});
Warning
If you want the video to autoplay by default upon entering the page, muted must be set to true. For more information, please read Autoplay Policy Changes
autoSize ​
  • Type: Boolean
  • Default: false
The size of the player will by default fill the entire container, which often results in black bars. This value can automatically adjust the player size to hide the black bars, similar to css's object-fit: cover;
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+});
autoMini ​
  • Type: Boolean
  • Default: false
Automatically enter mini mode when the player scrolls out of the browser viewport
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoMini: true,
+});
loop ​
  • Type: Boolean
  • Default: false
Whether to loop the video
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    loop: true,
+});
flip ​
  • Type: Boolean
  • Default: false
Whether to show the video flip feature, currently only available in Settings Panel and Context Menu
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    flip: true,
+    setting: true,
+});
playbackRate ​
  • Type: Boolean
  • Default: false
Whether to show the playback speed feature of the video, it will appear in Settings Panel and Context Menu
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    playbackRate: true,
+    setting: true,
+});
aspectRatio ​
  • Type: Boolean
  • Default: false
Displays the video aspect ratio feature, it will appear in the Settings Panel and Context Menu
▶ Run Code
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 the screenshot button, it will appear in the toolbar and context menu Display Screenshot function in the bottom control bar
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    screenshot: true,
+});
Warning
Due to browser security mechanisms, if the video source address and the website are cross-origin, screenshot failure may occur
setting ​
  • Type: Boolean
  • Default: false
Display the toggle button for the Settings Panel in the bottom control bar
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
hotkey ​
  • Type: Boolean
  • Default: true
Whether to use hotkeys
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    hotkey: true,
+});
HotkeyDescription
↑Increase volume
↓Decrease volume
←Fast forward video
→Rewind video
spaceToggle play/pause
Tip
These hotkeys will only work after the player gains focus (such as after clicking on the player).
pip ​
  • Type: Boolean
  • Default: false Show the Picture in Picture switch button on the bottom control bar
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    pip: true,
+});
mutex ​
  • Type: Boolean
  • Default: true
If there are multiple players on the page, should only one player be allowed to play at a time
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    mutex: true,
+});
fullscreen ​
  • Type: Boolean
  • Default: false Display the Window Fullscreen button on the control bar at the bottom
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+});
fullscreenWeb ​
  • Type: Boolean
  • Default: false
Display the Web Fullscreen button on the control bar at the bottom
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
subtitleOffset ​
  • Type: Boolean
  • Default: false
Subtitle time offset, the range is [-5s, 5s], appearing in the Settings panel
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitleOffset: true,
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+    setting: true,
+});
miniProgressBar ​
  • Type: Boolean
  • Default: false
Mini progress bar, only appears when the player loses focus and is playing
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    miniProgressBar: true,
+});
useSSR ​
  • Type: Boolean
  • Default: false
Whether to use SSR (Server-Side Rendering) mount mode, useful if you want to pre-render the player's required HTML before the player mounts
You can access the player's required HTML through Artplayer.html
▶ Run Code
js
var $container = document.querySelector('.artplayer-app');
+$container.innerHTML = Artplayer.html;
 
-var art = new Artplayer({
-    container: $container,
-    url: '/assets/sample/video.mp4',
-    useSSR: true,
-});
playsInline ​
  • Type: Boolean
  • Default: true
Whether to use playsInline mode on mobile devices
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    playsInline: true,
-});
layers ​
  • Type: Array
  • Default: []
Initializes custom layers
▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'poster',
-            html: `<img style="width: 100px" src="${img}">`,
-            style: {
-                position: 'absolute',
-                top: '20px',
-                right: '20px',
-                opacity: '.9',
-            },
-            click: function (...args) {
-                console.info('click', args);
-                art.layers.show = false;
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-    ],
-});
Component Configuration Please refer to the following address:
/component/layers.html
settings ​
  • Type: Array
  • Default: []
Initializes custom settings panel
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'setting01',
-            selector: [
-                {
-                    html: 'setting01-01',
-                },
-                {
-                    html: 'setting01-02',
-                },
-            ],
-            onSelect: function (...args) {
-                console.info(args);
-            },
-        },
-        {
-            html: 'setting02',
-            selector: [
-                {
-                    html: 'setting02-01',
-                },
-                {
-                    html: 'setting02-02',
-                },
-            ],
-            onSelect: function (...args) {
-                console.info(args);
-            },
-        },
-    ],
-});
Settings Panel Please refer to the following address
/component/setting.html
contextmenu ​
  • Type: Array
  • Default: []
Initialize custom context menu
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            html: 'your-menu',
-            click: function (...args) {
-                console.info('click', args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
Component Configuration Please refer to the following address:
/component/contextmenu.html- Type:
controls ​
  • Type: Array
  • Default: []
Initializes custom bottom control bar
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'left',
-            html: 'your-control',
-            tooltip: 'Your Control',
-            style: {
-                color: 'green',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-        },
-    ],
-});
Component Configuration Refer to the following address:
/component/controls.html
quality ​
  • Type: Array
  • Default: []
Whether to show the quality selection list in the bottom control bar
PropertyTypeDescription
defaultBooleanDefault quality
htmlStringQuality name
urlStringQuality URL
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    quality: [
-        {
-            default: true,
-            html: 'SD 480P',
-            url: '/assets/sample/video.mp4',
-        },
-        {
-            html: 'HD 720P',
-            url: '/assets/sample/video.mp4',
-        },
-    ],
-});
highlight ​
  • Type: Array
  • Default: []
Show highlight information on the progress bar
PropertyTypeDescription
timeNumberHighlight time (in seconds)
textStringHighlight text
▶ Run Code
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: '－－终わり－－',
-        },
-    ],
-});
plugins ​
  • Type: Array
  • Default: []
Initialize custom plugins
▶ Run Code
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
+var art = new Artplayer({
+    container: $container,
+    url: '/assets/sample/video.mp4',
+    useSSR: true,
+});
playsInline ​
  • Type: Boolean
  • Default: true
Whether to use playsInline mode on mobile devices
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    playsInline: true,
+});
layers ​
  • Type: Array
  • Default: []
Initializes custom layers
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'poster',
+            html: `<img style="width: 100px" src="${img}">`,
+            style: {
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+                opacity: '.9',
+            },
+            click: function (...args) {
+                console.info('click', args);
+                art.layers.show = false;
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+    ],
+});
Component Configuration Please refer to the following address:
/component/layers.html
settings ​
  • Type: Array
  • Default: []
Initializes custom settings panel
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'setting01',
+            selector: [
+                {
+                    html: 'setting01-01',
+                },
+                {
+                    html: 'setting01-02',
+                },
+            ],
+            onSelect: function (...args) {
+                console.info(args);
+            },
+        },
+        {
+            html: 'setting02',
+            selector: [
+                {
+                    html: 'setting02-01',
+                },
+                {
+                    html: 'setting02-02',
+                },
+            ],
+            onSelect: function (...args) {
+                console.info(args);
+            },
+        },
+    ],
+});
Settings Panel Please refer to the following address
/component/setting.html
contextmenu ​
  • Type: Array
  • Default: []
Initialize custom context menu
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            html: 'your-menu',
+            click: function (...args) {
+                console.info('click', args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
Component Configuration Please refer to the following address:
/component/contextmenu.html- Type:
controls ​
  • Type: Array
  • Default: []
Initializes custom bottom control bar
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'left',
+            html: 'your-control',
+            tooltip: 'Your Control',
+            style: {
+                color: 'green',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+        },
+    ],
+});
Component Configuration Refer to the following address:
/component/controls.html
quality ​
  • Type: Array
  • Default: []
Whether to show the quality selection list in the bottom control bar
PropertyTypeDescription
defaultBooleanDefault quality
htmlStringQuality name
urlStringQuality URL
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    quality: [
+        {
+            default: true,
+            html: 'SD 480P',
+            url: '/assets/sample/video.mp4',
+        },
+        {
+            html: 'HD 720P',
+            url: '/assets/sample/video.mp4',
+        },
+    ],
+});
highlight ​
  • Type: Array
  • Default: []
Show highlight information on the progress bar
PropertyTypeDescription
timeNumberHighlight time (in seconds)
textStringHighlight text
▶ Run Code
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: '－－终わり－－',
+        },
+    ],
+});
plugins ​
  • Type: Array
  • Default: []
Initialize custom plugins
▶ Run Code
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [myPlugin],
-});
thumbnails ​
  • Type: Object
  • Default: {}
Set thumbnails on the progress bar
PropertyTypeDescription
urlStringThumbnail URL
numberNumberNumber of thumbnails
columnNumberColumns of thumbnails
widthNumberThumbnail width
heightNumberThumbnail height
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    thumbnails: {
-        url: '/assets/sample/thumbnails.png',
-        number: 60,
-        column: 10,
-    },
-});
Online thumbnail generation
artplayer-tool-thumbnail
subtitle ​
  • Type: Object
  • Default: {}
Set the video subtitles, supporting subtitle formats: vtt, srt, ass
PropertyTypeDescription
nameStringSubtitle name
urlStringSubtitle URL
typeStringSubtitle type, options: vtt, srt, ass
| style | Object | Subtitle style | | encoding | String | Subtitle encoding, default utf-8 | | escape | Boolean | Whether to escape html tags, default true | | onVttLoad | Function | Function to modify vtt text |
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-        type: 'srt',
-        encoding: 'utf-8',
-        escape: true,
-        style: {
-            color: '#03A9F4',
-            'font-size': '30px',
-        },
-    },
-});
moreVideoAttr ​
  • Type: Object
  • Default: {'controls': false, 'preload': 'metadata'}
Additional video attributes, these attributes will be directly written into the video element
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    moreVideoAttr: {
-        'webkit-playsinline': true,
-        playsInline: true,
-    },
-});
icons ​
  • Type: Object
  • Default: {}
Used to replace default icons, supports Html strings and HTMLElement
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    icons: {
-        loading: '<img src="/assets/img/loading.gif">',
-        state: '<img src="/assets/img/state.png">',
-    },
-});
Definition of all icons
artplayer/types/icons.d.ts
type ​
  • Type: String
  • Default: ''
Used to specify the format of the video, which is used in conjunction with customType. By default, the video format is the same as the file extension of the video URL (such as .m3u8, .mkv, .ts). However, sometimes the video URL does not have the correct file extension, so it needs to be specifically stated.
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.m3u8',
-    type: 'm3u8',
-});
Recognition of file extensions
The player can only parse this type of file extension: /assets/sample/video.m3u8
But it cannot parse this type of file extension: /assets/sample/video?type=m3u8
Therefore, if you use customType, it is best to specify type as well
customType ​
  • Type: Object
  • Default: {}
Matches the video's type to delegate the video decoding to a third-party program for processing. The processing function can receive three parameters:
  • video: Video DOM element
  • url: Video address
  • art: Current instance
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.m3u8',
-    customType: {
-        m3u8: function (video, url, art) {
-            //
-        },
-    },
-});
lang ​
  • Type: String
  • Default: navigator.language.toLowerCase()
Default display language, currently supports: en, zh-cn
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'en',
-});
More language settings
/start/i18n.html
i18n ​
  • Type: Object
  • Default: {}
Custom i18n configuration, which will be deeply merged with the built-in i18n
Add your language:
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'your-lang',
-    i18n: {
-        'your-lang': {
-            Play: 'Your Play'
-        },
-    },
-});
Modifying the existing language
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: {
-        'zh-cn': {
-            Play: 'Your Play'
-        },
-        'zh-tw': {
-            Play: 'Your Play'
-        },
-    },
-});
More language settings
/start/i18n.html
lock ​
  • Type: Boolean
  • Default: false
Whether to display a lock button on mobile to hide the bottom control bar
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lock: true,
-});
fastForward ​
  • Type: Boolean
  • Default: false
Whether to add fast forward function by long pressing on the video on mobile devices
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});
autoPlayback ​
  • Type: Boolean
  • Default: false
Whether to use the automatic playback feature
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    id: 'your-url-id',
-    autoPlayback: true,
-});
Warning
Because the player by default uses url as the key to cache the playback progress
But if the url of the same video is different, then you need to use id to identify the unique key of the video
autoOrientation ​
  • Type: Boolean
  • Default: false
Whether to rotate the player on mobile web pages in full screen according to the video size and the viewport dimensions
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoOrientation: true,
-});
airplay ​
  • Type: Boolean
  • Default: false
Whether to display the airplay button, currently only some browsers support this feature
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    airplay: true,
-});
cssVar ​
  • Type: Object
  • Default: {}
Used to change built-in CSS variables
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    cssVar: {
-        //
-    },
-});
Reference for cssVar syntax
artplayer/types/cssVar.d.ts

-    
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [myPlugin],
+});

thumbnails ​

  • Type: Object
  • Default: {}

Set thumbnails on the progress bar

PropertyTypeDescription
urlStringThumbnail URL
numberNumberNumber of thumbnails
columnNumberColumns of thumbnails
widthNumberThumbnail width
heightNumberThumbnail height
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    thumbnails: {
+        url: '/assets/sample/thumbnails.png',
+        number: 60,
+        column: 10,
+    },
+});

Online thumbnail generation

artplayer-tool-thumbnail

subtitle ​

  • Type: Object
  • Default: {}

Set the video subtitles, supporting subtitle formats: vtt, srt, ass

PropertyTypeDescription
nameStringSubtitle name
urlStringSubtitle URL
typeStringSubtitle type, options: vtt, srt, ass

| style | Object | Subtitle style | | encoding | String | Subtitle encoding, default utf-8 | | escape | Boolean | Whether to escape html tags, default true | | onVttLoad | Function | Function to modify vtt text |

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+        type: 'srt',
+        encoding: 'utf-8',
+        escape: true,
+        style: {
+            color: '#03A9F4',
+            'font-size': '30px',
+        },
+    },
+});

moreVideoAttr ​

  • Type: Object
  • Default: {'controls': false, 'preload': 'metadata'}

Additional video attributes, these attributes will be directly written into the video element

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    moreVideoAttr: {
+        'webkit-playsinline': true,
+        playsInline: true,
+    },
+});

icons ​

  • Type: Object
  • Default: {}

Used to replace default icons, supports Html strings and HTMLElement

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    icons: {
+        loading: '<img src="/assets/img/loading.gif">',
+        state: '<img src="/assets/img/state.png">',
+    },
+});

Definition of all icons

artplayer/types/icons.d.ts

type ​

  • Type: String
  • Default: ''

Used to specify the format of the video, which is used in conjunction with customType. By default, the video format is the same as the file extension of the video URL (such as .m3u8, .mkv, .ts). However, sometimes the video URL does not have the correct file extension, so it needs to be specifically stated.

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.m3u8',
+    type: 'm3u8',
+});

Recognition of file extensions

The player can only parse this type of file extension: /assets/sample/video.m3u8

But it cannot parse this type of file extension: /assets/sample/video?type=m3u8

Therefore, if you use customType, it is best to specify type as well

customType ​

  • Type: Object
  • Default: {}

Matches the video's type to delegate the video decoding to a third-party program for processing. The processing function can receive three parameters:

  • video: Video DOM element
  • url: Video address
  • art: Current instance
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.m3u8',
+    customType: {
+        m3u8: function (video, url, art) {
+            //
+        },
+    },
+});

lang ​

  • Type: String
  • Default: navigator.language.toLowerCase()

Default display language, currently supports: en, zh-cn

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'en',
+});

More language settings

/start/i18n.html

i18n ​

  • Type: Object
  • Default: {}

Custom i18n configuration, which will be deeply merged with the built-in i18n

Add your language:

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'your-lang',
+    i18n: {
+        'your-lang': {
+            Play: 'Your Play'
+        },
+    },
+});

Modifying the existing language

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: {
+        'zh-cn': {
+            Play: 'Your Play'
+        },
+        'zh-tw': {
+            Play: 'Your Play'
+        },
+    },
+});

More language settings

/start/i18n.html

lock ​

  • Type: Boolean
  • Default: false

Whether to display a lock button on mobile to hide the bottom control bar

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lock: true,
+});

fastForward ​

  • Type: Boolean
  • Default: false

Whether to add fast forward function by long pressing on the video on mobile devices

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});

autoPlayback ​

  • Type: Boolean
  • Default: false

Whether to use the automatic playback feature

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    id: 'your-url-id',
+    autoPlayback: true,
+});

Warning

Because the player by default uses url as the key to cache the playback progress

But if the url of the same video is different, then you need to use id to identify the unique key of the video

autoOrientation ​

  • Type: Boolean
  • Default: false

Whether to rotate the player on mobile web pages in full screen according to the video size and the viewport dimensions

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoOrientation: true,
+});

airplay ​

  • Type: Boolean
  • Default: false

Whether to display the airplay button, currently only some browsers support this feature

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    airplay: true,
+});

cssVar ​

  • Type: Object
  • Default: {}

Used to change built-in CSS variables

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    cssVar: {
+        //
+    },
+});

Reference for cssVar syntax

artplayer/types/cssVar.d.ts

+ \ No newline at end of file diff --git a/docs/document/hashmap.json b/docs/document/hashmap.json index 3c84e8b93..0c8b144c3 100644 --- a/docs/document/hashmap.json +++ b/docs/document/hashmap.json @@ -1 +1 @@ -{"advanced_class.md":"AIz4erpV","advanced_plugin.md":"B2M4UGjM","advanced_global.md":"lpEckIz8","advanced_built-in.md":"t2yKAA1L","component_contextmenu.md":"ArGFk5wS","component_controls.md":"0jTUQQ0o","component_layers.md":"NOoeaoRV","en_advanced_class.md":"9GzYikQ5","advanced_property.md":"D8Xu-RJa","en_advanced_built-in.md":"z2x4Ba_k","advanced_event.md":"UnGzuDid","component_setting.md":"p_fVirBN","en_advanced_plugin.md":"Y8KYMmTM","en_advanced_global.md":"qRhgbcq8","en_advanced_event.md":"zSK-qc-R","en_component_contextmenu.md":"SYOH84zB","en_advanced_property.md":"Do7trmU_","en_component_controls.md":"IARYvQ-y","en_component_layers.md":"jnNJVITB","en_component_setting.md":"nFvHHMIg","en_library_flv.md":"ishIQbK4","en_library_dash.md":"Jpp-XowT","en_library_hls.md":"hGNwocGY","en_plugin_ads.md":"9yiWT-DL","en_plugin_dash-quality.md":"6u3ORxbU","en_plugin_hls-quality.md":"ASrjORd8","en_index.md":"Rh7gVg1U","en_start_i18n.md":"U7_kdB72","en_plugin_danmuku.md":"JrPwnjtm","en_plugin_iframe.md":"4Juyzc_J","library_dash.md":"OIMp2Mfb","library_flv.md":"S3Dt2Ece","library_hls.md":"dMAWlqwL","plugin_ads.md":"gRoRf0IC","index.md":"GsXLLJ7H","plugin_dash-quality.md":"l9HmSZHU","plugin_hls-quality.md":"pI7BTVQv","start_i18n.md":"amUnvbSR","plugin_iframe.md":"_V2kijq2","en_start_option.md":"bVliSlll","plugin_danmuku.md":"6Sr90uTr","start_option.md":"K_YHCZdS"} +{"component_contextmenu.md":"fd267b7b","component_controls.md":"26e168bb","component_layers.md":"e77c2250","en_advanced_built-in.md":"594a1bdd","en_plugin_ads.md":"58cff8db","en_library_flv.md":"86217f64","en_start_i18n.md":"3dd9042d","en_library_dash.md":"e9cf5101","en_component_controls.md":"0f436d61","advanced_plugin.md":"6beaac37","advanced_global.md":"6c8f7ed7","advanced_class.md":"093c0eb3","en_advanced_global.md":"e0d9b7d1","en_advanced_property.md":"50568d20","plugin_hls-quality.md":"1bd7508a","library_flv.md":"2c005fa8","en_advanced_class.md":"081fc725","en_plugin_dash-quality.md":"e4ac85b7","en_plugin_hls-quality.md":"f81c5868","en_component_layers.md":"7c6bb293","plugin_ads.md":"9ab59996","library_dash.md":"7ec0db41","plugin_iframe.md":"70937a79","en_plugin_danmuku.md":"7f61da0a","en_advanced_plugin.md":"1474c5cb","en_library_hls.md":"fbd5bf84","advanced_built-in.md":"9e773b8f","advanced_property.md":"2c9c0303","component_setting.md":"eb2ccc76","plugin_dash-quality.md":"9e6180e5","en_component_contextmenu.md":"1179a46a","en_plugin_iframe.md":"353a1a79","library_hls.md":"d0ec0f48","advanced_event.md":"703c3ca8","start_i18n.md":"1612b4a2","en_index.md":"f106ccd1","en_component_setting.md":"1eba86a5","index.md":"09ef185d","en_start_option.md":"4c3bbf55","plugin_danmuku.md":"df77c020","en_advanced_event.md":"f2625316","start_option.md":"93a8abff"} diff --git a/docs/document/index.html b/docs/document/index.html index 6ea340871..a17c6793c 100644 --- a/docs/document/index.html +++ b/docs/document/index.html @@ -5,195 +5,193 @@ 安装使用 | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

安装使用 ​

安装 ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

使用 ​

js
import Artplayer from 'artplayer';
+    
Artplayer.js
Appearance
On this page
安装使用 ​
安装 ​
bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js
使用 ​
js
import Artplayer from 'artplayer';
 
-const art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'path/to/video.mp4',
-});
html
<html>
-    <head>
-        <title>ArtPlayer Demo</title>
-        <meta charset="UTF-8" />
-        <style>
-            .artplayer-app {
-                width: 400px;
-                height: 300px;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app"></div>
-    </body>
-</html>
提示
播放器的尺寸依赖于容器 container 的尺寸，所以你的容器 container 必须是有尺寸的
以下链接可以看到更多的使用例子
/packages/artplayer-template
Vue.js ​
vue
<template>
-  <div ref="artRef"></div>
-</template>
+const art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'path/to/video.mp4',
+});
html
<html>
+    <head>
+        <title>ArtPlayer Demo</title>
+        <meta charset="UTF-8" />
+        <style>
+            .artplayer-app {
+                width: 400px;
+                height: 300px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app"></div>
+    </body>
+</html>
提示
播放器的尺寸依赖于容器 container 的尺寸，所以你的容器 container 必须是有尺寸的
以下链接可以看到更多的使用例子
/packages/artplayer-template
Vue.js ​
vue
<template>
+  <div ref="artRef"></div>
+</template>
 
-<script>
-import Artplayer from "artplayer";
+<script>
+import Artplayer from "artplayer";
 
-export default {
-  data() {
-    return {
-      instance: null,
-    };
-  },
-  props: {
-    option: {
-      type: Object,
-      required: true,
-    },
-  },
-  mounted() {
-    this.instance = new Artplayer({
-      ...this.option,
-      container: this.$refs.artRef,
-    });
+export default {
+  data() {
+    return {
+      instance: null,
+    };
+  },
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    this.instance = new Artplayer({
+      ...this.option,
+      container: this.$refs.artRef,
+    });
 
-    this.$nextTick(() => {
-      this.$emit("get-instance", this.instance);
-    });
-  },
-  beforeDestroy() {
-    if (this.instance && this.instance.destroy) {
-      this.instance.destroy(false);
-    }
-  },
-};
-</script>
vue
<template>
-  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
-</template>
+    this.$nextTick(() => {
+      this.$emit("get-instance", this.instance);
+    });
+  },
+  beforeDestroy() {
+    if (this.instance && this.instance.destroy) {
+      this.instance.destroy(false);
+    }
+  },
+};
+</script>
vue
<template>
+  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
+</template>
 
-<script>
-import Artplayer from "./Artplayer.vue";
+<script>
+import Artplayer from "./Artplayer.vue";
 
-export default {
-  data() {
-    return {
-      option: {
-        url: "path/to/video.mp4",
-      },
-      style: {
-        width: "600px",
-        height: "400px",
-        margin: "60px auto 0",
-      },
-    };
-  },
-  components: {
-    Artplayer,
-  },
-  methods: {
-    getInstance(art) {
-      console.info(art);
-    },
-  },
-};
-</script>
Artplayer 非响应式：
在 Vue.js 里直接修改 option 是不会改变播放器的
React.js ​
jsx
import { useEffect, useRef } from 'react';
-import Artplayer from 'artplayer';
+export default {
+  data() {
+    return {
+      option: {
+        url: "path/to/video.mp4",
+      },
+      style: {
+        width: "600px",
+        height: "400px",
+        margin: "60px auto 0",
+      },
+    };
+  },
+  components: {
+    Artplayer,
+  },
+  methods: {
+    getInstance(art) {
+      console.info(art);
+    },
+  },
+};
+</script>
Artplayer 非响应式：
在 Vue.js 里直接修改 option 是不会改变播放器的
React.js ​
jsx
import { useEffect, useRef } from 'react';
+import Artplayer from 'artplayer';
 
-export default function Player({ option, getInstance, ...rest }) {
-    const artRef = useRef();
+export default function Player({ option, getInstance, ...rest }) {
+    const artRef = useRef();
 
-    useEffect(() => {
-        const art = new Artplayer({
-            ...option,
-            container: artRef.current,
-        });
+    useEffect(() => {
+        const art = new Artplayer({
+            ...option,
+            container: artRef.current,
+        });
 
-        if (getInstance && typeof getInstance === 'function') {
-            getInstance(art);
-        }
+        if (getInstance && typeof getInstance === 'function') {
+            getInstance(art);
+        }
 
-        return () => {
-            if (art && art.destroy) {
-                art.destroy(false);
-            }
-        };
-    }, []);
+        return () => {
+            if (art && art.destroy) {
+                art.destroy(false);
+            }
+        };
+    }, []);
 
-    return <div ref={artRef} {...rest}></div>;
-}
jsx
import React from 'react';
-import Artplayer from './ArtPlayer.jsx';
+    return <div ref={artRef} {...rest}></div>;
+}
jsx
import React from 'react';
+import Artplayer from './ArtPlayer.jsx';
 
-function App() {
-    return (
-        <div>
-            <Artplayer
-                option={{
-                    url: 'https://artplayer.org/assets/sample/video.mp4',
-                }}
-                style={{
-                    width: '600px',
-                    height: '400px',
-                    margin: '60px auto 0',
-                }}
-                getInstance={(art) => console.info(art)}
-            />
-        </div>
-    );
-}
+function App() {
+    return (
+        <div>
+            <Artplayer
+                option={{
+                    url: 'https://artplayer.org/assets/sample/video.mp4',
+                }}
+                style={{
+                    width: '600px',
+                    height: '400px',
+                    margin: '60px auto 0',
+                }}
+                getInstance={(art) => console.info(art)}
+            />
+        </div>
+    );
+}
 
-export default App;
Artplayer 非响应式：
在 React.js 里直接修改 option 是不会改变播放器的
TypeScript ​
导入 Artplayer 时会自动导入的 artplayer.d.ts
Vue.js ​
vue
<script setup>
-import Artplayer from 'artplayer';
-const art = ref<Artplayer>(null);
-art.value = new Artplayer();
-</script>
React.js ​
jsx
import Artplayer from 'artplayer';
-const art = useRef<Artplayer>(null);
-art.current = new Artplayer();
Option ​
你也可以单独导入选项的类型
ts
import Artplayer from 'artplayer';
-import { type Option } from 'artplayer/types/option';
+export default App;
Artplayer 非响应式：
在 React.js 里直接修改 option 是不会改变播放器的
TypeScript ​
导入 Artplayer 时会自动导入的 artplayer.d.ts
Vue.js ​
vue
<script setup>
+import Artplayer from 'artplayer';
+const art = ref<Artplayer>(null);
+art.value = new Artplayer();
+</script>
React.js ​
jsx
import Artplayer from 'artplayer';
+const art = useRef<Artplayer>(null);
+art.current = new Artplayer();
Option ​
你也可以单独导入选项的类型
ts
import Artplayer from 'artplayer';
+import { type Option } from 'artplayer/types/option';
 
-const option: Option = {
-    container: '.artplayer-app',
-    url: './assets/sample/video.mp4',
-};
+const option: Option = {
+    container: '.artplayer-app',
+    url: './assets/sample/video.mp4',
+};
 
-option.volume = 0.5;
+option.volume = 0.5;
 
-const art = new Artplayer(option);
全部 TypeScript 定义
packages/artplayer/types
JavaScript ​
有时你的 js 文件会丢失 TypeScript 的类型提示，这时候你可以手动导入类型
变量：
js
/**
- * @type {import("artplayer")}
- */
-let art = null;
参数：
js
/**
- * @param {import("artplayer")} art
- */
-function getInstance(art) {
-  //
-}
属性：
js
export default {
-  data() {
-    return {
-      /**
-       * @type {import("artplayer")}
-       */
-      art: null,
-    }
-  }
-}
选项：
js
/**
- * @type {import("artplayer/types/option").Option}
- */
+const art = new Artplayer(option);
全部 TypeScript 定义
packages/artplayer/types
JavaScript ​
有时你的 js 文件会丢失 TypeScript 的类型提示，这时候你可以手动导入类型
变量：
js
/**
+ * @type {import("artplayer")}
+ */
+let art = null;
参数：
js
/**
+ * @param {import("artplayer")} art
+ */
+function getInstance(art) {
+  //
+}
属性：
js
export default {
+  data() {
+    return {
+      /**
+       * @type {import("artplayer")}
+       */
+      art: null,
+    }
+  }
+}
选项：
js
/**
+ * @type {import("artplayer/types/option").Option}
+ */
 
-const option = {
-    container: '.artplayer-app',
-    url: './assets/sample/video.mp4',
-};
+const option = {
+    container: '.artplayer-app',
+    url: './assets/sample/video.mp4',
+};
 
-option.volume = 0.5;
+option.volume = 0.5;
 
-const art8 = new Artplayer(option);
古老的浏览器 ​
生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome：last 1 Chrome version
对于古老的浏览器，可以使用 artplayer.legacy.js 文件，可以兼容到：IE 11
js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js
假如你要兼容更古老的浏览器时，请修改以下配置然后自行构建：
构建配置：scripts/build.js
参考文档：browserslist
- +const art8 = new Artplayer(option);

古老的浏览器 ​

生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome：last 1 Chrome version

对于古老的浏览器，可以使用 artplayer.legacy.js 文件，可以兼容到：IE 11

js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

假如你要兼容更古老的浏览器时，请修改以下配置然后自行构建：

构建配置：scripts/build.js

参考文档：browserslist

+ \ No newline at end of file diff --git a/docs/document/library/dash.html b/docs/document/library/dash.html index b33cf8493..a6c32955e 100644 --- a/docs/document/library/dash.html +++ b/docs/document/library/dash.html @@ -5,46 +5,44 @@ dash.js | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

dash.js ​

👉 https://github.com/Dash-Industry-Forum/dash.js

▶ Run Code
js
function playMpd(video, url, art) {
-    if (dashjs.supportsMediaSource()) {
-        if (art.dash) art.dash.destroy();
-        const dash = dashjs.MediaPlayer().create();
-        dash.initialize(video, url, art.option.autoplay);
-        art.dash = dash; 
-        art.on('destroy', () => dash.destroy());
-    } else {
-        art.notice.show = 'Unsupported playback format: mpd';
-    }
-}
+    
Artplayer.js
Appearance
On this page
dash.js ​
👉 https://github.com/Dash-Industry-Forum/dash.js
 ▶ Run Code 
js
function playMpd(video, url, art) {
+    if (dashjs.supportsMediaSource()) {
+        if (art.dash) art.dash.destroy();
+        const dash = dashjs.MediaPlayer().create();
+        dash.initialize(video, url, art.option.autoplay);
+        art.dash = dash; 
+        art.on('destroy', () => dash.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: mpd';
+    }
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
-    type: 'mpd',
-    customType: {
-        mpd: playMpd
-    },
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
+    type: 'mpd',
+    customType: {
+        mpd: playMpd
+    },
+});
 
-art.on('ready', () => {
-    console.info(art.dash);
-});

-    
+art.on('ready', () => {
+    console.info(art.dash);
+});
+ \ No newline at end of file diff --git a/docs/document/library/flv.html b/docs/document/library/flv.html index 0b99806df..81e6d5475 100644 --- a/docs/document/library/flv.html +++ b/docs/document/library/flv.html @@ -5,47 +5,45 @@ flv.js | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

flv.js ​

👉 https://github.com/Bilibili/flv.js

▶ Run Code
js
function playFlv(video, url, art) {
-    if (flvjs.isSupported()) {
-        if (art.flv) art.flv.destroy();
-        const flv = flvjs.createPlayer({ type: 'flv', url });
-        flv.attachMediaElement(video);
-        flv.load();
-        art.flv = flv; 
-        art.on('destroy', () => flv.destroy());
-    } else {
-        art.notice.show = 'Unsupported playback format: flv';
-    }
-}
+    
Artplayer.js
Appearance
On this page
flv.js ​
👉 https://github.com/Bilibili/flv.js
 ▶ Run Code 
js
function playFlv(video, url, art) {
+    if (flvjs.isSupported()) {
+        if (art.flv) art.flv.destroy();
+        const flv = flvjs.createPlayer({ type: 'flv', url });
+        flv.attachMediaElement(video);
+        flv.load();
+        art.flv = flv; 
+        art.on('destroy', () => flv.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: flv';
+    }
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.flv',
-    type: 'flv',
-    customType: {
-        flv: playFlv,
-    },
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.flv',
+    type: 'flv',
+    customType: {
+        flv: playFlv,
+    },
+});
 
-art.on('ready', () => {
-    console.info(art.flv);
-});

-    
+art.on('ready', () => {
+    console.info(art.flv);
+});
+ \ No newline at end of file diff --git a/docs/document/library/hls.html b/docs/document/library/hls.html index c7a93181e..0eaa3eee9 100644 --- a/docs/document/library/hls.html +++ b/docs/document/library/hls.html @@ -5,49 +5,47 @@ hls.js | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

hls.js ​

👉 https://github.com/video-dev/hls.js

▶ Run Code
js
function playM3u8(video, url, art) {
-    if (Hls.isSupported()) {
-        if (art.hls) art.hls.destroy();
-        const hls = new Hls();
-        hls.loadSource(url);
-        hls.attachMedia(video);
-        art.hls = hls;
-        art.on('destroy', () => hls.destroy());
-    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-        video.src = url;
-    } else {
-        art.notice.show = 'Unsupported playback format: m3u8';
-    }
-}
+    
Artplayer.js
Appearance
On this page
hls.js ​
👉 https://github.com/video-dev/hls.js
 ▶ Run Code 
js
function playM3u8(video, url, art) {
+    if (Hls.isSupported()) {
+        if (art.hls) art.hls.destroy();
+        const hls = new Hls();
+        hls.loadSource(url);
+        hls.attachMedia(video);
+        art.hls = hls;
+        art.on('destroy', () => hls.destroy());
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = url;
+    } else {
+        art.notice.show = 'Unsupported playback format: m3u8';
+    }
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
-    type: 'm3u8',
-    customType: {
-        m3u8: playM3u8,
-    },
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+    type: 'm3u8',
+    customType: {
+        m3u8: playM3u8,
+    },
+});
 
-art.on('ready', () => {
-    console.info(art.hls);
-});

-    
+art.on('ready', () => {
+    console.info(art.hls);
+});
+ \ No newline at end of file diff --git a/docs/document/plugin/ads.html b/docs/document/plugin/ads.html index afecf8845..9164c4b40 100644 --- a/docs/document/plugin/ads.html +++ b/docs/document/plugin/ads.html @@ -5,70 +5,68 @@ 视频广告 | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

视频广告 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-ads
bash
yarn add artplayer-plugin-ads
bash
pnpm add artplayer-plugin-ads
html
<script src="path/to/artplayer-plugin-ads.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
bash
https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js

使用 ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-    fullscreen: true,
-    fullscreenWeb: true,
-    plugins: [
-        artplayerPluginAds({
-            // html广告，假如是视频广告则忽略该值
-            html: '<img src="/assets/sample/poster.jpg">',
+    
Artplayer.js
Appearance
On this page
视频广告 ​
演示 ​
👉 查看完整演示
安装 ​
bash
npm install artplayer-plugin-ads
bash
yarn add artplayer-plugin-ads
bash
pnpm add artplayer-plugin-ads
html
<script src="path/to/artplayer-plugin-ads.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
bash
https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
使用 ​
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    plugins: [
+        artplayerPluginAds({
+            // html广告，假如是视频广告则忽略该值
+            html: '<img src="/assets/sample/poster.jpg">',
 
-            // 视频广告的地址
-            video: '/assets/sample/test1.mp4',
+            // 视频广告的地址
+            video: '/assets/sample/test1.mp4',
 
-            // 广告跳转网址，为空则不跳转
-            url: 'http://artplayer.org',
+            // 广告跳转网址，为空则不跳转
+            url: 'http://artplayer.org',
 
-            // 必须观看的时长，期间不能被跳过，单位为秒
-            // 当该值大于或等于totalDuration时，不能提前关闭广告
-            // 当该值等于或小于0时，则随时都可以关闭广告
-            playDuration: 5,
+            // 必须观看的时长，期间不能被跳过，单位为秒
+            // 当该值大于或等于totalDuration时，不能提前关闭广告
+            // 当该值等于或小于0时，则随时都可以关闭广告
+            playDuration: 5,
 
-            // 广告总时长，单位为秒
-            totalDuration: 10,
+            // 广告总时长，单位为秒
+            totalDuration: 10,
 
-            // 视频广告是否默认静音
-            muted: false,
+            // 视频广告是否默认静音
+            muted: false,
 
-            // 多语言支持
-            i18n: {
-                close: '关闭广告',
-                countdown: '%s秒',
-                detail: '查看详情',
-                canBeClosed: '%s秒后可关闭广告',
-            },
-        }),
-    ],
-});
+            // 多语言支持
+            i18n: {
+                close: '关闭广告',
+                countdown: '%s秒',
+                detail: '查看详情',
+                canBeClosed: '%s秒后可关闭广告',
+            },
+        }),
+    ],
+});
 
-// ad is clicked
-art.on('artplayerPluginAds:click', (ads) => {
-    console.info(ads);
-});
+// ad is clicked
+art.on('artplayerPluginAds:click', (ads) => {
+    console.info(ads);
+});
 
-// Ad skipped
-art.on('artplayerPluginAds:skip', (ads) => {
-    console.info(ads);
-});

-    
+// Ad skipped
+art.on('artplayerPluginAds:skip', (ads) => {
+    console.info(ads);
+});
+ \ No newline at end of file diff --git a/docs/document/plugin/danmuku.html b/docs/document/plugin/danmuku.html index ebc00436a..8aa257120 100644 --- a/docs/document/plugin/danmuku.html +++ b/docs/document/plugin/danmuku.html @@ -5,306 +5,304 @@ 弹幕库 | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

弹幕库 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js

选项 ​

js
{
-    danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
-    speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
-    opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
-    fontSize: 25, // 字体大小，支持数字和百分比
-    color: '#FFFFFF', // 默认字体颜色
-    mode: 0, // 默认模式，0-滚动，1-静止
-    margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
-    antiOverlap: true, // 是否防重叠
-    useWorker: true, // 是否使用 web worker
-    synchronousPlayback: false, // 是否同步到播放速度
-    filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
-    lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
-    maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
-    minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
-    maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
-    theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
-    heatmap: true, // 是否开启弹幕热度图, 默认为 false
-    beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
-    // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
-    mount: document.querySelector('.artplayer-danmuku'),
-}

使用弹幕数组 ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            // 弹幕数组
-            danmuku: [
-                {
-                    text: '111', // 弹幕文本
-                    time: 1, // 发送时间，单位秒
-                    color: '#fff', // 弹幕局部颜色
-                    border: false, // 是否显示描边
-                    mode: 0, // 弹幕模式: 0表示滚动, 1静止
-                },
-                {
-                    text: '222',
-                    time: 2,
-                    color: 'red',
-                    border: true,
-                    mode: 0,
-                },
-                {
-                    text: '333',
-                    time: 3,
-                    color: 'green',
-                    border: false,
-                    mode: 1,
-                },
-            ],
-        }),
-    ],
-});

使用弹幕 XML ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            // 弹幕 XML 文件，和 Bilibili 网站的弹幕格式一致
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});

使用异步调用 ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            // 使用 Promise 异步返回
-            danmuku: function () {
-                return new Promise((resovle) => {
-                    return resovle([
-                        {
-                            text: '111',
-                            time: 1,
-                        },
-                        {
-                            text: '222',
-                            time: 2,
-                        },
-                        {
-                            text: '333',
-                            time: 3,
-                        },
-                    ]);
-                });
-            },
-        }),
-    ],
-});

hide/show ​

通过方法 hide 和 show 进行隐藏或者显示弹幕

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '隐藏弹幕',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.hide();
-            },
-        },
-        {
-            position: 'right',
-            html: '显示弹幕',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.show();
-            },
-        },
-    ],
-});

isHide ​

通过属性 isHide 判断当前弹幕是隐藏或者显示

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '隐藏弹幕',
-            click: function (_, event) {
-                if (art.plugins.artplayerPluginDanmuku.isHide) {
-                    art.plugins.artplayerPluginDanmuku.show();
-                    event.target.innerText = '隐藏弹幕';
-                } else {
-                    art.plugins.artplayerPluginDanmuku.hide();
-                    event.target.innerText = '显示弹幕';
-                }
-            },
-        },
-    ],
-});

emit ​

通过方法 emit 发送一条实时弹幕

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '发送弹幕',
-            click: function () {
-                var text = prompt('请输入弹幕文本', '弹幕测试文本');
-                if (!text || !text.trim()) return;
-                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
-                art.plugins.artplayerPluginDanmuku.emit({
-                    text: text,
-                    color: color,
-                    border: true,
-                });
-            },
-        },
-    ],
-});

config ​

通过方法 config 实时改变弹幕配置，支持属性有：

  • danmuku
  • speed
  • opacity
  • fontSize
  • color
  • mode
  • margin
  • antiOverlap
  • synchronousPlayback
  • filter
  • lockTime
  • beforeEmit
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '弹幕大小：<input type="range" min="12" max="50" step="1" value="25">',
-            style: {
-                display: 'flex',
-                alignItems: 'center',
-            },
-            mounted: function ($setting) {
-                const $range = $setting.querySelector('input[type=range]');
-                $range.addEventListener('change', () => {
-                    art.plugins.artplayerPluginDanmuku.config({
-                        fontSize: Number($range.value),
-                    });
-                });
-            },
-        },
-    ],
-});

load ​

通过 load 方法可以重载弹幕源，或者切换新弹幕

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '重载弹幕',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.load();
-            },
-        },
-        {
-            position: 'right',
-            html: '切换弹幕',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.config({
-                    danmuku: '/assets/sample/danmuku-v2.xml',
-                });
-                art.plugins.artplayerPluginDanmuku.load();
-            },
-        },
-    ],
-});

reset ​

用于清空当前显示的弹幕

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
+    
Artplayer.js
Appearance
On this page
弹幕库 ​
演示 ​
👉 查看完整演示
安装 ​
bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
选项 ​
js
{
+    danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
+    speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
+    opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
+    fontSize: 25, // 字体大小，支持数字和百分比
+    color: '#FFFFFF', // 默认字体颜色
+    mode: 0, // 默认模式，0-滚动，1-静止
+    margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
+    antiOverlap: true, // 是否防重叠
+    useWorker: true, // 是否使用 web worker
+    synchronousPlayback: false, // 是否同步到播放速度
+    filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
+    lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
+    maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
+    minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
+    maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
+    theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
+    heatmap: true, // 是否开启弹幕热度图, 默认为 false
+    beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
+    // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
+    mount: document.querySelector('.artplayer-danmuku'),
+}
使用弹幕数组 ​
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            // 弹幕数组
+            danmuku: [
+                {
+                    text: '111', // 弹幕文本
+                    time: 1, // 发送时间，单位秒
+                    color: '#fff', // 弹幕局部颜色
+                    border: false, // 是否显示描边
+                    mode: 0, // 弹幕模式: 0表示滚动, 1静止
+                },
+                {
+                    text: '222',
+                    time: 2,
+                    color: 'red',
+                    border: true,
+                    mode: 0,
+                },
+                {
+                    text: '333',
+                    time: 3,
+                    color: 'green',
+                    border: false,
+                    mode: 1,
+                },
+            ],
+        }),
+    ],
+});
使用弹幕 XML ​
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            // 弹幕 XML 文件，和 Bilibili 网站的弹幕格式一致
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
使用异步调用 ​
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            // 使用 Promise 异步返回
+            danmuku: function () {
+                return new Promise((resovle) => {
+                    return resovle([
+                        {
+                            text: '111',
+                            time: 1,
+                        },
+                        {
+                            text: '222',
+                            time: 2,
+                        },
+                        {
+                            text: '333',
+                            time: 3,
+                        },
+                    ]);
+                });
+            },
+        }),
+    ],
+});
hide/show ​
通过方法 hide 和 show 进行隐藏或者显示弹幕
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '隐藏弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.hide();
+            },
+        },
+        {
+            position: 'right',
+            html: '显示弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.show();
+            },
+        },
+    ],
+});
isHide ​
通过属性 isHide 判断当前弹幕是隐藏或者显示
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '隐藏弹幕',
+            click: function (_, event) {
+                if (art.plugins.artplayerPluginDanmuku.isHide) {
+                    art.plugins.artplayerPluginDanmuku.show();
+                    event.target.innerText = '隐藏弹幕';
+                } else {
+                    art.plugins.artplayerPluginDanmuku.hide();
+                    event.target.innerText = '显示弹幕';
+                }
+            },
+        },
+    ],
+});
emit ​
通过方法 emit 发送一条实时弹幕
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '发送弹幕',
+            click: function () {
+                var text = prompt('请输入弹幕文本', '弹幕测试文本');
+                if (!text || !text.trim()) return;
+                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
+                art.plugins.artplayerPluginDanmuku.emit({
+                    text: text,
+                    color: color,
+                    border: true,
+                });
+            },
+        },
+    ],
+});
config ​
通过方法 config 实时改变弹幕配置，支持属性有：
  • danmuku
  • speed
  • opacity
  • fontSize
  • color
  • mode
  • margin
  • antiOverlap
  • synchronousPlayback
  • filter
  • lockTime
  • beforeEmit
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '弹幕大小：<input type="range" min="12" max="50" step="1" value="25">',
+            style: {
+                display: 'flex',
+                alignItems: 'center',
+            },
+            mounted: function ($setting) {
+                const $range = $setting.querySelector('input[type=range]');
+                $range.addEventListener('change', () => {
+                    art.plugins.artplayerPluginDanmuku.config({
+                        fontSize: Number($range.value),
+                    });
+                });
+            },
+        },
+    ],
+});
load ​
通过 load 方法可以重载弹幕源，或者切换新弹幕
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '重载弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+        {
+            position: 'right',
+            html: '切换弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.config({
+                    danmuku: '/assets/sample/danmuku-v2.xml',
+                });
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+    ],
+});
reset ​
用于清空当前显示的弹幕
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
 
-art.on('resize', () => {
-    art.plugins.artplayerPluginDanmuku.reset();
-});
option ​
用于获取当前弹幕配置
 ▶ Run Code 
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
+art.on('resize', () => {
+    art.plugins.artplayerPluginDanmuku.reset();
+});
option ​
用于获取当前弹幕配置
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
 
-art.on('ready', () => {
-    console.info(art.plugins.artplayerPluginDanmuku.option);
-});
事件 ​
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
+art.on('ready', () => {
+    console.info(art.plugins.artplayerPluginDanmuku.option);
+});
事件 ​
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
 
-art.on('artplayerPluginDanmuku:emit', (danmu) => {
-    console.info('新增弹幕', danmu);
-});
+art.on('artplayerPluginDanmuku:emit', (danmu) => {
+    console.info('新增弹幕', danmu);
+});
 
-art.on('artplayerPluginDanmuku:loaded', (danmus) => {
-    console.info('加载弹幕', danmus.length);
-});
+art.on('artplayerPluginDanmuku:loaded', (danmus) => {
+    console.info('加载弹幕', danmus.length);
+});
 
-art.on('artplayerPluginDanmuku:error', (error) => {
-    console.info('加载错误', error);
-});
+art.on('artplayerPluginDanmuku:error', (error) => {
+    console.info('加载错误', error);
+});
 
-art.on('artplayerPluginDanmuku:config', (option) => {
-    console.info('配置变化', option);
-});
+art.on('artplayerPluginDanmuku:config', (option) => {
+    console.info('配置变化', option);
+});
 
-art.on('artplayerPluginDanmuku:stop', () => {
-    console.info('弹幕停止');
-});
+art.on('artplayerPluginDanmuku:stop', () => {
+    console.info('弹幕停止');
+});
 
-art.on('artplayerPluginDanmuku:start', () => {
-    console.info('弹幕开始');
-});
+art.on('artplayerPluginDanmuku:start', () => {
+    console.info('弹幕开始');
+});
 
-art.on('artplayerPluginDanmuku:hide', () => {
-    console.info('弹幕隐藏');
-});
+art.on('artplayerPluginDanmuku:hide', () => {
+    console.info('弹幕隐藏');
+});
 
-art.on('artplayerPluginDanmuku:show', () => {
-    console.info('弹幕显示');
-});
+art.on('artplayerPluginDanmuku:show', () => {
+    console.info('弹幕显示');
+});
 
-art.on('artplayerPluginDanmuku:destroy', () => {
-    console.info('弹幕销毁');
-});

-    
+art.on('artplayerPluginDanmuku:destroy', () => {
+    console.info('弹幕销毁');
+});
+ \ No newline at end of file diff --git a/docs/document/plugin/dash-quality.html b/docs/document/plugin/dash-quality.html index 22779e9f1..2e34ae066 100644 --- a/docs/document/plugin/dash-quality.html +++ b/docs/document/plugin/dash-quality.html @@ -5,23 +5,21 @@ Dash 画质 | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

Dash 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-dash-quality
bash
yarn add artplayer-plugin-dash-quality
bash
pnpm add artplayer-plugin-dash-quality
html
<script src="path/to/artplayer-plugin-dash-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
bash
https://unpkg.com/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
- +
Artplayer.js

Appearance

On this page

Dash 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-dash-quality
bash
yarn add artplayer-plugin-dash-quality
bash
pnpm add artplayer-plugin-dash-quality
html
<script src="path/to/artplayer-plugin-dash-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
bash
https://unpkg.com/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
+ \ No newline at end of file diff --git a/docs/document/plugin/hls-quality.html b/docs/document/plugin/hls-quality.html index 035b65cf1..cf0967866 100644 --- a/docs/document/plugin/hls-quality.html +++ b/docs/document/plugin/hls-quality.html @@ -5,23 +5,21 @@ HLS 画质 | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

HLS 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-hls-quality
bash
yarn add artplayer-plugin-hls-quality
bash
pnpm add artplayer-plugin-hls-quality
html
<script src="path/to/artplayer-plugin-hls-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
bash
https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
- +
Artplayer.js

Appearance

On this page

HLS 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-hls-quality
bash
yarn add artplayer-plugin-hls-quality
bash
pnpm add artplayer-plugin-hls-quality
html
<script src="path/to/artplayer-plugin-hls-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
bash
https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
+ \ No newline at end of file diff --git a/docs/document/plugin/iframe.html b/docs/document/plugin/iframe.html index 2f45c8fab..7b625c6ee 100644 --- a/docs/document/plugin/iframe.html +++ b/docs/document/plugin/iframe.html @@ -5,190 +5,186 @@ Iframe 控制 | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

Iframe 控制 ​

说明 ​

通过该插件，你可以轻松在 index.html 里控制跨域 iframe.html 页面里的播放器，如在 index.html 里通过代码控制 iframe.html 播放器的功能，或者获取 iframe.html 播放器的值

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-iframe
bash
yarn add artplayer-plugin-iframe
bash
pnpm add artplayer-plugin-iframe
html
<script src="path/to/artplayer-plugin-iframe.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
bash
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js

使用 ​

html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-    </head>
-    <body>
-        <iframe id="iframe"></iframe>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            const iframe = new ArtplayerPluginIframe({
-                // Iframe element
-                iframe: document.querySelector('#iframe'),
-                // Iframe url
-                url: 'path/to/iframe.html',
-            });
+    
Artplayer.js
Appearance
On this page
Iframe 控制 ​
说明 ​
通过该插件，你可以轻松在 index.html 里控制跨域 iframe.html 页面里的播放器，如在 index.html 里通过代码控制 iframe.html 播放器的功能，或者获取 iframe.html 播放器的值
演示 ​
👉 查看完整演示
安装 ​
bash
npm install artplayer-plugin-iframe
bash
yarn add artplayer-plugin-iframe
bash
pnpm add artplayer-plugin-iframe
html
<script src="path/to/artplayer-plugin-iframe.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
bash
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
使用 ​
html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <iframe id="iframe"></iframe>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            const iframe = new ArtplayerPluginIframe({
+                // Iframe element
+                iframe: document.querySelector('#iframe'),
+                // Iframe url
+                url: 'path/to/iframe.html',
+            });
 
-            // Send message to iframe
-            iframe.commit(() => {
-                var art = new Artplayer({
-                    container: '.artplayer-app',
-                    url: 'path/to/video.mp4',
-                });
-            });
-        </script>
-    </body>
-</html>
html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-        <style>
-            html,
-            body {
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                padding: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
-        <script src="path/to/artplayer.js"></script>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            // Inject scripts to receive messages from instances
-            ArtplayerPluginIframe.inject();
-        </script>
-    </body>
-</html>
index.html 接口 ​
commit ​
从 index.html 将消息推送到 iframe.html，该函数将在 iframe.html 内部运行，同时它也能用于异步获取 iframe.html 里的值
js
iframe.commit(() => {
-    var art = new Artplayer({
-        container: '.artplayer-app',
-        url: 'path/to/video.mp4',
-    });
-});
+            // Send message to iframe
+            iframe.commit(() => {
+                var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: 'path/to/video.mp4',
+                });
+            });
+        </script>
+    </body>
+</html>
html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            // Inject scripts to receive messages from instances
+            ArtplayerPluginIframe.inject();
+        </script>
+    </body>
+</html>
index.html 接口 ​
commit ​
从 index.html 将消息推送到 iframe.html，该函数将在 iframe.html 内部运行，同时它也能用于异步获取 iframe.html 里的值
js
iframe.commit(() => {
+    var art = new Artplayer({
+        container: '.artplayer-app',
+        url: 'path/to/video.mp4',
+    });
+});
 
-iframe.commit(() => {
-    art.seek = 5;
-});
+iframe.commit(() => {
+    art.seek = 5;
+});
 
-// Get the value from the iframe.html
-(async function () {
-    // Use the return keyword
-    var currentTime = await iframe.commit(() => {
-        return art.currentTime;
-    });
+// Get the value from the iframe.html
+(async function () {
+    // Use the return keyword
+    var currentTime = await iframe.commit(() => {
+        return art.currentTime;
+    });
 
-    // or use the resolve method
-    var currentTime2 = await iframe.commit((resolve) => {
-        setTimeout(() => {
-            resolve(art.currentTime);
-        }, 1000);
-    });
-})();
message ​
在 index.html 接收来自 iframe.html 的消息
js
iframe.message((event) => {
-    console.info(event);
-});
destroy ​
销毁后 index.html 无法与 iframe.html 通信
js
iframe.destroy();
iframe.html 接口 ​
提示
iframe.html 接口 只能运行在 iframe.html 里
inject ​
注入脚本，接收来自 index.html 的消息
js
ArtplayerPluginIframe.inject();
postMessage ​
将消息推送到 index.html
js
iframe.message((event) => {
-    console.info(event);
-});
+    // or use the resolve method
+    var currentTime2 = await iframe.commit((resolve) => {
+        setTimeout(() => {
+            resolve(art.currentTime);
+        }, 1000);
+    });
+})();
message ​
在 index.html 接收来自 iframe.html 的消息
js
iframe.message((event) => {
+    console.info(event);
+});
destroy ​
销毁后 index.html 无法与 iframe.html 通信
js
iframe.destroy();
iframe.html 接口 ​
提示
iframe.html 接口 只能运行在 iframe.html 里
inject ​
注入脚本，接收来自 index.html 的消息
js
ArtplayerPluginIframe.inject();
postMessage ​
将消息推送到 index.html
js
iframe.message((event) => {
+    console.info(event);
+});
 
-iframe.commit(() => {
-    ArtplayerPluginIframe.postMessage({
-        type: 'currentTime',
-        data: art.currentTime,
-    });
-});
例子 ​
最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 iframe.html 里的 fullscreenWeb 事件并通知到 index.html 即可
html

-<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-    </head>
-    <body>
-        <iframe id="iframe"></iframe>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <style>
-            .fullscreenWeb {
-                position: fixed;
-                z-index: 9999;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                right: 0;
-                bottom: 0;
-            }
-        </style>
-        <script>
-            const $iframe = document.querySelector('#iframe');
-            const iframe = new ArtplayerPluginIframe({
-                iframe: $iframe,
-                url: 'path/to/iframe.html',
-            });
+iframe.commit(() => {
+    ArtplayerPluginIframe.postMessage({
+        type: 'currentTime',
+        data: art.currentTime,
+    });
+});
例子 ​
最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 iframe.html 里的 fullscreenWeb 事件并通知到 index.html 即可
html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <iframe id="iframe"></iframe>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <style>
+            .fullscreenWeb {
+                position: fixed;
+                z-index: 9999;
+                width: 100%;
+                height: 100%;
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+            }
+        </style>
+        <script>
+            const $iframe = document.querySelector('#iframe');
+            const iframe = new ArtplayerPluginIframe({
+                iframe: $iframe,
+                url: 'path/to/iframe.html',
+            });
 
-            iframe.message(({ type, data }) => {
-                switch (type) {
-                    case 'fullscreenWeb':
-                        if (data) {
-                            $iframe.classList.add('fullscreenWeb');
-                        } else {
-                            $iframe.classList.remove('fullscreenWeb');
-                        }
-                        break;
-                    default:
-                        break;
-                }
-            });
+            iframe.message(({ type, data }) => {
+                switch (type) {
+                    case 'fullscreenWeb':
+                        if (data) {
+                            $iframe.classList.add('fullscreenWeb');
+                        } else {
+                            $iframe.classList.remove('fullscreenWeb');
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            });
 
-            iframe.commit(() => {
-                var art = new Artplayer({
-                    container: '.artplayer-app',
-                    url: 'path/to/video.mp4',
-                });
+            iframe.commit(() => {
+                var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: 'path/to/video.mp4',
+                });
 
-                art.on('fullscreenWeb', (state) => {
-                    ArtplayerPluginIframe.postMessage({
-                        type: 'fullscreenWeb',
-                        data: state,
-                    });
-                });
-            });
-        </script>
-    </body>
-</html>
html

-<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-        <style>
-            html,
-            body {
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                padding: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
-        <script src="path/to/artplayer.js"></script>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            ArtplayerPluginIframe.inject();
-        </script>
-    </body>
-</html>

-    
+                art.on('fullscreenWeb', (state) => {
+                    ArtplayerPluginIframe.postMessage({
+                        type: 'fullscreenWeb',
+                        data: state,
+                    });
+                });
+            });
+        </script>
+    </body>
+</html>
html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            ArtplayerPluginIframe.inject();
+        </script>
+    </body>
+</html>
+ \ No newline at end of file diff --git a/docs/document/start/i18n.html b/docs/document/start/i18n.html index 6d628c1a0..76629457e 100644 --- a/docs/document/start/i18n.html +++ b/docs/document/start/i18n.html @@ -5,74 +5,72 @@ 语言设置 | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

语言设置 ​

DANGER

鉴于捆绑的多国语言越来越多, 从 5.1.0 版本开始, artplayer.js 核心代码除了包含 简体中文 和 英文 外, 不再捆绑其它多国语言, 需要自行导入需要的语言。

WARNING

当无法匹配到语言时, 会默认显示英文, i18n 写法参考: artplayer/types/i18n.d.ts

默认语言 ​

默认语言有: en, zh-cn, 无需手动导入

js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'zh-cn', // or 'en'
-});

导入语言 ​

打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言

打包后的语言文件存放于: artplayer/dist/i18n/*.js

手动导入的语言有: cs, es, fa, fr, id, pl, ru, zh-tw

js
import id from 'artplayer/dist/i18n/id.js';
-import zhTw from 'artplayer/dist/i18n/zh-tw.js';
+    
Artplayer.js
Appearance
On this page
语言设置 ​
DANGER
鉴于捆绑的多国语言越来越多, 从 5.1.0 版本开始, artplayer.js 核心代码除了包含 简体中文 和 英文 外, 不再捆绑其它多国语言, 需要自行导入需要的语言。
WARNING
当无法匹配到语言时, 会默认显示英文, i18n 写法参考: artplayer/types/i18n.d.ts
默认语言 ​
默认语言有: en, zh-cn, 无需手动导入
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'zh-cn', // or 'en'
+});
导入语言 ​
打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言
打包后的语言文件存放于: artplayer/dist/i18n/*.js
手动导入的语言有: cs, es, fa, fr, id, pl, ru, zh-tw
js
import id from 'artplayer/dist/i18n/id.js';
+import zhTw from 'artplayer/dist/i18n/zh-tw.js';
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: { 
-        id: id,
-        'zh-tw': zhTw,
-    },
-    lang: 'zh-tw',
-});
js
<script src="artplayer/dist/i18n/id.js"></script>
-<script src="artplayer/dist/i18n/zh-tw.js"></script>
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: { 
+        id: id,
+        'zh-tw': zhTw,
+    },
+    lang: 'zh-tw',
+});
js
<script src="artplayer/dist/i18n/id.js"></script>
+<script src="artplayer/dist/i18n/zh-tw.js"></script>
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: { 
-        id: window['artplayer-i18n-id'],
-        'zh-tw': window['artplayer-i18n-zh-tw'],
-    },
-    lang: 'zh-tw',
-});
新增语言 ​
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'your-lang',
-    i18n: {
-        'your-lang': {
-            Play: 'Your Play'
-        },
-    },
-});
修改语言 ​
js
import zhTw from 'artplayer/i18n/zh-tw.js';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: { 
+        id: window['artplayer-i18n-id'],
+        'zh-tw': window['artplayer-i18n-zh-tw'],
+    },
+    lang: 'zh-tw',
+});
新增语言 ​
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'your-lang',
+    i18n: {
+        'your-lang': {
+            Play: 'Your Play'
+        },
+    },
+});
修改语言 ​
js
import zhTw from 'artplayer/i18n/zh-tw.js';
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: {
-        // Change the default language
-        'zh-cn': {
-            Play: 'Your Play'
-        },
-        // Change the imported language
-        'zh-tw': {
-            ...zhTw,
-            Play: 'Your Play'
-        },
-    },
-});
- +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + i18n: { + // Change the default language + 'zh-cn': { + Play: 'Your Play' + }, + // Change the imported language + 'zh-tw': { + ...zhTw, + Play: 'Your Play' + }, + }, +}); + \ No newline at end of file diff --git a/docs/document/start/option.html b/docs/document/start/option.html index 64794d4b7..76030f28d 100644 --- a/docs/document/start/option.html +++ b/docs/document/start/option.html @@ -5,402 +5,400 @@ 基础选项 | Artplayer.js - - - - - - - - - - - - - + + + + + + + + + + -
Artplayer.js

Appearance

基础选项 ​

container ​

  • Type: String, Element
  • Default: #artplayer

播放器挂载的 DOM 容器

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app', 
-    // container: document.querySelector('.artplayer-app'),
-    url: '/assets/sample/video.mp4',
-});

您可能需要初始化容器元素的大小，如:

css
.artplayer-app {
-    width: 400px;
-    height: 300px;
-}

或者使用 aspect-ratio：

css
.artplayer-app {
-    aspect-ratio: 16/9;
-}

提示

全部选项里，只有 container 是必填的

url ​

  • Type: String
  • Default: ''

视频源地址

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

有时候 url 地址没那么快知道，这时候你可以异步设置 url

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-});
+    
Artplayer.js
Appearance
On this page
基础选项 ​
container ​
  • Type: String, Element
  • Default: #artplayer
播放器挂载的 DOM 容器
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app', 
+    // container: document.querySelector('.artplayer-app'),
+    url: '/assets/sample/video.mp4',
+});
您可能需要初始化容器元素的大小，如:
css
.artplayer-app {
+    width: 400px;
+    height: 300px;
+}
或者使用 aspect-ratio：
css
.artplayer-app {
+    aspect-ratio: 16/9;
+}
提示
全部选项里，只有 container 是必填的
url ​
  • Type: String
  • Default: ''
视频源地址
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
有时候 url 地址没那么快知道，这时候你可以异步设置 url
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+});
 
-setTimeout(() => {
-    art.url = '/assets/sample/video.mp4';
-}, 1000);
提示
默认支持三种视频文件格式：.mp4, .ogg, .webm
如需要播放 .m3u8 或者 .flv 等其它格式，请参考左侧的 第三方库
id ​
  • Type: String
  • Default: ''
播放器的唯一标识，目前只用于记忆播放 autoplayback
▶ Run Code
js
var art = new Artplayer({
-    id: 'your-url-id',
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
onReady ​
  • Type: Function
  • Default: undefined
构造函数接受一个函数作为第二个参数，播放器初始化成功且视频可以播放时触发，和ready事件一样
▶ Run Code
js
var art = new Artplayer(
-    {
-        container: '.artplayer-app',
-        url: '/assets/sample/video.mp4',
-        muted: true,
-    },
-    function onReady(art) {
-        this.play()
-    },
-);
等同于:
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+setTimeout(() => {
+    art.url = '/assets/sample/video.mp4';
+}, 1000);
提示
默认支持三种视频文件格式：.mp4, .ogg, .webm
如需要播放 .m3u8 或者 .flv 等其它格式，请参考左侧的 第三方库
id ​
  • Type: String
  • Default: ''
播放器的唯一标识，目前只用于记忆播放 autoplayback
▶ Run Code
js
var art = new Artplayer({
+    id: 'your-url-id',
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
onReady ​
  • Type: Function
  • Default: undefined
构造函数接受一个函数作为第二个参数，播放器初始化成功且视频可以播放时触发，和ready事件一样
▶ Run Code
js
var art = new Artplayer(
+    {
+        container: '.artplayer-app',
+        url: '/assets/sample/video.mp4',
+        muted: true,
+    },
+    function onReady(art) {
+        this.play()
+    },
+);
等同于:
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    art.play();
-});
提示
回调函数里的this就是播放器实例，但回调函数假如使用了箭头函数，this则不会指向播放器实例
poster ​
  • Type: String
  • Default: ''
视频的海报，只会出现在播放器初始化且未播放的状态下
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    poster: '/assets/sample/poster.jpg',
-});
theme ​
  • Type: String
  • Default: #f00
播放器主题颜色，目前用于 进度条 和 高亮元素 上
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    theme: '#ffad00',
-});
volume ​
  • Type: Number
  • Default: 0.7
播放器的默认音量
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    volume: 0.5,
-});
提示
播放器会缓存最后一次音量的大小，下次初始化时（如刷新页面）播放器会读取该缓存值
isLive ​
  • Type: Boolean
  • Default: false
使用直播模式，会隐藏进度条和播放时间
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    isLive: true,
-});
muted ​
  • Type: Boolean
  • Default: false
是否默认静音
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
autoplay ​
  • Type: Boolean
  • Default: false
是否自动播放
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoplay: true,
-    muted: true,
-});
提示
假如希望默认进入页面就能自动播放视频，muted 必需为 true，更多信息请阅读 Autoplay Policy Changes
autoSize ​
  • Type: Boolean
  • Default: false
播放器的尺寸默认会填充整个 container 容器尺寸，所以经常出现黑边，该值能自动调整播放器尺寸以隐藏黑边，类似 css 的 object-fit: cover;
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-});
autoMini ​
  • Type: Boolean
  • Default: false
当播放器滚动到浏览器视口以外时，自动进入 迷你播放 模式
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoMini: true,
-});
loop ​
  • Type: Boolean
  • Default: false
是否循环播放
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    loop: true,
-});
flip ​
  • Type: Boolean
  • Default: false
是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单 里
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    flip: true,
-    setting: true,
-});
playbackRate ​
  • Type: Boolean
  • Default: false
是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    playbackRate: true,
-    setting: true,
-});
aspectRatio ​
  • Type: Boolean
  • Default: false
是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    aspectRatio: true,
-    setting: true,
-});
screenshot ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示 视频截图 功能
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    screenshot: true,
-});
提示
由于浏览器安全机制，假如视频源地址和网站是跨域的，可能会出现截图失败
setting ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示 设置面板 的开关按钮
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
hotkey ​
  • Type: Boolean
  • Default: true
是否使用快捷键
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    hotkey: true,
-});
热键描述
↑增加音量
↓降低音量
←视频快进
→视频快退
space切换播放/暂停
提示
只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效
pip ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示 画中画 的开关按钮
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    pip: true,
-});
mutex ​
  • Type: Boolean
  • Default: true
假如页面里同时存在多个播放器，是否只能让一个播放器播放
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    mutex: true,
-});
fullscreen ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示播放器 窗口全屏 按钮
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-});
fullscreenWeb ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示播放器 网页全屏 按钮
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
subtitleOffset ​
  • Type: Boolean
  • Default: false
字幕时间偏移，范围在 [-5s, 5s]，出现在 设置面板 里
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitleOffset: true,
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-    setting: true,
-});
miniProgressBar ​
  • Type: Boolean
  • Default: false
迷你进度条，只在播放器失去焦点后且正在播放时出现
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    miniProgressBar: true,
-});
useSSR ​
  • Type: Boolean
  • Default: false
是否使用 SSR 挂载模式，假如你希望在播放器挂载前，就提前渲染好播放器所需的 HTML 时有用
你可以通过 Artplayer.html 访问到播放器所需的 HTML
▶ Run Code
js
var $container = document.querySelector('.artplayer-app');
-$container.innerHTML = Artplayer.html;
+art.on('ready', () => {
+    art.play();
+});
提示
回调函数里的this就是播放器实例，但回调函数假如使用了箭头函数，this则不会指向播放器实例
poster ​
  • Type: String
  • Default: ''
视频的海报，只会出现在播放器初始化且未播放的状态下
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    poster: '/assets/sample/poster.jpg',
+});
theme ​
  • Type: String
  • Default: #f00
播放器主题颜色，目前用于 进度条 和 高亮元素 上
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    theme: '#ffad00',
+});
volume ​
  • Type: Number
  • Default: 0.7
播放器的默认音量
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    volume: 0.5,
+});
提示
播放器会缓存最后一次音量的大小，下次初始化时（如刷新页面）播放器会读取该缓存值
isLive ​
  • Type: Boolean
  • Default: false
使用直播模式，会隐藏进度条和播放时间
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    isLive: true,
+});
muted ​
  • Type: Boolean
  • Default: false
是否默认静音
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
autoplay ​
  • Type: Boolean
  • Default: false
是否自动播放
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoplay: true,
+    muted: true,
+});
提示
假如希望默认进入页面就能自动播放视频，muted 必需为 true，更多信息请阅读 Autoplay Policy Changes
autoSize ​
  • Type: Boolean
  • Default: false
播放器的尺寸默认会填充整个 container 容器尺寸，所以经常出现黑边，该值能自动调整播放器尺寸以隐藏黑边，类似 css 的 object-fit: cover;
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+});
autoMini ​
  • Type: Boolean
  • Default: false
当播放器滚动到浏览器视口以外时，自动进入 迷你播放 模式
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoMini: true,
+});
loop ​
  • Type: Boolean
  • Default: false
是否循环播放
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    loop: true,
+});
flip ​
  • Type: Boolean
  • Default: false
是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单 里
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    flip: true,
+    setting: true,
+});
playbackRate ​
  • Type: Boolean
  • Default: false
是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    playbackRate: true,
+    setting: true,
+});
aspectRatio ​
  • Type: Boolean
  • Default: false
是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    aspectRatio: true,
+    setting: true,
+});
screenshot ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示 视频截图 功能
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    screenshot: true,
+});
提示
由于浏览器安全机制，假如视频源地址和网站是跨域的，可能会出现截图失败
setting ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示 设置面板 的开关按钮
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
hotkey ​
  • Type: Boolean
  • Default: true
是否使用快捷键
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    hotkey: true,
+});
热键描述
↑增加音量
↓降低音量
←视频快进
→视频快退
space切换播放/暂停
提示
只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效
pip ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示 画中画 的开关按钮
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    pip: true,
+});
mutex ​
  • Type: Boolean
  • Default: true
假如页面里同时存在多个播放器，是否只能让一个播放器播放
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    mutex: true,
+});
fullscreen ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示播放器 窗口全屏 按钮
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+});
fullscreenWeb ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示播放器 网页全屏 按钮
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
subtitleOffset ​
  • Type: Boolean
  • Default: false
字幕时间偏移，范围在 [-5s, 5s]，出现在 设置面板 里
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitleOffset: true,
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+    setting: true,
+});
miniProgressBar ​
  • Type: Boolean
  • Default: false
迷你进度条，只在播放器失去焦点后且正在播放时出现
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    miniProgressBar: true,
+});
useSSR ​
  • Type: Boolean
  • Default: false
是否使用 SSR 挂载模式，假如你希望在播放器挂载前，就提前渲染好播放器所需的 HTML 时有用
你可以通过 Artplayer.html 访问到播放器所需的 HTML
▶ Run Code
js
var $container = document.querySelector('.artplayer-app');
+$container.innerHTML = Artplayer.html;
 
-var art = new Artplayer({
-    container: $container,
-    url: '/assets/sample/video.mp4',
-    useSSR: true,
-});
playsInline ​
  • Type: Boolean
  • Default: true
在移动端是否使用 playsInline 模式
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    playsInline: true,
-});
layers ​
  • Type: Array
  • Default: []
初始化自定义的 层
▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: `<img style="width: 100px" src="${img}">`,
-            style: {
-                position: 'absolute',
-                top: '20px',
-                right: '20px',
-                opacity: '.9',
-            },
-            click: function (...args) {
-                console.info('click', args);
-                art.layers.show = false;
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-    ],
-});
组件配置 请参考以下地址：
/component/layers.html
settings ​
  • Type: Array
  • Default: []
初始化自定义的 设置面板
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'setting01',
-            selector: [
-                {
-                    html: 'setting01-01',
-                },
-                {
-                    html: 'setting01-02',
-                },
-            ],
-            onSelect: function (...args) {
-                console.info(args);
-            },
-        },
-        {
-            html: 'setting02',
-            selector: [
-                {
-                    html: 'setting02-01',
-                },
-                {
-                    html: 'setting02-02',
-                },
-            ],
-            onSelect: function (...args) {
-                console.info(args);
-            },
-        },
-    ],
-});
设置面板 请参考以下地址
/component/setting.html
contextmenu ​
  • Type: Array
  • Default: []
初始化自定义的 右键菜单
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            html: 'your-menu',
-            click: function (...args) {
-                console.info('click', args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
组件配置 请参考以下地址：
/component/contextmenu.html- Type:
controls ​
  • Type: Array
  • Default: []
初始化自定义的底部 控制栏
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'left',
-            html: 'your-control',
-            tooltip: 'Your Control',
-            style: {
-                color: 'green',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-        },
-    ],
-});
组件配置 请参考以下地址：
/component/controls.html
quality ​
  • Type: Array
  • Default: []
是否在底部控制栏里显示 画质选择 列表
属性类型描述
defaultBoolean默认画质
htmlString画质名字
urlString画质地址
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    quality: [
-        {
-            default: true,
-            html: 'SD 480P',
-            url: '/assets/sample/video.mp4',
-        },
-        {
-            html: 'HD 720P',
-            url: '/assets/sample/video.mp4',
-        },
-    ],
-});
highlight ​
  • Type: Array
  • Default: []
在进度条上显示 高亮信息
属性类型描述
timeNumber高亮时间（单位秒）
textString高亮文本
▶ Run Code
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: '－－终わり－－',
-        },
-    ],
-});
plugins ​
  • Type: Array
  • Default: []
初始化自定义的 插件
▶ Run Code
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
+var art = new Artplayer({
+    container: $container,
+    url: '/assets/sample/video.mp4',
+    useSSR: true,
+});
playsInline ​
  • Type: Boolean
  • Default: true
在移动端是否使用 playsInline 模式
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    playsInline: true,
+});
layers ​
  • Type: Array
  • Default: []
初始化自定义的 层
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'potser',
+            html: `<img style="width: 100px" src="${img}">`,
+            style: {
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+                opacity: '.9',
+            },
+            click: function (...args) {
+                console.info('click', args);
+                art.layers.show = false;
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+    ],
+});
组件配置 请参考以下地址：
/component/layers.html
settings ​
  • Type: Array
  • Default: []
初始化自定义的 设置面板
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'setting01',
+            selector: [
+                {
+                    html: 'setting01-01',
+                },
+                {
+                    html: 'setting01-02',
+                },
+            ],
+            onSelect: function (...args) {
+                console.info(args);
+            },
+        },
+        {
+            html: 'setting02',
+            selector: [
+                {
+                    html: 'setting02-01',
+                },
+                {
+                    html: 'setting02-02',
+                },
+            ],
+            onSelect: function (...args) {
+                console.info(args);
+            },
+        },
+    ],
+});
设置面板 请参考以下地址
/component/setting.html
contextmenu ​
  • Type: Array
  • Default: []
初始化自定义的 右键菜单
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            html: 'your-menu',
+            click: function (...args) {
+                console.info('click', args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
组件配置 请参考以下地址：
/component/contextmenu.html- Type:
controls ​
  • Type: Array
  • Default: []
初始化自定义的底部 控制栏
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'left',
+            html: 'your-control',
+            tooltip: 'Your Control',
+            style: {
+                color: 'green',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+        },
+    ],
+});
组件配置 请参考以下地址：
/component/controls.html
quality ​
  • Type: Array
  • Default: []
是否在底部控制栏里显示 画质选择 列表
属性类型描述
defaultBoolean默认画质
htmlString画质名字
urlString画质地址
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    quality: [
+        {
+            default: true,
+            html: 'SD 480P',
+            url: '/assets/sample/video.mp4',
+        },
+        {
+            html: 'HD 720P',
+            url: '/assets/sample/video.mp4',
+        },
+    ],
+});
highlight ​
  • Type: Array
  • Default: []
在进度条上显示 高亮信息
属性类型描述
timeNumber高亮时间（单位秒）
textString高亮文本
▶ Run Code
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: '－－终わり－－',
+        },
+    ],
+});
plugins ​
  • Type: Array
  • Default: []
初始化自定义的 插件
▶ Run Code
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [myPlugin],
-});
thumbnails ​
  • Type: Object
  • Default: {}
在进度条上设置 预览图
属性类型描述
urlString预览图地址
numberNumber预览图数量
columnNumber预览图列数
widthNumber预览图宽度
heightNumber预览图高度
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    thumbnails: {
-        url: '/assets/sample/thumbnails.png',
-        number: 60,
-        column: 10,
-    },
-});
在线生成预览图
artplayer-tool-thumbnail
subtitle ​
  • Type: Object
  • Default: {}
设置视频的字幕，支持字幕格式：vtt, srt, ass
属性类型描述
nameString字幕名字
urlString字幕地址
typeString字幕类型，可选 vtt, srt, ass
styleObject字幕样式
encodingString字幕编码，默认 utf-8
escapeBoolean是否转义 html 标签，默认为 true
onVttLoadFunction用于修改 vtt 文本的函数
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-        type: 'srt',
-        encoding: 'utf-8',
-        escape: true,
-        style: {
-            color: '#03A9F4',
-            'font-size': '30px',
-        },
-    },
-});
moreVideoAttr ​
  • Type: Object
  • Default: {'controls': false,'preload': 'metadata'}
更多视频属性，这些属性将直接写入视频元素里
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    moreVideoAttr: {
-        'webkit-playsinline': true,
-        playsInline: true,
-    },
-});
icons ​
  • Type: Object
  • Default: {}
用于替换默认图标，支持 Html 字符串和 HTMLElement
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    icons: {
-        loading: '<img src="/assets/img/ploading.gif">',
-        state: '<img src="/assets/img/state.png">',
-    },
-});
全部图标的定义
artplayer/types/icons.d.ts
type ​
  • Type: String
  • Default: ''
用于指明视频的格式，需要配合 customType 一起使用，默认视频的格式就是视频地址的后缀（如 .m3u8, .mkv, .ts），但有时候视频地地址没有正确的后缀，所以需要特别指明
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.m3u8',
-    type: 'm3u8',
-});
后缀的识别
播放器只能解析这种后缀：/assets/sample/video.m3u8
但无法解析这种后缀：/assets/sample/video?type=m3u8
所以假如你使用了 customType，最好同时要指明 type
customType ​
  • Type: Object
  • Default: {}
通过视频的 type 进行匹配，把视频解码权交给第三方程序进行处理，处理的函数能接收三个参数
  • video : 视频 DOM 元素
  • url : 视频地址
  • art : 当前实例
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.m3u8',
-    customType: {
-        m3u8: function (video, url, art) {
-            //
-        },
-    },
-});
lang ​
  • Type: String
  • Default: navigator.language.toLowerCase()
默认显示语言，目前支持：en, zh-cn
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'en',
-});
更多的语言设置
/start/i18n.html
i18n ​
  • Type: Object
  • Default: {}
自定义 i18n 配置，该配置会和自带的 i18n 进行深度合并
新增你的语言:
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'your-lang',
-    i18n: {
-        'your-lang': {
-            Play: 'Your Play'
-        },
-    },
-});
修改现有的语言
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: {
-        'zh-cn': {
-            Play: 'Your Play'
-        },
-        'zh-tw': {
-            Play: 'Your Play'
-        },
-    },
-});
更多的语言设置
/start/i18n.html
lock ​
  • Type: Boolean
  • Default: false
是否在移动端显示一个 锁定按钮 ，用于隐藏底部 控制栏
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lock: true,
-});
fastForward ​
  • Type: Boolean
  • Default: false
是否在移动端添加长按视频快进功能
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});
autoPlayback ​
  • Type: Boolean
  • Default: false
是否使用自动 回放功能
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    id: 'your-url-id',
-    autoPlayback: true,
-});
提示
因为播放器默认使用 url 作为 key 来缓存播放进度的
但假如你的同一个视频的 url 是不同的话，那么你需要使用 id 来标识视频的唯一 key
autoOrientation ​
  • Type: Boolean
  • Default: false
是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoOrientation: true,
-});
airplay ​
  • Type: Boolean
  • Default: false
是否显示 airplay 按钮，当前只有部分浏览器支持该功能
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    airplay: true,
-});
cssVar ​
  • Type: Object
  • Default: {}
用于改变内置的css变量
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    cssVar: {
-        //
-    },
-});
cssVar 写法参考
artplayer/types/cssVar.d.d.ts

-    
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [myPlugin],
+});

thumbnails ​

  • Type: Object
  • Default: {}

在进度条上设置 预览图

属性类型描述
urlString预览图地址
numberNumber预览图数量
columnNumber预览图列数
widthNumber预览图宽度
heightNumber预览图高度
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    thumbnails: {
+        url: '/assets/sample/thumbnails.png',
+        number: 60,
+        column: 10,
+    },
+});

在线生成预览图

artplayer-tool-thumbnail

subtitle ​

  • Type: Object
  • Default: {}

设置视频的字幕，支持字幕格式：vtt, srt, ass

属性类型描述
nameString字幕名字
urlString字幕地址
typeString字幕类型，可选 vtt, srt, ass
styleObject字幕样式
encodingString字幕编码，默认 utf-8
escapeBoolean是否转义 html 标签，默认为 true
onVttLoadFunction用于修改 vtt 文本的函数
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+        type: 'srt',
+        encoding: 'utf-8',
+        escape: true,
+        style: {
+            color: '#03A9F4',
+            'font-size': '30px',
+        },
+    },
+});

moreVideoAttr ​

  • Type: Object
  • Default: {'controls': false,'preload': 'metadata'}

更多视频属性，这些属性将直接写入视频元素里

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    moreVideoAttr: {
+        'webkit-playsinline': true,
+        playsInline: true,
+    },
+});

icons ​

  • Type: Object
  • Default: {}

用于替换默认图标，支持 Html 字符串和 HTMLElement

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    icons: {
+        loading: '<img src="/assets/img/ploading.gif">',
+        state: '<img src="/assets/img/state.png">',
+    },
+});

全部图标的定义

artplayer/types/icons.d.ts

type ​

  • Type: String
  • Default: ''

用于指明视频的格式，需要配合 customType 一起使用，默认视频的格式就是视频地址的后缀（如 .m3u8, .mkv, .ts），但有时候视频地地址没有正确的后缀，所以需要特别指明

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.m3u8',
+    type: 'm3u8',
+});

后缀的识别

播放器只能解析这种后缀：/assets/sample/video.m3u8

但无法解析这种后缀：/assets/sample/video?type=m3u8

所以假如你使用了 customType，最好同时要指明 type

customType ​

  • Type: Object
  • Default: {}

通过视频的 type 进行匹配，把视频解码权交给第三方程序进行处理，处理的函数能接收三个参数

  • video : 视频 DOM 元素
  • url : 视频地址
  • art : 当前实例
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.m3u8',
+    customType: {
+        m3u8: function (video, url, art) {
+            //
+        },
+    },
+});

lang ​

  • Type: String
  • Default: navigator.language.toLowerCase()

默认显示语言，目前支持：en, zh-cn

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'en',
+});

更多的语言设置

/start/i18n.html

i18n ​

  • Type: Object
  • Default: {}

自定义 i18n 配置，该配置会和自带的 i18n 进行深度合并

新增你的语言:

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'your-lang',
+    i18n: {
+        'your-lang': {
+            Play: 'Your Play'
+        },
+    },
+});

修改现有的语言

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: {
+        'zh-cn': {
+            Play: 'Your Play'
+        },
+        'zh-tw': {
+            Play: 'Your Play'
+        },
+    },
+});

更多的语言设置

/start/i18n.html

lock ​

  • Type: Boolean
  • Default: false

是否在移动端显示一个 锁定按钮 ，用于隐藏底部 控制栏

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lock: true,
+});

fastForward ​

  • Type: Boolean
  • Default: false

是否在移动端添加长按视频快进功能

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});

autoPlayback ​

  • Type: Boolean
  • Default: false

是否使用自动 回放功能

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    id: 'your-url-id',
+    autoPlayback: true,
+});

提示

因为播放器默认使用 url 作为 key 来缓存播放进度的

但假如你的同一个视频的 url 是不同的话，那么你需要使用 id 来标识视频的唯一 key

autoOrientation ​

  • Type: Boolean
  • Default: false

是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoOrientation: true,
+});

airplay ​

  • Type: Boolean
  • Default: false

是否显示 airplay 按钮，当前只有部分浏览器支持该功能

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    airplay: true,
+});

cssVar ​

  • Type: Object
  • Default: {}

用于改变内置的css变量

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    cssVar: {
+        //
+    },
+});

cssVar 写法参考

artplayer/types/cssVar.d.d.ts

+ \ No newline at end of file diff --git a/packages/artplayer-vitepress/docs/en/advanced/event.md b/packages/artplayer-vitepress/docs/en/advanced/event.md index 7a3edffaf..7df89af3a 100644 --- a/packages/artplayer-vitepress/docs/en/advanced/event.md +++ b/packages/artplayer-vitepress/docs/en/advanced/event.md @@ -784,7 +784,7 @@ Triggered when the value of the duration property changes ## `video:emptied` The media content becomes empty; for example, when this media has been completely loaded (or partially loaded), this event is sent and the load() method is called to reload it -``` + ## `video:ended` The video has stopped because the media reached the end point