Files
ArtPlayer/docs/document/index.html
T
2022-06-22 16:47:41 +08:00

17 lines
111 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en" dir="ltr" class="docs-wrapper docs-doc-page docs-version-current plugin-docs plugin-id-default docs-doc-id-en/Overview">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="Docusaurus v2.0.0-beta.20">
<title data-rh="true">Quick start | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Quick start | Artplayer.js"><meta data-rh="true" name="description" content="Install"><meta data-rh="true" property="og:description" content="Install"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/" hreflang="x-default"><script data-rh="true">function maybeInsertBanner(){window.__DOCUSAURUS_INSERT_BASEURL_BANNER&&insertBanner()}function insertBanner(){var n=document.getElementById("docusaurus-base-url-issue-banner-container");if(n){n.innerHTML='\n<div id="docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseurl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/document/</span> </p>\n <p>We suggest trying baseUrl = <span id="docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n';var e=document.getElementById("docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,r="/"===s.substr(-1)?s:s+"/";e.innerHTML=r}}window.__DOCUSAURUS_INSERT_BASEURL_BANNER=!0,document.addEventListener("DOMContentLoaded",maybeInsertBanner)</script><link rel="stylesheet" href="/document/assets/css/styles.7b2fc50a.css">
<link rel="preload" href="/document/assets/js/runtime~main.b3247fa5.js" as="script">
<link rel="preload" href="/document/assets/js/main.78289a0f.js" as="script">
</head>
<body class="navigation-with-keyboard">
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
<div id="docusaurus-base-url-issue-banner-container"></div><div role="region"><a href="#" class="skipToContent_cbSD">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_WmJs themedImage--light_gXqO" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_WmJs themedImage--dark_X1Zc" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_cOdw"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_cOdw"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_F6nl colorModeToggle_ndsa"><button class="clean-btn toggleButton_Szei toggleButtonDisabled_qp8o" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_y2PQ"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_sMpk"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_xKlU"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_GpM1"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_EOoS" type="button"></button><div class="docPage_vgSg"><aside class="theme-doc-sidebar-container docSidebarContainer_RUQH"><div class="sidebar_gEXq"><nav class="menu thin-scrollbar menu_squC"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/document/">Quick start</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/options">Basic options</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/propertie">Common properties</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/advance">Advanced propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/class">Static propertys</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/events">Common events</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/libraries">Third party librarys</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" href="/document/en/Plugins/danmuku">Official plugins</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" href="/document/en/Questions/Create_selector_in_the_controls">Common problems</a></div></li></ul></nav><button type="button" title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_YeeX"><svg width="20" height="20" aria-hidden="true" class="collapseSidebarButtonIcon_Ifa6"><g fill="#7a7a7a"><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"></path><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"></path></g></svg></button></div></aside><main class="docMainContainer_Qrk0"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_lvEh"><div class="docItemContainer_JwXb"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Esks" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/document/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_Bbeq"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Quick start</span><meta itemprop="position" content="1"></li></ul></nav><div class="tocCollapsible_ih66 theme-doc-toc-mobile tocMobile_Pc5S"><button type="button" class="clean-btn tocCollapsibleButton_Ufqf">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Quick start</h1></header><h2 class="anchor anchorWithStickyNavbar_UUsI" id="install">Install<a class="hash-link" href="#install" title="Direct link to heading">​</a></h2><div class="tabs-container tabList_vG2x"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_yrY8 tabs__item--active">npm</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_yrY8">yarn</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_yrY8">script</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_zQZC"><div class="language-bash codeBlockContainer_c9TW theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_FGNF"><pre tabindex="0" class="prism-code language-bash codeBlock_nIzC thin-scrollbar"><code class="codeBlockLines_XJem"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"> artplayer</span><br></span></code></pre><div class="buttonGroup_ZGDt"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_Px3p" aria-hidden="true"><svg class="copyButtonIcon_nPcH" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_Z1UB" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><div class="language-js codeBlockContainer_c9TW theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_FGNF"><pre tabindex="0" class="prism-code language-js codeBlock_nIzC thin-scrollbar"><code class="codeBlockLines_XJem codeBlockLinesWithNumbering_wj0B"><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Artplayer</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;artplayer&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain" style="display:inline-block"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> art </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Artplayer</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">container</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;.artplayer-app&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">url</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;/assets/sample/video.mp4&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span></span></code></pre><div class="buttonGroup_ZGDt"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_Px3p" aria-hidden="true"><svg class="copyButtonIcon_nPcH" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_Z1UB" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_zQZC" hidden=""><div class="language-bash codeBlockContainer_c9TW theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_FGNF"><pre tabindex="0" class="prism-code language-bash codeBlock_nIzC thin-scrollbar"><code class="codeBlockLines_XJem"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">add</span><span class="token plain"> artplayer</span><br></span></code></pre><div class="buttonGroup_ZGDt"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_Px3p" aria-hidden="true"><svg class="copyButtonIcon_nPcH" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_Z1UB" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><div class="language-js codeBlockContainer_c9TW theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_FGNF"><pre tabindex="0" class="prism-code language-js codeBlock_nIzC thin-scrollbar"><code class="codeBlockLines_XJem codeBlockLinesWithNumbering_wj0B"><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Artplayer</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;artplayer&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain" style="display:inline-block"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> art </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Artplayer</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">container</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;.artplayer-app&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">url</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;/assets/sample/video.mp4&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span></span></code></pre><div class="buttonGroup_ZGDt"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_Px3p" aria-hidden="true"><svg class="copyButtonIcon_nPcH" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_Z1UB" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_zQZC" hidden=""><div class="language-html codeBlockContainer_c9TW theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_FGNF"><pre tabindex="0" class="prism-code language-html codeBlock_nIzC thin-scrollbar"><code class="codeBlockLines_XJem codeBlockLinesWithNumbering_wj0B"><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token comment" style="color:#999988;font-style:italic">&lt;!-- local --&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">script</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">src</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag attr-value" style="color:#e3116c">path/to/artplayer.js</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token script"></span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">script</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain" style="display:inline-block"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">&lt;!-- jsdelivr --&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">script</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">src</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag attr-value" style="color:#e3116c">https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token script"></span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">script</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain" style="display:inline-block"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">&lt;!-- unpkg --&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">script</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">src</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag attr-value" style="color:#e3116c">https://unpkg.com/artplayer/dist/artplayer.js</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token script"></span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">script</span><span class="token tag punctuation" style="color:#393A34">&gt;</span></span></span></code></pre><div class="buttonGroup_ZGDt"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_Px3p" aria-hidden="true"><svg class="copyButtonIcon_nPcH" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_Z1UB" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><div class="language-js codeBlockContainer_c9TW theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_FGNF"><pre tabindex="0" class="prism-code language-js codeBlock_nIzC thin-scrollbar"><code class="codeBlockLines_XJem codeBlockLinesWithNumbering_wj0B"><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> art </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">window</span><span class="token class-name punctuation" style="color:#393A34">.</span><span class="token class-name">Artplayer</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">container</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;.artplayer-app&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">url</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;/assets/sample/video.mp4&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span></span></code></pre><div class="buttonGroup_ZGDt"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_Px3p" aria-hidden="true"><svg class="copyButtonIcon_nPcH" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_Z1UB" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div><h2 class="anchor anchorWithStickyNavbar_UUsI" id="use">Use<a class="hash-link" href="#use" title="Direct link to heading">​</a></h2><div class="admonition admonition-danger alert alert--danger"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg></span>Tip</h5></div><div class="admonition-content"><p>The size of the player depends on the size of the <code>container</code>, so your <code>container</code> must have a size.</p></div></div><h3 class="anchor anchorWithStickyNavbar_UUsI" id="use-in-html">Use in <code>Html</code><a class="hash-link" href="#use-in-html" title="Direct link to heading">​</a></h3><div class="language-html codeBlockContainer_c9TW theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_ktSr">index.html</div><div class="codeBlockContent_FGNF"><pre tabindex="0" class="prism-code language-html codeBlock_nIzC thin-scrollbar"><code class="codeBlockLines_XJem codeBlockLinesWithNumbering_wj0B"><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token doctype punctuation" style="color:#393A34;font-style:italic">&lt;!</span><span class="token doctype doctype-tag" style="color:#999988;font-style:italic">DOCTYPE</span><span class="token doctype" style="color:#999988;font-style:italic"> </span><span class="token doctype name" style="color:#999988;font-style:italic">html</span><span class="token doctype punctuation" style="color:#393A34;font-style:italic">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">html</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">head</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">title</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">ArtPlayer</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">title</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">meta</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">charset</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag attr-value" style="color:#e3116c">UTF-8</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">style</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token style language-css"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token style language-css"> </span><span class="token style language-css selector class" style="color:#00009f">.artplayer-app</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:#393A34">{</span><span class="token style language-css"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token style language-css"> </span><span class="token style language-css property" style="color:#36acaa">width</span><span class="token style language-css punctuation" style="color:#393A34">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:#36acaa">400</span><span class="token style language-css unit">px</span><span class="token style language-css punctuation" style="color:#393A34">;</span><span class="token style language-css"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token style language-css"> </span><span class="token style language-css property" style="color:#36acaa">height</span><span class="token style language-css punctuation" style="color:#393A34">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:#36acaa">300</span><span class="token style language-css unit">px</span><span class="token style language-css punctuation" style="color:#393A34">;</span><span class="token style language-css"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:#393A34">}</span><span class="token style language-css"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token style language-css"> </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">style</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">head</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">body</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">div</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">class</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag attr-value" style="color:#e3116c">artplayer-app</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">script</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">src</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag attr-value" style="color:#e3116c">path/to/artplayer.js</span><span class="token tag attr-value punctuation" style="color:#393A34">&quot;</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token script"></span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">script</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">script</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token script language-javascript"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style="color:#00009f">var</span><span class="token script language-javascript"> art </span><span class="token script language-javascript operator" style="color:#393A34">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style="color:#00009f">new</span><span class="token script language-javascript"> </span><span class="token script language-javascript class-name">Artplayer</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript punctuation" style="color:#393A34">{</span><span class="token script language-javascript"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style="color:#36acaa">container</span><span class="token script language-javascript operator" style="color:#393A34">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:#e3116c">&#x27;.artplayer-app&#x27;</span><span class="token script language-javascript punctuation" style="color:#393A34">,</span><span class="token script language-javascript"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style="color:#36acaa">url</span><span class="token script language-javascript operator" style="color:#393A34">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:#e3116c">&#x27;/assets/sample/video.mp4&#x27;</span><span class="token script language-javascript punctuation" style="color:#393A34">,</span><span class="token script language-javascript"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:#393A34">}</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">;</span><span class="token script language-javascript"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token script language-javascript"> </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">script</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">body</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">html</span><span class="token tag punctuation" style="color:#393A34">&gt;</span></span></span></code></pre><div class="buttonGroup_ZGDt"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_Px3p" aria-hidden="true"><svg class="copyButtonIcon_nPcH" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_Z1UB" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><h3 class="anchor anchorWithStickyNavbar_UUsI" id="use-in-vuejs-or-nuxtjs">Use in <code>Vue.js</code> or <code>Nuxt.js</code><a class="hash-link" href="#use-in-vuejs-or-nuxtjs" title="Direct link to heading">​</a></h3><div class="tabs-container tabList_vG2x"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_yrY8 tabs__item--active">Vue.js Template</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_yrY8">Nuxt.js Template</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_zQZC"><p>🚀 <a href="https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/vue3.js" target="_blank" rel="noopener noreferrer">artplayer-template/vue.js</a></p></div><div role="tabpanel" class="tabItem_zQZC" hidden=""><p>🚀 <a href="https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/nuxt.js" target="_blank" rel="noopener noreferrer">artplayer-template/nuxt.js</a></p></div></div></div><div class="tabs-container tabList_vG2x"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_yrY8 tabs__item--active">Artplayer.vue</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_yrY8">App.vue</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_zQZC"><div class="language-js codeBlockContainer_c9TW theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_ktSr">Artplayer.vue</div><div class="codeBlockContent_FGNF"><pre tabindex="0" class="prism-code language-js codeBlock_nIzC thin-scrollbar"><code class="codeBlockLines_XJem codeBlockLinesWithNumbering_wj0B"><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">template</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">div ref</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;artRef&quot;</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">div</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">template</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain" style="display:inline-block"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">script</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Artplayer</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;artplayer&quot;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain" style="display:inline-block"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">default</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token function" style="color:#d73a49">data</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">instance</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword null nil" style="color:#00009f">null</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">props</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">option</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token known-class-name class-name">Object</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">required</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token function" style="color:#d73a49">mounted</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">instance</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Artplayer</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token spread operator" style="color:#393A34">...</span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">option</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">container</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">$refs</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">artRef</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain" style="display:inline-block"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">$nextTick</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">$emit</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&quot;get-instance&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">instance</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token function" style="color:#d73a49">beforeUnmount</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">instance</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&amp;&amp;</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">instance</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">destroy</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">instance</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">destroy</span><span class="token punctuation" style="color:#393A34">(</span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">script</span><span class="token operator" style="color:#393A34">&gt;</span></span></span></code></pre><div class="buttonGroup_ZGDt"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_Px3p" aria-hidden="true"><svg class="copyButtonIcon_nPcH" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_Z1UB" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_zQZC" hidden=""><div class="language-js codeBlockContainer_c9TW theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_ktSr">App.vue</div><div class="codeBlockContent_FGNF"><pre tabindex="0" class="prism-code language-js codeBlock_nIzC thin-scrollbar"><code class="codeBlockLines_XJem codeBlockLinesWithNumbering_wj0B"><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">template</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token maybe-class-name">Artplayer</span><span class="token plain"> @get</span><span class="token operator" style="color:#393A34">-</span><span class="token plain">instance</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;getInstance&quot;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">:</span><span class="token plain">option</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;option&quot;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">:</span><span class="token plain">style</span><span class="token operator" style="color:#393A34">=</span><span class="token string" style="color:#e3116c">&quot;style&quot;</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">/</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">template</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain" style="display:inline-block"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">script</span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Artplayer</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;./Artplayer.vue&quot;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain" style="display:inline-block"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">default</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token function" style="color:#d73a49">data</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">option</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">url</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;https://artplayer.org/assets/sample/video.mp4&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">style</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">width</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;600px&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">height</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;400px&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">margin</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;60px auto 0&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">components</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token maybe-class-name">Artplayer</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">methods</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token function" style="color:#d73a49">getInstance</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">art</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">art</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token operator" style="color:#393A34">&lt;</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">script</span><span class="token operator" style="color:#393A34">&gt;</span></span></span></code></pre><div class="buttonGroup_ZGDt"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_Px3p" aria-hidden="true"><svg class="copyButtonIcon_nPcH" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_Z1UB" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div><h3 class="anchor anchorWithStickyNavbar_UUsI" id="use-in-reactjs-or-nextjs">Use in <code>React.js</code> or <code>Next.js</code><a class="hash-link" href="#use-in-reactjs-or-nextjs" title="Direct link to heading">​</a></h3><div class="tabs-container tabList_vG2x"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_yrY8 tabs__item--active">React.js Template</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_yrY8">Next.js Template</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_zQZC"><p>🚀 <a href="https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/react.js" target="_blank" rel="noopener noreferrer">artplayer-template/react.js</a></p></div><div role="tabpanel" class="tabItem_zQZC" hidden=""><p>🚀 <a href="https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/next.js" target="_blank" rel="noopener noreferrer">artplayer-template/next.js</a></p></div></div></div><div class="tabs-container tabList_vG2x"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_yrY8 tabs__item--active">ArtPlayer.jsx</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_yrY8">App.jsx</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_zQZC"><div class="language-jsx codeBlockContainer_c9TW theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_ktSr">ArtPlayer.jsx</div><div class="codeBlockContent_FGNF"><pre tabindex="0" class="prism-code language-jsx codeBlock_nIzC thin-scrollbar"><code class="codeBlockLines_XJem codeBlockLinesWithNumbering_wj0B"><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> useEffect</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"> useRef </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;react&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Artplayer</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;artplayer&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain" style="display:inline-block"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">default</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#d73a49">Player</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter punctuation" style="color:#393A34">{</span><span class="token parameter"> option</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> getInstance</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> </span><span class="token parameter spread operator" style="color:#393A34">...</span><span class="token parameter">rest </span><span class="token parameter punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> artRef </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">useRef</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain" style="display:inline-block"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token function" style="color:#d73a49">useEffect</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> art </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Artplayer</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token spread operator" style="color:#393A34">...</span><span class="token plain">option</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">container</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> artRef</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">current</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain" style="display:inline-block"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">getInstance </span><span class="token operator" style="color:#393A34">&amp;&amp;</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">typeof</span><span class="token plain"> getInstance </span><span class="token operator" style="color:#393A34">===</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;function&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token function" style="color:#d73a49">getInstance</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">art</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain" style="display:inline-block"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">art </span><span class="token operator" style="color:#393A34">&amp;&amp;</span><span class="token plain"> art</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">destroy</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> art</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">destroy</span><span class="token punctuation" style="color:#393A34">(</span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain" style="display:inline-block"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">div</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">ref</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f">artRef</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag spread punctuation" style="color:#393A34">{</span><span class="token tag spread operator" style="color:#393A34">...</span><span class="token tag spread" style="color:#00009f">rest</span><span class="token tag spread punctuation" style="color:#393A34">}</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span></span></code></pre><div class="buttonGroup_ZGDt"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_Px3p" aria-hidden="true"><svg class="copyButtonIcon_nPcH" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_Z1UB" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_zQZC" hidden=""><div class="language-jsx codeBlockContainer_c9TW theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_ktSr">App.jsx</div><div class="codeBlockContent_FGNF"><pre tabindex="0" class="prism-code language-jsx codeBlock_nIzC thin-scrollbar"><code class="codeBlockLines_XJem codeBlockLinesWithNumbering_wj0B"><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;react&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Artplayer</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;./ArtPlayer&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain" style="display:inline-block"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#d73a49">App</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain-text"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">Artplayer</span><span class="token tag" style="color:#00009f"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">option</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript literal-property property" style="color:#36acaa">url</span><span class="token tag script language-javascript operator" style="color:#393A34">:</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript string" style="color:#e3116c">&#x27;https://artplayer.org/assets/sample/video.mp4&#x27;</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#00009f"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript literal-property property" style="color:#36acaa">width</span><span class="token tag script language-javascript operator" style="color:#393A34">:</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript string" style="color:#e3116c">&#x27;600px&#x27;</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#00009f"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript literal-property property" style="color:#36acaa">height</span><span class="token tag script language-javascript operator" style="color:#393A34">:</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript string" style="color:#e3116c">&#x27;400px&#x27;</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#00009f"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript literal-property property" style="color:#36acaa">margin</span><span class="token tag script language-javascript operator" style="color:#393A34">:</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript string" style="color:#e3116c">&#x27;60px auto 0&#x27;</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#00009f"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">getInstance</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript punctuation" style="color:#393A34">(</span><span class="token tag script language-javascript parameter" style="color:#00009f">art</span><span class="token tag script language-javascript punctuation" style="color:#393A34">)</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript arrow operator" style="color:#393A34">=&gt;</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript console class-name" style="color:#00009f">console</span><span class="token tag script language-javascript punctuation" style="color:#393A34">.</span><span class="token tag script language-javascript method function property-access" style="color:#d73a49">log</span><span class="token tag script language-javascript punctuation" style="color:#393A34">(</span><span class="token tag script language-javascript" style="color:#00009f">art</span><span class="token tag script language-javascript punctuation" style="color:#393A34">)</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/&gt;</span><span class="token plain-text"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain" style="display:inline-block"></span></span></span><span class="token-line codeLine_y78B" style="color:#393A34"><span class="codeLineNumber_t73h"></span><span class="codeLineContent_gcmP"><span class="token plain"></span><span class="token keyword module" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">default</span><span class="token plain"> </span><span class="token maybe-class-name">App</span><span class="token punctuation" style="color:#393A34">;</span></span></span></code></pre><div class="buttonGroup_ZGDt"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_Px3p" aria-hidden="true"><svg class="copyButtonIcon_nPcH" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_Z1UB" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><a class="pagination-nav__link pagination-nav__link--next" href="/document/options"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Basic options</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_EtLs thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#install" class="table-of-contents__link toc-highlight">Install</a></li><li><a href="#use" class="table-of-contents__link toc-highlight">Use</a><ul><li><a href="#use-in-html" class="table-of-contents__link toc-highlight">Use in <code>Html</code></a></li><li><a href="#use-in-vuejs-or-nuxtjs" class="table-of-contents__link toc-highlight">Use in <code>Vue.js</code> or <code>Nuxt.js</code></a></li><li><a href="#use-in-reactjs-or-nextjs" class="table-of-contents__link toc-highlight">Use in <code>React.js</code> or <code>Next.js</code></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2022 Artplayer.js, Inc. Built with Docusaurus.</div></div></div></footer></div>
<script src="/document/assets/js/runtime~main.b3247fa5.js"></script>
<script src="/document/assets/js/main.78289a0f.js"></script>
</body>
</html>