import{_ as a,c as l,o as p,a as s,b as n}from"./app.c9f3056c.js";const Dn=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[{"level":2,"title":"container","slug":"container","link":"#container","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"id","slug":"id","link":"#id","children":[]},{"level":2,"title":"onReady","slug":"onready","link":"#onready","children":[]},{"level":2,"title":"poster","slug":"poster","link":"#poster","children":[]},{"level":2,"title":"title","slug":"title","link":"#title","children":[]},{"level":2,"title":"theme","slug":"theme","link":"#theme","children":[]},{"level":2,"title":"volume","slug":"volume","link":"#volume","children":[]},{"level":2,"title":"isLive","slug":"islive","link":"#islive","children":[]},{"level":2,"title":"muted","slug":"muted","link":"#muted","children":[]},{"level":2,"title":"autoplay","slug":"autoplay","link":"#autoplay","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"autoMini","slug":"automini","link":"#automini","children":[]},{"level":2,"title":"loop","slug":"loop","link":"#loop","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"playbackRate","slug":"playbackrate","link":"#playbackrate","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"setting","slug":"setting","link":"#setting","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"mutex","slug":"mutex","link":"#mutex","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"subtitleOffset","slug":"subtitleoffset","link":"#subtitleoffset","children":[]},{"level":2,"title":"miniProgressBar","slug":"miniprogressbar","link":"#miniprogressbar","children":[]},{"level":2,"title":"useSSR","slug":"usessr","link":"#usessr","children":[]},{"level":2,"title":"playsInline","slug":"playsinline","link":"#playsinline","children":[]},{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"settings","slug":"settings","link":"#settings","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"quality","slug":"quality","link":"#quality","children":[]},{"level":2,"title":"highlight","slug":"highlight","link":"#highlight","children":[]},{"level":2,"title":"plugins","slug":"plugins","link":"#plugins","children":[]},{"level":2,"title":"whitelist","slug":"whitelist","link":"#whitelist","children":[]},{"level":2,"title":"thumbnails","slug":"thumbnails","link":"#thumbnails","children":[]},{"level":2,"title":"subtitle","slug":"subtitle","link":"#subtitle","children":[]},{"level":2,"title":"moreVideoAttr","slug":"morevideoattr","link":"#morevideoattr","children":[]},{"level":2,"title":"icons","slug":"icons","link":"#icons","children":[]},{"level":2,"title":"type","slug":"type","link":"#type","children":[]},{"level":2,"title":"customType","slug":"customtype","link":"#customtype","children":[]},{"level":2,"title":"lang","slug":"lang","link":"#lang","children":[]},{"level":2,"title":"i18n","slug":"i18n","link":"#i18n","children":[]},{"level":2,"title":"lock","slug":"lock","link":"#lock","children":[]},{"level":2,"title":"fastForward","slug":"fastforward","link":"#fastforward","children":[]},{"level":2,"title":"autoPlayback","slug":"autoplayback","link":"#autoplayback","children":[]},{"level":2,"title":"autoOrientation","slug":"autoorientation","link":"#autoorientation","children":[]},{"level":2,"title":"airplay","slug":"airplay","link":"#airplay","children":[]}],"relativePath":"start/option.md","lastUpdated":1674024747000}'),e={name:"start/option.md"},o=s('

基础选项

container

播放器挂载的 DOM 容器

',4),c=n("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',
});

您可能需要初始化容器元素的大小，如:

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

或者使用 aspect-ratio：

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

提示

全部选项里，只有 container 是必填的

url

视频源地址

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

有时候 url 地址没那么快知道，这时候你可以异步设置 url

`,2),i=n("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);

提示

默认支持三种视频文件格式：.mp4, .ogg, .webm

如需要播放 .m3u8 或者 .flv 等其它格式，请参考左侧的 第三方库

id

播放器的唯一标识，目前只用于记忆播放 autoplayback

`,5),F=n("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

构造函数接受一个函数作为第二个参数，播放器初始化成功且视频可以播放时触发，和ready事件一样

`,4),d=n("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()
    },
);

等同于:

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

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

提示

回调函数里的this就是播放器实例，但回调函数假如使用了箭头函数，this则不会指向播放器实例

poster

视频的海报，只会出现在播放器初始化且未播放的状态下

`,7),h=n("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',
});

title

视频标题，目前会出现在 视频截图 和 迷你模式 下

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

theme

播放器主题颜色，目前用于 进度条 和 高亮元素 上

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

volume

播放器的默认音量

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

提示

播放器会缓存最后一次音量的大小，下次初始化时（如刷新页面）播放器会读取该缓存值

isLive

使用直播模式，会隐藏进度条和播放时间

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

muted

是否默认静音

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

autoplay

是否自动播放

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

提示

假如希望默认进入页面就能自动播放视频，muted 必需为 true，更多信息请阅读 Autoplay Policy Changes

autoSize

播放器的尺寸默认会填充整个 container 容器尺寸，所以经常出现黑边，该值能自动调整播放器尺寸以隐藏黑边，类似 css 的 object-fit: cover;

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

autoMini

当播放器滚动到浏览器视口以外时，自动进入 迷你播放 模式

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

loop

是否循环播放

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

flip

是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单 里

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

playbackRate

是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里

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

aspectRatio

是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里

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

screenshot

是否在底部控制栏里显示 视频截图 功能

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

提示

由于浏览器安全机制，假如视频源地址和网站是跨域的，可能会出现截图失败

setting

是否在底部控制栏里显示 设置面板 的开关按钮

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

hotkey

是否使用快捷键

`,4),J=n("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    hotkey: true,
});
热键描述
↑增加音量
↓降低音量
←视频快进
→视频快退
space切换播放/暂停

提示

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

pip

是否在底部控制栏里显示 画中画 的开关按钮

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

mutex

假如页面里同时存在多个播放器，是否只能让一个播放器播放

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

fullscreen

是否在底部控制栏里显示播放器 窗口全屏 按钮

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

fullscreenWeb

是否在底部控制栏里显示播放器 网页全屏 按钮

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

subtitleOffset

字幕时间偏移，范围在 [-5s, 5s]，出现在 设置面板 里

`,4),ls=n("div",{className:"run-code"},"▶ Run Code",-1),ps=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

迷你进度条，只在播放器失去焦点后且正在播放时出现

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

useSSR

是否使用 SSR 挂载模式，假如你希望在播放器挂载前，就提前渲染好播放器所需的 HTML 时有用

你可以通过 Artplayer.html 访问到播放器所需的 HTML

`,5),cs=n("div",{className:"run-code"},"▶ Run Code",-1),rs=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

在移动端是否使用 playsInline 模式

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

layers

初始化自定义的 层

`,4),is=n("div",{className:"run-code"},"▶ Run Code",-1),ys=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);
            },
        },
    ],
});

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

/start/component.html

settings

初始化自定义的 设置面板

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

设置面板 请参考以下地址

/start/setting.html

contextmenu

初始化自定义的 右键菜单

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

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

/start/component.html- Type:

controls

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

`,5),hs=n("div",{className:"run-code"},"▶ Run Code",-1),us=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);
            },
        },
    ],
});

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

/start/component.html

quality

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

属性类型描述
defaultBoolean默认画质
htmlString画质名字
urlString画质地址
`,6),bs=n("div",{className:"run-code"},"▶ Run Code",-1),ms=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

在进度条上显示 高亮信息

属性类型描述
timeNumber高亮时间（单位秒）
textString高亮文本
`,5),gs=n("div",{className:"run-code"},"▶ Run Code",-1),_s=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

初始化自定义的 插件

`,4),vs=n("div",{className:"run-code"},"▶ Run Code",-1),Ts=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],
});

whitelist

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

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

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

`,6),Es=n("div",{className:"run-code"},"▶ Run Code",-1),fs=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    whitelist: [(ua) => /iPhone/gi.test(ua)],
    // whitelist: [/iPhone/gi],
    // whitelist: ['iPhone'],
});

提示

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

thumbnails

在进度条上设置 预览图

属性类型描述
urlString预览图地址
numberNumber预览图数量
columnNumber预览图列数
widthNumber预览图宽度
heightNumber预览图高度
`,6),Ss=n("div",{className:"run-code"},"▶ Run Code",-1),ks=s(`
js
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

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

属性类型描述
urlString字幕地址
typeString字幕类型，可选 vtt, srt, ass
styleObject字幕样式
encodingString字幕编码，默认 utf-8
`,6),ws=n("div",{className:"run-code"},"▶ Run Code",-1),Ps=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',
        style: {
            color: '#03A9F4',
            'font-size': '30px',
        },
    },
});

moreVideoAttr

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

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

icons

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

`,4),Ns=n("div",{className:"run-code"},"▶ Run Code",-1),Is=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">',
    },
});

全部图标的定义

artplayer/types/icons.d.ts

type

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

`,5),Vs=n("div",{className:"run-code"},"▶ Run Code",-1),xs=s(`
js
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 进行匹配，把视频解码权交给第三方程序进行处理，处理的函数能接收三个参数

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

lang

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

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

i18n

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

新增你的语言:

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

修改现有的语言

`,2),$s=n("div",{className:"run-code"},"▶ Run Code",-1),Hs=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 写法参考

artplayer/types/i18n.d.ts

lock

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

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

fastForward

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

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

autoPlayback

是否使用自动 回放功能

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

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

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

airplay

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

`,4),Zs=n("div",{className:"run-code"},"▶ Run Code",-1),sn=s(`
js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    airplay: true,
});
`,1),nn=[o,c,r,t,D,i,y,F,C,d,A,h,u,b,m,g,_,v,T,E,f,S,k,w,P,R,j,N,I,V,x,B,q,O,z,M,L,$,H,Y,W,J,U,G,K,Q,X,Z,ss,ns,as,ls,ps,es,os,cs,rs,ts,Ds,is,ys,Fs,Cs,ds,As,hs,us,bs,ms,gs,_s,vs,Ts,Es,fs,Ss,ks,ws,Ps,Rs,js,Ns,Is,Vs,xs,Bs,qs,Os,zs,Ms,Ls,$s,Hs,Ys,Ws,Js,Us,Gs,Ks,Qs,Xs,Zs,sn];function an(ln,pn,en,on,cn,rn){return p(),l("div",null,nn)}const yn=a(e,[["render",an]]);export{Dn as __pageData,yn as default};