Option

`container`

Type: String, Element
Default: #artplayer

The DOM container attached to the player

▶ Run Code

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

You may need to initialize the size of container elements, such as:

css

.artplayer-app {
    width: 400px;
    height: 300px;
}

Tip

Of all options, only container is required

`url`

Type: String
Default: ''

Video source address

▶ Run Code

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

Sometimes the url address is not known so quickly. At this time, you can set the url asynchronously

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
});

setTimeout(() => {
    art.url = '/assets/sample/video.mp4';
}, 1000);

Tip

Three video file formats are supported by default: .mp4, .ogg, and .webm

If you need to play .m3u8 or .flv or other formats, please refer to the Libraries on the left

`id`

Type: String
Default: ''

The unique identifier of the player, currently only used for autoplayback

▶ Run Code

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

`onReady`

Type: Function
Default: undefined

The constructor accepts a function as the second parameter, which is triggered when the player is initialized successfully and the video can be played, just like the ready event

▶ Run Code

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

Equivalent to:

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

art.on('ready', () => {
    art.play();
});

Tip

The this in the callback function is the player instance, but if the callback function uses the arrow function, the this will not point to the player instance

`poster`

Type: String
Default: ''

Video posters will only appear when the player is initialized and not played

▶ Run Code

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

`title`

Type: String
Default: ''

Video title, which currently appears in video screenshot and mini mode

▶ Run Code

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

`theme`

Type: String
Default: #f00

The player theme color is currently used on the progress bar and highlighted element

▶ Run Code

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

`volume`

Type: Number
Default: 0.7

Default volume of player

▶ Run Code

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

Tip

The player will cache the size of the last volume, and the player will read the cache value at the next initialization (such as refreshing the page)

`isLive`

Type: Boolean
Default: false

When using live mode, the progress bar and playback time will be hidden

▶ Run Code

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

`muted`

Type: Boolean
Default: false

Whether to mute by default

▶ Run Code

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

`autoplay`

Type: Boolean
Default: false

Whether to play automatically

▶ Run Code

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

Tip

If you want to enter the page by default to automatically play the video, muted must be true. For more information, please read Autoplay Policy Changes

`autoSize`

Type: Boolean
Default: false

The size of the player will fill the entire container size by default, so black edges often appear. This value can automatically adjust the size of the player to hide the black edges, similar to the object-fit: contain of css

▶ Run Code

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

`autoMini`

Type: Boolean
Default: false

When the player scrolls outside the viewport, it automatically enters the mini mode

▶ Run Code

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

`loop`

Type: Boolean
Default: false

Whether to play in a loop

▶ Run Code

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

`flip`

Type: Boolean
Default: false

Whether to display the video flip function currently only appears in the Setting and Contextmenu

▶ Run Code

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

`playbackRate`

Type: Boolean
Default: false

Whether to display the video playback speed function will appear in the Setting and Contextmenu

▶ Run Code

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

`aspectRatio`

Type: Boolean
Default: false

Whether to display the video aspect ratio function will appear in the Setting and Contextmenu

▶ Run Code

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

`screenshot`

Type: Boolean
Default: false

Whether to display the video screenshot function in the bottom control bar

▶ Run Code

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

Tip

Due to the browser security policy, if the video source address and website are cross-domain, the screenshot may fail

`setting`

Type: Boolean
Default: false

Whether to display the switch button of Setting in the bottom control bar

▶ Run Code

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

`hotkey`

Type: Boolean
Default: true

Whether to use shortcut keys

▶ Run Code

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

Hotkeys	Sescribe
`↑`	Volume Up
`↓`	Volume Down
`←`	Fast forward
`→`	Fast rewind
`space`	Toggle play/pause

Tip

These shortcut keys will only take effect after the player gets the focus (such as clicking the player)

`pip`

Type: Boolean
Default: false

Whether to display the picture in picture switch button in the bottom control bar

▶ Run Code

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

`mutex`

Type: Boolean
Default: true

If there are multiple players in the page at the same time, can only one player play

▶ Run Code

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

`fullscreen`

Type: Boolean
Default: false

Whether to display the player window full screen button in the bottom control bar

▶ Run Code

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

`fullscreenWeb`

Type: Boolean
Default: false

Whether to display the player full screen web page button in the bottom control bar

▶ Run Code

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

`subtitleOffset`

Type: Boolean
Default: false

Subtitle time offset, with the range of [-5s, 5s], appears in the Settings

▶ Run Code

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

`miniProgressBar`

Type: Boolean
Default: false

Mini progress bar, only appears when the player loses focus and is playing

▶ Run Code

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

`useSSR`

Type: Boolean
Default: false

Whether to use the SSR mount mode is useful if you want to render the HTML required by the player in advance before the player is mounted

You can access the HTML required by the player through Artplayer.html

▶ Run Code

var $container = document.querySelector('.artplayer-app');
$container.innerHTML = Artplayer.html;

var art = new Artplayer({
    container: $container,
    url: '/assets/sample/video.mp4',
    useSSR: true,
});

`playsInline`

Type: Boolean
Default: true

Whether to use the playsInline mode on the mobile end

▶ Run Code

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

`layers`

Type: Array
Default: []

Initialize the customized layers

▶ Run Code

var img = '/assets/sample/layer.png';
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    layers: [
        {
            name: 'potser',
            html: `<img style="width: 100px" src="${img}">`,
            style: {
                position: 'absolute',
                top: '20px',
                right: '20px',
                opacity: '.9',
            },
            click: function (...args) {
                console.info('click', args);
                art.layers.show = false;
            },
            mounted: function (...args) {
                console.info('mounted', args);
            },
        },
    ],
});

Please refer to the following address for Component:

/start/component.html

`settings`

Type: Array
Default: []

Initialize the customized Setting

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    setting: true,
    settings: [
        {
            html: 'setting01',
            selector: [
                {
                    html: 'setting01-01',
                },
                {
                    html: 'setting01-02',
                },
            ],
            onSelect: function (...args) {
                console.info(args);
            },
        },
        {
            html: 'setting02',
            selector: [
                {
                    html: 'setting02-01',
                },
                {
                    html: 'setting02-02',
                },
            ],
            onSelect: function (...args) {
                console.info(args);
            },
        },
    ],
});

Please refer to the following address for Setting

/start/setting.html

`contextmenu`

Type: Array
Default: []

初始化自定义的 右键菜单

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    contextmenu: [
        {
            html: 'your-menu',
            click: function (...args) {
                console.info('click', args);
                art.contextmenu.show = false;
            },
        },
    ],
});

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

/start/component.html- Type:

`controls`

Type: Array
Default: []

初始化自定义的底部 控制栏

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    controls: [
        {
            position: 'left',
            html: 'your-control',
            tooltip: 'Your Control',
            style: {
                color: 'green',
            },
            click: function (...args) {
                console.info('click', args);
            },
        },
    ],
});

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

/start/component.html

`quality`

Type: Array
Default: []

是否在底部控制栏里显示 画质选择 列表

属性	类型	描述
`default`	`Boolean`	默认画质
`html`	`String`	画质名字
`url`	`String`	画质地址

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    quality: [
        {
            default: true,
            html: 'SD 480P',
            url: '/assets/sample/video.mp4',
        },
        {
            html: 'HD 720P',
            url: '/assets/sample/video.mp4',
        },
    ],
});

`highlight`

Type: Array
Default: []

在进度条上显示 高亮信息

属性	类型	描述
`time`	`Number`	高亮时间（单位秒）
`text`	`String`	高亮文本

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    highlight: [
        {
            time: 60,
            text: 'One more chance',
        },
        {
            time: 120,
            text: '谁でもいいはずなのに',
        },
        {
            time: 180,
            text: '夏の想い出がまわる',
        },
        {
            time: 240,
            text: 'こんなとこにあるはずもないのに',
        },
        {
            time: 300,
            text: '－－终わり－－',
        },
    ],
});

`plugins`

Type: Array
Default: []

初始化自定义的 插件

▶ Run Code

function myPlugin(art) {
    console.info(art);
    return {
        name: 'myPlugin',
        something: 'something',
        doSomething: function () {
            console.info('doSomething');
        },
    };
}

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

`whitelist`

Type: Array
Default: []

因为不同的移动设备存在多种差异和限制，有时候你希望在某些移动设备上不使用本播放器，而是直接使用原生的功能时，可以通过该选项控制

白名单是一个数组类型，分别与 window.navigator.userAgent 进行匹配，只要其中一项匹配成功则启用播放器

支持 字符串 匹配, 函数 匹配, 正则 匹配

▶ Run Code

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

提示

假如该选项不填，则默认使用本播放器

`thumbnails`

Type: Object
Default: {}

在进度条上设置 预览图

属性	类型	描述
`url`	`String`	预览图地址
`number`	`Number`	预览图数量
`column`	`Number`	预览图列数
`width`	`Number`	预览图宽度
`height`	`Number`	预览图高度

▶ Run Code

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

在线生成预览图

artplayer-tool-thumbnail

`subtitle`

Type: Object
Default: {}

设置视频的字幕，支持字幕格式：vtt, srt, ass

属性	类型	描述
`url`	`String`	字幕地址
`type`	`String`	字幕类型，可选 `vtt`, `srt`, `ass`
`style`	`Object`	字幕样式
`encoding`	`String`	字幕编码，默认 `utf-8`

▶ Run Code

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

`moreVideoAttr`

Type: Object
Default: {'controls': false,'preload': 'metadata'}

更多视频属性，这些属性将直接写入视频元素里

▶ Run Code

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

`icons`

Type: Object
Default: {}

用于替换默认图标，支持 Html 字符串和 HTMLElement

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    icons: {
        loading: '<img src="/assets/img/ploading.gif">',
        state: '<img src="/assets/img/state.png">',
    },
});

全部图标的定义

artplayer/types/icons.d.ts

`type`

Type: String
Default: ''

用于指明视频的格式，需要配合 customType 一起使用，默认视频的格式就是视频地址的后缀（如 .m3u8, .mkv, .ts），但有时候视频地地址没有正确的后缀，所以需要特别指明

▶ Run Code

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

后缀的识别

播放器只能解析这种后缀：/assets/sample/video.m3u8

但无法解析这种后缀：/assets/sample/video?type=m3u8

所以假如你使用了 customType，最好同时要指明 type

`customType`

Type: Object
Default: {}

通过视频的 type 进行匹配，把视频解码权交给第三方程序进行处理，处理的函数能接收三个参数

video : 视频 DOM 元素
url : 视频地址
art : 当前实例

▶ Run Code

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

`lang`

Type: String
Default: navigator.language.toLowerCase()

默认显示语言，目前支持：en, zh-cn, zh-tw, cs, pl, es, fa

▶ Run Code

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

`i18n`

Type: Object
Default: {}

自定义 i18n 配置，该配置会和自带的 i18n 进行深度合并

新增你的语言:

▶ Run Code

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

修改现有的语言

▶ Run Code

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

i18n 写法参考

artplayer/types/i18n.d.ts

`lock`

Type: Boolean
Default: false

是否在移动端显示一个 锁定按钮 ，用于隐藏底部 控制栏

▶ Run Code

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

`fastForward`

Type: Boolean
Default: false

是否在移动端添加长按视频快进功能

▶ Run Code

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

`autoPlayback`

Type: Boolean
Default: false

是否使用自动 回放功能

▶ Run Code

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

提示

因为播放器默认使用 url 作为 key 来缓存播放进度的

但假如你的同一个视频的 url 是不同的话，那么你需要使用 id 来标识视频的唯一 key

`autoOrientation`

Type: Boolean
Default: false

是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器

▶ Run Code

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

`airplay`

Type: Boolean
Default: false

是否显示 airplay 按钮，当前只有部分浏览器支持该功能

▶ Run Code

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

Option #

container #

url #

id #

onReady #

poster #

title #

theme #

volume #

isLive #

muted #

autoplay #

autoSize #

autoMini #

loop #

flip #

playbackRate #

aspectRatio #

screenshot #

setting #

hotkey #

pip #

mutex #

fullscreen #

fullscreenWeb #

subtitleOffset #

miniProgressBar #

useSSR #

playsInline #

layers #

settings #

contextmenu #

controls #

quality #

highlight #

plugins #

whitelist #

thumbnails #

subtitle #

moreVideoAttr #

icons #

type #

customType #

lang #

i18n #

lock #

fastForward #

autoPlayback #

autoOrientation #

airplay #

Option

`container`

`url`

`id`

`onReady`

`poster`

`title`

`theme`

`volume`

`isLive`

`muted`

`autoplay`

`autoSize`

`autoMini`

`loop`

`flip`

`playbackRate`

`aspectRatio`

`screenshot`

`setting`

`hotkey`

`pip`

`mutex`

`fullscreen`

`fullscreenWeb`

`subtitleOffset`

`miniProgressBar`

`useSSR`

`playsInline`

`layers`

`settings`

`contextmenu`

`controls`

`quality`

`highlight`

`plugins`

`whitelist`

`thumbnails`

`subtitle`

`moreVideoAttr`

`icons`

`type`

`customType`

`lang`

`i18n`

`lock`

`fastForward`

`autoPlayback`

`autoOrientation`

`airplay`