Skip to main content

高级属性

提示

这页面是对常用属性的一些额外补充,需要深入开发自定义功能时才需要阅读

id

  • 类型: Number

播放器实例的一个自增编号

option

  • 类型: Object

播放器实例经合并后的参数对象

isFocus

  • 类型: Boolean

播放器实例是否获得了焦点,如最后被用户点击过

isInput

  • 类型: Boolean

播放器实例是否在 input 元素上获得了焦点,如正在输入弹幕

isLock

  • 类型: Boolean

播放器实例是否已在移动端锁定

isDestroy

  • 类型: Boolean

播放器实例是否被销毁

whitelist

  • 类型: Object

管理白名单的对象

template

  • 类型: Object

管理播放器 Html 的对象

query

  • 类型: Function

方法 query 可以查找当前播放器实例内的 dom 元素,等同于 document.querySelector('.artplayer-app').querySelector

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

art.on('ready', () => {
var $video = art.template.query('.art-video');
console.info($video);
});

query

  • 类型: Function

等于 art.template.query

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

art.on('ready', () => {
var $video = art.query('.art-video');
console.info($video);
});

events

  • 类型: Object

管理事件发生的对象

proxy

  • 类型: Function

代理原生事件的方法,便于事件的管理与销毁

▶ Run Code
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);
});

storage

  • 类型: Object

管理持久化存储的对象

播放器会自动添加一个名为 artplayer_settings 的 JSON 对象到的 localStorage

属性类型描述
getFunction获取值
setFunction设置值
delFunction删除值
clearFunction清空对象
▶ Run Code
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});

art.storage.set('your-key', 'your-value');
art.storage.get('your-key');
art.storage.del('your-key');
art.storage.clear();

icons

  • 类型: Object

管理图标的对象

i18n

  • 类型: Object

管理多语言的对象

get

  • 类型: Getter/Setter

方法 get 可以获取到对应的语言的值

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

art.on('ready', () => {
console.info(art.i18n.get('Play'));
});

update

  • 类型: Function

方法 update 可以动态添加更多语言

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

art.i18n.update({
'zh-cn': {
Language: '简体',
},
'zh-tw': {
Language: '繁體',
},
en: {
Language: 'English',
},
jp: {
Language: '日文',
},
fr: {
Language: 'Français',
},
ru: {
Language: 'Russe',
},
});

player

  • 类型: Object

管理核心功能的对象,所以属性和方法都代理到播放器实例上了

subtitle

  • 类型: Object

管理字幕的对象

show

  • 类型: Getter/Setter

属性 show 可以控制字幕显示

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

art.on('ready', () => {
art.seek = 20;
art.subtitle.show = false;
setTimeout(() => {
art.subtitle.show = true;
}, 3000);
});

style

  • 类型: Function

方法 style 可以动态修改字幕样式

▶ Run Code
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
subtitle: {
url: '/assets/sample/subtitle.srt',
encoding: 'utf-8',
style: {
color: '#03A9F4',
'font-size': '30px',
},
},
});

art.on('ready', () => {
art.seek = 20;
setTimeout(() => {
art.subtitle.style({
color: 'red',
'font-size': '40px',
});
}, 3000);
});

url

  • 类型: Getter/Setter

属性 url 可以设置和获取字幕网址

▶ Run Code
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
subtitle: {
url: '/assets/sample/subtitle.srt',
encoding: 'utf-8',
style: {
color: '#03A9F4',
'font-size': '30px',
},
},
});

art.on('ready', () => {
console.info(art.subtitle.url);
setTimeout(() => {
art.subtitle.url = '/assets/sample/subtitle.srt?t=1';
}, 3000);
});

switch

  • 类型: Function

方法 switch 就像属性设置 url,但可以修改字幕选项

▶ Run Code
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
subtitle: {
url: '/assets/sample/subtitle.srt',
encoding: 'utf-8',
style: {
color: 'red',
'font-size': '30px',
},
},
});

art.on('ready', () => {
art.seek = 20;
setTimeout(() => {
art.subtitle.switch('/assets/sample/subtitle.srt?t=1', {
name: 'The new subtitle',
style: {
color: 'green',
'font-size': '24px',
},
});
}, 3000);
});

info

  • 类型: Object

管理统计信息的对象

layers

  • 类型: Object

管理业务层的对象

show

  • 类型: Getter/Setter

属性 show 可以控制全部图层是否显示

▶ Run Code
var img = '/assets/sample/layer.png';
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
layers: [
{
html: `<img style="width: 100px" src="${img}">`,
style: {
position: 'absolute',
top: '20px',
right: '20px',
opacity: '.9',
},
},
{
html: `<img style="width: 100px" src="${img}">`,
style: {
position: 'absolute',
top: '20px',
left: '20px',
opacity: '.9',
},
},
],
});

art.on('ready', () => {
setTimeout(() => {
art.layers.show = false;
}, 3000);
});

add

  • 类型: Function

方法 add 可以动态添加业务层

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称,用于标记类名
indexNumber组件索引,用于显示的优先级
htmlStringElement组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
▶ Run Code
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});

var img = '/assets/sample/layer.png';
art.on('ready', () => {
setTimeout(() => {
art.layers.add({
html: `<img style="width: 100px" src="${img}">`,
style: {
position: 'absolute',
top: '20px',
right: '20px',
opacity: '.9',
},
});
}, 3000);
});

notice

  • 类型: Object

管理提示信息的对象

show

  • 类型: Getter/Setter

属性 show 输出自定义提示信息,默认停留时间为两秒,且新的信息会马上覆盖旧的信息

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

art.on('ready', () => {
art.notice.show = '自定义提示信息1';
art.notice.show = '自定义提示信息2';
});

controls

  • 类型: Object

管理控制栏的对象

show

  • 类型: Getter/Setter

属性 show 可以控制控制栏是否显示

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

art.on('ready', () => {
setTimeout(() => {
art.controls.show = false;
}, 3000);
});

add

  • 类型: Function

方法 add 可以动态添加控制器

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称,用于标记类名
indexNumber组件索引,用于显示的优先级
htmlStringElement组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
positionString位置在 left 或者 right
▶ Run Code
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});

art.on('ready', () => {
setTimeout(() => {
art.controls.add({
position: 'right',
index: 10,
html: '自定义按钮',
tooltip: '自定义按钮的提示',
click: function () {
console.log('你点击了自定义按钮');
},
});
}, 3000);
});

contextmenu

  • 类型: Object

管理右键菜单的对象

show

  • 类型: Getter/Setter

属性 show 可以控制菜单是否显示

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

art.on('ready', () => {
art.contextmenu.show = true;
setTimeout(() => {
art.contextmenu.show = false;
}, 3000);
});

add

  • 类型: Function

方法 add 可以动态添加菜单项

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称,用于标记类名
indexNumber组件索引,用于显示的优先级
htmlStringElement组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
▶ Run Code
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});

art.on('ready', () => {
art.contextmenu.show = true;
setTimeout(() => {
art.contextmenu.add({
html: '自定义菜单',
click: function () {
console.info('你点击了自定义菜单');
art.contextmenu.show = false;
},
});
}, 3000);
});

loading

  • 类型: Object

管理加载中的图标

show

  • 类型: Getter/Setter

属性 show 可以控制是否显示加载中的图标

▶ 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;
}, 3000);
});

mask

  • 类型: Object

管理遮罩层的对象

show

  • 类型: Getter/Setter

属性 show 可以控制遮罩层是否加载层

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

art.on('ready', () => {
art.mask.show = true;
setTimeout(() => {
art.mask.show = false;
}, 3000);
});

hotkey

  • 类型: Object

管理快捷键的对象

add

  • 类型: Function

方法 add 可以动态添加快捷键,第一个参数是 key code 数字,第二个参数是回调函数

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

art.on('ready', () => {
art.hotkey.add(65, () => {
console.info('你点击了 A 键');
});

art.hotkey.add(66, () => {
console.info('你点击了 B 键');
});
});
提示

只在播放器获得焦点后(如点击了播放器后),该快捷键才会生效

setting

  • 类型: Object

管理设置面板的对象

show

  • 类型: Getter/Setter

属性 show 可以控制设置面板是否显示

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

art.on('ready', () => {
art.seek = 20;
art.setting.show = true;
setTimeout(() => {
art.setting.show = false;
}, 3000);
});

plugins

  • 类型: Object

管理插件的对象

add

  • 类型: Function

方法 add 可以动态添加插件

▶ Run Code
function myPlugin(art) {
console.info('你可以在插件里访问到播放器的实例');
return {
name: 'myPlugin',
something: '自定义导出的属性',
doSomething: function () {
console.info('自定义导出的方法');
},
};
}

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

art.on('ready', () => {
art.plugins.add(myPlugin);
console.info(art.plugins.myPlugin.something);
console.info(art.plugins.myPlugin.doSomething());
});