mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-09 03:27:43 -08:00
199 lines
90 KiB
HTML
199 lines
90 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US" dir="ltr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Installation and Usage | Artplayer.js</title>
|
||
<meta name="description" content="ArtPlayer.js is a modern and full featured HTML5 video player">
|
||
<meta name="generator" content="VitePress v1.2.2">
|
||
<link rel="preload stylesheet" href="/document/assets/style.g0bP384Z.css" as="style">
|
||
|
||
<script type="module" src="/document/assets/app.D0lUm06M.js"></script>
|
||
<link rel="preload" href="/document/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
||
<link rel="modulepreload" href="/document/assets/chunks/framework.DXlgpajS.js">
|
||
<link rel="modulepreload" href="/document/assets/chunks/theme.eFWpDLSn.js">
|
||
<link rel="modulepreload" href="/document/assets/en_index.md.BWJ8NY_j.lean.js">
|
||
<script src="/document/main.js"></script>
|
||
<link rel="stylesheet" href="/document/style.css">
|
||
<link rel="shortcut icon" href="/document/favicon.ico">
|
||
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"dark",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
||
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
||
</head>
|
||
<body>
|
||
<div id="app"><div class="Layout" data-v-c4daae71><!--[--><!--]--><!--[--><span tabindex="-1" data-v-b22defb4></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-b22defb4> Skip to content </a><!--]--><!----><header class="VPNav" data-v-c4daae71 data-v-a46e73f0><div class="VPNavBar has-sidebar top" data-v-a46e73f0 data-v-48384a78><div class="wrapper" data-v-48384a78><div class="container" data-v-48384a78><div class="title" data-v-48384a78><div class="VPNavBarTitle has-sidebar" data-v-48384a78 data-v-dbe614b8><a class="title" href="/document/" data-v-dbe614b8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/document/logo.png" alt data-v-4d414b82><!--]--><span data-v-dbe614b8>Artplayer.js</span><!--[--><!--]--></a></div></div><div class="content" data-v-48384a78><div class="content-body" data-v-48384a78><!--[--><!--]--><div class="VPNavBarSearch search" data-v-48384a78><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><span class="DocSearch-Button-Key">Meta</span><span class="DocSearch-Button-Key">K</span></span></button></div></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-48384a78 data-v-c6c3e6d4><span id="main-nav-aria-label" class="visually-hidden" data-v-c6c3e6d4>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/" tabindex="0" data-v-c6c3e6d4 data-v-2b93b872><!--[--><span data-v-2b93b872>中文版</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/document/en/" tabindex="0" data-v-c6c3e6d4 data-v-2b93b872><!--[--><span data-v-2b93b872>English</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://artplayer.org" target="_blank" rel="noreferrer" tabindex="0" data-v-c6c3e6d4 data-v-2b93b872><!--[--><span data-v-2b93b872>Online Editor</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-c6c3e6d4 data-v-8fd20e7d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-8fd20e7d><span class="text" data-v-8fd20e7d><!----><span data-v-8fd20e7d>5.1.x</span><span class="vpi-chevron-down text-icon" data-v-8fd20e7d></span></span></button><div class="menu" data-v-8fd20e7d><div class="VPMenu" data-v-8fd20e7d data-v-7bffa9cd><div class="items" data-v-7bffa9cd><!--[--><!--[--><div class="VPMenuLink" data-v-7bffa9cd data-v-71c5411b><a class="VPLink link vp-external-link-icon" href="https://github.com/zhw2590582/ArtPlayer/blob/master/CHANGELOG_CN.md" target="_blank" rel="noreferrer" data-v-71c5411b><!--[-->Changelog<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-7bffa9cd data-v-71c5411b><a class="VPLink link vp-external-link-icon" href="https://github.com/zhw2590582/ArtPlayer#donations" target="_blank" rel="noreferrer" data-v-71c5411b><!--[-->Donation<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-7bffa9cd data-v-71c5411b><a class="VPLink link vp-external-link-icon" href="https://github.com/zhw2590582/ArtPlayer#qq-group" target="_blank" rel="noreferrer" data-v-71c5411b><!--[-->Q群: 320881312<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-48384a78 data-v-f774fc1d><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to light theme" aria-checked="true" data-v-f774fc1d data-v-bfa23729 data-v-7012e5dd><span class="check" data-v-7012e5dd><span class="icon" data-v-7012e5dd><!--[--><span class="vpi-sun sun" data-v-bfa23729></span><span class="vpi-moon moon" data-v-bfa23729></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-48384a78 data-v-08b35e6f data-v-f2234a39><!--[--><a class="VPSocialLink no-icon" href="https://github.com/zhw2590582/ArtPlayer" aria-label="github" target="_blank" rel="noopener" data-v-f2234a39 data-v-50151957><span class="vpi-social-github" /></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-48384a78 data-v-ca99dad5 data-v-8fd20e7d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-8fd20e7d><span class="vpi-more-horizontal icon" data-v-8fd20e7d></span></button><div class="menu" data-v-8fd20e7d><div class="VPMenu" data-v-8fd20e7d data-v-7bffa9cd><!----><!--[--><!--[--><!----><div class="group" data-v-ca99dad5><div class="item appearance" data-v-ca99dad5><p class="label" data-v-ca99dad5>Appearance</p><div class="appearance-action" data-v-ca99dad5><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to light theme" aria-checked="true" data-v-ca99dad5 data-v-bfa23729 data-v-7012e5dd><span class="check" data-v-7012e5dd><span class="icon" data-v-7012e5dd><!--[--><span class="vpi-sun sun" data-v-bfa23729></span><span class="vpi-moon moon" data-v-bfa23729></span><!--]--></span></span></button></div></div></div><div class="group" data-v-ca99dad5><div class="item social-links" data-v-ca99dad5><div class="VPSocialLinks social-links-list" data-v-ca99dad5 data-v-f2234a39><!--[--><a class="VPSocialLink no-icon" href="https://github.com/zhw2590582/ArtPlayer" aria-label="github" target="_blank" rel="noopener" data-v-f2234a39 data-v-50151957><span class="vpi-social-github" /></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-48384a78 data-v-670493dd><span class="container" data-v-670493dd><span class="top" data-v-670493dd></span><span class="middle" data-v-670493dd></span><span class="bottom" data-v-670493dd></span></span></button></div></div></div></div><div class="divider" data-v-48384a78><div class="divider-line" data-v-48384a78></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-c4daae71 data-v-9d8129cc><div class="container" data-v-9d8129cc><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-9d8129cc><span class="vpi-align-left menu-icon" data-v-9d8129cc></span><span class="menu-text" data-v-9d8129cc>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-9d8129cc data-v-d1de893e><button data-v-d1de893e>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-c4daae71 data-v-2667f5e2><div class="curtain" data-v-2667f5e2></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-2667f5e2><span class="visually-hidden" id="sidebar-aria-label" data-v-2667f5e2> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-2667f5e2><section class="VPSidebarItem level-0 has-active" data-v-2667f5e2 data-v-f2cc49b6><div class="item" role="button" tabindex="0" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><h2 class="text" data-v-f2cc49b6>Quick start</h2><!----></div><div class="items" data-v-f2cc49b6><!--[--><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>Install</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/start/option.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>Option</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/start/i18n.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>Language</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2667f5e2><section class="VPSidebarItem level-0" data-v-2667f5e2 data-v-f2cc49b6><div class="item" role="button" tabindex="0" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><h2 class="text" data-v-f2cc49b6>Component</h2><!----></div><div class="items" data-v-f2cc49b6><!--[--><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/component/layers.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>Layers</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/component/controls.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>Controls</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/component/contextmenu.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>Contextmenu</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/component/setting.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>Setting</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2667f5e2><section class="VPSidebarItem level-0" data-v-2667f5e2 data-v-f2cc49b6><div class="item" role="button" tabindex="0" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><h2 class="text" data-v-f2cc49b6>Advanced</h2><!----></div><div class="items" data-v-f2cc49b6><!--[--><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/advanced/property.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>Instance Property</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/advanced/built-in.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>Advanced Property</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/advanced/class.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>Static Property</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/advanced/global.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>Global Property</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/advanced/event.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>Instance Event</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/advanced/plugin.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>Writing Plugin</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2667f5e2><section class="VPSidebarItem level-0" data-v-2667f5e2 data-v-f2cc49b6><div class="item" role="button" tabindex="0" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><h2 class="text" data-v-f2cc49b6>Plugins</h2><!----></div><div class="items" data-v-f2cc49b6><!--[--><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/plugin/danmuku.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>Danmuku</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/plugin/ads.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>Video Ads</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/plugin/iframe.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>Iframe Control</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/plugin/hls-quality.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>Hls Quality</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/plugin/dash-quality.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>Dash Quality</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2667f5e2><section class="VPSidebarItem level-0" data-v-2667f5e2 data-v-f2cc49b6><div class="item" role="button" tabindex="0" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><h2 class="text" data-v-f2cc49b6>Libraries</h2><!----></div><div class="items" data-v-f2cc49b6><!--[--><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/library/hls.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>hls.js</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/library/flv.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>flv.js</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-f2cc49b6 data-v-f2cc49b6><div class="item" data-v-f2cc49b6><div class="indicator" data-v-f2cc49b6></div><a class="VPLink link link" href="/document/en/library/dash.html" data-v-f2cc49b6><!--[--><p class="text" data-v-f2cc49b6>dash.js</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-c4daae71 data-v-d2aef184><div class="VPDoc has-sidebar has-aside" data-v-d2aef184 data-v-ef3a4dda><!--[--><!--]--><div class="container" data-v-ef3a4dda><div class="aside" data-v-ef3a4dda><div class="aside-curtain" data-v-ef3a4dda></div><div class="aside-container" data-v-ef3a4dda><div class="aside-content" data-v-ef3a4dda><div class="VPDocAside" data-v-ef3a4dda data-v-79cae1a0><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-79cae1a0 data-v-dfbd9fb8><div class="content" data-v-dfbd9fb8><div class="outline-marker" data-v-dfbd9fb8></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-dfbd9fb8>On this page</div><ul class="VPDocOutlineItem root" data-v-dfbd9fb8 data-v-da421f78><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-79cae1a0></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-ef3a4dda><div class="content-container" data-v-ef3a4dda><!--[--><!--]--><main class="main" data-v-ef3a4dda><div style="position:relative;" class="vp-doc _document_en_" data-v-ef3a4dda><div><h1 id="installation-and-usage" tabindex="-1">Installation and Usage <a class="header-anchor" href="#installation-and-usage" aria-label="Permalink to "Installation and Usage""></a></h1><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to "Installation""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-oKgfX" id="tab-g8FwO56" checked><label for="tab-g8FwO56">npm</label><input type="radio" name="group-oKgfX" id="tab-2EUZ63I"><label for="tab-2EUZ63I">yarn</label><input type="radio" name="group-oKgfX" id="tab-NgoCoak"><label for="tab-NgoCoak">pnpm</label><input type="radio" name="group-oKgfX" id="tab-ZkqdDoG"><label for="tab-ZkqdDoG">script</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"path/to/artplayer.js"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1"><code>CDN</code> <a class="header-anchor" href="#cdn" aria-label="Permalink to "`CDN`""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-IZvfh" id="tab-q1EyFUx" checked><label for="tab-q1EyFUx">jsdelivr.net</label><input type="radio" name="group-IZvfh" id="tab-a9bD3Rd"><label for="tab-a9bD3Rd">unpkg.com</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">https://unpkg.com/artplayer/dist/artplayer.js</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="usage" tabindex="-1">Usage <a class="header-anchor" href="#usage" aria-label="Permalink to "Usage""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-9hccG" id="tab-GX8uQFc" checked><label for="tab-GX8uQFc">index.js</label><input type="radio" name="group-9hccG" id="tab-PaMPY2j"><label for="tab-PaMPY2j">index.html</label></div><div class="blocks"><div class="language-js vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'.artplayer-app'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'path/to/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>ArtPlayer Demo</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> charset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"UTF-8"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .artplayer-app</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"artplayer-app"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div></div></div><div class="warning custom-block"><p class="custom-block-title">Warning</p><p>The player's size depends on the size of the container <code>container</code>, so your container <code>container</code> must have a size.</p></div><div class="tip custom-block"><p class="custom-block-title">You can see more examples of use at the following link</p><p><a href="https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template" target="_blank" rel="noreferrer">/packages/artplayer-template</a></p></div><h2 id="vue-js" tabindex="-1"><code>Vue.js</code> <a class="header-anchor" href="#vue-js" aria-label="Permalink to "`Vue.js`""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group--52mO" id="tab-8GGA-do" checked><label for="tab-8GGA-do">Artplayer.vue</label><input type="radio" name="group--52mO" id="tab-l30p7Mb"><label for="tab-l30p7Mb">app.vue</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"artRef"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "artplayer"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> instance: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> props: {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> option: {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: Object,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> required: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mounted</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.instance </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ...</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.option,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.$refs.artRef,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$nextTick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$emit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"get-instance"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.instance);</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> beforeDestroy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.instance </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&&</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.instance.destroy) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.instance.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">destroy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">get-instance</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">getInstance</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">option</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">style</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "./Artplayer.vue"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> option: {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"path/to/video.mp4"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> style: {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"600px"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"400px"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> margin: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"60px auto 0"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> components: {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> methods: {</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getInstance</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">art</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(art);</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div></div></div><div class="warning custom-block"><p class="custom-block-title">Artplayer Not Responsive:</p><p>Modifying <code>option</code> directly in <code>Vue.js</code> will not change the player</p></div><h2 id="react-js" tabindex="-1"><code>React.js</code> <a class="header-anchor" href="#react-js" aria-label="Permalink to "`React.js`""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-67N51" id="tab-wHCEaZK" checked><label for="tab-wHCEaZK">Artplayer.jsx</label><input type="radio" name="group-67N51" id="tab-aHzKQBO"><label for="tab-aHzKQBO">app.jsx</label></div><div class="blocks"><div class="language-jsx vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useEffect, useRef } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'react'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Player</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">getInstance</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">rest</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> artRef</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useRef</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useEffect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">option,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: artRef.current,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (getInstance </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&&</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> typeof</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> getInstance </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'function'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getInstance</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(art);</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&&</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.destroy) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">destroy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, []);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{artRef} {</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">rest}></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>;</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'react'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './ArtPlayer.jsx'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> App</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Artplayer</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> option</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{{</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'https://artplayer.org/assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }}</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{{</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'600px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'400px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> margin: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'60px auto 0'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }}</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getInstance</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">art</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(art)}</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> App;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div></div></div><div class="warning custom-block"><p class="custom-block-title">Non-responsive Artplayer:</p><p>In <code>React.js</code>, directly modifying the <code>option</code> will not change the player</p></div><h2 id="typescript" tabindex="-1">TypeScript <a class="header-anchor" href="#typescript" aria-label="Permalink to "TypeScript""></a></h2><p>Importing <code>Artplayer</code> will automatically import <code>artplayer.d.ts</code></p><h3 id="vue-js-1" tabindex="-1">Vue.js <a class="header-anchor" href="#vue-js-1" aria-label="Permalink to "Vue.js""></a></h3><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line highlighted"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="react-js-1" tabindex="-1">React.js <a class="header-anchor" href="#react-js-1" aria-label="Permalink to "React.js""></a></h3><div class="language-jsx vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line highlighted"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useRef</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.current </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="option" tabindex="-1">Option <a class="header-anchor" href="#option" aria-label="Permalink to "Option""></a></h3><p>you can also separately import the type for options</p><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line highlighted"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Option } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer/types/option'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line highlighted"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> option</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Option</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'.artplayer-app'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'./assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">option.volume </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(option);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><div class="tip custom-block"><p class="custom-block-title">Complete TypeScript Definitions</p><p><a href="https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer/types" target="_blank" rel="noreferrer">packages/artplayer/types</a></p></div><h2 id="javascript" tabindex="-1">JavaScript <a class="header-anchor" href="#javascript" aria-label="Permalink to "JavaScript""></a></h2><p>Sometimes your <code>js</code> file may lose the <code>TypeScript</code> type hints, in this case, you can manually import the types</p><p>Variables:</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line highlighted"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
|
||
<span class="line highlighted"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> {import("artplayer")}</span></span>
|
||
<span class="line highlighted"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>Parameters:</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line highlighted"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
|
||
<span class="line highlighted"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@param</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> {import("artplayer")}</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art</span></span>
|
||
<span class="line highlighted"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getInstance</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">art</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> //</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>Properties:</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line highlighted"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /**</span></span>
|
||
<span class="line highlighted"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> {import("artplayer")}</span></span>
|
||
<span class="line highlighted"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>Options:</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line highlighted"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
|
||
<span class="line highlighted"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> * </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> {import("artplayer/types/option").Option}</span></span>
|
||
<span class="line highlighted"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> option</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'.artplayer-app'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'./assets/sample/video.mp4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">option.volume </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> art8</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(option);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="ancient-browsers" tabindex="-1">Ancient Browsers <a class="header-anchor" href="#ancient-browsers" aria-label="Permalink to "Ancient Browsers""></a></h2><p>The production build of <code>artplayer.js</code> is only compatible with the latest major version of <code>Chrome</code>: <code>last 1 Chrome version</code></p><p>For ancient browsers, you can use the <code>artplayer.legacy.js</code> file, which is compatible up to: <code>IE 11</code></p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'artplayer/dist/artplayer.legacy.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-Buvka" id="tab-weSnDHI" checked><label for="tab-weSnDHI">jsdelivr.net</label><input type="radio" name="group-Buvka" id="tab-76PgN3W"><label for="tab-76PgN3W">unpkg.com</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">https://unpkg.com/artplayer/dist/artplayer.legacy.js</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><div class="tip custom-block"><p class="custom-block-title">If you need to support even older browsers, please modify the following configuration and then build it yourself:</p><p>Build configuration: <a href="https://github.com/zhw2590582/ArtPlayer/blob/master/scripts/build.js#L29" target="_blank" rel="noreferrer">scripts/build.js</a></p><p>Refer to documentation: <a href="https://github.com/browserslist/browserslist#full-list" target="_blank" rel="noreferrer">browserslist</a></p></div></div></div></main><footer class="VPDocFooter" data-v-ef3a4dda data-v-0ce50de1><!--[--><!--]--><div class="edit-info" data-v-0ce50de1><div class="edit-link" data-v-0ce50de1><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-vitepress/docs/en/index.md" target="_blank" rel="noreferrer" data-v-0ce50de1><!--[--><span class="vpi-square-pen edit-link-icon" data-v-0ce50de1></span> Edit this page on GitHub<!--]--></a></div><div class="last-updated" data-v-0ce50de1><p class="VPLastUpdated" data-v-0ce50de1 data-v-5be60f87>Last updated: <time datetime="2024-01-10T01:20:13.000Z" data-v-5be60f87></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-0ce50de1><span class="visually-hidden" id="doc-footer-aria-label" data-v-0ce50de1>Pager</span><div class="pager" data-v-0ce50de1><!----></div><div class="pager" data-v-0ce50de1><a class="VPLink link pager-link next" href="/document/en/start/option.html" data-v-0ce50de1><!--[--><span class="desc" data-v-0ce50de1>Next page</span><span class="title" data-v-0ce50de1>Option</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"advanced_class.md\":\"1_Qn7xo8\",\"advanced_plugin.md\":\"2HyC-tGz\",\"advanced_built-in.md\":\"DmzqXfxm\",\"advanced_global.md\":\"AD97Z3-7\",\"component_contextmenu.md\":\"BJEn6dWt\",\"component_controls.md\":\"BYiGOdHR\",\"advanced_event.md\":\"DIa3aeXS\",\"component_layers.md\":\"CwYgrgxj\",\"advanced_property.md\":\"CYjLkVe3\",\"component_setting.md\":\"DyK4mklZ\",\"en_advanced_class.md\":\"mixu78XH\",\"en_advanced_built-in.md\":\"2IAm3gis\",\"en_advanced_plugin.md\":\"xm12vlBU\",\"en_advanced_global.md\":\"DlSHTMOC\",\"en_advanced_event.md\":\"CkF3W8ym\",\"en_component_contextmenu.md\":\"uSIzNo9m\",\"en_component_layers.md\":\"fymDx04R\",\"en_component_controls.md\":\"DgtD9xxu\",\"en_library_dash.md\":\"DX1YLUoV\",\"en_library_flv.md\":\"BGe1v4Lx\",\"en_component_setting.md\":\"UN5J6naQ\",\"en_library_hls.md\":\"DAEC9wJG\",\"en_plugin_dash-quality.md\":\"CmKTKIX1\",\"en_plugin_ads.md\":\"B15fMRFM\",\"en_index.md\":\"BWJ8NY_j\",\"en_plugin_hls-quality.md\":\"BiRuZ3tL\",\"en_advanced_property.md\":\"B6mgqp4Q\",\"en_start_i18n.md\":\"DHealdL7\",\"en_plugin_danmuku.md\":\"DwUNBb7S\",\"en_plugin_iframe.md\":\"Bb8FK2M7\",\"library_dash.md\":\"1Czoi6Go\",\"library_flv.md\":\"C49DbVRN\",\"library_hls.md\":\"CvE_u2CQ\",\"plugin_ads.md\":\"DiSI9MdU\",\"plugin_hls-quality.md\":\"DwNB4Q2D\",\"plugin_dash-quality.md\":\"zwMqa6A4\",\"index.md\":\"QqOTVt-D\",\"plugin_iframe.md\":\"BouVq-4j\",\"start_i18n.md\":\"B5YaDutN\",\"plugin_danmuku.md\":\"LIEFac-0\",\"en_start_option.md\":\"C8PufWlv\",\"start_option.md\":\"Bww-xQnc\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Artplayer.js\",\"description\":\"ArtPlayer.js is a modern and full featured HTML5 video player\",\"base\":\"/document/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":\"dark\",\"themeConfig\":{\"siteTitle\":\"Artplayer.js\",\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"中文版\",\"link\":\"/\"},{\"text\":\"English\",\"link\":\"/en/\",\"activeMatch\":\"/en/\"},{\"text\":\"Online Editor\",\"link\":\"https://artplayer.org\"},{\"text\":\"5.1.x\",\"items\":[{\"text\":\"Changelog\",\"link\":\"https://github.com/zhw2590582/ArtPlayer/blob/master/CHANGELOG_CN.md\"},{\"text\":\"Donation\",\"link\":\"https://github.com/zhw2590582/ArtPlayer#donations\"},{\"text\":\"Q群: 320881312\",\"link\":\"https://github.com/zhw2590582/ArtPlayer#qq-group\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/zhw2590582/ArtPlayer\"}],\"sidebar\":{\"/\":[{\"text\":\"开始\",\"collapsible\":true,\"items\":[{\"text\":\"安装使用\",\"link\":\"/\"},{\"text\":\"基础选项\",\"link\":\"/start/option\"},{\"text\":\"语言设置\",\"link\":\"/start/i18n\"}]},{\"text\":\"组件\",\"collapsible\":true,\"items\":[{\"text\":\"业务层\",\"link\":\"/component/layers\"},{\"text\":\"控制器\",\"link\":\"/component/controls\"},{\"text\":\"右键菜单\",\"link\":\"/component/contextmenu\"},{\"text\":\"设置面板\",\"link\":\"/component/setting\"}]},{\"text\":\"高级\",\"collapsible\":true,\"items\":[{\"text\":\"实例属性\",\"link\":\"/advanced/property\"},{\"text\":\"高级属性\",\"link\":\"/advanced/built-in\"},{\"text\":\"静态属性\",\"link\":\"/advanced/class\"},{\"text\":\"全局属性\",\"link\":\"/advanced/global\"},{\"text\":\"实例事件\",\"link\":\"/advanced/event\"},{\"text\":\"编写插件\",\"link\":\"/advanced/plugin\"}]},{\"text\":\"插件\",\"collapsible\":true,\"items\":[{\"text\":\"弹幕库\",\"link\":\"/plugin/danmuku\"},{\"text\":\"视频广告\",\"link\":\"/plugin/ads\"},{\"text\":\"Iframe 控制\",\"link\":\"/plugin/iframe\"},{\"text\":\"Hls 画质\",\"link\":\"/plugin/hls-quality\"},{\"text\":\"Dash 画质\",\"link\":\"/plugin/dash-quality\"}]},{\"text\":\"第三方库\",\"collapsible\":true,\"items\":[{\"text\":\"hls.js\",\"link\":\"/library/hls\"},{\"text\":\"flv.js\",\"link\":\"/library/flv\"},{\"text\":\"dash.js\",\"link\":\"/library/dash\"}]}],\"/en/\":[{\"text\":\"Quick start\",\"collapsible\":true,\"items\":[{\"text\":\"Install\",\"link\":\"/en/\"},{\"text\":\"Option\",\"link\":\"/en/start/option\"},{\"text\":\"Language\",\"link\":\"/en/start/i18n\"}]},{\"text\":\"Component\",\"collapsible\":true,\"items\":[{\"text\":\"Layers\",\"link\":\"/en/component/layers\"},{\"text\":\"Controls\",\"link\":\"/en/component/controls\"},{\"text\":\"Contextmenu\",\"link\":\"/en/component/contextmenu\"},{\"text\":\"Setting\",\"link\":\"/en/component/setting\"}]},{\"text\":\"Advanced\",\"collapsible\":true,\"items\":[{\"text\":\"Instance Property\",\"link\":\"/en/advanced/property\"},{\"text\":\"Advanced Property\",\"link\":\"/en/advanced/built-in\"},{\"text\":\"Static Property\",\"link\":\"/en/advanced/class\"},{\"text\":\"Global Property\",\"link\":\"/en/advanced/global\"},{\"text\":\"Instance Event\",\"link\":\"/en/advanced/event\"},{\"text\":\"Writing Plugin\",\"link\":\"/en/advanced/plugin\"}]},{\"text\":\"Plugins\",\"collapsible\":true,\"items\":[{\"text\":\"Danmuku\",\"link\":\"/en/plugin/danmuku\"},{\"text\":\"Video Ads\",\"link\":\"/en/plugin/ads\"},{\"text\":\"Iframe Control\",\"link\":\"/en/plugin/iframe\"},{\"text\":\"Hls Quality\",\"link\":\"/en/plugin/hls-quality\"},{\"text\":\"Dash Quality\",\"link\":\"/en/plugin/dash-quality\"}]},{\"text\":\"Libraries\",\"collapsible\":true,\"items\":[{\"text\":\"hls.js\",\"link\":\"/en/library/hls\"},{\"text\":\"flv.js\",\"link\":\"/en/library/flv\"},{\"text\":\"dash.js\",\"link\":\"/en/library/dash\"}]}]},\"editLink\":{\"pattern\":\"https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-vitepress/docs/:path\",\"text\":\"Edit this page on GitHub\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||
|
||
</body>
|
||
</html> |