import{_ as a,c as l,o as p,a as s,b as n}from"./app.c821c423.js";const X=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"whitelist","slug":"whitelist","link":"#whitelist","children":[]},{"level":2,"title":"template","slug":"template","link":"#template","children":[]},{"level":2,"title":"events","slug":"events","link":"#events","children":[]},{"level":2,"title":"storage","slug":"storage","link":"#storage","children":[]},{"level":2,"title":"icons","slug":"icons","link":"#icons","children":[]},{"level":2,"title":"i18n","slug":"i18n","link":"#i18n","children":[]},{"level":2,"title":"notice","slug":"notice","link":"#notice","children":[]},{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"subtitle","slug":"subtitle","link":"#subtitle","children":[]},{"level":2,"title":"loading","slug":"loading","link":"#loading","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"mask","slug":"mask","link":"#mask","children":[]},{"level":2,"title":"setting","slug":"setting","link":"#setting","children":[]},{"level":2,"title":"plugins","slug":"plugins","link":"#plugins","children":[]}],"relativePath":"advanced/built-in.md","lastUpdated":1673441101000}'),o={name:"advanced/built-in.md"},e=s('

高级属性

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

`option`

播放器的选项

',4),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

console.info(art.option);

提示

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

`whitelist`

管理移动设备的白名单功能，只有一个属性 state 返回是否启用播放器功能

`,4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    whitelist: [(ua) => /iPhone/gi.test(ua)],
});

console.info(art.whitelist.state);

提示

在上面这个例子中，当使用 iPhone 访问播放器时，art.whitelist.state 会返回 false，即使用原生的播放器，而不是 Artplayer 播放器

`template`

管理播放器所有的 DOM 元素

`,4),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`

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 加载事件

`,5),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s(`

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`

管理播放器的本地存储

name 属性用于设置缓存的 key
set 方法用于设置缓存
get 方法用于获取缓存
del 方法用于删除缓存
clear 方法用于清空缓存

`,5),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s(`

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),b=n("div",{className:"run-code"},"▶ Run Code",-1),u=s(`

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),m=n("div",{className:"run-code"},"▶ Run Code",-1),_=s(`

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 对象

`,5),h=n("div",{className:"run-code"},"▶ Run Code",-1),g=s(`

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),v=n("div",{className:"run-code"},"▶ Run Code",-1),E=s(`

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 方法用于动态添加层
show 属性用于设置是否显示全部层
toggle 属性用于切换是否显示全部层

`,5),T=n("div",{className:"run-code"},"▶ Run Code",-1),k=s(`

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);
});

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

/start/component.html

`controls`

管理播放器的控制器

add 方法用于动态添加控制器
show 属性用于设置是否显示全部控制器
toggle 属性用于切换是否显示全部控制器

`,5),w=n("div",{className:"run-code"},"▶ Run Code",-1),f=s(`

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);
});

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

/start/component.html

`contextmenu`

管理播放器的右键菜单

add 方法用于动态添加菜单
show 属性用于设置是否显示全部菜单
toggle 属性用于切换是否显示全部菜单

`,5),S=n("div",{className:"run-code"},"▶ Run Code",-1),P=s(`

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);
});

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

/start/component.html

`subtitle`

管理播放器的字幕功能

url 属性设置和返回当前字幕地址
style 方法设置当前字幕的样式
switch 方法设置当前字幕地址和选项

`,5),I=n("div",{className:"run-code"},"▶ Run Code",-1),N=s(`

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 属性用于切换是否显示加载层

`,4),R=n("div",{className:"run-code"},"▶ Run Code",-1),V=s(`

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 方法用于删除快捷键

`,4),j=n("div",{className:"run-code"},"▶ Run Code",-1),x=s(`

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`

管理播放器的遮罩层

show 属性用于设置是否显示遮罩层
toggle 属性用于切换是否显示遮罩层

`,5),O=n("div",{className:"run-code"},"▶ Run Code",-1),M=s(`

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 方法用于动态添加设置项
show 属性用于设置是否显示全部设置项
toggle 属性用于切换是否显示全部设置项
update 方法动态更新设置项

`,4),$=n("div",{className:"run-code"},"▶ Run Code",-1),z=s(`

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);
});

设置面板 请参考以下地址

/start/setting.html

`plugins`

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

`,4),B=n("div",{className:"run-code"},"▶ Run Code",-1),G=s(`

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),L=[e,c,r,t,D,F,y,i,A,C,d,b,u,m,_,h,g,v,E,T,k,w,f,S,P,I,N,R,V,j,x,O,M,$,z,B,G];function W(q,J,U,Y,H,K){return p(),l("div",null,L)}const Z=a(o,[["render",W]]);export{X as __pageData,Z as default};

高级属性 #

option #

whitelist #

template #

events #

storage #

icons #

i18n #

notice #

layers #

controls #

contextmenu #

subtitle #

loading #

hotkey #

mask #

setting #

plugins #

高级属性

`option`

`whitelist`

`template`

`events`

`storage`

`icons`

`i18n`

`notice`

`layers`

`controls`

`contextmenu`

`subtitle`

`loading`

`hotkey`

`mask`

`setting`

`plugins`