ArtPlayer/packages/artplayer-document/docs/zh-cn/Advance.md

title, sidebar_position, slug

title	sidebar_position	slug
高级属性	4	/zh-cn/advance

:::tip 提示

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

:::

id

• 类型: Number

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

option

• 类型: Object

播放器实例的参数对象

isFocus

• 类型: Boolean

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

isDestroy

• 类型: Boolean

播放器实例是否被销毁

userAgent

• 类型: Boolean

等于 window.navigator.userAgent

isMobile

• 类型: Boolean

当前环境是否移动设备

isWechat

• 类型: Boolean

当前环境是否微信设备

whitelist

• 类型: Object

管理白名单的对象

template

• 类型: Object

管理播放器 Html 的对象

storage

• 类型: Object

管理持久化存储的对象

icons

• 类型: Object

管理图标的对象

i18n

• 类型: Object

管理多语言的对象

player

• 类型: Object

管理核心功能的对象

subtitle

• 类型: Object

管理字幕的对象

info

• 类型: Object

管理统计信息的对象

layers

• 类型: Object

管理业务层的对象

属性 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',
            },
        },
    ],
});

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

方法 add 可以动态添加业务层，更多信息请访问 自定义组件的使用

▶ 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 输出自定义提示信息，默认停留时间为两秒，且新的信息会马上覆盖旧的信息

▶ 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 可以控制控制栏是否显示

▶ Run Code

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

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

方法 add 可以动态添加控制器，更多信息请访问 自定义组件的使用

▶ 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 可以控制菜单是否显示

▶ 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 可以动态添加菜单项，更多信息请访问 自定义组件的使用

▶ 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 可以控制菜单是否加载层

▶ 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 可以控制遮罩层是否加载层

▶ 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 可以动态添加快捷键，第一个参数是 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 键')
    })
})

:::tip 提示

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

:::

setting

• 类型: Object

管理设置面板的对象

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

方法 add 可以动态添加设置项，更多信息请访问 自定义组件的使用

▶ 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;
    art.setting.add({
        html: '自定义设置',
        click: function () {
            console.info('你点击了自定义设置');
            art.setting.show = false;
        },
    });
})

plugins

• 类型: Object

管理插件的对象

方法 add 可以动态添加插件，更多信息请访问 自定义插件的使用

▶ Run Code

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

art.on('ready', () => {
    art.plugins.add(function myPlugin(art) {
        console.info('myPlugin running...');
        return {
            something: 'something',
            doSomething: function () {
                console.info('Do something here...');
            },
        };
    });
})