Files
ArtPlayer/docs/document/en/component/controls.html
T
2024-01-10 09:20:13 +08:00

156 lines
69 KiB
HTML
Raw 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-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Controller | Artplayer.js</title>
<meta name="description" content="ArtPlayer.js is a modern and full featured HTML5 video player">
<meta name="generator" content="VitePress v1.0.0-rc.36">
<link rel="preload stylesheet" href="/document/assets/style.OQSPIeQY.css" as="style">
<script type="module" src="/document/assets/app.WoTWP0xL.js"></script>
<link rel="preload" href="/document/assets/inter-roman-latin.bvIUbFQP.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/document/assets/chunks/framework.n4OLkSRA.js">
<link rel="modulepreload" href="/document/assets/chunks/theme.FsA9FYvx.js">
<link rel="modulepreload" href="/document/assets/en_component_controls.md.VeVd_IXC.lean.js">
<script src="/document/main.js"></script>
<link rel="stylesheet" href="/document/style.css">
<link rel="shortcut icon" href="/document/favicon.ico">
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"dark",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-7b72038e><!--[--><!--]--><!--[--><span tabindex="-1" data-v-eb07dd5a></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-eb07dd5a> Skip to content </a><!--]--><!----><header class="VPNav" data-v-7b72038e data-v-e10a1755><div class="VPNavBar has-sidebar" data-v-e10a1755 data-v-f0437926><div class="wrapper" data-v-f0437926><div class="container" data-v-f0437926><div class="title" data-v-f0437926><div class="VPNavBarTitle has-sidebar" data-v-f0437926 data-v-ddc87d97><a class="title" href="/document/" data-v-ddc87d97><!--[--><!--]--><!--[--><img class="VPImage logo" src="/document/logo.png" alt data-v-1d4d3e2d><!--]--><!--[-->Artplayer.js<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-f0437926><div class="content-body" data-v-f0437926><!--[--><!--]--><div class="VPNavBarSearch search" data-v-f0437926><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><span class="DocSearch-Button-Key">Meta</span><span class="DocSearch-Button-Key">K</span></span></button></div></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-f0437926 data-v-524c6926><span id="main-nav-aria-label" class="visually-hidden" data-v-524c6926>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/" tabindex="0" data-v-524c6926 data-v-c3498f4a><!--[--><span data-v-c3498f4a>中文版</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/document/en/" tabindex="0" data-v-524c6926 data-v-c3498f4a><!--[--><span data-v-c3498f4a>English</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://artplayer.org" target="_blank" rel="noreferrer" tabindex="0" data-v-524c6926 data-v-c3498f4a><!--[--><span data-v-c3498f4a>Online Editor</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-524c6926 data-v-751f7dc2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-751f7dc2><span class="text" data-v-751f7dc2><!----><span data-v-751f7dc2>5.1.x</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-751f7dc2><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-751f7dc2><div class="VPMenu" data-v-751f7dc2 data-v-3d939a0e><div class="items" data-v-3d939a0e><!--[--><!--[--><div class="VPMenuLink" data-v-3d939a0e data-v-a7f400c9><a class="VPLink link vp-external-link-icon" href="https://github.com/zhw2590582/ArtPlayer/blob/master/CHANGELOG_CN.md" target="_blank" rel="noreferrer" data-v-a7f400c9><!--[-->Changelog<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-3d939a0e data-v-a7f400c9><a class="VPLink link vp-external-link-icon" href="https://github.com/zhw2590582/ArtPlayer#donations" target="_blank" rel="noreferrer" data-v-a7f400c9><!--[-->Donation<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-3d939a0e data-v-a7f400c9><a class="VPLink link vp-external-link-icon" href="https://github.com/zhw2590582/ArtPlayer#qq-group" target="_blank" rel="noreferrer" data-v-a7f400c9><!--[-->Q群: 320881312<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-f0437926 data-v-9b43b06b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to light theme" aria-checked="true" data-v-9b43b06b data-v-0f4c19f4 data-v-346644ee><span class="check" data-v-346644ee><span class="icon" data-v-346644ee><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-0f4c19f4><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-0f4c19f4><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-f0437926 data-v-15ea03d7 data-v-1784315b><!--[--><a class="VPSocialLink no-icon" href="https://github.com/zhw2590582/ArtPlayer" aria-label="github" target="_blank" rel="noopener" data-v-1784315b data-v-67d2a2bd><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-f0437926 data-v-2024822d data-v-751f7dc2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-751f7dc2><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-751f7dc2><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-751f7dc2><div class="VPMenu" data-v-751f7dc2 data-v-3d939a0e><!----><!--[--><!--[--><!----><div class="group" data-v-2024822d><div class="item appearance" data-v-2024822d><p class="label" data-v-2024822d>Appearance</p><div class="appearance-action" data-v-2024822d><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to light theme" aria-checked="true" data-v-2024822d data-v-0f4c19f4 data-v-346644ee><span class="check" data-v-346644ee><span class="icon" data-v-346644ee><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-0f4c19f4><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-0f4c19f4><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-2024822d><div class="item social-links" data-v-2024822d><div class="VPSocialLinks social-links-list" data-v-2024822d data-v-1784315b><!--[--><a class="VPSocialLink no-icon" href="https://github.com/zhw2590582/ArtPlayer" aria-label="github" target="_blank" rel="noopener" data-v-1784315b data-v-67d2a2bd><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-f0437926 data-v-bb159bdc><span class="container" data-v-bb159bdc><span class="top" data-v-bb159bdc></span><span class="middle" data-v-bb159bdc></span><span class="bottom" data-v-bb159bdc></span></span></button></div></div></div></div><div class="divider" data-v-f0437926><div class="divider-line" data-v-f0437926></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-7b72038e data-v-290b6017><div class="container" data-v-290b6017><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-290b6017><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-290b6017><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-290b6017>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-290b6017 data-v-b0aa3e38><button data-v-b0aa3e38>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-7b72038e data-v-af34e506><div class="curtain" data-v-af34e506></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-af34e506><span class="visually-hidden" id="sidebar-aria-label" data-v-af34e506> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-af34e506><section class="VPSidebarItem level-0" data-v-af34e506 data-v-20dc7ca1><div class="item" role="button" tabindex="0" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><h2 class="text" data-v-20dc7ca1>Quick start</h2><!----></div><div class="items" data-v-20dc7ca1><!--[--><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>Install</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/start/option.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>Option</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/start/i18n.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>Language</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-af34e506><section class="VPSidebarItem level-0 has-active" data-v-af34e506 data-v-20dc7ca1><div class="item" role="button" tabindex="0" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><h2 class="text" data-v-20dc7ca1>Component</h2><!----></div><div class="items" data-v-20dc7ca1><!--[--><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/component/layers.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>Layers</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/component/controls.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>Controls</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/component/contextmenu.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>Contextmenu</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/component/setting.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>Setting</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-af34e506><section class="VPSidebarItem level-0" data-v-af34e506 data-v-20dc7ca1><div class="item" role="button" tabindex="0" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><h2 class="text" data-v-20dc7ca1>Advanced</h2><!----></div><div class="items" data-v-20dc7ca1><!--[--><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/advanced/property.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>Instance Property</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/advanced/built-in.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>Advanced Property</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/advanced/class.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>Static Property</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/advanced/global.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>Global Property</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/advanced/event.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>Instance Event</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/advanced/plugin.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>Writing Plugin</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-af34e506><section class="VPSidebarItem level-0" data-v-af34e506 data-v-20dc7ca1><div class="item" role="button" tabindex="0" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><h2 class="text" data-v-20dc7ca1>Plugins</h2><!----></div><div class="items" data-v-20dc7ca1><!--[--><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/plugin/danmuku.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>Danmuku</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/plugin/ads.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>Video Ads</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/plugin/iframe.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>Iframe Control</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/plugin/hls-quality.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>Hls Quality</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/plugin/dash-quality.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>Dash Quality</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-af34e506><section class="VPSidebarItem level-0" data-v-af34e506 data-v-20dc7ca1><div class="item" role="button" tabindex="0" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><h2 class="text" data-v-20dc7ca1>Libraries</h2><!----></div><div class="items" data-v-20dc7ca1><!--[--><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/library/hls.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>hls.js</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/library/flv.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>flv.js</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-20dc7ca1 data-v-20dc7ca1><div class="item" data-v-20dc7ca1><div class="indicator" data-v-20dc7ca1></div><a class="VPLink link link" href="/document/en/library/dash.html" data-v-20dc7ca1><!--[--><p class="text" data-v-20dc7ca1>dash.js</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-7b72038e data-v-956d6d4e><div class="VPDoc has-sidebar has-aside" data-v-956d6d4e data-v-3b1b911a><!--[--><!--]--><div class="container" data-v-3b1b911a><div class="aside" data-v-3b1b911a><div class="aside-curtain" data-v-3b1b911a></div><div class="aside-container" data-v-3b1b911a><div class="aside-content" data-v-3b1b911a><div class="VPDocAside" data-v-3b1b911a data-v-d0329ba8><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-d0329ba8 data-v-d99ceb48><div class="content" data-v-d99ceb48><div class="outline-marker" data-v-d99ceb48></div><div class="outline-title" role="heading" aria-level="2" data-v-d99ceb48>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-d99ceb48><span class="visually-hidden" id="doc-outline-aria-label" data-v-d99ceb48> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-d99ceb48 data-v-c212c8e2><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-d0329ba8></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-3b1b911a><div class="content-container" data-v-3b1b911a><!--[--><!--]--><main class="main" data-v-3b1b911a><div style="position:relative;" class="vp-doc _document_en_component_controls" data-v-3b1b911a><div><h1 id="controller" tabindex="-1">Controller <a class="header-anchor" href="#controller" aria-label="Permalink to &quot;Controller&quot;">​</a></h1><h2 id="configuration" tabindex="-1">Configuration <a class="header-anchor" href="#configuration" aria-label="Permalink to &quot;Configuration&quot;">​</a></h2><table><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>disable</code></td><td><code>Boolean</code></td><td>Whether to disable the component</td></tr><tr><td><code>name</code></td><td><code>String</code></td><td>The unique name of the component for class identification</td></tr><tr><td><code>index</code></td><td><code>Number</code></td><td>The index of the component, used for display priority</td></tr><tr><td><code>html</code></td><td><code>String</code>, <code>Element</code></td><td>The component&#39;s DOM element</td></tr><tr><td><code>style</code></td><td><code>Object</code></td><td>The style object for the component</td></tr><tr><td><code>click</code></td><td><code>Function</code></td><td>Component click event</td></tr><tr><td><code>mounted</code></td><td><code>Function</code></td><td>Triggered after the component is mounted</td></tr><tr><td><code>tooltip</code></td><td><code>String</code></td><td>Tooltip text for the component</td></tr><tr><td><code>position</code></td><td><code>String</code></td><td><code>left</code> and <code>right</code> control the position of the controller</td></tr><tr><td><code>selector</code></td><td><code>Array</code></td><td>An array of objects for the selection list</td></tr><tr><td><code>onSelect</code></td><td><code>Function</code></td><td>Function triggered when an item from the selection list is clicked</td></tr></tbody></table><h2 id="creation" tabindex="-1">Creation <a class="header-anchor" href="#creation" aria-label="Permalink to &quot;Creation&quot;">​</a></h2><div className="run-code">▶ Run Code</div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> controls: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;your-button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> index: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;left&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> html: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Your Button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> tooltip: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Your Button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> style: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;red&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">args</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;click&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, args);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mounted</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">args</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;mounted&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, args);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;subtitle&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;right&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> html: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Subtitle&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> selector: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> default: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> html: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&lt;span style=&quot;color:red&quot;&gt;subtitle 01&lt;/span&gt;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> html: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&lt;span style=&quot;color:yellow&quot;&gt;subtitle 02&lt;/span&gt;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onSelect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$dom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(item, $dom);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;Your &#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item.html;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Get the Element of control by name</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(art.controls[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;your-button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(art.controls[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;subtitle&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br></div></div><h2 id="adding" tabindex="-1">Adding <a class="header-anchor" href="#adding" aria-label="Permalink to &quot;Adding&quot;">​</a></h2><div className="run-code">▶ Run Code</div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.controls.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;button1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> index: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;left&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> html: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Your Button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> tooltip: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Your Button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> style: {</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;red&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">args</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;click&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, args);</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mounted</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">args</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;mounted&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, args);</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Get the Element of control by name</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(art.controls[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;button1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h2 id="delete" tabindex="-1">Delete <a class="header-anchor" href="#delete" aria-label="Permalink to &quot;Delete&quot;">​</a></h2><div className="run-code">▶ Run Code</div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> controls: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;button1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> index: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;right&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> html: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Your Button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> tooltip: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Your Button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> style: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;red&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;ready&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTimeout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Delete the control by name</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.controls.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">remove</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;button1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h2 id="update" tabindex="-1">Update <a class="header-anchor" href="#update" aria-label="Permalink to &quot;Update&quot;">​</a></h2><div className="run-code">▶ Run Code</div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> controls: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;button1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> index: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;right&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> html: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Subtitle&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> selector: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> default: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> html: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;subtitle 01&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> html: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;subtitle 02&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;ready&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTimeout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Update the control by name</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.controls.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">update</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;button1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> index: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;right&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> html: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;New Subtitle&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> selector: [</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> default: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> html: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;new subtitle 01&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> html: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;new subtitle 02&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-3b1b911a data-v-eaa68f36><!--[--><!--]--><div class="edit-info" data-v-eaa68f36><div class="edit-link" data-v-eaa68f36><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-vitepress/docs/en/component/controls.md" target="_blank" rel="noreferrer" data-v-eaa68f36><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-eaa68f36><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page on GitHub<!--]--></a></div><div class="last-updated" data-v-eaa68f36><p class="VPLastUpdated" data-v-eaa68f36 data-v-4c7d7d35>Last updated: <time datetime="2023-11-26T05:23:21.000Z" data-v-4c7d7d35></time></p></div></div><nav class="prev-next" data-v-eaa68f36><div class="pager" data-v-eaa68f36><a class="VPLink link pager-link prev" href="/document/en/component/layers.html" data-v-eaa68f36><!--[--><span class="desc" data-v-eaa68f36>Previous page</span><span class="title" data-v-eaa68f36>Layers</span><!--]--></a></div><div class="pager" data-v-eaa68f36><a class="VPLink link pager-link next" href="/document/en/component/contextmenu.html" data-v-eaa68f36><!--[--><span class="desc" data-v-eaa68f36>Next page</span><span class="title" data-v-eaa68f36>Contextmenu</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"advanced_class.md\":\"T4JSQQzz\",\"advanced_built-in.md\":\"azLFrYld\",\"advanced_plugin.md\":\"HbyKgThu\",\"advanced_global.md\":\"52CUNSO1\",\"advanced_event.md\":\"QLR3rGVx\",\"component_contextmenu.md\":\"T9q3h6VO\",\"advanced_property.md\":\"YrdzhbVM\",\"component_controls.md\":\"NzvFuDzs\",\"component_layers.md\":\"WrkwZJ6a\",\"en_advanced_class.md\":\"d2EuMRLk\",\"component_setting.md\":\"DO17u3iJ\",\"en_advanced_built-in.md\":\"Zn8tbgGC\",\"en_advanced_plugin.md\":\"M809A8pm\",\"en_component_contextmenu.md\":\"fff8op04\",\"en_advanced_global.md\":\"F1oQ7hkb\",\"en_advanced_event.md\":\"KyB1Bwv5\",\"en_component_controls.md\":\"VeVd_IXC\",\"en_advanced_property.md\":\"9MJ0u0ka\",\"en_component_layers.md\":\"Ne_2kKhH\",\"en_component_setting.md\":\"q3dG7CHr\",\"en_library_dash.md\":\"T4-F4KP3\",\"en_library_flv.md\":\"Dv-sxTVs\",\"en_library_hls.md\":\"a-LHyMNr\",\"en_plugin_ads.md\":\"1XwuM5Kh\",\"en_index.md\":\"pdWgmDwH\",\"en_plugin_hls-quality.md\":\"6P40hwlM\",\"en_plugin_dash-quality.md\":\"CK-_VZZN\",\"en_start_i18n.md\":\"Qy6HAxC3\",\"en_plugin_iframe.md\":\"k4tyOdJ7\",\"en_plugin_danmuku.md\":\"sVObAIIm\",\"library_dash.md\":\"yAIw4maz\",\"library_hls.md\":\"GiLDLFQA\",\"plugin_dash-quality.md\":\"55ML2B4H\",\"plugin_ads.md\":\"e9dMq6QP\",\"library_flv.md\":\"WcTk3l46\",\"plugin_hls-quality.md\":\"LEJqa4cT\",\"start_i18n.md\":\"Ly4QIYyN\",\"index.md\":\"uuH43CNU\",\"plugin_iframe.md\":\"ZY5iTTPu\",\"en_start_option.md\":\"MphDWfaF\",\"plugin_danmuku.md\":\"z2svubMH\",\"start_option.md\":\"-UphN3dV\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Artplayer.js\",\"description\":\"ArtPlayer.js is a modern and full featured HTML5 video player\",\"base\":\"/document/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":\"dark\",\"themeConfig\":{\"siteTitle\":\"Artplayer.js\",\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"中文版\",\"link\":\"/\"},{\"text\":\"English\",\"link\":\"/en/\",\"activeMatch\":\"/en/\"},{\"text\":\"Online Editor\",\"link\":\"https://artplayer.org\"},{\"text\":\"5.1.x\",\"items\":[{\"text\":\"Changelog\",\"link\":\"https://github.com/zhw2590582/ArtPlayer/blob/master/CHANGELOG_CN.md\"},{\"text\":\"Donation\",\"link\":\"https://github.com/zhw2590582/ArtPlayer#donations\"},{\"text\":\"Q群: 320881312\",\"link\":\"https://github.com/zhw2590582/ArtPlayer#qq-group\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/zhw2590582/ArtPlayer\"}],\"sidebar\":{\"/\":[{\"text\":\"开始\",\"collapsible\":true,\"items\":[{\"text\":\"安装使用\",\"link\":\"/\"},{\"text\":\"基础选项\",\"link\":\"/start/option\"},{\"text\":\"语言设置\",\"link\":\"/start/i18n\"}]},{\"text\":\"组件\",\"collapsible\":true,\"items\":[{\"text\":\"业务层\",\"link\":\"/component/layers\"},{\"text\":\"控制器\",\"link\":\"/component/controls\"},{\"text\":\"右键菜单\",\"link\":\"/component/contextmenu\"},{\"text\":\"设置面板\",\"link\":\"/component/setting\"}]},{\"text\":\"高级\",\"collapsible\":true,\"items\":[{\"text\":\"实例属性\",\"link\":\"/advanced/property\"},{\"text\":\"高级属性\",\"link\":\"/advanced/built-in\"},{\"text\":\"静态属性\",\"link\":\"/advanced/class\"},{\"text\":\"全局属性\",\"link\":\"/advanced/global\"},{\"text\":\"实例事件\",\"link\":\"/advanced/event\"},{\"text\":\"编写插件\",\"link\":\"/advanced/plugin\"}]},{\"text\":\"插件\",\"collapsible\":true,\"items\":[{\"text\":\"弹幕库\",\"link\":\"/plugin/danmuku\"},{\"text\":\"视频广告\",\"link\":\"/plugin/ads\"},{\"text\":\"Iframe 控制\",\"link\":\"/plugin/iframe\"},{\"text\":\"Hls 画质\",\"link\":\"/plugin/hls-quality\"},{\"text\":\"Dash 画质\",\"link\":\"/plugin/dash-quality\"}]},{\"text\":\"第三方库\",\"collapsible\":true,\"items\":[{\"text\":\"hls.js\",\"link\":\"/library/hls\"},{\"text\":\"flv.js\",\"link\":\"/library/flv\"},{\"text\":\"dash.js\",\"link\":\"/library/dash\"}]}],\"/en/\":[{\"text\":\"Quick start\",\"collapsible\":true,\"items\":[{\"text\":\"Install\",\"link\":\"/en/\"},{\"text\":\"Option\",\"link\":\"/en/start/option\"},{\"text\":\"Language\",\"link\":\"/en/start/i18n\"}]},{\"text\":\"Component\",\"collapsible\":true,\"items\":[{\"text\":\"Layers\",\"link\":\"/en/component/layers\"},{\"text\":\"Controls\",\"link\":\"/en/component/controls\"},{\"text\":\"Contextmenu\",\"link\":\"/en/component/contextmenu\"},{\"text\":\"Setting\",\"link\":\"/en/component/setting\"}]},{\"text\":\"Advanced\",\"collapsible\":true,\"items\":[{\"text\":\"Instance Property\",\"link\":\"/en/advanced/property\"},{\"text\":\"Advanced Property\",\"link\":\"/en/advanced/built-in\"},{\"text\":\"Static Property\",\"link\":\"/en/advanced/class\"},{\"text\":\"Global Property\",\"link\":\"/en/advanced/global\"},{\"text\":\"Instance Event\",\"link\":\"/en/advanced/event\"},{\"text\":\"Writing Plugin\",\"link\":\"/en/advanced/plugin\"}]},{\"text\":\"Plugins\",\"collapsible\":true,\"items\":[{\"text\":\"Danmuku\",\"link\":\"/en/plugin/danmuku\"},{\"text\":\"Video Ads\",\"link\":\"/en/plugin/ads\"},{\"text\":\"Iframe Control\",\"link\":\"/en/plugin/iframe\"},{\"text\":\"Hls Quality\",\"link\":\"/en/plugin/hls-quality\"},{\"text\":\"Dash Quality\",\"link\":\"/en/plugin/dash-quality\"}]},{\"text\":\"Libraries\",\"collapsible\":true,\"items\":[{\"text\":\"hls.js\",\"link\":\"/en/library/hls\"},{\"text\":\"flv.js\",\"link\":\"/en/library/flv\"},{\"text\":\"dash.js\",\"link\":\"/en/library/dash\"}]}]},\"editLink\":{\"pattern\":\"https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-vitepress/docs/:path\",\"text\":\"Edit this page on GitHub\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>