高级属性

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

`option`

播放器的选项

▶ Run Code

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

console.info(art.option);

提示

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

`template`

管理播放器所有的 DOM 元素

▶ Run Code

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

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 方法用于清空缓存

▶ Run Code

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

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

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

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 属性用于显示提示语

▶ Run Code

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

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`

管理播放器的控制器

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

▶ Run Code

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`

管理播放器的右键菜单

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

▶ Run Code

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`

管理播放器的字幕功能

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

▶ Run Code

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

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

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

▶ Run Code

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

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

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

高级属性 ​

option ​

template ​

events ​

storage ​

icons ​

i18n ​

notice ​

layers ​

controls ​

contextmenu ​

subtitle ​

loading ​

hotkey ​

mask ​

setting ​

plugins ​

高级属性

`option`

`template`

`events`

`storage`

`icons`

`i18n`

`notice`

`layers`

`controls`

`contextmenu`

`subtitle`

`loading`

`hotkey`

`mask`

`setting`

`plugins`