高级属性
提示
这页面是对常用属性的一些额外补充,需要深入开发自定义功能时才需要阅读
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
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
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
代理原生事件的方法,便于事件的管理与销毁
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
里
属性 | 类型 | 描述 |
---|---|---|
get | Function | 获取值 |
set | Function | 设置值 |
del | Function | 删除值 |
clear | Function | 清空对象 |
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
可以获取到对应的语言的值
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
console.info(art.i18n.get('Play'));
});
update
- 类型:
Function
方法 update
可以动态添加更多语言
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
可以控制字幕显示
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
可以动态修改字幕样式
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 可以设置和获取字幕网址
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
,但可以修改字幕选项
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
可以控制全部图层是否显示
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
可以动态添加业务层
属性 | 类型 | 描述 |
---|---|---|
disable | Boolean | 是否禁用组件 |
name | String | 组件唯一名称,用于标记类名 |
index | Number | 组件索引,用于显示的优先级 |
html | String 、Element | 组件的 DOM 元素 |
style | Object | 组件样式对象 |
click | Function | 组件点击事件 |
mounted | Function | 组件挂载后触发 |
tooltip | String | 组件的提示文本 |
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
输出自定义提示信息,默认停留时间为两秒,且新的信息会马上覆盖旧的信息
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
可以控制控制栏是否显示
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('ready', () => {
setTimeout(() => {
art.controls.show = false;
}, 3000);
});
add
- 类型:
Function
方法 add
可以动态添加控制器
属性 | 类型 | 描述 |
---|---|---|
disable | Boolean | 是否禁用组件 |
name | String | 组件唯一名称,用于标记类名 |
index | Number | 组件索引,用于显示的优先级 |
html | String 、Element | 组件的 DOM 元素 |
style | Object | 组件样式对象 |
click | Function | 组件点击事件 |
mounted | Function | 组件挂载后触发 |
tooltip | String | 组件的提示文本 |
position | String | 位置在 left 或者 right |
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
可以控制菜单是否显示
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
可以动态添加菜单项
属性 | 类型 | 描述 |
---|---|---|
disable | Boolean | 是否禁用组件 |
name | String | 组件唯一名称,用于标记类名 |
index | Number | 组件索引,用于显示的优先级 |
html | String 、Element | 组件的 DOM 元素 |
style | Object | 组件样式对象 |
click | Function | 组件点击事件 |
mounted | Function | 组件挂载后触发 |
tooltip | String | 组件的提示文本 |
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
可以控制是否显示加载中的图标
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
可以控制遮罩层是否加载层
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
数字,第二个参数是回调函数
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
可以控制设置面板是否显示
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
可以动态添加插件
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());
});