x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-08 19:06:15 -08:00
Code Issues Packages Projects Releases Wiki Activity
Files
699135afcf587b2f47c34535e2f9cfd80e16e8ac
ArtPlayer/docs/document/component/controls.html
T
Harvey Zack 699135afcf Danmuku (#759) 
* chore: Bump artplayer-plugin-danmuku version to 5.1.0

* chore: Update danmuku plugin with new mount option

* chore: Update danmuku plugin with new mount option

* chore: Update danmuku plugin with new mount option

* chore: Update danmuku plugin with new mount option

* chore: Update danmuku plugin with new mount option

* chore: Update danmuku plugin with new mount option

* chore: Refactor getDanmuTop function to handle additional cases

* chore: Refactor getDanmuTop function to handle additional cases

* chore: Update danmuku plugin with new mount option

* chore: Update danmuku plugin with new mount option

* chore: Refactor danmuku plugin to always create a new Setting instance

* Refactor danmuku plugin to always create a new Setting instance

* Refactor danmuku plugin to always create a new Setting instance

* Update danmuku.js

* Update danmuku.js

* Refactor danmuku plugin to include a new Setting instance

* Refactor danmuku plugin to include a new Setting instance

* Refactor danmuku plugin styles for better alignment and spacing

* Refactor danmuku plugin styles for better alignment and spacing

* Refactor danmuku plugin styles for better alignment and spacing

* Refactor danmuku plugin styles for better alignment and spacing

* Refactor danmuku plugin styles for better alignment and spacing

* chore: Update package.json files

* Refactor danmuku plugin to remove unnecessary whitespace in the setting template

* chore: Remove ESLint configuration files and update npm dependencies

* chore: Update ESLint configuration to disable console warnings and fix unused variable warnings

* chore: Update ESLint configuration to fix quotes rule

* Update package.json

* Update package.json

* Update setting.js

* chore: Compress CSS code in build script

* chore: Update build script to compress JavaScript code

* chore: Update build script to compress JavaScript code

* chore: Refactor setting.js to improve code organization and remove unused variables

* chore: Add isHover flag to Control component for better control hiding behavior

* chore: Update Control component to use $bottom instead of $controls for better control hiding behavior

* Update package.json

* Update package.json

* Update package.json

* chore: Update lerna.json to use independent versioning and yarn as npm client

* refactor: Update Danmuku class to support configurable modes and visibility

* refactor: Update Danmuku styles for better visibility and configurability

* feat: Update font weight in Danmuku styles for better readability

* refactor: Update Danmuku class to support configurable modes and visibility

* refactor: Add opacity, area, font, and speed sliders to Danmuku settings

* refactor: Initialize sliders for opacity, area, font, and speed in Danmuku settings

* feat: Add slider UI for opacity, area, and speed in Danmuku settings

* feat: Update slider styles in Danmuku settings for better visibility and configurability

* refactor: Improve Danmuku settings UI for better visibility and configurability

* refactor: Improve Danmuku settings UI for better visibility and configurability

* refactor: Update slider styles in Danmuku settings for better visibility and configurability

* refactor: Update margin slider initialization in Danmuku settings

* refactor: Update slider styles and initialization in Danmuku settings

* refactor: Update Danmuku class to support configurable visibility

* refactor: Update Danmuku class to support configurable visibility

* refactor: Update Danmuku class to support configurable visibility

* refactor: Update Danmuku class to support configurable visibility

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Improve Danmuku settings UI for better visibility and configurability

* add lock

* refactor: Add lock and unlock methods to Danmuku settings

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* Update artplayer-plugin-danmuku.d.ts

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings event listeners

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability

* refactor: Update Danmuku settings UI for better visibility and configurability
2024-05-26 14:57:22 +08:00

156 lines
62 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>控制器 | Artplayer.js</title>
<meta name="description" content="ArtPlayer.js is a modern and full featured HTML5 video player">
<meta name="generator" content="VitePress v1.2.2">
<link rel="preload stylesheet" href="/document/assets/style.CEs5zEcp.css" as="style">
<script type="module" src="/document/assets/app.Dl1WZa8V.js"></script>
<link rel="preload" href="/document/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/document/assets/chunks/framework.DXlgpajS.js">
<link rel="modulepreload" href="/document/assets/chunks/theme.CMFYtSdi.js">
<link rel="modulepreload" href="/document/assets/component_controls.md.BYiGOdHR.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-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar top" data-v-ae24b3ad data-v-ccf7ddec><div class="wrapper" data-v-ccf7ddec><div class="container" data-v-ccf7ddec><div class="title" data-v-ccf7ddec><div class="VPNavBarTitle has-sidebar" data-v-ccf7ddec data-v-ab179fa1><a class="title" href="/document/" data-v-ab179fa1><!--[--><!--]--><!--[--><img class="VPImage logo" src="/document/logo.png" alt data-v-8426fc1a><!--]--><span data-v-ab179fa1>Artplayer.js</span><!--[--><!--]--></a></div></div><div class="content" data-v-ccf7ddec><div class="content-body" data-v-ccf7ddec><!--[--><!--]--><div class="VPNavBarSearch search" data-v-ccf7ddec><!----><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-ccf7ddec data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/" tabindex="0" data-v-7f418b0f data-v-9c663999><!--[--><span data-v-9c663999>中文版</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/en/" tabindex="0" data-v-7f418b0f data-v-9c663999><!--[--><span data-v-9c663999>English</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://artplayer.org" target="_blank" rel="noreferrer" tabindex="0" data-v-7f418b0f data-v-9c663999><!--[--><span data-v-9c663999>Online Editor</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>5.1.x</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><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-43f1e123><!--[-->Changelog<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://github.com/zhw2590582/ArtPlayer#donations" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->Donation<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://github.com/zhw2590582/ArtPlayer#qq-group" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->Q群: 320881312<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-ccf7ddec data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to light theme" aria-checked="true" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-ccf7ddec data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/zhw2590582/ArtPlayer" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-github" /></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-ccf7ddec data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to light theme" aria-checked="true" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><div class="group" data-v-d0bd9dde><div class="item social-links" data-v-d0bd9dde><div class="VPSocialLinks social-links-list" data-v-d0bd9dde data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/zhw2590582/ArtPlayer" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-github" /></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-ccf7ddec data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-ccf7ddec><div class="divider-line" data-v-ccf7ddec></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0" data-v-575e6a36 data-v-b8d55f3b><div class="item" role="button" tabindex="0" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><h2 class="text" data-v-b8d55f3b>开始</h2><!----></div><div class="items" data-v-b8d55f3b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>安装使用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/start/option.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>基础选项</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/start/i18n.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>语言设置</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 has-active" data-v-575e6a36 data-v-b8d55f3b><div class="item" role="button" tabindex="0" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><h2 class="text" data-v-b8d55f3b>组件</h2><!----></div><div class="items" data-v-b8d55f3b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/component/layers.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>业务层</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/component/controls.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>控制器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/component/contextmenu.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>右键菜单</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/component/setting.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>设置面板</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0" data-v-575e6a36 data-v-b8d55f3b><div class="item" role="button" tabindex="0" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><h2 class="text" data-v-b8d55f3b>高级</h2><!----></div><div class="items" data-v-b8d55f3b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/advanced/property.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>实例属性</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/advanced/built-in.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>高级属性</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/advanced/class.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>静态属性</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/advanced/global.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>全局属性</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/advanced/event.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>实例事件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/advanced/plugin.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>编写插件</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0" data-v-575e6a36 data-v-b8d55f3b><div class="item" role="button" tabindex="0" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><h2 class="text" data-v-b8d55f3b>插件</h2><!----></div><div class="items" data-v-b8d55f3b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/plugin/danmuku.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>弹幕库</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/plugin/ads.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>视频广告</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/plugin/iframe.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>Iframe 控制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/plugin/hls-quality.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>Hls 画质</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/plugin/dash-quality.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>Dash 画质</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0" data-v-575e6a36 data-v-b8d55f3b><div class="item" role="button" tabindex="0" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><h2 class="text" data-v-b8d55f3b>第三方库</h2><!----></div><div class="items" data-v-b8d55f3b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/library/hls.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>hls.js</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/library/flv.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>flv.js</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/document/library/dash.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>dash.js</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _document_component_controls" data-v-39a288b8><div><h1 id="控制器" tabindex="-1">控制器 <a class="header-anchor" href="#控制器" aria-label="Permalink to &quot;控制器&quot;">​</a></h1><h2 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to &quot;配置&quot;">​</a></h2><table><thead><tr><th>属性</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td><code>disable</code></td><td><code>Boolean</code></td><td>是否禁用组件</td></tr><tr><td><code>name</code></td><td><code>String</code></td><td>组件唯一名称，用于标记类名</td></tr><tr><td><code>index</code></td><td><code>Number</code></td><td>组件索引，用于显示的优先级</td></tr><tr><td><code>html</code></td><td><code>String</code>, <code>Element</code></td><td>组件的 DOM 元素</td></tr><tr><td><code>style</code></td><td><code>Object</code></td><td>组件样式对象</td></tr><tr><td><code>click</code></td><td><code>Function</code></td><td>组件点击事件</td></tr><tr><td><code>mounted</code></td><td><code>Function</code></td><td>组件挂载后触发</td></tr><tr><td><code>tooltip</code></td><td><code>String</code></td><td>组件的提示文本</td></tr><tr><td><code>position</code></td><td><code>String</code></td><td><code>left</code> 和 <code>right</code> 控制控制器出现的左右位置</td></tr><tr><td><code>selector</code></td><td><code>Array</code></td><td>选择列表的对象数组</td></tr><tr><td><code>onSelect</code></td><td><code>Function</code></td><td>选择列表的元素被点击时触发的函数</td></tr></tbody></table><h2 id="创建" tabindex="-1">创建 <a class="header-anchor" href="#创建" aria-label="Permalink to &quot;创建&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" tabindex="0"><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="添加" tabindex="-1">添加 <a class="header-anchor" href="#添加" aria-label="Permalink to &quot;添加&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" tabindex="0"><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="删除" tabindex="-1">删除 <a class="header-anchor" href="#删除" aria-label="Permalink to &quot;删除&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" tabindex="0"><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="更新" tabindex="-1">更新 <a class="header-anchor" href="#更新" aria-label="Permalink to &quot;更新&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" tabindex="0"><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-39a288b8 data-v-d4a0bba5><!--[--><!--]--><div class="edit-info" data-v-d4a0bba5><div class="edit-link" data-v-d4a0bba5><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/component/controls.md" target="_blank" rel="noreferrer" data-v-d4a0bba5><!--[--><span class="vpi-square-pen edit-link-icon" data-v-d4a0bba5></span> Edit this page on GitHub<!--]--></a></div><div class="last-updated" data-v-d4a0bba5><p class="VPLastUpdated" data-v-d4a0bba5 data-v-7e05ebdb>Last updated: <time datetime="2023-04-23T07:11:08.000Z" data-v-7e05ebdb></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-d4a0bba5><span class="visually-hidden" id="doc-footer-aria-label" data-v-d4a0bba5>Pager</span><div class="pager" data-v-d4a0bba5><a class="VPLink link pager-link prev" href="/document/component/layers.html" data-v-d4a0bba5><!--[--><span class="desc" data-v-d4a0bba5>Previous page</span><span class="title" data-v-d4a0bba5>业务层</span><!--]--></a></div><div class="pager" data-v-d4a0bba5><a class="VPLink link pager-link next" href="/document/component/contextmenu.html" data-v-d4a0bba5><!--[--><span class="desc" data-v-d4a0bba5>Next page</span><span class="title" data-v-d4a0bba5>右键菜单</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"advanced_plugin.md\":\"2HyC-tGz\",\"advanced_built-in.md\":\"DmzqXfxm\",\"advanced_class.md\":\"1_Qn7xo8\",\"component_contextmenu.md\":\"BJEn6dWt\",\"component_controls.md\":\"BYiGOdHR\",\"component_setting.md\":\"DyK4mklZ\",\"component_layers.md\":\"CwYgrgxj\",\"en_advanced_built-in.md\":\"2IAm3gis\",\"advanced_event.md\":\"DIa3aeXS\",\"en_advanced_class.md\":\"mixu78XH\",\"advanced_global.md\":\"AD97Z3-7\",\"en_advanced_plugin.md\":\"xm12vlBU\",\"en_component_contextmenu.md\":\"uSIzNo9m\",\"en_component_controls.md\":\"DgtD9xxu\",\"en_component_layers.md\":\"fymDx04R\",\"advanced_property.md\":\"CYjLkVe3\",\"en_advanced_global.md\":\"DlSHTMOC\",\"en_component_setting.md\":\"UN5J6naQ\",\"en_library_dash.md\":\"DX1YLUoV\",\"en_library_flv.md\":\"BGe1v4Lx\",\"en_library_hls.md\":\"DAEC9wJG\",\"en_plugin_ads.md\":\"PIbKTcbf\",\"en_advanced_property.md\":\"B6mgqp4Q\",\"en_advanced_event.md\":\"CkF3W8ym\",\"en_index.md\":\"CFCTwsLz\",\"en_plugin_hls-quality.md\":\"CkQkYBSg\",\"en_plugin_dash-quality.md\":\"B01y6aYw\",\"en_start_i18n.md\":\"C4F3rFzD\",\"en_plugin_iframe.md\":\"BFkEAqYI\",\"en_plugin_danmuku.md\":\"CxNdV4zu\",\"library_dash.md\":\"1Czoi6Go\",\"library_flv.md\":\"C49DbVRN\",\"library_hls.md\":\"CvE_u2CQ\",\"plugin_hls-quality.md\":\"oiLG_pEO\",\"plugin_dash-quality.md\":\"DG2BlssB\",\"index.md\":\"B2jNHRZ_\",\"start_i18n.md\":\"Bld5I6bw\",\"en_start_option.md\":\"C8PufWlv\",\"plugin_ads.md\":\"-OCWQK1l\",\"plugin_iframe.md\":\"Bhgm2HB3\",\"plugin_danmuku.md\":\"txKsFu5c\",\"start_option.md\":\"Bww-xQnc\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Artplayer.js\",\"description\":\"ArtPlayer.js is a modern and full featured HTML5 video player\",\"base\":\"/document/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":\"dark\",\"themeConfig\":{\"siteTitle\":\"Artplayer.js\",\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"中文版\",\"link\":\"/\"},{\"text\":\"English\",\"link\":\"/en/\",\"activeMatch\":\"/en/\"},{\"text\":\"Online Editor\",\"link\":\"https://artplayer.org\"},{\"text\":\"5.1.x\",\"items\":[{\"text\":\"Changelog\",\"link\":\"https://github.com/zhw2590582/ArtPlayer/blob/master/CHANGELOG_CN.md\"},{\"text\":\"Donation\",\"link\":\"https://github.com/zhw2590582/ArtPlayer#donations\"},{\"text\":\"Q群: 320881312\",\"link\":\"https://github.com/zhw2590582/ArtPlayer#qq-group\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/zhw2590582/ArtPlayer\"}],\"sidebar\":{\"/\":[{\"text\":\"开始\",\"collapsible\":true,\"items\":[{\"text\":\"安装使用\",\"link\":\"/\"},{\"text\":\"基础选项\",\"link\":\"/start/option\"},{\"text\":\"语言设置\",\"link\":\"/start/i18n\"}]},{\"text\":\"组件\",\"collapsible\":true,\"items\":[{\"text\":\"业务层\",\"link\":\"/component/layers\"},{\"text\":\"控制器\",\"link\":\"/component/controls\"},{\"text\":\"右键菜单\",\"link\":\"/component/contextmenu\"},{\"text\":\"设置面板\",\"link\":\"/component/setting\"}]},{\"text\":\"高级\",\"collapsible\":true,\"items\":[{\"text\":\"实例属性\",\"link\":\"/advanced/property\"},{\"text\":\"高级属性\",\"link\":\"/advanced/built-in\"},{\"text\":\"静态属性\",\"link\":\"/advanced/class\"},{\"text\":\"全局属性\",\"link\":\"/advanced/global\"},{\"text\":\"实例事件\",\"link\":\"/advanced/event\"},{\"text\":\"编写插件\",\"link\":\"/advanced/plugin\"}]},{\"text\":\"插件\",\"collapsible\":true,\"items\":[{\"text\":\"弹幕库\",\"link\":\"/plugin/danmuku\"},{\"text\":\"视频广告\",\"link\":\"/plugin/ads\"},{\"text\":\"Iframe 控制\",\"link\":\"/plugin/iframe\"},{\"text\":\"Hls 画质\",\"link\":\"/plugin/hls-quality\"},{\"text\":\"Dash 画质\",\"link\":\"/plugin/dash-quality\"}]},{\"text\":\"第三方库\",\"collapsible\":true,\"items\":[{\"text\":\"hls.js\",\"link\":\"/library/hls\"},{\"text\":\"flv.js\",\"link\":\"/library/flv\"},{\"text\":\"dash.js\",\"link\":\"/library/dash\"}]}],\"/en/\":[{\"text\":\"Quick start\",\"collapsible\":true,\"items\":[{\"text\":\"Install\",\"link\":\"/en/\"},{\"text\":\"Option\",\"link\":\"/en/start/option\"},{\"text\":\"Language\",\"link\":\"/en/start/i18n\"}]},{\"text\":\"Component\",\"collapsible\":true,\"items\":[{\"text\":\"Layers\",\"link\":\"/en/component/layers\"},{\"text\":\"Controls\",\"link\":\"/en/component/controls\"},{\"text\":\"Contextmenu\",\"link\":\"/en/component/contextmenu\"},{\"text\":\"Setting\",\"link\":\"/en/component/setting\"}]},{\"text\":\"Advanced\",\"collapsible\":true,\"items\":[{\"text\":\"Instance Property\",\"link\":\"/en/advanced/property\"},{\"text\":\"Advanced Property\",\"link\":\"/en/advanced/built-in\"},{\"text\":\"Static Property\",\"link\":\"/en/advanced/class\"},{\"text\":\"Global Property\",\"link\":\"/en/advanced/global\"},{\"text\":\"Instance Event\",\"link\":\"/en/advanced/event\"},{\"text\":\"Writing Plugin\",\"link\":\"/en/advanced/plugin\"}]},{\"text\":\"Plugins\",\"collapsible\":true,\"items\":[{\"text\":\"Danmuku\",\"link\":\"/en/plugin/danmuku\"},{\"text\":\"Video Ads\",\"link\":\"/en/plugin/ads\"},{\"text\":\"Iframe Control\",\"link\":\"/en/plugin/iframe\"},{\"text\":\"Hls Quality\",\"link\":\"/en/plugin/hls-quality\"},{\"text\":\"Dash Quality\",\"link\":\"/en/plugin/dash-quality\"}]},{\"text\":\"Libraries\",\"collapsible\":true,\"items\":[{\"text\":\"hls.js\",\"link\":\"/en/library/hls\"},{\"text\":\"flv.js\",\"link\":\"/en/library/flv\"},{\"text\":\"dash.js\",\"link\":\"/en/library/dash\"}]}]},\"editLink\":{\"pattern\":\"https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-vitepress/docs/:path\",\"text\":\"Edit this page on GitHub\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>
Reference in new issue View Git Blame Copy Permalink