import{_ as n,c as l,o as p,V as s,z as a}from"./chunks/framework.f7d2e3c3.js";const ra=JSON.parse('{"title":"Option","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","lastUpdated":1683080086000}'),e={name:"en/start/option.md"},o=s('

Option ​

container ​

The DOM container attached to the player

',4),t=a("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
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;
}

Or use aspect-ratio：

css
.artplayer-app {
    aspect-ratio: 16/9;
}

Tip

Of all options, only container is required

url ​

Video source address

`,9),c=a("div",{className:"run-code"},"▶ Run Code",-1),i=s(`
js
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

`,2),D=a("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
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 ​

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

`,5),F=a("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
    id: 'your-url-id',
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

onReady ​

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

`,4),d=a("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer(
    {
        container: '.artplayer-app',
        url: '/assets/sample/video.mp4',
        muted: true,
    },
    function onReady(art) {
        this.play()
    },
);

Equivalent to:

js
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 ​

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

`,7),h=a("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    poster: '/assets/sample/poster.jpg',
});

theme ​

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

`,4),b=a("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    theme: '#ffad00',
});

volume ​

Default volume of player

`,4),g=a("div",{className:"run-code"},"▶ Run Code",-1),_=s(`
js
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 ​

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

`,5),v=a("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    isLive: true,
});

muted ​

Whether to mute by default

`,4),f=a("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    muted: true,
});

autoplay ​

Whether to play automatically

`,4),S=a("div",{className:"run-code"},"▶ Run Code",-1),k=s(`
js
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 ​

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

`,5),w=a("div",{className:"run-code"},"▶ Run Code",-1),P=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    autoSize: true,
});

autoMini ​

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

`,4),q=a("div",{className:"run-code"},"▶ Run Code",-1),V=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    autoMini: true,
});

loop ​

Whether to play in a loop

`,4),I=a("div",{className:"run-code"},"▶ Run Code",-1),j=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    loop: true,
});

flip ​

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

`,4),R=a("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    flip: true,
    setting: true,
});

playbackRate ​

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

`,4),x=a("div",{className:"run-code"},"▶ Run Code",-1),B=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    playbackRate: true,
    setting: true,
});

aspectRatio ​

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

`,4),z=a("div",{className:"run-code"},"▶ Run Code",-1),W=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    aspectRatio: true,
    setting: true,
});

screenshot ​

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

`,4),O=a("div",{className:"run-code"},"▶ Run Code",-1),M=s(`
js
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 ​

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

`,5),H=a("div",{className:"run-code"},"▶ Run Code",-1),L=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    setting: true,
});

hotkey ​

Whether to use shortcut keys

`,4),$=a("div",{className:"run-code"},"▶ Run Code",-1),Y=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    hotkey: true,
});
HotkeysSescribe
↑Volume Up
↓Volume Down
←Fast forward
→Fast rewind
spaceToggle play/pause

Tip

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

pip ​

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

`,6),Q=a("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    pip: true,
});

mutex ​

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

`,4),G=a("div",{className:"run-code"},"▶ Run Code",-1),J=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    mutex: true,
});

fullscreen ​

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

`,4),K=a("div",{className:"run-code"},"▶ Run Code",-1),X=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    fullscreen: true,
});

fullscreenWeb ​

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

`,4),Z=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    fullscreenWeb: true,
});

subtitleOffset ​

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

`,4),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    subtitleOffset: true,
    subtitle: {
        url: '/assets/sample/subtitle.srt',
    },
    setting: true,
});

miniProgressBar ​

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

`,4),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    miniProgressBar: true,
});

useSSR ​

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

`,5),es=a("div",{className:"run-code"},"▶ Run Code",-1),os=s(`
js
var $container = document.querySelector('.artplayer-app');
$container.innerHTML = Artplayer.html;

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

playsInline ​

Whether to use the playsInline mode on the mobile end

`,4),ts=a("div",{className:"run-code"},"▶ Run Code",-1),rs=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    playsInline: true,
});

layers ​

Initialize the customized layers

`,4),cs=a("div",{className:"run-code"},"▶ Run Code",-1),is=s(`
js
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:

/component/layers.html

settings ​

Initialize the customized Setting

`,5),Ds=a("div",{className:"run-code"},"▶ Run Code",-1),ys=s(`
js
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

/component/setting.html

contextmenu ​

Initialize the customized Contextmenu

`,5),Fs=a("div",{className:"run-code"},"▶ Run Code",-1),Cs=s(`
js
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;
            },
        },
    ],
});

Please refer to the following address for Component:

/component/contextmenu.html

controls ​

Initialize the customized Controls

`,5),ds=a("div",{className:"run-code"},"▶ Run Code",-1),As=s(`
js
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);
            },
        },
    ],
});

Please refer to the following address for Setting

/component/controls.html

quality ​

Whether to display the Quality list in the bottom control bar

PropertyTypeDescribe
defaultBooleanDefault quality
htmlStringQuality name
urlStringQuality name
`,6),hs=a("div",{className:"run-code"},"▶ Run Code",-1),us=s(`
js
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 ​

Display highlight on the progress bar

PropertyTypeDescribe
timeNumberHighlight time
textStringHighlight text
`,5),bs=a("div",{className:"run-code"},"▶ Run Code",-1),ms=s(`
js
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 ​

Initialize customized plugins

`,4),gs=a("div",{className:"run-code"},"▶ Run Code",-1),_s=s(`
js
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],
});

thumbnails ​

Set the thumbnails image on the progress bar

PropertyTypeDescribe
urlStringThumbnail url
numberNumberThumbnail number
columnNumberThumbnail column
widthNumberThumbnail width
heightNumberThumbnail height
`,5),vs=a("div",{className:"run-code"},"▶ Run Code",-1),Ts=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    thumbnails: {
        url: '/assets/sample/thumbnails.png',
        number: 100,
        column: 10,
    },
});

Generate preview thumbnails online

artplayer-tool-thumbnail

subtitle ​

Set the subtitle of the video and support the subtitle format: vtt, srt, ass

PropertyTypeDescribe
urlStringSubtitle url
typeStringSubtitle type: vtt, srt, ass
styleObjectSubtitle style
encodingStringSubtitle code, Default: utf-8
escapeBooleanWhether to escape the html tag,Default: true
onVttLoadFunctionFunctions for modifying vtt text
`,6),fs=a("div",{className:"run-code"},"▶ Run Code",-1),Es=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    subtitle: {
        url: '/assets/sample/subtitle.srt',
        type: 'srt',
        encoding: 'utf-8',
        escape: true,
        style: {
            color: '#03A9F4',
            'font-size': '30px',
        },
    },
});

moreVideoAttr ​

More video attributes, which will be directly written into the video element

`,4),Ss=a("div",{className:"run-code"},"▶ Run Code",-1),ks=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    moreVideoAttr: {
        'webkit-playsinline': true,
        playsInline: true,
    },
});

icons ​

It is used to replace the default icon and supports Html String and HTMLElement

`,4),ws=a("div",{className:"run-code"},"▶ Run Code",-1),Ps=s(`
js
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">',
    },
});

Definition of all icons

artplayer/types/icons.d.ts

type ​

It is used to indicate the format of the video. It needs to be used together with the customType. The default format of the video is the suffix of the video address (such as .m3u8, .mkv, .ts). But sometimes the video address does not have the correct suffix, so it needs to be specially specified

`,5),qs=a("div",{className:"run-code"},"▶ Run Code",-1),Vs=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.m3u8',
    type: 'm3u8',
});

Identification of suffix

The player can only resolve this suffix: /assets/sample/video.m3u8

However, this suffix cannot be resolved: /assets/sample/video?type=m3u8

So if you use customType, it is better to specify type at the same time

customType ​

By matching the video's type, the video decoding right is handed over to a third-party program for processing. The processing function can receive three parameters

`,6),Is=a("div",{className:"run-code"},"▶ Run Code",-1),js=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.m3u8',
    customType: {
        m3u8: function (video, url, art) {
            //
        },
    },
});

lang ​

The default display language currently supports: en, zh-cn, zh-tw, cs, pl, es, fa, fr, id, ru

`,4),Rs=a("div",{className:"run-code"},"▶ Run Code",-1),Ns=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    lang: 'en',
});

i18n ​

Customize the i18n configuration, which will be deeply merged with the built-in i18n

Add your language:

`,5),xs=a("div",{className:"run-code"},"▶ Run Code",-1),Bs=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    lang: 'your-lang',
    i18n: {
        'your-lang': {
            Play: 'Your Play'
        },
    },
});

Modify existing language:

`,2),zs=a("div",{className:"run-code"},"▶ Run Code",-1),Ws=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    i18n: {
        'zh-cn': {
            Play: 'Your Play'
        },
        'zh-tw': {
            Play: 'Your Play'
        },
    },
});

i18n definitions

artplayer/types/i18n.d.ts

lock ​

Whether to display a lock button on the mobile end to hide the bottom control bar

`,5),Os=a("div",{className:"run-code"},"▶ Run Code",-1),Ms=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    lock: true,
});

fastForward ​

Whether to add long-press video fast-forward function on the mobile terminal

`,4),Hs=a("div",{className:"run-code"},"▶ Run Code",-1),Ls=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    fastForward: true,
});

autoPlayback ​

Whether to use automatic playback function

`,4),$s=a("div",{className:"run-code"},"▶ Run Code",-1),Ys=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    id: 'your-url-id',
    autoPlayback: true,
});

Tip

Because the player uses url as key by default to cache the playback progress

But if your url of the same video is different, you need to use id to identify the unique key of the video

autoOrientation ​

Whether to rotate the player according to the video size and viewport size when the mobile page is full screen

`,5),Qs=a("div",{className:"run-code"},"▶ Run Code",-1),Us=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    autoOrientation: true,
});

airplay ​

Whether to display the airplay button. Currently, only some browsers support this function

`,4),Gs=a("div",{className:"run-code"},"▶ Run Code",-1),Js=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    airplay: true,
});

cssVar ​

Used to change built-in CSS variables

`,4),Ks=a("div",{className:"run-code"},"▶ Run Code",-1),Xs=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    cssVar: {
        //
    },
});

cssVar definitions

artplayer/types/cssVar.d.d.ts

`,2),Zs=[o,t,r,c,i,D,y,F,C,d,A,h,u,b,m,g,_,v,T,f,E,S,k,w,P,q,V,I,j,R,N,x,B,z,W,O,M,H,L,$,Y,Q,U,G,J,K,X,Z,ss,as,ns,ls,ps,es,os,ts,rs,cs,is,Ds,ys,Fs,Cs,ds,As,hs,us,bs,ms,gs,_s,vs,Ts,fs,Es,Ss,ks,ws,Ps,qs,Vs,Is,js,Rs,Ns,xs,Bs,zs,Ws,Os,Ms,Hs,Ls,$s,Ys,Qs,Us,Gs,Js,Ks,Xs];function sa(aa,na,la,pa,ea,oa){return p(),l("div",null,Zs)}const ca=n(e,[["render",sa]]);export{ra as __pageData,ca as default};