mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-17 18:11:20 -08:00
Artplayer vitepress (#446)
* init * init * update * update * update * update * update * update * add i18n option * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update * update
This commit is contained in:
1 parent
6a866f88c3
commit
fa7954de0d
295 files changed
+18695
-36337
No files matched your search
Whitespace-only changes.
+21
-16
@@ -1,17 +1,22 @@
|
||||
<!doctype html>
|
||||
<html lang="en" dir="ltr" class="plugin-docs plugin-id-default">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="generator" content="Docusaurus v2.0.0-beta.20">
|
||||
<title data-rh="true">Page Not Found | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/404.html"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docusaurus_tag" content="default"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:docusaurus_tag" content="default"><meta data-rh="true" property="og:title" content="Page Not Found | Artplayer.js"><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/404.html"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/404.html" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/404.html" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
|
||||
<link rel="preload" href="/document/assets/js/runtime~main.1de6a516.js" as="script">
|
||||
<link rel="preload" href="/document/assets/js/main.a3e4ef08.js" as="script">
|
||||
</head>
|
||||
<body class="navigation-with-keyboard">
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper"><main class="container margin-vert--xl"><div class="row"><div class="col col--6 col--offset-3"><h1 class="hero__title">Page Not Found</h1><p>We could not find what you were looking for.</p><p>Please contact the owner of the site that linked you to the original URL and let them know their link is broken.</p></div></div></main></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2023 Artplayer.js, Inc. Built with Docusaurus.</div></div></div></Line truncated
|
||||
<script src="/document/assets/js/runtime~main.1de6a516.js"></script>
|
||||
<script src="/document/assets/js/main.a3e4ef08.js"></script>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>404 | Artplayer.js</title>
|
||||
<meta name="description" content="Not Found">
|
||||
<link rel="preload stylesheet" href="/document/assets/style.0892d455.css" as="style">
|
||||
<link rel="modulepreload" href="/document/assets/app.acdc77a1.js">
|
||||
|
||||
<script src="/main.js"></script>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<script id="check-dark-light">(()=>{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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><div class="Layout" data-v-5211c0b1><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav no-sidebar" data-v-5211c0b1 data-v-8c0a9870><div class="VPNavBar" data-v-8c0a9870 data-v-1bbed88e><div class="container" data-v-1bbed88e><div class="VPNavBarTitle" data-v-1bbed88e data-v-d5925166><a class="title" href="/document/" data-v-d5925166><!--[--><!--]--><!--[--><img class="VPImage logo" src="/document/logo.png" alt data-v-6db2186b><!--]--><!--[-->Artplayer.js<!--]--><!--[--><!--]--></a></div><div class="content" data-v-1bbed88e><!--[--><!--]--><div class="VPNavBarSearch search" data-v-1bbed88e><!----><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-1bbed88e data-v-f83db6ba><span id="main-nav-aria-label" class="visually-hidden" data-v-f83db6ba>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/document/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->中文版<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/en/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->English<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://artplayer.org" target="_blank" rel="noreferrer" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->Online Editor<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/#" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->QQ群: 320881312<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-f83db6ba data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-6ffb57d3><span class="text" data-v-6ffb57d3><!----> 4.6.x <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-6ffb57d3><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-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><div class="items" data-v-1c5d0cfc><!--[--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="https://github.com/zhw2590582/ArtPlayer/blob/master/CHANGELOG_CN.md" target="_blank" rel="noreferrer" data-v-e8e0fb1d data-v-3c355974><!--[-->Changelog<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-3c355974><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-1bbed88e data-v-a3e7452b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-a3e7452b data-v-481098f9 data-v-eba7420e><span class="check" data-v-eba7420e><span class="icon" data-v-eba7420e><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-481098f9><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-Line truncated
|
||||
<script>__VP_HASH_MAP__ = JSON.parse("{\"library_dash.md\":\"32119fe1\",\"en_index.md\":\"51748bf3\",\"plugin_control-ui.md\":\"ec2ab45e\",\"plugin_ads.md\":\"4c8e0b7a\",\"plugin_hls-quality.md\":\"1c3d5422\",\"library_flv.md\":\"1b4373c5\",\"start_component.md\":\"ad9f92aa\",\"start_setting.md\":\"ff6b3442\",\"advanced_built-in.md\":\"c13b2bd2\",\"library_hls.md\":\"23034afe\",\"advanced_plugin.md\":\"56c69c23\",\"index.md\":\"6ef07f3a\",\"plugin_iframe.md\":\"464f8f80\",\"advanced_class.md\":\"5d5c7279\",\"plugin_danmuku.md\":\"dbf36e4d\",\"advanced_property.md\":\"fe5901e0\",\"start_option.md\":\"31fff3b6\",\"advanced_event.md\":\"821c0057\"}")</script>
|
||||
<script type="module" async src="/document/assets/app.acdc77a1.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,17 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en" dir="ltr" class="docs-wrapper docs-doc-page docs-version-current plugin-docs plugin-id-default docs-doc-id-en/Advance">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="generator" content="Docusaurus v2.0.0-beta.20">
|
||||
<title data-rh="true">Advanced propertys | Artplayer.js</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://artplayer.org/document/advance"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Advanced propertys | Artplayer.js"><meta data-rh="true" name="description" content="This page is some additional supplements to the commonly used properties, you need to read in depth to develop custom functions."><meta data-rh="true" property="og:description" content="This page is some additional supplements to the commonly used properties, you need to read in depth to develop custom functions."><link data-rh="true" rel="icon" href="/document/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://artplayer.org/document/advance"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/advance" hreflang="en"><link data-rh="true" rel="alternate" href="https://artplayer.org/document/advance" hreflang="x-default"><link rel="stylesheet" href="/document/assets/css/styles.eba261b7.css">
|
||||
<link rel="preload" href="/document/assets/js/runtime~main.1de6a516.js" as="script">
|
||||
<link rel="preload" href="/document/assets/js/main.a3e4ef08.js" as="script">
|
||||
</head>
|
||||
<body class="navigation-with-keyboard">
|
||||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||||
<div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://artplayer.org/document" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--light_TfLj" height="28" width="28"><img src="/document/img/logo.png" alt="Artplayer.js" class="themedImage_W2Cr themedImage--dark_oUvU" height="28" width="28"></div><b class="navbar__title text--truncate">Artplayer.js</b></a><a href="https://artplayer.org" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Online Editor<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/zhw2590582/ArtPlayer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a href="#" class="navbar__item navbar__link">QQ群: 320881312</a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">English</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/document/">English</a></li><li><a class="dropdown__link" href="/document/zh-cn/">中文</a></li></ul></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_dLyj"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/document/">Quick start</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebLine truncated
|
||||
<script src="/document/assets/js/runtime~main.1de6a516.js"></script>
|
||||
<script src="/document/assets/js/main.a3e4ef08.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,234 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<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">
|
||||
<link rel="preload stylesheet" href="/document/assets/style.0892d455.css" as="style">
|
||||
<link rel="modulepreload" href="/document/assets/chunks/virtual_search-data.c7b95f8a.js">
|
||||
<link rel="modulepreload" href="/document/assets/app.acdc77a1.js">
|
||||
<link rel="modulepreload" href="/document/assets/advanced_built-in.md.c13b2bd2.lean.js">
|
||||
|
||||
<script src="/main.js"></script>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<script id="check-dark-light">(()=>{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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><div class="Layout" data-v-5211c0b1><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5211c0b1 data-v-8c0a9870><div class="VPNavBar has-sidebar" data-v-8c0a9870 data-v-1bbed88e><div class="container" data-v-1bbed88e><div class="VPNavBarTitle has-sidebar" data-v-1bbed88e data-v-d5925166><a class="title" href="/document/" data-v-d5925166><!--[--><!--]--><!--[--><img class="VPImage logo" src="/document/logo.png" alt data-v-6db2186b><!--]--><!--[-->Artplayer.js<!--]--><!--[--><!--]--></a></div><div class="content" data-v-1bbed88e><!--[--><!--]--><div class="VPNavBarSearch search" data-v-1bbed88e><!----><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-1bbed88e data-v-f83db6ba><span id="main-nav-aria-label" class="visually-hidden" data-v-f83db6ba>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->中文版<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/en/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->English<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://artplayer.org" target="_blank" rel="noreferrer" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->Online Editor<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/#" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->QQ群: 320881312<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-f83db6ba data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-6ffb57d3><span class="text" data-v-6ffb57d3><!----> 4.6.x <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-6ffb57d3><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-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><div class="items" data-v-1c5d0cfc><!--[--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="https://github.com/zhw2590582/ArtPlayer/blob/master/CHANGELOG_CN.md" target="_blank" rel="noreferrer" data-v-e8e0fb1d data-v-3c355974><!--[-->Changelog<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-3c355974><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-1bbed88e data-v-a3e7452b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-a3e7452b data-v-481098f9 data-v-eba7420e><span class="check" data-v-eba7420e><span class="icon" data-v-eba7420e><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-481098f9><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.Line truncated
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">option)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>假如直接修改这个 <code>option</code> 对象,播放器不会马上做出响应</p></div><h2 id="whitelist" tabindex="-1"><code>whitelist</code> <a class="header-anchor" href="#whitelist" aria-hidden="true">#</a></h2><p>管理移动设备的白名单功能,只有一个属性 <code>state</code> 返回是否启用播放器功能</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">whitelist</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">ua</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#C3E88D;">iPhone</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">gi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">test</span><span style="color:#A6ACCD;">(ua)]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">whitelist</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">state)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>在上面这个例子中,当使用 <code>iPhone</code> 访问播放器时,<code>art.whitelist.state</code> 会返回 <code>false</code>,即使用原生的播放器,而不是 <code>Artplayer</code> 播放器</p></div><h2 id="template" tabindex="-1"><code>template</code> <a class="header-anchor" href="#template" aria-hidden="true">#</a></h2><p>管理播放器所有的 <code>DOM</code> 元素</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">template)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">template</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">$video)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>为了方便区别 <code>DOM</code> 元素和普通对象,播放器里的所有 <code>DOM</code> 元素都是以 <code>$</code> 开头命名的</p><p>这是所有 <code>DOM</code> 元素的定义:<a href="https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/template.d.ts" target="_blank" rel="noreferrer">artplayer/types/template.d.ts</a></p></div><h2 id="events" tabindex="-1"><code>events</code> <a class="header-anchor" href="#events" aria-hidden="true">#</a></h2><p>管理播放器所有的 <code>DOM</code> 事件,实质上是代理了 <code>addEventListener</code> 和 <code>removeEventListener</code>, 当使用以下方法来处理事件,播放器销毁时也会自动销毁该事件</p><ul><li><code>proxy</code> 方法用于代理 <code>DOM</code> 事件</li><li><code>hover</code> 方法用于代理自定义的 <code>hover</code> 事件</li><li><code>loadImg</code> 方法用于监听图片的 <code>load</code> 加载事件</li></ul><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> container </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> container</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">events</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">proxy</span><span style="color:#A6ACCD;">(container</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">events</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">hover</span><span style="color:#A6ACCD;">(container</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">mouseenter</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">},</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">mouseleave</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">events</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">loadImg</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/poster.jpg</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">img</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">loadImg</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">img</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>假如你需要一些 <code>DOM</code> 事件只存在于播放器的生命周期上时,强烈建议使用这些函数,以避免造成内存泄漏</p></div><h2 id="storage" tabindex="-1"><code>storage</code> <a class="header-anchor" href="#storage" aria-hidden="true">#</a></h2><p>管理播放器的本地存储</p><ul><li><code>name</code> 属性用于设置缓存的 <code>key</code></li><li><code>set</code> 方法用于设置缓存</li><li><code>get</code> 方法用于获取缓存</li><li><code>del</code> 方法用于删除缓存</li><li><code>clear</code> 方法用于清空缓存</li></ul><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">storage</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">test</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">foo</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">bar</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> test </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">storage</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">test</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(test)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">storage</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">del</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">test</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">storage</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">clear</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>默认所有播放器实例都是共享同一个 <code>localStorage</code> 的,而且默认的 <code>key</code> 是 <code>artplayer_settings</code></p><p>如果你想不同的播放器使用不同的 <code>localStorage</code>,你可以修改 <code>art.storage.name</code> 即可</p></div><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">storage</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">your-storage-key</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">storage</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">test</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">foo</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">bar</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="icons" tabindex="-1"><code>icons</code> <a class="header-anchor" href="#icons" aria-hidden="true">#</a></h2><p>管理播放器所有的 <code>svg</code> 图标</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">icons</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loading)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">这是所有图标的定义:</p><p><a href="https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/icons.d.ts" target="_blank" rel="noreferrer">artplayer/types/icons.d.ts</a></p></div><h2 id="i18n" tabindex="-1"><code>i18n</code> <a class="header-anchor" href="#i18n" aria-hidden="true">#</a></h2><p>管理播放器的 <code>i18n</code></p><ul><li><code>get</code> 方法用于获取 <code>i18n</code> 的值</li><li><code>update</code> 方法用于更新 <code>i18n</code> 对象</li></ul><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">i18n</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Play</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">i18n</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">update</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">zh-cn</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">Play</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Your Play</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>使用 <code>art.i18n.update</code> 只能更新实例化之后的 <code>i18n</code>,假如想在实例化之前更新 <code>i18n</code>,请使用基础选项的 <code>i18n</code> 来更新</p></div><h2 id="notice" tabindex="-1"><code>notice</code> <a class="header-anchor" href="#notice" aria-hidden="true">#</a></h2><p>管理播放器的提示语,只有一个 <code>show</code> 属性用于显示提示语</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">notice</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Video Ready To Play</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>如果想马上隐藏 <code>notice</code> 的显示:<code>art.notice.show = '';</code></p></div><h2 id="layers" tabindex="-1"><code>layers</code> <a class="header-anchor" href="#layers" aria-hidden="true">#</a></h2><p>管理播放器的层</p><ul><li><code>add</code> 方法用于动态添加层</li><li><code>show</code> 属性用于设置是否显示全部层</li><li><code>toggle</code> 属性用于切换是否显示全部层</li></ul><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">layers</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> html</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Some Text</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">layers</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title"><code>组件配置</code> 请参考以下地址:</p><p><a href="/document/start/component.html">/start/component.html</a></p></div><h2 id="controls" tabindex="-1"><code>controls</code> <a class="header-anchor" href="#controls" aria-hidden="true">#</a></h2><p>管理播放器的控制器</p><ul><li><code>add</code> 方法用于动态添加控制器</li><li><code>show</code> 属性用于设置是否显示全部控制器</li><li><code>toggle</code> 属性用于切换是否显示全部控制器</li></ul><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">controls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> html</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Some Text</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> position</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">left</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">controls</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="warning custom-block"><p class="custom-block-title"><code>组件配置</code> 请参考以下地址:</p><p><a href="/document/start/component.html">/start/component.html</a></p></div><h2 id="contextmenu" tabindex="-1"><code>contextmenu</code> <a class="header-anchor" href="#contextmenu" aria-hidden="true">#</a></h2><p>管理播放器的右键菜单</p><ul><li><code>add</code> 方法用于动态添加菜单</li><li><code>show</code> 属性用于设置是否显示全部菜单</li><li><code>toggle</code> 属性用于切换是否显示全部菜单</li></ul><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">contextmenu</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> html</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Some Text</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">contextmenu</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">contextmenu</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="warning custom-block"><p class="custom-block-title"><code>组件配置</code> 请参考以下地址:</p><p><a href="/document/start/component.html">/start/component.html</a></p></div><h2 id="subtitle" tabindex="-1"><code>subtitle</code> <a class="header-anchor" href="#subtitle" aria-hidden="true">#</a></h2><p>管理播放器的字幕功能</p><ul><li><code>url</code> 属性设置和返回当前字幕地址</li><li><code>style</code> 方法设置当前字幕的样式</li><li><code>switch</code> 方法设置当前字幕地址和选项</li></ul><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">subtitle</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/subtitle.srt</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">subtitle</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">style</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> color</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">red</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="loading" tabindex="-1"><code>loading</code> <a class="header-anchor" href="#loading" aria-hidden="true">#</a></h2><p>管理播放器的加载层</p><ul><li><code>show</code> 属性用于设置是否显示加载层</li><li><code>toggle</code> 属性用于切换是否显示加载层</li></ul><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loading</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loading</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="hotkey" tabindex="-1"><code>hotkey</code> <a class="header-anchor" href="#hotkey" aria-hidden="true">#</a></h2><p>管理播放器的快捷键功能</p><ul><li><code>add</code> 方法用于添加快捷键</li><li><code>remove</code> 方法用于删除快捷键</li></ul><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">hotkeyEvent</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">hotkey</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">32</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hotkeyEvent</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">hotkey</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">remove</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">32</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hotkeyEvent</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>只在播放器获得焦点后(如点击了播放器后),这些快捷键才会生效</p></div><h2 id="mask" tabindex="-1"><code>mask</code> <a class="header-anchor" href="#mask" aria-hidden="true">#</a></h2><p>管理播放器的遮罩层</p><ul><li><code>show</code> 属性用于设置是否显示遮罩层</li><li><code>toggle</code> 属性用于切换是否显示遮罩层</li></ul><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mask</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mask</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="setting" tabindex="-1"><code>setting</code> <a class="header-anchor" href="#setting" aria-hidden="true">#</a></h2><p>管理播放器的设置面板</p><ul><li><code>add</code> 方法用于动态添加设置项</li><li><code>show</code> 属性用于设置是否显示全部设置项</li><li><code>toggle</code> 属性用于切换是否显示全部设置项</li><li><code>update</code> 方法动态更新设置项</li></ul><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">flip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">playbackRate</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">aspectRatio</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">subtitleOffset</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">setting</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">setting</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title"><code>设置面板</code> 请参考以下地址</p><p><a href="/document/start/setting.html">/start/setting.html</a></p></div><h2 id="plugins" tabindex="-1"><code>plugins</code> <a class="header-anchor" href="#plugins" aria-hidden="true">#</a></h2><p>管理播放器的插件功能,只有一个方法 <code>add</code> 用于动态添加插件</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">myPlugin</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">myPlugin</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> something</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">something</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">doSomething</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">doSomething</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">myPlugin</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-cfb513e0 data-v-21f75714><div class="edit-info" data-v-21f75714><div class="edit-link" data-v-21f75714><a class="VPLink link edit-link-button" href="https://github.com/zhw2590582/ArtPlayer/packages/artplayer-vitepress/docs/advanced/built-in.md" target="_blank" rel="noreferrer" data-v-21f75714 data-v-3c355974><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" data-v-21f75714><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-21f75714><p class="VPLastUpdated" data-v-21f75714 data-v-18fe8fc2>Last updated: <time datetime="2023-01-11T12:02:39.000Z" data-v-18fe8fc2></time></p></div></div><div class="prev-next" data-v-21f75714><div class="pager" data-v-21f75714><a class="pager-link prev" href="/document/advanced/property.html" data-v-21f75714><span class="desc" data-v-21f75714>Previous page</span><span class="title" data-v-21f75714>实例属性</span></a></div><div class="has-prev pager" data-v-21f75714><a class="pager-link next" href="/document/advanced/class.html" data-v-21f75714><span class="desc" data-v-21f75714>Next page</span><span class="title" data-v-21f75714>静态属性</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>__VP_HASH_MAP__ = JSON.parse("{\"library_dash.md\":\"32119fe1\",\"en_index.md\":\"51748bf3\",\"plugin_control-ui.md\":\"ec2ab45e\",\"plugin_ads.md\":\"4c8e0b7a\",\"plugin_hls-quality.md\":\"1c3d5422\",\"library_flv.md\":\"1b4373c5\",\"start_component.md\":\"ad9f92aa\",\"start_setting.md\":\"ff6b3442\",\"advanced_built-in.md\":\"c13b2bd2\",\"library_hls.md\":\"23034afe\",\"advanced_plugin.md\":\"56c69c23\",\"index.md\":\"6ef07f3a\",\"plugin_iframe.md\":\"464f8f80\",\"advanced_class.md\":\"5d5c7279\",\"plugin_danmuku.md\":\"dbf36e4d\",\"advanced_property.md\":\"fe5901e0\",\"start_option.md\":\"31fff3b6\",\"advanced_event.md\":\"821c0057\"}")</script>
|
||||
<script type="module" async src="/document/assets/app.acdc77a1.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<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">
|
||||
<link rel="preload stylesheet" href="/document/assets/style.0892d455.css" as="style">
|
||||
<link rel="modulepreload" href="/document/assets/chunks/virtual_search-data.c7b95f8a.js">
|
||||
<link rel="modulepreload" href="/document/assets/app.acdc77a1.js">
|
||||
<link rel="modulepreload" href="/document/assets/advanced_class.md.5d5c7279.lean.js">
|
||||
|
||||
<script src="/main.js"></script>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<script id="check-dark-light">(()=>{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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><div class="Layout" data-v-5211c0b1><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5211c0b1 data-v-8c0a9870><div class="VPNavBar has-sidebar" data-v-8c0a9870 data-v-1bbed88e><div class="container" data-v-1bbed88e><div class="VPNavBarTitle has-sidebar" data-v-1bbed88e data-v-d5925166><a class="title" href="/document/" data-v-d5925166><!--[--><!--]--><!--[--><img class="VPImage logo" src="/document/logo.png" alt data-v-6db2186b><!--]--><!--[-->Artplayer.js<!--]--><!--[--><!--]--></a></div><div class="content" data-v-1bbed88e><!--[--><!--]--><div class="VPNavBarSearch search" data-v-1bbed88e><!----><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-1bbed88e data-v-f83db6ba><span id="main-nav-aria-label" class="visually-hidden" data-v-f83db6ba>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->中文版<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/en/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->English<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://artplayer.org" target="_blank" rel="noreferrer" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->Online Editor<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/#" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->QQ群: 320881312<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-f83db6ba data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-6ffb57d3><span class="text" data-v-6ffb57d3><!----> 4.6.x <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-6ffb57d3><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-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><div class="items" data-v-1c5d0cfc><!--[--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="https://github.com/zhw2590582/ArtPlayer/blob/master/CHANGELOG_CN.md" target="_blank" rel="noreferrer" data-v-e8e0fb1d data-v-3c355974><!--[-->Changelog<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-3c355974><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-1bbed88e data-v-a3e7452b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-a3e7452b data-v-481098f9 data-v-eba7420e><span class="check" data-v-eba7420e><span class="icon" data-v-eba7420e><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-481098f9><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.Line truncated
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">([</span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">instances])</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="version" tabindex="-1"><code>version</code> <a class="header-anchor" href="#version" aria-hidden="true">#</a></h2><p>返回播放器的版本信息</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">version)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="env" tabindex="-1"><code>env</code> <a class="header-anchor" href="#env" aria-hidden="true">#</a></h2><p>返回播放器的环境变量</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">env)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="build" tabindex="-1"><code>build</code> <a class="header-anchor" href="#build" aria-hidden="true">#</a></h2><p>返回播放器的打包时间</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">build)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="config" tabindex="-1"><code>config</code> <a class="header-anchor" href="#config" aria-hidden="true">#</a></h2><p>返回视频的默认配置</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">config)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="utils" tabindex="-1"><code>utils</code> <a class="header-anchor" href="#utils" aria-hidden="true">#</a></h2><p>返回播放器的工具函数集合</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">utils)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">全部工具函数请参考以下地址:</p><p><a href="https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/utils.d.ts" target="_blank" rel="noreferrer">artplayer/types/utils.d.ts</a></p></div><h2 id="scheme" tabindex="-1"><code>scheme</code> <a class="header-anchor" href="#scheme" aria-hidden="true">#</a></h2><p>返回播放器选项的校验方案</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">scheme)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="emitter" tabindex="-1"><code>Emitter</code> <a class="header-anchor" href="#emitter" aria-hidden="true">#</a></h2><p>返回事件分发器的构造函数</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">Emitter)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="validator" tabindex="-1"><code>validator</code> <a class="header-anchor" href="#validator" aria-hidden="true">#</a></h2><p>返回选项的校验函数</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">validator)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="kindof" tabindex="-1"><code>kindOf</code> <a class="header-anchor" href="#kindof" aria-hidden="true">#</a></h2><p>返回类型检测的函数工具</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">kindOf)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="html" tabindex="-1"><code>html</code> <a class="header-anchor" href="#html" aria-hidden="true">#</a></h2><p>返回播放器所需的 <code>html</code> 字符串</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">html)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="option" tabindex="-1"><code>option</code> <a class="header-anchor" href="#option" aria-hidden="true">#</a></h2><p>返回播放器的默认选项</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">option)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="debug" tabindex="-1"><code>DEBUG</code> <a class="header-anchor" href="#debug" aria-hidden="true">#</a></h2><h2 id="contextmenu" tabindex="-1"><code>CONTEXTMENU</code> <a class="header-anchor" href="#contextmenu" aria-hidden="true">#</a></h2><h2 id="notice-time" tabindex="-1"><code>NOTICE_TIME</code> <a class="header-anchor" href="#notice-time" aria-hidden="true">#</a></h2><h2 id="setting-width" tabindex="-1"><code>SETTING_WIDTH</code> <a class="header-anchor" href="#setting-width" aria-hidden="true">#</a></h2><h2 id="setting-item-width" tabindex="-1"><code>SETTING_ITEM_WIDTH</code> <a class="header-anchor" href="#setting-item-width" aria-hidden="true">#</a></h2><h2 id="setting-item-height" tabindex="-1"><code>SETTING_ITEM_HEIGHT</code> <a class="header-anchor" href="#setting-item-height" aria-hidden="true">#</a></h2><h2 id="indicator-size" tabindex="-1"><code>INDICATOR_SIZE</code> <a class="header-anchor" href="#indicator-size" aria-hidden="true">#</a></h2><h2 id="indicator-size-icon" tabindex="-1"><code>INDICATOR_SIZE_ICON</code> <a class="header-anchor" href="#indicator-size-icon" aria-hidden="true">#</a></h2><h2 id="indicator-size-mobile" tabindex="-1"><code>INDICATOR_SIZE_MOBILE</code> <a class="header-anchor" href="#indicator-size-mobile" aria-hidden="true">#</a></h2><h2 id="indicator-size-mobile-icon" tabindex="-1"><code>INDICATOR_SIZE_MOBILE_ICON</code> <a class="header-anchor" href="#indicator-size-mobile-icon" aria-hidden="true">#</a></h2><h2 id="volume-panel-width" tabindex="-1"><code>VOLUME_PANEL_WIDTH</code> <a class="header-anchor" href="#volume-panel-width" aria-hidden="true">#</a></h2><h2 id="volume-handle-width" tabindex="-1"><code>VOLUME_HANDLE_WIDTH</code> <a class="header-anchor" href="#volume-handle-width" aria-hidden="true">#</a></h2><h2 id="resize-time" tabindex="-1"><code>RESIZE_TIME</code> <a class="header-anchor" href="#resize-time" aria-hidden="true">#</a></h2><h2 id="scroll-time" tabindex="-1"><code>SCROLL_TIME</code> <a class="header-anchor" href="#scroll-time" aria-hidden="true">#</a></h2><h2 id="scroll-gap" tabindex="-1"><code>SCROLL_GAP</code> <a class="header-anchor" href="#scroll-gap" aria-hidden="true">#</a></h2><h2 id="auto-playback-max" tabindex="-1"><code>AUTO_PLAYBACK_MAX</code> <a class="header-anchor" href="#auto-playback-max" aria-hidden="true">#</a></h2><h2 id="auto-playback-min" tabindex="-1"><code>AUTO_PLAYBACK_MIN</code> <a class="header-anchor" href="#auto-playback-min" aria-hidden="true">#</a></h2><h2 id="auto-playback-timeout" tabindex="-1"><code>AUTO_PLAYBACK_TIMEOUT</code> <a class="header-anchor" href="#auto-playback-timeout" aria-hidden="true">#</a></h2><h2 id="reconnect-time-max" tabindex="-1"><code>RECONNECT_TIME_MAX</code> <a class="header-anchor" href="#reconnect-time-max" aria-hidden="true">#</a></h2><h2 id="reconnect-sleep-time" tabindex="-1"><code>RECONNECT_SLEEP_TIME</code> <a class="header-anchor" href="#reconnect-sleep-time" aria-hidden="true">#</a></h2><h2 id="control-hide-time" tabindex="-1"><code>CONTROL_HIDE_TIME</code> <a class="header-anchor" href="#control-hide-time" aria-hidden="true">#</a></h2><h2 id="db-clice-time" tabindex="-1"><code>DB_CLICE_TIME</code> <a class="header-anchor" href="#db-clice-time" aria-hidden="true">#</a></h2><h2 id="mobile-auto-playbackrate" tabindex="-1"><code>MOBILE_AUTO_PLAYBACKRATE</code> <a class="header-anchor" href="#mobile-auto-playbackrate" aria-hidden="true">#</a></h2><h2 id="mobile-auto-playbackrate-time" tabindex="-1"><code>MOBILE_AUTO_PLAYBACKRATE_TIME</code> <a class="header-anchor" href="#mobile-auto-playbackrate-time" aria-hidden="true">#</a></h2><h2 id="mobile-auto-orientation-time" tabindex="-1"><code>MOBILE_AUTO_ORIENTATION_TIME</code> <a class="header-anchor" href="#mobile-auto-orientation-time" aria-hidden="true">#</a></h2><h2 id="info-loop-time" tabindex="-1"><code>INFO_LOOP_TIME</code> <a class="header-anchor" href="#info-loop-time" aria-hidden="true">#</a></h2><h2 id="fast-forward-value" tabindex="-1"><code>FAST_FORWARD_VALUE</code> <a class="header-anchor" href="#fast-forward-value" aria-hidden="true">#</a></h2><h2 id="fast-forward-time" tabindex="-1"><code>FAST_FORWARD_TIME</code> <a class="header-anchor" href="#fast-forward-time" aria-hidden="true">#</a></h2><h2 id="touch-move-ratio" tabindex="-1"><code>TOUCH_MOVE_RATIO</code> <a class="header-anchor" href="#touch-move-ratio" aria-hidden="true">#</a></h2><h2 id="volume-step" tabindex="-1"><code>VOLUME_STEP</code> <a class="header-anchor" href="#volume-step" aria-hidden="true">#</a></h2><h2 id="seek-step" tabindex="-1"><code>SEEK_STEP</code> <a class="header-anchor" href="#seek-step" aria-hidden="true">#</a></h2><h2 id="progress-height" tabindex="-1"><code>PROGRESS_HEIGHT</code> <a class="header-anchor" href="#progress-height" aria-hidden="true">#</a></h2><h2 id="playback-rate" tabindex="-1Line truncated
|
||||
<script>__VP_HASH_MAP__ = JSON.parse("{\"library_dash.md\":\"32119fe1\",\"en_index.md\":\"51748bf3\",\"plugin_control-ui.md\":\"ec2ab45e\",\"plugin_ads.md\":\"4c8e0b7a\",\"plugin_hls-quality.md\":\"1c3d5422\",\"library_flv.md\":\"1b4373c5\",\"start_component.md\":\"ad9f92aa\",\"start_setting.md\":\"ff6b3442\",\"advanced_built-in.md\":\"c13b2bd2\",\"library_hls.md\":\"23034afe\",\"advanced_plugin.md\":\"56c69c23\",\"index.md\":\"6ef07f3a\",\"plugin_iframe.md\":\"464f8f80\",\"advanced_class.md\":\"5d5c7279\",\"plugin_danmuku.md\":\"dbf36e4d\",\"advanced_property.md\":\"fe5901e0\",\"start_option.md\":\"31fff3b6\",\"advanced_event.md\":\"821c0057\"}")</script>
|
||||
<script type="module" async src="/document/assets/app.acdc77a1.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,344 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<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">
|
||||
<link rel="preload stylesheet" href="/document/assets/style.0892d455.css" as="style">
|
||||
<link rel="modulepreload" href="/document/assets/chunks/virtual_search-data.c7b95f8a.js">
|
||||
<link rel="modulepreload" href="/document/assets/app.acdc77a1.js">
|
||||
<link rel="modulepreload" href="/document/assets/advanced_event.md.821c0057.lean.js">
|
||||
|
||||
<script src="/main.js"></script>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<script id="check-dark-light">(()=>{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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><div class="Layout" data-v-5211c0b1><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5211c0b1 data-v-8c0a9870><div class="VPNavBar has-sidebar" data-v-8c0a9870 data-v-1bbed88e><div class="container" data-v-1bbed88e><div class="VPNavBarTitle has-sidebar" data-v-1bbed88e data-v-d5925166><a class="title" href="/document/" data-v-d5925166><!--[--><!--]--><!--[--><img class="VPImage logo" src="/document/logo.png" alt data-v-6db2186b><!--]--><!--[-->Artplayer.js<!--]--><!--[--><!--]--></a></div><div class="content" data-v-1bbed88e><!--[--><!--]--><div class="VPNavBarSearch search" data-v-1bbed88e><!----><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-1bbed88e data-v-f83db6ba><span id="main-nav-aria-label" class="visually-hidden" data-v-f83db6ba>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->中文版<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/en/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->English<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://artplayer.org" target="_blank" rel="noreferrer" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->Online Editor<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/#" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->QQ群: 320881312<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-f83db6ba data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-6ffb57d3><span class="text" data-v-6ffb57d3><!----> 4.6.x <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-6ffb57d3><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-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><div class="items" data-v-1c5d0cfc><!--[--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="https://github.com/zhw2590582/ArtPlayer/blob/master/CHANGELOG_CN.md" target="_blank" rel="noreferrer" data-v-e8e0fb1d data-v-3c355974><!--[-->Changelog<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-3c355974><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-1bbed88e data-v-a3e7452b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-a3e7452b data-v-481098f9 data-v-eba7420e><span class="check" data-v-eba7420e><span class="icon" data-v-eba7420e><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-481098f9><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.Line truncated
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">video:canplay</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">video:canplay</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><p>只监听一次事件:</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">once</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">video:canplay</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">video:canplay</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><p>手动触发事件:</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">emit</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">focus</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>移除事件:</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> onReady </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">off</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">onReady</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> onReady)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">全部事件请参考以下地址:</p><p><a href="https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/events.d.ts" target="_blank" rel="noreferrer">artplayer/types/events.d.ts</a></p></div><h2 id="ready" tabindex="-1"><code>ready</code> <a class="header-anchor" href="#ready" aria-hidden="true">#</a></h2><p>当播放器首次可以播放器时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="restart" tabindex="-1"><code>restart</code> <a class="header-anchor" href="#restart" aria-hidden="true">#</a></h2><p>当播放器切换地址后并可以播放时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">restart</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">restart</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="pause" tabindex="-1"><code>pause</code> <a class="header-anchor" href="#pause" aria-hidden="true">#</a></h2><p>当播放器暂停时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="play" tabindex="-1"><code>play</code> <a class="header-anchor" href="#play" aria-hidden="true">#</a></h2><p>当播放器播放时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">play</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">play</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="hotkey" tabindex="-1"><code>hotkey</code> <a class="header-anchor" href="#hotkey" aria-hidden="true">#</a></h2><p>当播放器热键被按下时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">hotkey</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">hotkey</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="destroy" tabindex="-1"><code>destroy</code> <a class="header-anchor" href="#destroy" aria-hidden="true">#</a></h2><p>当播放器销毁时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">destroy</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">destroy</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="url" tabindex="-1"><code>url</code> <a class="header-anchor" href="#url" aria-hidden="true">#</a></h2><p>当视频地址变化时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4?t=0</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">url</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">url</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="focus" tabindex="-1"><code>focus</code> <a class="header-anchor" href="#focus" aria-hidden="true">#</a></h2><p>当播放器获得焦点时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">focus</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">focus</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="blur" tabindex="-1"><code>blur</code> <a class="header-anchor" href="#blur" aria-hidden="true">#</a></h2><p>当播放器失去焦点时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">blur</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">blur</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="dblclick" tabindex="-1"><code>dblclick</code> <a class="header-anchor" href="#dblclick" aria-hidden="true">#</a></h2><p>当播放器被双击时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">dblclick</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">dblclick</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="click" tabindex="-1"><code>click</code> <a class="header-anchor" href="#click" aria-hidden="true">#</a></h2><p>当播放器被单击时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="error" tabindex="-1"><code>error</code> <a class="header-anchor" href="#error" aria-hidden="true">#</a></h2><p>当播放器加载视频发生错误时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/404.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">error</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">reconnectTime</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">error</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">reconnectTime</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="hover" tabindex="-1"><code>hover</code> <a class="header-anchor" href="#hover" aria-hidden="true">#</a></h2><p>当播放器被鼠标移出或者移入时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">hover</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">hover</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="mousemove" tabindex="-1"><code>mousemove</code> <a class="header-anchor" href="#mousemove" aria-hidden="true">#</a></h2><p>当播放器被鼠标经过时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">mousemove</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">mousemove</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="resize" tabindex="-1"><code>resize</code> <a class="header-anchor" href="#resize" aria-hidden="true">#</a></h2><p>当播放器尺寸变化时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">resize</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">resize</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="view" tabindex="-1"><code>view</code> <a class="header-anchor" href="#view" aria-hidden="true">#</a></h2><p>当播放器出现在视口时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">view</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">view</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="aspectratio" tabindex="-1"><code>aspectRatio</code> <a class="header-anchor" href="#aspectratio" aria-hidden="true">#</a></h2><p>当播放器长宽比变化时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">aspectRatio</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">aspectRatio</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">aspectRatio</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">aspectRatio</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">aspectRatio</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="autoheight" tabindex="-1"><code>autoHeight</code> <a class="header-anchor" href="#autoheight" aria-hidden="true">#</a></h2><p>当播放器自动设置高度时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoHeight</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">autoHeight</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">height</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">autoHeight</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">height</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="autosize" tabindex="-1"><code>autoSize</code> <a class="header-anchor" href="#autosize" aria-hidden="true">#</a></h2><p>当播放器自动设置尺寸时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">autoSize</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">autoSize</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">autoSize</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="flip" tabindex="-1"><code>flip</code> <a class="header-anchor" href="#flip" aria-hidden="true">#</a></h2><p>当播放器发生翻转时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">flip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">flip</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">flip</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">flip</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">flip</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="fullscreen" tabindex="-1"><code>fullscreen</code> <a class="header-anchor" href="#fullscreen" aria-hidden="true">#</a></h2><p>当播放器发生窗口全屏时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">fullscreen</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">fullscreen</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">fullscreen</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="fullscreenweb" tabindex="-1"><code>fullscreenWeb</code> <a class="header-anchor" href="#fullscreenweb" aria-hidden="true">#</a></h2><p>当播放器发生网页全屏时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">fullscreenWeb</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">fullscreenWeb</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">fullscreenWeb</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="mini" tabindex="-1"><code>mini</code> <a class="header-anchor" href="#mini" aria-hidden="true">#</a></h2><p>当播放器进入迷你模式时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mini</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">mini</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">mini</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="pip" tabindex="-1"><code>pip</code> <a class="header-anchor" href="#pip" aria-hidden="true">#</a></h2><p>当播放器进入画中画时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">pip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">pip</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">pip</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="screenshot" tabindex="-1"><code>screenshot</code> <a class="header-anchor" href="#screenshot" aria-hidden="true">#</a></h2><p>当播放器被截图时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">screenshot</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">screenshot</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">dataUri</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">screenshot</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">dataUri</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="seek" tabindex="-1"><code>seek</code> <a class="header-anchor" href="#seek" aria-hidden="true">#</a></h2><p>当播放器发生时间跳转时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">seek</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">currentTime</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">seek</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">currentTime</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="subtitleoffset" tabindex="-1"><code>subtitleOffset</code> <a class="header-anchor" href="#subtitleoffset" aria-hidden="true">#</a></h2><p>当播放器发生字幕偏移时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">subtitleOffset</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">subtitle</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/subtitle.srt</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">subtitleOffset</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">offset</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">subtitleOffset</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">offset</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="subtitleupdate" tabindex="-1"><code>subtitleUpdate</code> <a class="header-anchor" href="#subtitleupdate" aria-hidden="true">#</a></h2><p>当字幕更新时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">subtitle</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/subtitle.srt</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">subtitleUpdate</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">text</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">subtitleUpdate</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">text</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="subtitleload" tabindex="-1"><code>subtitleLoad</code> <a class="header-anchor" href="#subtitleload" aria-hidden="true">#</a></h2><p>当字幕加载时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">subtitle</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/subtitle.srt</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">subtitleLoad</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">subtitleLoad</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="subtitleswitch" tabindex="-1"><code>subtitleSwitch</code> <a class="header-anchor" href="#subtitleswitch" aria-hidden="true">#</a></h2><p>当字幕切换时触发</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">subtitle</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/subtitle.srt</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">subtitle</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/subtitle.ass</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">subtitleSwitch</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">subtitleSwitch</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="video-canplay" tabindex="-1"><code>video:canplay</code> <a class="header-anchor" href="#video-canplay" aria-hidden="true">#</a></h2><p>浏览器可以播放媒体文件了,但估计没有足够的数据来支撑播放到结束,不必停下来进一步缓冲内容</p><h2 id="video-canplaythrough" tabindex="-1"><code>video:canplaythrough</code> <a class="header-anchor" href="#video-canplaythrough" aria-hidden="true">#</a></h2><p>浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束</p><h2 id="video-complete" tabindex="-1"><code>video:complete</code> <a class="header-anchor" href="#video-complete" aria-hidden="true">#</a></h2><p>OfflineAudioContext 渲染完成</p><h2 id="video-durationchange" tabindex="-1"><code>video:durationchange</code> <a class="header-anchor" href="#video-durationchange" aria-hidden="true">#</a></h2><p>duration 属性的值改变时触发</p><h2 id="video-emptied" tabindex="-1"><code>video:emptied</code> <a class="header-anchor" href="#video-emptied" aria-hidden="true">#</a></h2><p>媒体内容变为空;例如,当这个 media 已经加载完成(或者部分加载完成),则发送此事件,并调用 load() 方法重新加载它</p><h2 id="video-ended" tabindex="-1"><code>video:ended</code> <a class="header-anchor" href="#video-ended" aria-hidden="true">#</a></h2><p>视频停止播放,因为 media 已经到达结束点</p><h2 id="video-error" tabindex="-1"><code>video:error</code> <a class="header-anchor" href="#video-error" aria-hidden="true">#</a></h2><p>获取媒体数据时出错,或者资源类型不是受支持的媒体格式</p><h2 id="video-loadeddata" tabindex="-1"><code>video:loadeddata</code> <a class="header-anchor" href="#video-loadeddata" aria-hidden="true">#</a></h2><p>media 中的首帧已经完成加载</p><h2 id="video-loadedmetadata" tabindex="-1"><code>video:loadedmetadata</code> <a class="header-anchor" href="#video-loadedmetadata" aria-hidden="true">#</a></h2><p>已加载元数据</p><h2 id="video-pause" tabindex="-1"><code>video:pause</code> <a class="header-anchor" href="#video-pause" aria-hidden="true">#</a></h2><p>播放已暂停</p><h2 id="video-play" tabindex="-1"><code>video:play</code> <a class="header-anchor" href="#video-play" aria-hidden="true">#</a></h2><p>播放已开始</p><h2 id="video-playing" tabindex="-1"><code>video:playing</code> <a class="header-anchor" href="#video-playing" aria-hidden="true">#</a></h2><p>由于缺乏数据而暂停或延迟后,播放准备开始</p><h2 id="video-progress" tabindex="-1"><code>video:progress</code> <a class="header-anchor" href="#video-progress" aria-hidden="true">#</a></h2><p>在浏览器加载资源时周期性触发</p><h2 id="video-ratechange" tabindex="-1"><code>video:ratechange</code> <a class="header-anchor" href="#video-ratechange" aria-hidden="true">#</a></h2><p>播放速率发生变化</p><h2 id="video-seeked" tabindex="-1"><code>video:seeked</code> <a class="header-anchor" href="#video-seeked" aria-hidden="true">#</a></h2><p>跳帧(seek)操作完成</p><h2 id="video-seeking" tabindex="-1"><code>video:seeking</code> <a class="header-anchor" href="#video-seeking" aria-hidden="true">#</a></h2><p>跳帧(seek)操作开始</p><h2 id="video-stalled" tabindex="-1"><code>video:stalled</code> <a class="header-anchor" href="#video-stalled" aria-hidden="true">#</a></h2><p>用户代理(user agent)正在尝试获取媒体数据,但数据意外未出现</p><h2 id="video-suspend" tabindex="-1"><code>video:suspend</code> <a class="header-anchor" href="#video-suspend" aria-hidden="true">#</a></h2><p>媒体数据加载已暂停</p><h2 id="video-timeupdate" tabindex="-1"><code>video:timeupdate</code> <a class="header-anchor" href="#video-timeupdate" aria-hidden="true">#</a></h2><p>currentTime 属性指定的时间发生变化</p><h2 id="video-volumechange" tabindex="-1"><code>video:volumechange</code> <a class="header-anchor" href="#video-volumechange" aria-hidden="true">#</a></h2><p>音量发生变化</p><h2 id="video-waiting" tabindex="-1"><code>video:waiting</code> <a class="header-anchor" href="#video-waiting" aria-hidden="true">#</a></h2><p>由于暂时缺少数据,播放已停止</p></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-cfb513e0 data-v-21f757Line truncated
|
||||
<script>__VP_HASH_MAP__ = JSON.parse("{\"library_dash.md\":\"32119fe1\",\"en_index.md\":\"51748bf3\",\"plugin_control-ui.md\":\"ec2ab45e\",\"plugin_ads.md\":\"4c8e0b7a\",\"plugin_hls-quality.md\":\"1c3d5422\",\"library_flv.md\":\"1b4373c5\",\"start_component.md\":\"ad9f92aa\",\"start_setting.md\":\"ff6b3442\",\"advanced_built-in.md\":\"c13b2bd2\",\"library_hls.md\":\"23034afe\",\"advanced_plugin.md\":\"56c69c23\",\"index.md\":\"6ef07f3a\",\"plugin_iframe.md\":\"464f8f80\",\"advanced_class.md\":\"5d5c7279\",\"plugin_danmuku.md\":\"dbf36e4d\",\"advanced_property.md\":\"fe5901e0\",\"start_option.md\":\"31fff3b6\",\"advanced_event.md\":\"821c0057\"}")</script>
|
||||
<script type="module" async src="/document/assets/app.acdc77a1.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,125 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<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">
|
||||
<link rel="preload stylesheet" href="/document/assets/style.0892d455.css" as="style">
|
||||
<link rel="modulepreload" href="/document/assets/chunks/virtual_search-data.c7b95f8a.js">
|
||||
<link rel="modulepreload" href="/document/assets/app.acdc77a1.js">
|
||||
<link rel="modulepreload" href="/document/assets/advanced_plugin.md.56c69c23.lean.js">
|
||||
|
||||
<script src="/main.js"></script>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<script id="check-dark-light">(()=>{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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><div class="Layout" data-v-5211c0b1><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5211c0b1 data-v-8c0a9870><div class="VPNavBar has-sidebar" data-v-8c0a9870 data-v-1bbed88e><div class="container" data-v-1bbed88e><div class="VPNavBarTitle has-sidebar" data-v-1bbed88e data-v-d5925166><a class="title" href="/document/" data-v-d5925166><!--[--><!--]--><!--[--><img class="VPImage logo" src="/document/logo.png" alt data-v-6db2186b><!--]--><!--[-->Artplayer.js<!--]--><!--[--><!--]--></a></div><div class="content" data-v-1bbed88e><!--[--><!--]--><div class="VPNavBarSearch search" data-v-1bbed88e><!----><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-1bbed88e data-v-f83db6ba><span id="main-nav-aria-label" class="visually-hidden" data-v-f83db6ba>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->中文版<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/en/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->English<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://artplayer.org" target="_blank" rel="noreferrer" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->Online Editor<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/#" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->QQ群: 320881312<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-f83db6ba data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-6ffb57d3><span class="text" data-v-6ffb57d3><!----> 4.6.x <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-6ffb57d3><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-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><div class="items" data-v-1c5d0cfc><!--[--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="https://github.com/zhw2590582/ArtPlayer/blob/master/CHANGELOG_CN.md" target="_blank" rel="noreferrer" data-v-e8e0fb1d data-v-3c355974><!--[-->Changelog<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-3c355974><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-1bbed88e data-v-a3e7452b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-a3e7452b data-v-481098f9 data-v-eba7420e><span class="check" data-v-eba7420e><span class="icon" data-v-eba7420e><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-481098f9><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.Line truncated
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">myPlugin</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> something</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">something</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">doSomething</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">doSomething</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [myPlugin]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">myPlugin</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><p>可以在实例化之后再加载插件的函数</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">myPlugin</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">myPlugin</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> something</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">something</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">doSomething</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">doSomething</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(myPlugin)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">myPlugin</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><p>例如我想写一个在视频暂停后,显示一个图片广告的插件</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">adsPlugin</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">option</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">layers</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ads</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> html</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;"><img style="width: 100px" src="</span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">option</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">"></span><span style="color:#89DDFF;">`</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> style</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> display</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">none</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> position</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">absolute</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> top</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">20px</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> right</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">20px</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">show</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">layers</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">ads</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">style</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">display</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">block</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">hide</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">layers</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">ads</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">style</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">display</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">none</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">controls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">hide-ads</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> position</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> html</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Hide Ads</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> tooltip</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Hide Ads</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> click</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hide</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> style</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> marginRight</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">20px</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">controls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">show-ads</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> position</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> html</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Show Ads</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> tooltip</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Show Ads</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> click</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">show</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">play</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hide</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">adsPlugin</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">show</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hide</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">adsPlugin</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/layer.png</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br></div></div></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-cfb513e0 data-v-21f75714><div class="edit-info" data-v-21f75714><div class="edit-link" data-v-21f75714><a class="VPLink link edit-link-button" href="https://github.com/zhw2590582/ArtPlayer/packages/artplayer-vitepress/docs/advanced/plugin.md" target="_blank" rel="noreferrer" data-v-21f75714 data-v-3c355974><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" data-v-21f75714><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-21f75714><p class="VPLastUpdated" data-v-21f75714 data-v-18fe8fc2>Last updated: <time datetime="2023-01-11T12:02:39.000Z" data-v-18fe8fc2></time></p></div></div><div class="prev-next" data-v-21f75714><div class="pager" data-v-21f75714><a class="pager-link prev" href="/document/advanced/event.html" data-v-21f75714><span class="desc" data-v-21f75714>Previous page</span><span class="title" data-v-21f75714>实例事件</span></a></div><div class="has-prev pager" data-v-21f75714><a class="pager-link next" href="/document/plugin/danmuku.html" data-v-21f75714><span class="desc" data-v-21f75714>Next page</span><span class="title" data-v-21f75714>弹幕库</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>__VP_HASH_MAP__ = JSON.parse("{\"library_dash.md\":\"32119fe1\",\"en_index.md\":\"51748bf3\",\"plugin_control-ui.md\":\"ec2ab45e\",\"plugin_ads.md\":\"4c8e0b7a\",\"plugin_hls-quality.md\":\"1c3d5422\",\"library_flv.md\":\"1b4373c5\",\"start_component.md\":\"ad9f92aa\",\"start_setting.md\":\"ff6b3442\",\"advanced_built-in.md\":\"c13b2bd2\",\"library_hls.md\":\"23034afe\",\"advanced_plugin.md\":\"56c69c23\",\"index.md\":\"6ef07f3a\",\"plugin_iframe.md\":\"464f8f80\",\"advanced_class.md\":\"5d5c7279\",\"plugin_danmuku.md\":\"dbf36e4d\",\"advanced_property.md\":\"fe5901e0\",\"start_option.md\":\"31fff3b6\",\"advanced_event.md\":\"821c0057\"}")</script>
|
||||
<script type="module" async src="/document/assets/app.acdc77a1.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,417 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<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">
|
||||
<link rel="preload stylesheet" href="/document/assets/style.0892d455.css" as="style">
|
||||
<link rel="modulepreload" href="/document/assets/chunks/virtual_search-data.c7b95f8a.js">
|
||||
<link rel="modulepreload" href="/document/assets/app.acdc77a1.js">
|
||||
<link rel="modulepreload" href="/document/assets/advanced_property.md.fe5901e0.lean.js">
|
||||
|
||||
<script src="/main.js"></script>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<script id="check-dark-light">(()=>{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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><div class="Layout" data-v-5211c0b1><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5211c0b1 data-v-8c0a9870><div class="VPNavBar has-sidebar" data-v-8c0a9870 data-v-1bbed88e><div class="container" data-v-1bbed88e><div class="VPNavBarTitle has-sidebar" data-v-1bbed88e data-v-d5925166><a class="title" href="/document/" data-v-d5925166><!--[--><!--]--><!--[--><img class="VPImage logo" src="/document/logo.png" alt data-v-6db2186b><!--]--><!--[-->Artplayer.js<!--]--><!--[--><!--]--></a></div><div class="content" data-v-1bbed88e><!--[--><!--]--><div class="VPNavBarSearch search" data-v-1bbed88e><!----><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-1bbed88e data-v-f83db6ba><span id="main-nav-aria-label" class="visually-hidden" data-v-f83db6ba>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->中文版<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/en/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->English<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://artplayer.org" target="_blank" rel="noreferrer" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->Online Editor<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/#" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->QQ群: 320881312<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-f83db6ba data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-6ffb57d3><span class="text" data-v-6ffb57d3><!----> 4.6.x <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-6ffb57d3><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-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><div class="items" data-v-1c5d0cfc><!--[--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="https://github.com/zhw2590582/ArtPlayer/blob/master/CHANGELOG_CN.md" target="_blank" rel="noreferrer" data-v-e8e0fb1d data-v-3c355974><!--[-->Changelog<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-3c355974><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-1bbed88e data-v-a3e7452b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-a3e7452b data-v-481098f9 data-v-eba7420e><span class="check" data-v-eba7420e><span class="icon" data-v-eba7420e><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-481098f9><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.Line truncated
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">muted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">play</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="pause" tabindex="-1"><code>pause</code> <a class="header-anchor" href="#pause" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>暂停视频</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">muted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">play</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">pause</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="toggle" tabindex="-1"><code>toggle</code> <a class="header-anchor" href="#toggle" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>切换视频的播放和暂停</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">muted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toggle</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toggle</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="destroy" tabindex="-1"><code>destroy</code> <a class="header-anchor" href="#destroy" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li><li>Parameter: <code>Boolean</code></li></ul><p>销毁播放器,接受一个参数表示是否销毁后同时移除播放器的 <code>html</code>,默认为 <code>true</code></p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="seek" tabindex="-1"><code>seek</code> <a class="header-anchor" href="#seek" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter</code></li><li>Parameter: <code>Number</code></li></ul><p>视频时间跳转,单位秒</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">seek</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="forward" tabindex="-1"><code>forward</code> <a class="header-anchor" href="#forward" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter</code></li><li>Parameter: <code>Number</code></li></ul><p>视频时间快进,单位秒</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">forward</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="backward" tabindex="-1"><code>backward</code> <a class="header-anchor" href="#backward" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter</code></li><li>Parameter: <code>Number</code></li></ul><p>视频时间快退,单位秒</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">seek</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">backward</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="volume" tabindex="-1"><code>volume</code> <a class="header-anchor" href="#volume" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Number</code></li></ul><p>设置和获取视频音量,范围在:<code>[0, 1]</code></p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">volume</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">volume</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0.5</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">volume</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="url" tabindex="-1"><code>url</code> <a class="header-anchor" href="#url" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>设置和获取视频地址</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4?t=0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="switchurl" tabindex="-1"><code>switchUrl</code> <a class="header-anchor" href="#switchurl" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li><li>Parameter: <code>String</code></li></ul><p>设置视频地址,设置时和 <code>url</code> 类似,但会执行一些优化操作</p><p>函数支持两个参数,第一个为新的视频地址,第二个为可选新的视频名字</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">seek</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">switchUrl</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4?t=0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">新视频名字</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="switchquality" tabindex="-1"><code>switchQuality</code> <a class="header-anchor" href="#switchquality" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li><li>Parameter: <code>String</code></li></ul><p>设置视频画质地址,和 <code>switchUrl</code> 类似,但会带上之前的播放进度</p><p>函数支持两个参数,第一个为新的视频地址,第二个为可选新的视频名字</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">seek</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">switchQuality</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4?t=0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">新视频地址</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="muted" tabindex="-1"><code>muted</code> <a class="header-anchor" href="#muted" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>设置和获取视频是否静音</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">muted</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">muted</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">muted</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="currenttime" tabindex="-1"><code>currentTime</code> <a class="header-anchor" href="#currenttime" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Number</code></li></ul><p>设置和获取视频当前时间,设置时间时和 <code>seek</code> 类似,但它不会触发额外的事件</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentTime</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentTime</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentTime</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="duration" tabindex="-1"><code>duration</code> <a class="header-anchor" href="#duration" aria-hidden="true">#</a></h2><ul><li>Type: <code>Getter</code></li></ul><p>获取视频时长</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">duration</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>有的视频是没有时长的,例如直播中的视频或者没被解码完成的视频,这个时候获取的时长会是 <code>0</code></p></div><h2 id="screenshot" tabindex="-1"><code>screenshot</code> <a class="header-anchor" href="#screenshot" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>下载当前视频帧的截图</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">screenshot</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="getdataurl" tabindex="-1"><code>getDataURL</code> <a class="header-anchor" href="#getdataurl" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>获取当前视频帧的截图的<code>base64</code>地址,返回的是一个 <code>Promise</code></p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">async</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getDataURL</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="getbloburl" tabindex="-1"><code>getBlobUrl</code> <a class="header-anchor" href="#getbloburl" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>获取当前视频帧的截图的<code>blob</code>地址,返回的是一个 <code>Promise</code></p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">async</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getBlobUrl</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="fullscreen" tabindex="-1"><code>fullscreen</code> <a class="header-anchor" href="#fullscreen" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>设置和获取播放器窗口全屏</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">controls</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">全屏开关</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fullscreen</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fullscreen</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>由于浏览器安全机制,触发窗口全屏前,页面必须先存在交互(例如用户点击过页面)</p></div><h2 id="fullscreenweb" tabindex="-1"><code>fullscreenWeb</code> <a class="header-anchor" href="#fullscreenweb" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>设置和获取播放器网页全屏</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">fullscreenWeb</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fullscreenWeb</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fullscreenWeb</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="pip" tabindex="-1"><code>pip</code> <a class="header-anchor" href="#pip" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>设置和获取播放器画中画模式</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">controls</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">PIP</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">pip</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">pip</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>由于浏览器安全机制,触发画中画前,页面必须先存在交互(例如用户点击过页面)</p></div><h2 id="poster" tabindex="-1"><code>poster</code> <a class="header-anchor" href="#poster" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>设置和获取视频海报,只有在视频播放前才能看到海报效果</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">poster</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/poster.jpg</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">poster</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">poster</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/poster.jpg?t=0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">poster</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="mini" tabindex="-1"><code>mini</code> <a class="header-anchor" href="#mini" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>设置和获取播放器迷你模式</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mini</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="playing" tabindex="-1"><code>playing</code> <a class="header-anchor" href="#playing" aria-hidden="true">#</a></h2><ul><li>Type: <code>Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>获取视频是否正在播放中</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">muted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">playing</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="autosize" tabindex="-1"><code>autoSize</code> <a class="header-anchor" href="#autosize" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>设置视频是否自适应尺寸,设置为 <code>true</code> 之后它会只执行一次</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoSize</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoSize</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoSize</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="rect" tabindex="-1"><code>rect</code> <a class="header-anchor" href="#rect" aria-hidden="true">#</a></h2><ul><li>Type: <code>Getter</code></li></ul><p>获取播放器的尺寸和坐标信息</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">JSON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">rect</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>尺寸和坐标信息是通过 <code>getBoundingClientRect</code> 获取的</p></div><h2 id="flip" tabindex="-1"><code>flip</code> <a class="header-anchor" href="#flip" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>设置和获取播放器翻转,支持<code>normal</code>, <code>horizontal</code>, <code>vertical</code></p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">flip</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">flip</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">horizontal</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">flip</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="playbackrate" tabindex="-1"><code>playbackRate</code> <a class="header-anchor" href="#playbackrate" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Number</code></li></ul><p>设置和获取播放器播放速度</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">playbackRate</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">playbackRate</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">playbackRate</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="aspectratio" tabindex="-1"><code>aspectRatio</code> <a class="header-anchor" href="#aspectratio" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>设置和获取播放器长宽比</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">aspectRatio</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">aspectRatio</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">16:9</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">aspectRatio</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="loop" tabindex="-1"><code>loop</code> <a class="header-anchor" href="#loop" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Array</code></li></ul><p>设置和获取区间循序播放,单位秒</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loop</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loop</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> [</span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">10</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loop</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>删除区间循环播放,只需要设置 <code>loop</code> 为 <code>[]</code> 即可</p><p><code>art.loop</code> 与 <code>art.option.loop</code> 是两个不同的东西,请勿弄乱</p></div><h2 id="autoheight" tabindex="-1"><code>autoHeight</code> <a class="header-anchor" href="#autoheight" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>当容器只有宽度,该属性可以自动计算出并设置视频的高度,设置为 <code>true</code> 之后它会只执行一次</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoHeight</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">resize</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoHeight</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>当你的容器只有宽度,但不知道具体高度时,这个属性很有用,它能自动计算出视频的高度,但你需要确定设置这个属性的时机</p></div><h2 id="attr" tabindex="-1"><code>attr</code> <a class="header-anchor" href="#attr" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li><li>Parameter: <code>String</code></li></ul><p>动态获取和设置 video 元素的属性</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">attr</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">playsInline</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">attr</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">playsInline</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">attr</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">playsInline</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="title" tabindex="-1"><code>title</code> <a class="header-anchor" href="#title" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>动态获取和设置播放器标题</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">title</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">title</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">新标题</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">title</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="type" tabindex="-1"><code>type</code> <a class="header-anchor" href="#type" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>动态获取和设置视频类型</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">type</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">type</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">m3u8</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">type</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="theme" tabindex="-1"><code>theme</code> <a class="header-anchor" href="#theme" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>动态获取和设置播放器主题颜色</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">theme</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">theme</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#000</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">theme</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="airplay" tabindex="-1"><code>airplay</code> <a class="header-anchor" href="#airplay" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>开启隔空播放</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">controls</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">AirPlay</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">airplay</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="loaded" tabindex="-1"><code>loaded</code> <a class="header-anchor" href="#loaded" aria-hidden="true">#</a></h2><ul><li>Type: <code>Getter</code></li></ul><p>视频缓存的比例,范围是 <code>[0, 1]</code>,常配合 <code>video:timeupdate</code> 事件使用</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">video:timeupdate</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loaded</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="played" tabindex="-1"><code>played</code> <a class="header-anchor" href="#played" aria-hidden="true">#</a></h2><ul><li>Type: <code>Getter</code></li></ul><p>视频播放的比例,范围是 <code>[0, 1]</code>,常配合 <code>video:timeupdate</code> 事件使用</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">video:timeupdate</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">played</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="proxy" tabindex="-1"><code>proxy</code> <a class="header-anchor" href="#proxy" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p><code>DOM</code> 事件的代理函数,实质上代理了 <code>addEventListener</code> 和 <code>removeEventListener</code>, 当使用 <code>proxy</code> 来处理事件,播放器销毁时也会自动销毁该事件</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> container </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> container</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">proxy</span><span style="color:#A6ACCD;">(container</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>假如你需要一些 <code>DOM</code> 事件只存在于播放器的生命周期上时,强烈建议使用该函数,以避免造成内存泄漏</p></div><h2 id="query" tabindex="-1"><code>query</code> <a class="header-anchor" href="#query" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p><code>DOM</code> 的查询函数,类似 <code>document.querySelector</code>,但被查询的对象局限于当前播放器内,可以避免同类名的错误</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">query</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.art-video</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="video" tabindex="-1"><code>video</code> <a class="header-anchor" href="#video" aria-hidden="true">#</a></h2><ul><li>Type: <code>Element</code></li></ul><p>快捷返回播放器的 <code>video</code> 元素</p><div className="run-code">▶ Run Code</div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">video)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-cfb513e0 data-v-21f75714><div class="edit-info" data-v-21f75714><div class="edit-link" data-v-21f75714><a class="VPLink link edit-link-button" href="https://github.com/zhw2590582/ArtPlayer/packages/artplayer-vitepress/docs/advanced/property.md" target="_blank" rel="noreferrer" data-v-21f75714 data-v-3c355974><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" data-v-21f75714><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-21f75714><p class="VPLastUpdated" data-v-21f75714 data-v-18fe8fc2>Last updated: <time datetime="2023-01-11T12:02:39.000Z" data-v-18fe8fc2></time></p></div></div><div class="prev-next" data-v-21f75714><div class="pager" data-v-21f75714><a class="pager-link prev" href="/document/start/setting.html" data-v-21f75714><span class="desc" data-v-21f75714>Previous page</span><span class="title" data-v-21f75714>设置面板</span></a></div><div class="has-prev pager" data-v-21f75714><a class="pager-link next" href="/document/advanced/built-in.html" data-v-21f75714><span class="desc" data-v-21f75714>Next page</span><span class="title" data-v-21f75714>高级属性</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>__VP_HASH_MAP__ = JSON.parse("{\"library_dash.md\":\"32119fe1\",\"en_index.md\":\"51748bf3\",\"plugin_control-ui.md\":\"ec2ab45e\",\"plugin_ads.md\":\"4c8e0b7a\",\"plugin_hls-quality.md\":\"1c3d5422\",\"library_flv.md\":\"1b4373c5\",\"start_component.md\":\"ad9f92aa\",\"start_setting.md\":\"ff6b3442\",\"advanced_built-in.md\":\"c13b2bd2\",\"library_hls.md\":\"23034afe\",\"advanced_plugin.md\":\"56c69c23\",\"index.md\":\"6ef07f3a\",\"plugin_iframe.md\":\"464f8f80\",\"advanced_class.md\":\"5d5c7279\",\"plugin_danmuku.md\":\"dbf36e4d\",\"advanced_property.md\":\"fe5901e0\",\"start_option.md\":\"31fff3b6\",\"advanced_event.md\":\"821c0057\"}")</script>
|
||||
<script type="module" async src="/document/assets/app.acdc77a1.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,211 @@
|
||||
import{_ as a,c as l,o as p,a as s,b as n}from"./app.acdc77a1.js";const X=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"whitelist","slug":"whitelist","link":"#whitelist","children":[]},{"level":2,"title":"template","slug":"template","link":"#template","children":[]},{"level":2,"title":"events","slug":"events","link":"#events","children":[]},{"level":2,"title":"storage","slug":"storage","link":"#storage","children":[]},{"level":2,"title":"icons","slug":"icons","link":"#icons","children":[]},{"level":2,"title":"i18n","slug":"i18n","link":"#i18n","children":[]},{"level":2,"title":"notice","slug":"notice","link":"#notice","children":[]},{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"subtitle","slug":"subtitle","link":"#subtitle","children":[]},{"level":2,"title":"loading","slug":"loading","link":"#loading","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"mask","slug":"mask","link":"#mask","children":[]},{"level":2,"title":"setting","slug":"setting","link":"#setting","children":[]},{"level":2,"title":"plugins","slug":"plugins","link":"#plugins","children":[]}],"relativePath":"advanced/built-in.md","lastUpdated":1673438559000}'),o={name:"advanced/built-in.md"},e=s('<h1 id="高级属性" tabindex="-1">高级属性 <a class="header-anchor" href="#高级属性" aria-hidden="true">#</a></h1><p>这里的 <code>高级属性</code> 是指挂载在 <code>实例</code> 的 <code>二级属性</code>,比较少用</p><h2 id="option" tabindex="-1"><code>option</code> <a class="header-anchor" href="#option" aria-hidden="true">#</a></h2><p>播放器的选项</p>',4),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">option)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>假如直接修改这个 <code>option</code> 对象,播放器不会马上做出响应</p></div><h2 id="whitelist" tabindex="-1"><code>whitelist</code> <a class="header-anchor" href="#whitelist" aria-hidden="true">#</a></h2><p>管理移动设备的白名单功能,只有一个属性 <code>state</code> 返回是否启用播放器功能</p>`,4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">whitelist</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">ua</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#C3E88D;">iPhone</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">gi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">test</span><span style="color:#A6ACCD;">(ua)]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">whitelist</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">state)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>在上面这个例子中,当使用 <code>iPhone</code> 访问播放器时,<code>art.whitelist.state</code> 会返回 <code>false</code>,即使用原生的播放器,而不是 <code>Artplayer</code> 播放器</p></div><h2 id="template" tabindex="-1"><code>template</code> <a class="header-anchor" href="#template" aria-hidden="true">#</a></h2><p>管理播放器所有的 <code>DOM</code> 元素</p>`,4),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">template)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">template</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">$video)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>为了方便区别 <code>DOM</code> 元素和普通对象,播放器里的所有 <code>DOM</code> 元素都是以 <code>$</code> 开头命名的</p><p>这是所有 <code>DOM</code> 元素的定义:<a href="https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/template.d.ts" target="_blank" rel="noreferrer">artplayer/types/template.d.ts</a></p></div><h2 id="events" tabindex="-1"><code>events</code> <a class="header-anchor" href="#events" aria-hidden="true">#</a></h2><p>管理播放器所有的 <code>DOM</code> 事件,实质上是代理了 <code>addEventListener</code> 和 <code>removeEventListener</code>, 当使用以下方法来处理事件,播放器销毁时也会自动销毁该事件</p><ul><li><code>proxy</code> 方法用于代理 <code>DOM</code> 事件</li><li><code>hover</code> 方法用于代理自定义的 <code>hover</code> 事件</li><li><code>loadImg</code> 方法用于监听图片的 <code>load</code> 加载事件</li></ul>`,5),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> container </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> container</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">events</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">proxy</span><span style="color:#A6ACCD;">(container</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">events</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">hover</span><span style="color:#A6ACCD;">(container</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">mouseenter</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">},</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">mouseleave</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">events</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">loadImg</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/poster.jpg</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">img</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">loadImg</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">img</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>假如你需要一些 <code>DOM</code> 事件只存在于播放器的生命周期上时,强烈建议使用这些函数,以避免造成内存泄漏</p></div><h2 id="storage" tabindex="-1"><code>storage</code> <a class="header-anchor" href="#storage" aria-hidden="true">#</a></h2><p>管理播放器的本地存储</p><ul><li><code>name</code> 属性用于设置缓存的 <code>key</code></li><li><code>set</code> 方法用于设置缓存</li><li><code>get</code> 方法用于获取缓存</li><li><code>del</code> 方法用于删除缓存</li><li><code>clear</code> 方法用于清空缓存</li></ul>`,5),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">storage</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">test</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">foo</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">bar</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> test </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">storage</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">test</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(test)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">storage</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">del</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">test</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">storage</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">clear</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>默认所有播放器实例都是共享同一个 <code>localStorage</code> 的,而且默认的 <code>key</code> 是 <code>artplayer_settings</code></p><p>如果你想不同的播放器使用不同的 <code>localStorage</code>,你可以修改 <code>art.storage.name</code> 即可</p></div>`,2),b=n("div",{className:"run-code"},"▶ Run Code",-1),u=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">storage</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">your-storage-key</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">storage</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">test</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">foo</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">bar</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="icons" tabindex="-1"><code>icons</code> <a class="header-anchor" href="#icons" aria-hidden="true">#</a></h2><p>管理播放器所有的 <code>svg</code> 图标</p>`,3),m=n("div",{className:"run-code"},"▶ Run Code",-1),_=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">icons</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loading)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">这是所有图标的定义:</p><p><a href="https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/icons.d.ts" target="_blank" rel="noreferrer">artplayer/types/icons.d.ts</a></p></div><h2 id="i18n" tabindex="-1"><code>i18n</code> <a class="header-anchor" href="#i18n" aria-hidden="true">#</a></h2><p>管理播放器的 <code>i18n</code></p><ul><li><code>get</code> 方法用于获取 <code>i18n</code> 的值</li><li><code>update</code> 方法用于更新 <code>i18n</code> 对象</li></ul>`,5),h=n("div",{className:"run-code"},"▶ Run Code",-1),g=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">i18n</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Play</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">i18n</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">update</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">zh-cn</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">Play</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Your Play</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>使用 <code>art.i18n.update</code> 只能更新实例化之后的 <code>i18n</code>,假如想在实例化之前更新 <code>i18n</code>,请使用基础选项的 <code>i18n</code> 来更新</p></div><h2 id="notice" tabindex="-1"><code>notice</code> <a class="header-anchor" href="#notice" aria-hidden="true">#</a></h2><p>管理播放器的提示语,只有一个 <code>show</code> 属性用于显示提示语</p>`,4),v=n("div",{className:"run-code"},"▶ Run Code",-1),E=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">notice</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Video Ready To Play</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>如果想马上隐藏 <code>notice</code> 的显示:<code>art.notice.show = '';</code></p></div><h2 id="layers" tabindex="-1"><code>layers</code> <a class="header-anchor" href="#layers" aria-hidden="true">#</a></h2><p>管理播放器的层</p><ul><li><code>add</code> 方法用于动态添加层</li><li><code>show</code> 属性用于设置是否显示全部层</li><li><code>toggle</code> 属性用于切换是否显示全部层</li></ul>`,5),T=n("div",{className:"run-code"},"▶ Run Code",-1),k=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">layers</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> html</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Some Text</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">layers</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title"><code>组件配置</code> 请参考以下地址:</p><p><a href="/document/start/component.html">/start/component.html</a></p></div><h2 id="controls" tabindex="-1"><code>controls</code> <a class="header-anchor" href="#controls" aria-hidden="true">#</a></h2><p>管理播放器的控制器</p><ul><li><code>add</code> 方法用于动态添加控制器</li><li><code>show</code> 属性用于设置是否显示全部控制器</li><li><code>toggle</code> 属性用于切换是否显示全部控制器</li></ul>`,5),w=n("div",{className:"run-code"},"▶ Run Code",-1),f=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">controls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> html</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Some Text</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> position</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">left</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">controls</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="warning custom-block"><p class="custom-block-title"><code>组件配置</code> 请参考以下地址:</p><p><a href="/document/start/component.html">/start/component.html</a></p></div><h2 id="contextmenu" tabindex="-1"><code>contextmenu</code> <a class="header-anchor" href="#contextmenu" aria-hidden="true">#</a></h2><p>管理播放器的右键菜单</p><ul><li><code>add</code> 方法用于动态添加菜单</li><li><code>show</code> 属性用于设置是否显示全部菜单</li><li><code>toggle</code> 属性用于切换是否显示全部菜单</li></ul>`,5),S=n("div",{className:"run-code"},"▶ Run Code",-1),P=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">contextmenu</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> html</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Some Text</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">contextmenu</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">contextmenu</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="warning custom-block"><p class="custom-block-title"><code>组件配置</code> 请参考以下地址:</p><p><a href="/document/start/component.html">/start/component.html</a></p></div><h2 id="subtitle" tabindex="-1"><code>subtitle</code> <a class="header-anchor" href="#subtitle" aria-hidden="true">#</a></h2><p>管理播放器的字幕功能</p><ul><li><code>url</code> 属性设置和返回当前字幕地址</li><li><code>style</code> 方法设置当前字幕的样式</li><li><code>switch</code> 方法设置当前字幕地址和选项</li></ul>`,5),I=n("div",{className:"run-code"},"▶ Run Code",-1),N=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">subtitle</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/subtitle.srt</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">subtitle</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">style</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> color</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">red</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="loading" tabindex="-1"><code>loading</code> <a class="header-anchor" href="#loading" aria-hidden="true">#</a></h2><p>管理播放器的加载层</p><ul><li><code>show</code> 属性用于设置是否显示加载层</li><li><code>toggle</code> 属性用于切换是否显示加载层</li></ul>`,4),R=n("div",{className:"run-code"},"▶ Run Code",-1),V=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loading</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loading</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="hotkey" tabindex="-1"><code>hotkey</code> <a class="header-anchor" href="#hotkey" aria-hidden="true">#</a></h2><p>管理播放器的快捷键功能</p><ul><li><code>add</code> 方法用于添加快捷键</li><li><code>remove</code> 方法用于删除快捷键</li></ul>`,4),j=n("div",{className:"run-code"},"▶ Run Code",-1),x=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">hotkeyEvent</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">hotkey</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">32</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hotkeyEvent</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">hotkey</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">remove</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">32</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hotkeyEvent</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>只在播放器获得焦点后(如点击了播放器后),这些快捷键才会生效</p></div><h2 id="mask" tabindex="-1"><code>mask</code> <a class="header-anchor" href="#mask" aria-hidden="true">#</a></h2><p>管理播放器的遮罩层</p><ul><li><code>show</code> 属性用于设置是否显示遮罩层</li><li><code>toggle</code> 属性用于切换是否显示遮罩层</li></ul>`,5),O=n("div",{className:"run-code"},"▶ Run Code",-1),M=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mask</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mask</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="setting" tabindex="-1"><code>setting</code> <a class="header-anchor" href="#setting" aria-hidden="true">#</a></h2><p>管理播放器的设置面板</p><ul><li><code>add</code> 方法用于动态添加设置项</li><li><code>show</code> 属性用于设置是否显示全部设置项</li><li><code>toggle</code> 属性用于切换是否显示全部设置项</li><li><code>update</code> 方法动态更新设置项</li></ul>`,4),$=n("div",{className:"run-code"},"▶ Run Code",-1),z=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">flip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">playbackRate</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">aspectRatio</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">subtitleOffset</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">setting</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">setting</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title"><code>设置面板</code> 请参考以下地址</p><p><a href="/document/start/setting.html">/start/setting.html</a></p></div><h2 id="plugins" tabindex="-1"><code>plugins</code> <a class="header-anchor" href="#plugins" aria-hidden="true">#</a></h2><p>管理播放器的插件功能,只有一个方法 <code>add</code> 用于动态添加插件</p>`,4),B=n("div",{className:"run-code"},"▶ Run Code",-1),G=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">myPlugin</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">myPlugin</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> something</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">something</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">doSomething</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">doSomething</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">myPlugin</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div>`,1),L=[e,c,r,t,D,F,y,i,A,C,d,b,u,m,_,h,g,v,E,T,k,w,f,S,P,I,N,R,V,j,x,O,M,$,z,B,G];function W(q,J,U,Y,H,K){return p(),l("div",null,L)}const Z=a(o,[["render",W]]);export{X as __pageData,Z as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as a,c as l,o as p,a as s,b as n}from"./app.acdc77a1.js";const X=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"whitelist","slug":"whitelist","link":"#whitelist","children":[]},{"level":2,"title":"template","slug":"template","link":"#template","children":[]},{"level":2,"title":"events","slug":"events","link":"#events","children":[]},{"level":2,"title":"storage","slug":"storage","link":"#storage","children":[]},{"level":2,"title":"icons","slug":"icons","link":"#icons","children":[]},{"level":2,"title":"i18n","slug":"i18n","link":"#i18n","children":[]},{"level":2,"title":"notice","slug":"notice","link":"#notice","children":[]},{"level":2,"title":"layers","slug":"layers","link":"#layers","children":[]},{"level":2,"title":"controls","slug":"controls","link":"#controls","children":[]},{"level":2,"title":"contextmenu","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"subtitle","slug":"subtitle","link":"#subtitle","children":[]},{"level":2,"title":"loading","slug":"loading","link":"#loading","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"mask","slug":"mask","link":"#mask","children":[]},{"level":2,"title":"setting","slug":"setting","link":"#setting","children":[]},{"level":2,"title":"plugins","slug":"plugins","link":"#plugins","children":[]}],"relativePath":"advanced/built-in.md","lastUpdated":1673438559000}'),o={name:"advanced/built-in.md"},e=s("",4),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",4),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",5),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",5),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s("",2),b=n("div",{className:"run-code"},"▶ Run Code",-1),u=s("",3),m=n("div",{className:"run-code"},"▶ Run Code",-1),_=s("",5),h=n("div",{className:"run-code"},"▶ Run Code",-1),g=s("",4),v=n("div",{className:"run-code"},"▶ Run Code",-1),E=s("",5),T=n("div",{className:"run-code"},"▶ Run Code",-1),k=s("",5),w=n("div",{className:"run-code"},"▶ Run Code",-1),f=s("",5),S=n("div",{className:"run-code"},"▶ Run Code",-1),P=s("",5),I=n("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),R=n("div",{className:"run-code"},"▶ Run Code",-1),V=s("",4),j=n("div",{className:"run-code"},"▶ Run Code",-1),x=s("",5),O=n("div",{className:"run-code"},"▶ Run Code",-1),M=s("",4),$=n("div",{className:"run-code"},"▶ Run Code",-1),z=s("",4),B=n("div",{className:"run-code"},"▶ Run Code",-1),G=s("",1),L=[e,c,r,t,D,F,y,i,A,C,d,b,u,m,_,h,g,v,E,T,k,w,f,S,P,I,N,R,V,j,x,O,M,$,z,B,G];function W(q,J,U,Y,H,K){return p(),l("div",null,L)}const Z=a(o,[["render",W]]);export{X as __pageData,Z as default};
|
||||
@@ -0,0 +1,20 @@
|
||||
import{_ as s,c as n,o as l,a as e,b as a}from"./app.acdc77a1.js";const U=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"instances","slug":"instances","link":"#instances","children":[]},{"level":2,"title":"version","slug":"version","link":"#version","children":[]},{"level":2,"title":"env","slug":"env","link":"#env","children":[]},{"level":2,"title":"build","slug":"build","link":"#build","children":[]},{"level":2,"title":"config","slug":"config","link":"#config","children":[]},{"level":2,"title":"utils","slug":"utils","link":"#utils","children":[]},{"level":2,"title":"scheme","slug":"scheme","link":"#scheme","children":[]},{"level":2,"title":"Emitter","slug":"emitter","link":"#emitter","children":[]},{"level":2,"title":"validator","slug":"validator","link":"#validator","children":[]},{"level":2,"title":"kindOf","slug":"kindof","link":"#kindof","children":[]},{"level":2,"title":"html","slug":"html","link":"#html","children":[]},{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"DEBUG","slug":"debug","link":"#debug","children":[]},{"level":2,"title":"CONTEXTMENU","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"NOTICE_TIME","slug":"notice-time","link":"#notice-time","children":[]},{"level":2,"title":"SETTING_WIDTH","slug":"setting-width","link":"#setting-width","children":[]},{"level":2,"title":"SETTING_ITEM_WIDTH","slug":"setting-item-width","link":"#setting-item-width","children":[]},{"level":2,"title":"SETTING_ITEM_HEIGHT","slug":"setting-item-height","link":"#setting-item-height","children":[]},{"level":2,"title":"INDICATOR_SIZE","slug":"indicator-size","link":"#indicator-size","children":[]},{"level":2,"title":"INDICATOR_SIZE_ICON","slug":"indicator-size-icon","link":"#indicator-size-icon","children":[]},{"level":2,"title":"INDICATOR_SIZE_MOBILE","slug":"indicator-size-mobile","link":"#indicator-size-mobile","children":[]},{"level":2,"title":"INDICATOR_SIZE_MOBILE_ICON","slug":"indicator-size-mobile-icon","link":"#indicator-size-mobile-icon","children":[]},{"level":2,"title":"VOLUME_PANEL_WIDTH","slug":"volume-panel-width","link":"#volume-panel-width","children":[]},{"level":2,"title":"VOLUME_HANDLE_WIDTH","slug":"volume-handle-width","link":"#volume-handle-width","children":[]},{"level":2,"title":"RESIZE_TIME","slug":"resize-time","link":"#resize-time","children":[]},{"level":2,"title":"SCROLL_TIME","slug":"scroll-time","link":"#scroll-time","children":[]},{"level":2,"title":"SCROLL_GAP","slug":"scroll-gap","link":"#scroll-gap","children":[]},{"level":2,"title":"AUTO_PLAYBACK_MAX","slug":"auto-playback-max","link":"#auto-playback-max","children":[]},{"level":2,"title":"AUTO_PLAYBACK_MIN","slug":"auto-playback-min","link":"#auto-playback-min","children":[]},{"level":2,"title":"AUTO_PLAYBACK_TIMEOUT","slug":"auto-playback-timeout","link":"#auto-playback-timeout","children":[]},{"level":2,"title":"RECONNECT_TIME_MAX","slug":"reconnect-time-max","link":"#reconnect-time-max","children":[]},{"level":2,"title":"RECONNECT_SLEEP_TIME","slug":"reconnect-sleep-time","link":"#reconnect-sleep-time","children":[]},{"level":2,"title":"CONTROL_HIDE_TIME","slug":"control-hide-time","link":"#control-hide-time","children":[]},{"level":2,"title":"DB_CLICE_TIME","slug":"db-clice-time","link":"#db-clice-time","children":[]},{"level":2,"title":"MOBILE_AUTO_PLAYBACKRATE","slug":"mobile-auto-playbackrate","link":"#mobile-auto-playbackrate","children":[]},{"level":2,"title":"MOBILE_AUTO_PLAYBACKRATE_TIME","slug":"mobile-auto-playbackrate-time","link":"#mobile-auto-playbackrate-time","children":[]},{"level":2,"title":"MOBILE_AUTO_ORIENTATION_TIME","slug":"mobile-auto-orientation-time","link":"#mobile-auto-orientation-time","children":[]},{"level":2,"title":"INFO_LOOP_TIME","slug":"info-loop-time","link":"#info-loop-time","children":[]},{"level":2,"title":"FAST_FORWARD_VALUE","slug":"fast-forward-value","link":"#fast-forward-value","children":[]},{"level":2,"title":"FAST_FORWARD_TIME","slug":"fast-forward-time","link":"#fast-forward-time","children":[]},{"level":2,"title":"TOUCH_MOVE_RATIO","slug":"touch-move-ratio","link":"#touch-move-ratio","children":[]},{"level":2,"title":"VOLUME_STEP","slug":"volume-step","link":"#volume-step","children":[]},{"level":2,"title":"SEEK_STEP","slug":"seek-step","link":"#seek-step","children":[]},{"level":2,"title":"PROGRESS_HEIGHT","slug":"progress-height","link":"#progress-height","children":[]},{"level":2,"title":"PLAYBACK_RATE","slug":"playback-rate","link":"#playback-rate","children":[]},{"level":2,"title":"ASPECT_RATIO","slug":"aspect-ratio","link":"#aspect-ratio","children":[]},{"level":2,"title":"FLIP","slug":"flip","link":"#flip","children":[]}],"relativePath":"advanced/class.md","lastUpdated":1673438559000}'),i={name:"advanced/class.md"},o=e('<h1 id="静态属性" tabindex="-1">静态属性 <a class="header-anchor" href="#静态属性" aria-hidden="true">#</a></Line truncated
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">([</span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">instances])</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="version" tabindex="-1"><code>version</code> <a class="header-anchor" href="#version" aria-hidden="true">#</a></h2><p>返回播放器的版本信息</p>`,3),c=a("div",{className:"run-code"},"▶ Run Code",-1),d=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">version)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="env" tabindex="-1"><code>env</code> <a class="header-anchor" href="#env" aria-hidden="true">#</a></h2><p>返回播放器的环境变量</p>`,3),p=a("div",{className:"run-code"},"▶ Run Code",-1),h=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">env)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="build" tabindex="-1"><code>build</code> <a class="header-anchor" href="#build" aria-hidden="true">#</a></h2><p>返回播放器的打包时间</p>`,3),_=a("div",{className:"run-code"},"▶ Run Code",-1),u=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">build)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="config" tabindex="-1"><code>config</code> <a class="header-anchor" href="#config" aria-hidden="true">#</a></h2><p>返回视频的默认配置</p>`,3),A=a("div",{className:"run-code"},"▶ Run Code",-1),m=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">config)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="utils" tabindex="-1"><code>utils</code> <a class="header-anchor" href="#utils" aria-hidden="true">#</a></h2><p>返回播放器的工具函数集合</p>`,3),C=a("div",{className:"run-code"},"▶ Run Code",-1),b=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">utils)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">全部工具函数请参考以下地址:</p><p><a href="https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/utils.d.ts" target="_blank" rel="noreferrer">artplayer/types/utils.d.ts</a></p></div><h2 id="scheme" tabindex="-1"><code>scheme</code> <a class="header-anchor" href="#scheme" aria-hidden="true">#</a></h2><p>返回播放器选项的校验方案</p>`,4),D=a("div",{className:"run-code"},"▶ Run Code",-1),y=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">scheme)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="emitter" tabindex="-1"><code>Emitter</code> <a class="header-anchor" href="#emitter" aria-hidden="true">#</a></h2><p>返回事件分发器的构造函数</p>`,3),T=a("div",{className:"run-code"},"▶ Run Code",-1),v=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">Emitter)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="validator" tabindex="-1"><code>validator</code> <a class="header-anchor" href="#validator" aria-hidden="true">#</a></h2><p>返回选项的校验函数</p>`,3),F=a("div",{className:"run-code"},"▶ Run Code",-1),g=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">validator)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="kindof" tabindex="-1"><code>kindOf</code> <a class="header-anchor" href="#kindof" aria-hidden="true">#</a></h2><p>返回类型检测的函数工具</p>`,3),E=a("div",{className:"run-code"},"▶ Run Code",-1),I=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">kindOf)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="html" tabindex="-1"><code>html</code> <a class="header-anchor" href="#html" aria-hidden="true">#</a></h2><p>返回播放器所需的 <code>html</code> 字符串</p>`,3),f=a("div",{className:"run-code"},"▶ Run Code",-1),k=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">html)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="option" tabindex="-1"><code>option</code> <a class="header-anchor" href="#option" aria-hidden="true">#</a></h2><p>返回播放器的默认选项</p>`,3),O=a("div",{className:"run-code"},"▶ Run Code",-1),S=e(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(Artplayer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">option)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="debug" tabindex="-1"><code>DEBUG</code> <a class="header-anchor" href="#debug" aria-hidden="true">#</a></h2><h2 id="contextmenu" tabindex="-1"><code>CONTEXTMENU</code> <a class="header-anchor" href="#contextmenu" aria-hidden="true">#</a></h2><h2 id="notice-time" tabindex="-1"><code>NOTICE_TIME</code> <a class="header-anchor" href="#notice-time" aria-hidden="true">#</a></h2><h2 id="setting-width" tabindex="-1"><code>SETTING_WIDTH</code> <a class="header-anchor" href="#setting-width" aria-hidden="true">#</a></h2><h2 id="setting-item-width" tabindex="-1"><code>SETTING_ITEM_WIDTH</code> <a class="header-anchor" href="#setting-item-width" aria-hidden="true">#</a></h2><h2 id="setting-item-height" tabindex="-1"><code>SETTING_ITEM_HEIGHT</code> <a class="header-anchor" href="#setting-item-height" aria-hidden="true">#</a></h2><h2 id="indicator-size" tabindex="-1"><code>INDICATOR_SIZE</code> <a class="header-anchor" href="#indicator-size" aria-hidden="true">#</a></h2><h2 id="indicator-size-icon" tabindex="-1"><code>INDICATOR_SIZE_ICON</code> <a class="header-anchor" href="#indicator-size-icon" aria-hidden="true">#</a></h2><h2 id="indicator-size-mobile" tabindex="-1"><code>INDICATOR_SIZE_MOBILE</code> <a class="header-anchor" href="#indicator-size-mobile" aria-hidden="true">#</a></h2><h2 id="indicator-size-mobile-icon" tabindex="-1"><code>INDICATOR_SIZE_MOBILE_ICON</code> <a class="header-anchor" href="#indicator-size-mobile-icon" aria-hidden="true">#</a></h2><h2 id="volume-panel-width" tabindex="-1"><code>VOLUME_PANEL_WIDTH</code> <a class="header-anchor" href="#volume-panel-width" aria-hidden="true">#</a></h2><h2 id="volume-handle-width" tabindex="-1"><code>VOLUME_HANDLE_WIDTH</code> <a class="header-anchor" href="#volume-handle-width" aria-hidden="true">#</a></h2><h2 id="resize-time" tabindex="-1"><code>RESIZE_TIME</code> <a class="header-anchor" href="#resize-time" aria-hidden="true">#</a></h2><h2 id="scroll-time" tabindex="-1"><code>SCROLL_TIME</code> <a class="header-anchor" href="#scroll-time" aria-hidden="true">#</a></h2><h2 id="scroll-gap" tabindex="-1"><code>SCROLL_GAP</code> <a class="header-anchor" href="#scroll-gap" aria-hidden="true">#</a></h2><h2 id="auto-playback-max" tabindex="-1"><code>AUTO_PLAYBACK_MAX</code> <a class="header-anchor" href="#auto-playback-max" aria-hidden="true">#</a></h2><h2 id="auto-playback-min" tabindex="-1"><code>AUTO_PLAYBACK_MIN</code> <a class="header-anchor" href="#auto-playback-min" aria-hidden="true">#</a></h2><h2 id="auto-playback-timeout" tabindex="-1"><code>AUTO_PLAYBACK_TIMEOUT</code> <a class="header-anchor" href="#auto-playback-timeout" aria-hidden="true">#</a></h2><h2 id="reconnect-time-max" tabindex="-1"><code>RECONNECT_TIME_MAX</code> <a class="header-anchor" href="#reconnect-time-max" aria-hidden="true">#</a></h2><h2 id="reconnect-sleep-time" tabindex="-1"><code>RECONNECT_SLEEP_TIME</code> <a class="header-anchor" href="#reconnect-sleep-time" aria-hidden="true">#</a></h2><h2 id="control-hide-time" tabindex="-1"><code>CONTROL_HIDE_TIME</code> <a class="header-anchor" href="#control-hide-time" aria-hidden="true">#</a></h2><h2 id="db-clice-time" tabindex="-1"><code>DB_CLICE_TIME</code> <a class="header-anchor" href="#db-clice-time" aria-hidden="true">#</a></h2><h2 id="mobile-auto-playbackrate" tabindex="-1"><code>MOBILE_AUTO_PLAYBACKRATE</code> <a class="header-anchor" href="#mobile-auto-playbackrate" aria-hidden="true">#</a></h2><h2 id="mobile-auto-playbackrate-time" tabindex="-1"><code>MOBILE_AUTO_PLAYBACKRATE_TIME</code> <a class="header-anchor" href="#mobile-auto-playbackrate-time" aria-hidden="true">#</a></h2><h2 id="mobile-auto-orientation-time" tabindex="-1"><code>MOBILE_AUTO_ORIENTATION_TIME</code> <a class="header-anchor" href="#mobile-auto-orientation-time" aria-hidden="true">#</a></h2><h2 id="info-loop-time" tabindex="-1"><code>INFO_LOOP_TIME</code> <a class="header-anchor" href="#info-loop-time" aria-hidden="true">#</a></h2><h2 id="fast-forward-value" tabindex="-1"><code>FAST_FORWARD_VALUE</code> <a class="header-anchor" href="#fast-forward-value" aria-hidden="true">#</a></h2><h2 id="fast-forward-time" tabindex="-1"><code>FAST_FORWARD_TIME</code> <a class="header-anchor" href="#fast-forward-time" aria-hidden="true">#</a></h2><h2 id="touch-move-ratio" tabindex="-1"><code>TOUCH_MOVE_RATIO</code> <a class="header-anchor" href="#touch-move-ratio" aria-hidden="true">#</a></h2><h2 id="volume-step" tabindex="-1"><code>VOLUME_STEP</code> <a class="header-anchor" href="#volume-step" aria-hidden="true">#</a></h2><h2 id="seek-step" tabindex="-1"><code>SEEK_STEP</code> <a class="header-anchor" href="#seek-step" aria-hidden="true">#</a></h2><h2 id="progress-height" tabindex="-1"><code>PROGRESS_HEIGHT</code> <a class="header-anchor" href="#progress-height" aria-hidden="true">#</a></h2><h2 id="playback-rate" tabindex="-1Line truncated
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as s,c as n,o as l,a as e,b as a}from"./app.acdc77a1.js";const U=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"instances","slug":"instances","link":"#instances","children":[]},{"level":2,"title":"version","slug":"version","link":"#version","children":[]},{"level":2,"title":"env","slug":"env","link":"#env","children":[]},{"level":2,"title":"build","slug":"build","link":"#build","children":[]},{"level":2,"title":"config","slug":"config","link":"#config","children":[]},{"level":2,"title":"utils","slug":"utils","link":"#utils","children":[]},{"level":2,"title":"scheme","slug":"scheme","link":"#scheme","children":[]},{"level":2,"title":"Emitter","slug":"emitter","link":"#emitter","children":[]},{"level":2,"title":"validator","slug":"validator","link":"#validator","children":[]},{"level":2,"title":"kindOf","slug":"kindof","link":"#kindof","children":[]},{"level":2,"title":"html","slug":"html","link":"#html","children":[]},{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"DEBUG","slug":"debug","link":"#debug","children":[]},{"level":2,"title":"CONTEXTMENU","slug":"contextmenu","link":"#contextmenu","children":[]},{"level":2,"title":"NOTICE_TIME","slug":"notice-time","link":"#notice-time","children":[]},{"level":2,"title":"SETTING_WIDTH","slug":"setting-width","link":"#setting-width","children":[]},{"level":2,"title":"SETTING_ITEM_WIDTH","slug":"setting-item-width","link":"#setting-item-width","children":[]},{"level":2,"title":"SETTING_ITEM_HEIGHT","slug":"setting-item-height","link":"#setting-item-height","children":[]},{"level":2,"title":"INDICATOR_SIZE","slug":"indicator-size","link":"#indicator-size","children":[]},{"level":2,"title":"INDICATOR_SIZE_ICON","slug":"indicator-size-icon","link":"#indicator-size-icon","children":[]},{"level":2,"title":"INDICATOR_SIZE_MOBILE","slug":"indicator-size-mobile","link":"#indicator-size-mobile","children":[]},{"level":2,"title":"INDICATOR_SIZE_MOBILE_ICON","slug":"indicator-size-mobile-icon","link":"#indicator-size-mobile-icon","children":[]},{"level":2,"title":"VOLUME_PANEL_WIDTH","slug":"volume-panel-width","link":"#volume-panel-width","children":[]},{"level":2,"title":"VOLUME_HANDLE_WIDTH","slug":"volume-handle-width","link":"#volume-handle-width","children":[]},{"level":2,"title":"RESIZE_TIME","slug":"resize-time","link":"#resize-time","children":[]},{"level":2,"title":"SCROLL_TIME","slug":"scroll-time","link":"#scroll-time","children":[]},{"level":2,"title":"SCROLL_GAP","slug":"scroll-gap","link":"#scroll-gap","children":[]},{"level":2,"title":"AUTO_PLAYBACK_MAX","slug":"auto-playback-max","link":"#auto-playback-max","children":[]},{"level":2,"title":"AUTO_PLAYBACK_MIN","slug":"auto-playback-min","link":"#auto-playback-min","children":[]},{"level":2,"title":"AUTO_PLAYBACK_TIMEOUT","slug":"auto-playback-timeout","link":"#auto-playback-timeout","children":[]},{"level":2,"title":"RECONNECT_TIME_MAX","slug":"reconnect-time-max","link":"#reconnect-time-max","children":[]},{"level":2,"title":"RECONNECT_SLEEP_TIME","slug":"reconnect-sleep-time","link":"#reconnect-sleep-time","children":[]},{"level":2,"title":"CONTROL_HIDE_TIME","slug":"control-hide-time","link":"#control-hide-time","children":[]},{"level":2,"title":"DB_CLICE_TIME","slug":"db-clice-time","link":"#db-clice-time","children":[]},{"level":2,"title":"MOBILE_AUTO_PLAYBACKRATE","slug":"mobile-auto-playbackrate","link":"#mobile-auto-playbackrate","children":[]},{"level":2,"title":"MOBILE_AUTO_PLAYBACKRATE_TIME","slug":"mobile-auto-playbackrate-time","link":"#mobile-auto-playbackrate-time","children":[]},{"level":2,"title":"MOBILE_AUTO_ORIENTATION_TIME","slug":"mobile-auto-orientation-time","link":"#mobile-auto-orientation-time","children":[]},{"level":2,"title":"INFO_LOOP_TIME","slug":"info-loop-time","link":"#info-loop-time","children":[]},{"level":2,"title":"FAST_FORWARD_VALUE","slug":"fast-forward-value","link":"#fast-forward-value","children":[]},{"level":2,"title":"FAST_FORWARD_TIME","slug":"fast-forward-time","link":"#fast-forward-time","children":[]},{"level":2,"title":"TOUCH_MOVE_RATIO","slug":"touch-move-ratio","link":"#touch-move-ratio","children":[]},{"level":2,"title":"VOLUME_STEP","slug":"volume-step","link":"#volume-step","children":[]},{"level":2,"title":"SEEK_STEP","slug":"seek-step","link":"#seek-step","children":[]},{"level":2,"title":"PROGRESS_HEIGHT","slug":"progress-height","link":"#progress-height","children":[]},{"level":2,"title":"PLAYBACK_RATE","slug":"playback-rate","link":"#playback-rate","children":[]},{"level":2,"title":"ASPECT_RATIO","slug":"aspect-ratio","link":"#aspect-ratio","children":[]},{"level":2,"title":"FLIP","slug":"flip","link":"#flip","children":[]}],"relativePath":"advanced/class.md","lastUpdated":1673438559000}'),i={name:"advanced/class.md"},o=e("",5),t=a("div",{className:"run-code"},"▶ Run Code",-1),r=e("",3),c=a("div",{className:"run-code"},"▶ Run Code",-1),d=Line truncated
|
||||
@@ -0,0 +1,321 @@
|
||||
import{_ as l,c as p,o as e,b as s,d as a,a as n}from"./app.acdc77a1.js";const Ps=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[{"level":2,"title":"ready","slug":"ready","link":"#ready","children":[]},{"level":2,"title":"restart","slug":"restart","link":"#restart","children":[]},{"level":2,"title":"pause","slug":"pause","link":"#pause","children":[]},{"level":2,"title":"play","slug":"play","link":"#play","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"destroy","slug":"destroy","link":"#destroy","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"focus","slug":"focus","link":"#focus","children":[]},{"level":2,"title":"blur","slug":"blur","link":"#blur","children":[]},{"level":2,"title":"dblclick","slug":"dblclick","link":"#dblclick","children":[]},{"level":2,"title":"click","slug":"click","link":"#click","children":[]},{"level":2,"title":"error","slug":"error","link":"#error","children":[]},{"level":2,"title":"hover","slug":"hover","link":"#hover","children":[]},{"level":2,"title":"mousemove","slug":"mousemove","link":"#mousemove","children":[]},{"level":2,"title":"resize","slug":"resize","link":"#resize","children":[]},{"level":2,"title":"view","slug":"view","link":"#view","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"autoHeight","slug":"autoheight","link":"#autoheight","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"mini","slug":"mini","link":"#mini","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"seek","slug":"seek","link":"#seek","children":[]},{"level":2,"title":"subtitleOffset","slug":"subtitleoffset","link":"#subtitleoffset","children":[]},{"level":2,"title":"subtitleUpdate","slug":"subtitleupdate","link":"#subtitleupdate","children":[]},{"level":2,"title":"subtitleLoad","slug":"subtitleload","link":"#subtitleload","children":[]},{"level":2,"title":"subtitleSwitch","slug":"subtitleswitch","link":"#subtitleswitch","children":[]},{"level":2,"title":"video:canplay","slug":"video-canplay","link":"#video-canplay","children":[]},{"level":2,"title":"video:canplaythrough","slug":"video-canplaythrough","link":"#video-canplaythrough","children":[]},{"level":2,"title":"video:complete","slug":"video-complete","link":"#video-complete","children":[]},{"level":2,"title":"video:durationchange","slug":"video-durationchange","link":"#video-durationchange","children":[]},{"level":2,"title":"video:emptied","slug":"video-emptied","link":"#video-emptied","children":[]},{"level":2,"title":"video:ended","slug":"video-ended","link":"#video-ended","children":[]},{"level":2,"title":"video:error","slug":"video-error","link":"#video-error","children":[]},{"level":2,"title":"video:loadeddata","slug":"video-loadeddata","link":"#video-loadeddata","children":[]},{"level":2,"title":"video:loadedmetadata","slug":"video-loadedmetadata","link":"#video-loadedmetadata","children":[]},{"level":2,"title":"video:pause","slug":"video-pause","link":"#video-pause","children":[]},{"level":2,"title":"video:play","slug":"video-play","link":"#video-play","children":[]},{"level":2,"title":"video:playing","slug":"video-playing","link":"#video-playing","children":[]},{"level":2,"title":"video:progress","slug":"video-progress","link":"#video-progress","children":[]},{"level":2,"title":"video:ratechange","slug":"video-ratechange","link":"#video-ratechange","children":[]},{"level":2,"title":"video:seeked","slug":"video-seeked","link":"#video-seeked","children":[]},{"level":2,"title":"video:seeking","slug":"video-seeking","link":"#video-seeking","children":[]},{"level":2,"title":"video:stalled","slug":"video-stalled","link":"#video-stalled","children":[]},{"level":2,"title":"video:suspend","slug":"video-suspend","link":"#video-suspend","children":[]},{"level":2,"title":"video:timeupdate","slug":"video-timeupdate","link":"#video-timeupdate","children":[]},{"level":2,"title":"video:volumechange","slug":"video-volumechange","link":"#video-volumechange","children":[]},{"level":2,"title":"video:waiting","slug":"video-waiting","link":"#video-waiting","children":[]}],"relativePath":"advanced/event.md","lastUpdated":1673438559000}'),o={name:"advanced/event.md"},r=s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-hidden":"true"},"#")],-1),c=s("p",null,[a("播放器的事件分为两种,一种视频的 "),s("code",nuLine truncated
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">video:canplay</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">video:canplay</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><p>只监听一次事件:</p>`,2),F=s("div",{className:"run-code"},"▶ Run Code",-1),i=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">once</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">video:canplay</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">video:canplay</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><p>手动触发事件:</p>`,2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">emit</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">focus</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>移除事件:</p>`,2),d=s("div",{className:"run-code"},"▶ Run Code",-1),u=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> onReady </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">off</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">onReady</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> onReady)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">全部事件请参考以下地址:</p><p><a href="https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/events.d.ts" target="_blank" rel="noreferrer">artplayer/types/events.d.ts</a></p></div><h2 id="ready" tabindex="-1"><code>ready</code> <a class="header-anchor" href="#ready" aria-hidden="true">#</a></h2><p>当播放器首次可以播放器时触发</p>`,4),b=s("div",{className:"run-code"},"▶ Run Code",-1),h=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="restart" tabindex="-1"><code>restart</code> <a class="header-anchor" href="#restart" aria-hidden="true">#</a></h2><p>当播放器切换地址后并可以播放时触发</p>`,3),m=s("div",{className:"run-code"},"▶ Run Code",-1),_=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">restart</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">restart</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="pause" tabindex="-1"><code>pause</code> <a class="header-anchor" href="#pause" aria-hidden="true">#</a></h2><p>当播放器暂停时触发</p>`,3),v=s("div",{className:"run-code"},"▶ Run Code",-1),g=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="play" tabindex="-1"><code>play</code> <a class="header-anchor" href="#play" aria-hidden="true">#</a></h2><p>当播放器播放时触发</p>`,3),E=s("div",{className:"run-code"},"▶ Run Code",-1),T=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">play</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">play</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="hotkey" tabindex="-1"><code>hotkey</code> <a class="header-anchor" href="#hotkey" aria-hidden="true">#</a></h2><p>当播放器热键被按下时触发</p>`,3),f=s("div",{className:"run-code"},"▶ Run Code",-1),k=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">hotkey</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">hotkey</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="destroy" tabindex="-1"><code>destroy</code> <a class="header-anchor" href="#destroy" aria-hidden="true">#</a></h2><p>当播放器销毁时触发</p>`,3),S=s("div",{className:"run-code"},"▶ Run Code",-1),w=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">destroy</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">destroy</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="url" tabindex="-1"><code>url</code> <a class="header-anchor" href="#url" aria-hidden="true">#</a></h2><p>当视频地址变化时触发</p>`,3),R=s("div",{className:"run-code"},"▶ Run Code",-1),N=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4?t=0</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">url</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">url</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="focus" tabindex="-1"><code>focus</code> <a class="header-anchor" href="#focus" aria-hidden="true">#</a></h2><p>当播放器获得焦点时触发</p>`,3),V=s("div",{className:"run-code"},"▶ Run Code",-1),P=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">focus</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">focus</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="blur" tabindex="-1"><code>blur</code> <a class="header-anchor" href="#blur" aria-hidden="true">#</a></h2><p>当播放器失去焦点时触发</p>`,3),j=s("div",{className:"run-code"},"▶ Run Code",-1),I=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">blur</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">blur</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="dblclick" tabindex="-1"><code>dblclick</code> <a class="header-anchor" href="#dblclick" aria-hidden="true">#</a></h2><p>当播放器被双击时触发</p>`,3),x=s("div",{className:"run-code"},"▶ Run Code",-1),z=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">dblclick</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">dblclick</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="click" tabindex="-1"><code>click</code> <a class="header-anchor" href="#click" aria-hidden="true">#</a></h2><p>当播放器被单击时触发</p>`,3),O=s("div",{className:"run-code"},"▶ Run Code",-1),U=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="error" tabindex="-1"><code>error</code> <a class="header-anchor" href="#error" aria-hidden="true">#</a></h2><p>当播放器加载视频发生错误时触发</p>`,3),H=s("div",{className:"run-code"},"▶ Run Code",-1),W=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/404.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">error</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">reconnectTime</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">error</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">reconnectTime</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="hover" tabindex="-1"><code>hover</code> <a class="header-anchor" href="#hover" aria-hidden="true">#</a></h2><p>当播放器被鼠标移出或者移入时触发</p>`,3),L=s("div",{className:"run-code"},"▶ Run Code",-1),$=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">hover</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">hover</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="mousemove" tabindex="-1"><code>mousemove</code> <a class="header-anchor" href="#mousemove" aria-hidden="true">#</a></h2><p>当播放器被鼠标经过时触发</p>`,3),B=s("div",{className:"run-code"},"▶ Run Code",-1),J=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">mousemove</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">mousemove</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="resize" tabindex="-1"><code>resize</code> <a class="header-anchor" href="#resize" aria-hidden="true">#</a></h2><p>当播放器尺寸变化时触发</p>`,3),q=s("div",{className:"run-code"},"▶ Run Code",-1),G=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">resize</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">resize</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="view" tabindex="-1"><code>view</code> <a class="header-anchor" href="#view" aria-hidden="true">#</a></h2><p>当播放器出现在视口时触发</p>`,3),K=s("div",{className:"run-code"},"▶ Run Code",-1),M=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">view</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">view</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="aspectratio" tabindex="-1"><code>aspectRatio</code> <a class="header-anchor" href="#aspectratio" aria-hidden="true">#</a></h2><p>当播放器长宽比变化时触发</p>`,3),Q=s("div",{className:"run-code"},"▶ Run Code",-1),X=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">aspectRatio</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">aspectRatio</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">aspectRatio</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">aspectRatio</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">aspectRatio</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="autoheight" tabindex="-1"><code>autoHeight</code> <a class="header-anchor" href="#autoheight" aria-hidden="true">#</a></h2><p>当播放器自动设置高度时触发</p>`,3),Y=s("div",{className:"run-code"},"▶ Run Code",-1),Z=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoHeight</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">autoHeight</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">height</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">autoHeight</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">height</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="autosize" tabindex="-1"><code>autoSize</code> <a class="header-anchor" href="#autosize" aria-hidden="true">#</a></h2><p>当播放器自动设置尺寸时触发</p>`,3),ss=s("div",{className:"run-code"},"▶ Run Code",-1),ns=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">autoSize</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">autoSize</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">autoSize</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="flip" tabindex="-1"><code>flip</code> <a class="header-anchor" href="#flip" aria-hidden="true">#</a></h2><p>当播放器发生翻转时触发</p>`,3),as=s("div",{className:"run-code"},"▶ Run Code",-1),ls=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">flip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">flip</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">flip</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">flip</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">flip</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="fullscreen" tabindex="-1"><code>fullscreen</code> <a class="header-anchor" href="#fullscreen" aria-hidden="true">#</a></h2><p>当播放器发生窗口全屏时触发</p>`,3),ps=s("div",{className:"run-code"},"▶ Run Code",-1),es=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">fullscreen</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">fullscreen</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">fullscreen</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="fullscreenweb" tabindex="-1"><code>fullscreenWeb</code> <a class="header-anchor" href="#fullscreenweb" aria-hidden="true">#</a></h2><p>当播放器发生网页全屏时触发</p>`,3),os=s("div",{className:"run-code"},"▶ Run Code",-1),rs=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">fullscreenWeb</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">fullscreenWeb</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">fullscreenWeb</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="mini" tabindex="-1"><code>mini</code> <a class="header-anchor" href="#mini" aria-hidden="true">#</a></h2><p>当播放器进入迷你模式时触发</p>`,3),cs=s("div",{className:"run-code"},"▶ Run Code",-1),ts=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mini</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">mini</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">mini</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="pip" tabindex="-1"><code>pip</code> <a class="header-anchor" href="#pip" aria-hidden="true">#</a></h2><p>当播放器进入画中画时触发</p>`,3),Ds=s("div",{className:"run-code"},"▶ Run Code",-1),ys=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">pip</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">pip</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">pip</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">state</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="screenshot" tabindex="-1"><code>screenshot</code> <a class="header-anchor" href="#screenshot" aria-hidden="true">#</a></h2><p>当播放器被截图时触发</p>`,3),Fs=s("div",{className:"run-code"},"▶ Run Code",-1),is=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">screenshot</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">screenshot</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">dataUri</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">screenshot</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">dataUri</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="seek" tabindex="-1"><code>seek</code> <a class="header-anchor" href="#seek" aria-hidden="true">#</a></h2><p>当播放器发生时间跳转时触发</p>`,3),As=s("div",{className:"run-code"},"▶ Run Code",-1),Cs=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">seek</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">currentTime</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">seek</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">currentTime</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="subtitleoffset" tabindex="-1"><code>subtitleOffset</code> <a class="header-anchor" href="#subtitleoffset" aria-hidden="true">#</a></h2><p>当播放器发生字幕偏移时触发</p>`,3),ds=s("div",{className:"run-code"},"▶ Run Code",-1),us=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">subtitleOffset</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">subtitle</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/subtitle.srt</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">subtitleOffset</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">offset</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">subtitleOffset</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">offset</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="subtitleupdate" tabindex="-1"><code>subtitleUpdate</code> <a class="header-anchor" href="#subtitleupdate" aria-hidden="true">#</a></h2><p>当字幕更新时触发</p>`,3),bs=s("div",{className:"run-code"},"▶ Run Code",-1),hs=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">subtitle</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/subtitle.srt</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">subtitleUpdate</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">text</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">subtitleUpdate</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">text</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="subtitleload" tabindex="-1"><code>subtitleLoad</code> <a class="header-anchor" href="#subtitleload" aria-hidden="true">#</a></h2><p>当字幕加载时触发</p>`,3),ms=s("div",{className:"run-code"},"▶ Run Code",-1),_s=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">subtitle</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/subtitle.srt</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">subtitleLoad</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">subtitleLoad</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="subtitleswitch" tabindex="-1"><code>subtitleSwitch</code> <a class="header-anchor" href="#subtitleswitch" aria-hidden="true">#</a></h2><p>当字幕切换时触发</p>`,3),vs=s("div",{className:"run-code"},"▶ Run Code",-1),gs=n(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">subtitle</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/subtitle.srt</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">subtitle</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/subtitle.ass</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">subtitleSwitch</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">subtitleSwitch</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="video-canplay" tabindex="-1"><code>video:canplay</code> <a class="header-anchor" href="#video-canplay" aria-hidden="true">#</a></h2><p>浏览器可以播放媒体文件了,但估计没有足够的数据来支撑播放到结束,不必停下来进一步缓冲内容</p><h2 id="video-canplaythrough" tabindex="-1"><code>video:canplaythrough</code> <a class="header-anchor" href="#video-canplaythrough" aria-hidden="true">#</a></h2><p>浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束</p><h2 id="video-complete" tabindex="-1"><code>video:complete</code> <a class="header-anchor" href="#video-complete" aria-hidden="true">#</a></h2><p>OfflineAudioContext 渲染完成</p><h2 id="video-durationchange" tabindex="-1"><code>video:durationchange</code> <a class="header-anchor" href="#video-durationchange" aria-hidden="true">#</a></h2><p>duration 属性的值改变时触发</p><h2 id="video-emptied" tabindex="-1"><code>video:emptied</code> <a class="header-anchor" href="#video-emptied" aria-hidden="true">#</a></h2><p>媒体内容变为空;例如,当这个 media 已经加载完成(或者部分加载完成),则发送此事件,并调用 load() 方法重新加载它</p><h2 id="video-ended" tabindex="-1"><code>video:ended</code> <a class="header-anchor" href="#video-ended" aria-hidden="true">#</a></h2><p>视频停止播放,因为 media 已经到达结束点</p><h2 id="video-error" tabindex="-1"><code>video:error</code> <a class="header-anchor" href="#video-error" aria-hidden="true">#</a></h2><p>获取媒体数据时出错,或者资源类型不是受支持的媒体格式</p><h2 id="video-loadeddata" tabindex="-1"><code>video:loadeddata</code> <a class="header-anchor" href="#video-loadeddata" aria-hidden="true">#</a></h2><p>media 中的首帧已经完成加载</p><h2 id="video-loadedmetadata" tabindex="-1"><code>video:loadedmetadata</code> <a class="header-anchor" href="#video-loadedmetadata" aria-hidden="true">#</a></h2><p>已加载元数据</p><h2 id="video-pause" tabindex="-1"><code>video:pause</code> <a class="header-anchor" href="#video-pause" aria-hidden="true">#</a></h2><p>播放已暂停</p><h2 id="video-play" tabindex="-1"><code>video:play</code> <a class="header-anchor" href="#video-play" aria-hidden="true">#</a></h2><p>播放已开始</p><h2 id="video-playing" tabindex="-1"><code>video:playing</code> <a class="header-anchor" href="#video-playing" aria-hidden="true">#</a></h2><p>由于缺乏数据而暂停或延迟后,播放准备开始</p><h2 id="video-progress" tabindex="-1"><code>video:progress</code> <a class="header-anchor" href="#video-progress" aria-hidden="true">#</a></h2><p>在浏览器加载资源时周期性触发</p><h2 id="video-ratechange" tabindex="-1"><code>video:ratechange</code> <a class="header-anchor" href="#video-ratechange" aria-hidden="true">#</a></h2><p>播放速率发生变化</p><h2 id="video-seeked" tabindex="-1"><code>video:seeked</code> <a class="header-anchor" href="#video-seeked" aria-hidden="true">#</a></h2><p>跳帧(seek)操作完成</p><h2 id="video-seeking" tabindex="-1"><code>video:seeking</code> <a class="header-anchor" href="#video-seeking" aria-hidden="true">#</a></h2><p>跳帧(seek)操作开始</p><h2 id="video-stalled" tabindex="-1"><code>video:stalled</code> <a class="header-anchor" href="#video-stalled" aria-hidden="true">#</a></h2><p>用户代理(user agent)正在尝试获取媒体数据,但数据意外未出现</p><h2 id="video-suspend" tabindex="-1"><code>video:suspend</code> <a class="header-anchor" href="#video-suspend" aria-hidden="true">#</a></h2><p>媒体数据加载已暂停</p><h2 id="video-timeupdate" tabindex="-1"><code>video:timeupdate</code> <a class="header-anchor" href="#video-timeupdate" aria-hidden="true">#</a></h2><p>currentTime 属性指定的时间发生变化</p><h2 id="video-volumechange" tabindex="-1"><code>video:volumechange</code> <a class="header-anchor" href="#video-volumechange" aria-hidden="true">#</a></h2><p>音量发生变化</p><h2 id="video-waiting" tabindex="-1"><code>video:waiting</code> <a class="header-anchor" href="#video-waiting" aria-hidden="true">#</a></h2><p>由于暂时缺少数据,播放已停止</p>`,43),Es=[r,c,t,D,y,F,i,A,C,d,u,b,h,m,_,v,g,E,T,f,k,S,w,R,N,V,P,j,I,x,z,O,U,H,W,L,$,B,J,q,G,Line truncated
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as l,c as p,o as e,b as s,d as a,a as n}from"./app.acdc77a1.js";const Ps=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[{"level":2,"title":"ready","slug":"ready","link":"#ready","children":[]},{"level":2,"title":"restart","slug":"restart","link":"#restart","children":[]},{"level":2,"title":"pause","slug":"pause","link":"#pause","children":[]},{"level":2,"title":"play","slug":"play","link":"#play","children":[]},{"level":2,"title":"hotkey","slug":"hotkey","link":"#hotkey","children":[]},{"level":2,"title":"destroy","slug":"destroy","link":"#destroy","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"focus","slug":"focus","link":"#focus","children":[]},{"level":2,"title":"blur","slug":"blur","link":"#blur","children":[]},{"level":2,"title":"dblclick","slug":"dblclick","link":"#dblclick","children":[]},{"level":2,"title":"click","slug":"click","link":"#click","children":[]},{"level":2,"title":"error","slug":"error","link":"#error","children":[]},{"level":2,"title":"hover","slug":"hover","link":"#hover","children":[]},{"level":2,"title":"mousemove","slug":"mousemove","link":"#mousemove","children":[]},{"level":2,"title":"resize","slug":"resize","link":"#resize","children":[]},{"level":2,"title":"view","slug":"view","link":"#view","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"autoHeight","slug":"autoheight","link":"#autoheight","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"mini","slug":"mini","link":"#mini","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"seek","slug":"seek","link":"#seek","children":[]},{"level":2,"title":"subtitleOffset","slug":"subtitleoffset","link":"#subtitleoffset","children":[]},{"level":2,"title":"subtitleUpdate","slug":"subtitleupdate","link":"#subtitleupdate","children":[]},{"level":2,"title":"subtitleLoad","slug":"subtitleload","link":"#subtitleload","children":[]},{"level":2,"title":"subtitleSwitch","slug":"subtitleswitch","link":"#subtitleswitch","children":[]},{"level":2,"title":"video:canplay","slug":"video-canplay","link":"#video-canplay","children":[]},{"level":2,"title":"video:canplaythrough","slug":"video-canplaythrough","link":"#video-canplaythrough","children":[]},{"level":2,"title":"video:complete","slug":"video-complete","link":"#video-complete","children":[]},{"level":2,"title":"video:durationchange","slug":"video-durationchange","link":"#video-durationchange","children":[]},{"level":2,"title":"video:emptied","slug":"video-emptied","link":"#video-emptied","children":[]},{"level":2,"title":"video:ended","slug":"video-ended","link":"#video-ended","children":[]},{"level":2,"title":"video:error","slug":"video-error","link":"#video-error","children":[]},{"level":2,"title":"video:loadeddata","slug":"video-loadeddata","link":"#video-loadeddata","children":[]},{"level":2,"title":"video:loadedmetadata","slug":"video-loadedmetadata","link":"#video-loadedmetadata","children":[]},{"level":2,"title":"video:pause","slug":"video-pause","link":"#video-pause","children":[]},{"level":2,"title":"video:play","slug":"video-play","link":"#video-play","children":[]},{"level":2,"title":"video:playing","slug":"video-playing","link":"#video-playing","children":[]},{"level":2,"title":"video:progress","slug":"video-progress","link":"#video-progress","children":[]},{"level":2,"title":"video:ratechange","slug":"video-ratechange","link":"#video-ratechange","children":[]},{"level":2,"title":"video:seeked","slug":"video-seeked","link":"#video-seeked","children":[]},{"level":2,"title":"video:seeking","slug":"video-seeking","link":"#video-seeking","children":[]},{"level":2,"title":"video:stalled","slug":"video-stalled","link":"#video-stalled","children":[]},{"level":2,"title":"video:suspend","slug":"video-suspend","link":"#video-suspend","children":[]},{"level":2,"title":"video:timeupdate","slug":"video-timeupdate","link":"#video-timeupdate","children":[]},{"level":2,"title":"video:volumechange","slug":"video-volumechange","link":"#video-volumechange","children":[]},{"level":2,"title":"video:waiting","slug":"video-waiting","link":"#video-waiting","children":[]}],"relativePath":"advanced/event.md","lastUpdated":1673438559000}'),o={name:"advanced/event.md"},r=s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-hidden":"true"},"#")],-1),c=s("p",null,[a("播放器的事件分为两种,一种视频的 "),s("code",nuLine truncated
|
||||
@@ -0,0 +1,102 @@
|
||||
import{_ as l,c as p,o,b as s,d as n,a}from"./app.acdc77a1.js";const v=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/plugin.md","lastUpdated":1673438559000}'),e={name:"advanced/plugin.md"},r=s("h1",{id:"编写插件",tabindex:"-1"},[n("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-hidden":"true"},"#")],-1),c=s("p",null,[n("但你已经知道播放器的"),s("code",null,"属性"),n(", "),s("code",null,"方法"),n("和"),s("code",null,"事件"),n("后,再编写插件是非常简单的事")],-1),t=s("p",null,"可以在实例化的时候加载插件的函数",-1),F=s("div",{className:"run-code"},"▶ Run Code",-1),D=a(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">myPlugin</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">myPlugin</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> something</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">something</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">doSomething</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">doSomething</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [myPlugin]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">myPlugin</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><p>可以在实例化之后再加载插件的函数</p>`,2),y=s("div",{className:"run-code"},"▶ Run Code",-1),i=a(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">myPlugin</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">myPlugin</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> something</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">something</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">doSomething</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">doSomething</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(myPlugin)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">myPlugin</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><p>例如我想写一个在视频暂停后,显示一个图片广告的插件</p>`,2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">adsPlugin</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">option</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">layers</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ads</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> html</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;"><img style="width: 100px" src="</span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">option</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">"></span><span style="color:#89DDFF;">\`</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> style</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> display</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">none</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> position</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">absolute</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> top</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">20px</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> right</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">20px</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">show</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">layers</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">ads</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">style</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">display</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">block</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">hide</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">layers</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">ads</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">style</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">display</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">none</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">controls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">hide-ads</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> position</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> html</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Hide Ads</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> tooltip</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Hide Ads</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> click</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hide</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> style</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> marginRight</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">20px</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">controls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">show-ads</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> position</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> html</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Show Ads</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> tooltip</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Show Ads</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> click</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">show</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">play</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hide</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">adsPlugin</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">show</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hide</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">adsPlugin</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/layer.png</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br></div></div>`,1),b=[r,c,t,F,D,y,i,A,C];function u(m,d,h,_,g,E){return o(),p("div",null,b)}const T=l(e,[["render",u]]);export{v as __pageData,T as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as l,c as p,o,b as s,d as n,a}from"./app.acdc77a1.js";const v=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/plugin.md","lastUpdated":1673438559000}'),e={name:"advanced/plugin.md"},r=s("h1",{id:"编写插件",tabindex:"-1"},[n("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-hidden":"true"},"#")],-1),c=s("p",null,[n("但你已经知道播放器的"),s("code",null,"属性"),n(", "),s("code",null,"方法"),n("和"),s("code",null,"事件"),n("后,再编写插件是非常简单的事")],-1),t=s("p",null,"可以在实例化的时候加载插件的函数",-1),F=s("div",{className:"run-code"},"▶ Run Code",-1),D=a("",2),y=s("div",{className:"run-code"},"▶ Run Code",-1),i=a("",2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a("",1),b=[r,c,t,F,D,y,i,A,C];function u(m,d,h,_,g,E){return o(),p("div",null,b)}const T=l(e,[["render",u]]);export{v as __pageData,T as default};
|
||||
@@ -0,0 +1,394 @@
|
||||
import{_ as a,c as l,o as p,a as s,b as n}from"./app.acdc77a1.js";const Ls=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"play","slug":"play","link":"#play","children":[]},{"level":2,"title":"pause","slug":"pause","link":"#pause","children":[]},{"level":2,"title":"toggle","slug":"toggle","link":"#toggle","children":[]},{"level":2,"title":"destroy","slug":"destroy","link":"#destroy","children":[]},{"level":2,"title":"seek","slug":"seek","link":"#seek","children":[]},{"level":2,"title":"forward","slug":"forward","link":"#forward","children":[]},{"level":2,"title":"backward","slug":"backward","link":"#backward","children":[]},{"level":2,"title":"volume","slug":"volume","link":"#volume","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"switchUrl","slug":"switchurl","link":"#switchurl","children":[]},{"level":2,"title":"switchQuality","slug":"switchquality","link":"#switchquality","children":[]},{"level":2,"title":"muted","slug":"muted","link":"#muted","children":[]},{"level":2,"title":"currentTime","slug":"currenttime","link":"#currenttime","children":[]},{"level":2,"title":"duration","slug":"duration","link":"#duration","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"getDataURL","slug":"getdataurl","link":"#getdataurl","children":[]},{"level":2,"title":"getBlobUrl","slug":"getbloburl","link":"#getbloburl","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"poster","slug":"poster","link":"#poster","children":[]},{"level":2,"title":"mini","slug":"mini","link":"#mini","children":[]},{"level":2,"title":"playing","slug":"playing","link":"#playing","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"rect","slug":"rect","link":"#rect","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"playbackRate","slug":"playbackrate","link":"#playbackrate","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"loop","slug":"loop","link":"#loop","children":[]},{"level":2,"title":"autoHeight","slug":"autoheight","link":"#autoheight","children":[]},{"level":2,"title":"attr","slug":"attr","link":"#attr","children":[]},{"level":2,"title":"title","slug":"title","link":"#title","children":[]},{"level":2,"title":"type","slug":"type","link":"#type","children":[]},{"level":2,"title":"theme","slug":"theme","link":"#theme","children":[]},{"level":2,"title":"airplay","slug":"airplay","link":"#airplay","children":[]},{"level":2,"title":"loaded","slug":"loaded","link":"#loaded","children":[]},{"level":2,"title":"played","slug":"played","link":"#played","children":[]},{"level":2,"title":"proxy","slug":"proxy","link":"#proxy","children":[]},{"level":2,"title":"query","slug":"query","link":"#query","children":[]},{"level":2,"title":"video","slug":"video","link":"#video","children":[]}],"relativePath":"advanced/property.md","lastUpdated":1673438559000}'),o={name:"advanced/property.md"},e=s('<h1 id="实例属性" tabindex="-1">实例属性 <a class="header-anchor" href="#实例属性" aria-hidden="true">#</a></h1><p>这里的 <code>实例属性</code> 是指挂载在 <code>实例</code> 的 <code>一级属性</code>,比较常用</p><h2 id="play" tabindex="-1"><code>play</code> <a class="header-anchor" href="#play" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>播放视频</p>',5),r=n("div",{className:"run-code"},"▶ Run Code",-1),c=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">muted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">play</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="pause" tabindex="-1"><code>pause</code> <a class="header-anchor" href="#pause" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>暂停视频</p>`,4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">muted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">play</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">pause</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="toggle" tabindex="-1"><code>toggle</code> <a class="header-anchor" href="#toggle" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>切换视频的播放和暂停</p>`,4),y=n("div",{className:"run-code"},"▶ Run Code",-1),F=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">muted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toggle</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toggle</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="destroy" tabindex="-1"><code>destroy</code> <a class="header-anchor" href="#destroy" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li><li>Parameter: <code>Boolean</code></li></ul><p>销毁播放器,接受一个参数表示是否销毁后同时移除播放器的 <code>html</code>,默认为 <code>true</code></p>`,4),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="seek" tabindex="-1"><code>seek</code> <a class="header-anchor" href="#seek" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter</code></li><li>Parameter: <code>Number</code></li></ul><p>视频时间跳转,单位秒</p>`,4),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">seek</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="forward" tabindex="-1"><code>forward</code> <a class="header-anchor" href="#forward" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter</code></li><li>Parameter: <code>Number</code></li></ul><p>视频时间快进,单位秒</p>`,4),u=n("div",{className:"run-code"},"▶ Run Code",-1),b=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">forward</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="backward" tabindex="-1"><code>backward</code> <a class="header-anchor" href="#backward" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter</code></li><li>Parameter: <code>Number</code></li></ul><p>视频时间快退,单位秒</p>`,4),h=n("div",{className:"run-code"},"▶ Run Code",-1),m=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">seek</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">backward</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="volume" tabindex="-1"><code>volume</code> <a class="header-anchor" href="#volume" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Number</code></li></ul><p>设置和获取视频音量,范围在:<code>[0, 1]</code></p>`,4),_=n("div",{className:"run-code"},"▶ Run Code",-1),g=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">volume</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">volume</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0.5</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">volume</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="url" tabindex="-1"><code>url</code> <a class="header-anchor" href="#url" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>设置和获取视频地址</p>`,4),v=n("div",{className:"run-code"},"▶ Run Code",-1),T=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4?t=0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="switchurl" tabindex="-1"><code>switchUrl</code> <a class="header-anchor" href="#switchurl" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li><li>Parameter: <code>String</code></li></ul><p>设置视频地址,设置时和 <code>url</code> 类似,但会执行一些优化操作</p><p>函数支持两个参数,第一个为新的视频地址,第二个为可选新的视频名字</p>`,5),E=n("div",{className:"run-code"},"▶ Run Code",-1),S=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">seek</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">switchUrl</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4?t=0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">新视频名字</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="switchquality" tabindex="-1"><code>switchQuality</code> <a class="header-anchor" href="#switchquality" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li><li>Parameter: <code>String</code></li></ul><p>设置视频画质地址,和 <code>switchUrl</code> 类似,但会带上之前的播放进度</p><p>函数支持两个参数,第一个为新的视频地址,第二个为可选新的视频名字</p>`,5),k=n("div",{className:"run-code"},"▶ Run Code",-1),f=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">seek</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">switchQuality</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4?t=0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">新视频地址</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="muted" tabindex="-1"><code>muted</code> <a class="header-anchor" href="#muted" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>设置和获取视频是否静音</p>`,4),w=n("div",{className:"run-code"},"▶ Run Code",-1),P=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">muted</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">muted</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">muted</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="currenttime" tabindex="-1"><code>currentTime</code> <a class="header-anchor" href="#currenttime" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Number</code></li></ul><p>设置和获取视频当前时间,设置时间时和 <code>seek</code> 类似,但它不会触发额外的事件</p>`,4),R=n("div",{className:"run-code"},"▶ Run Code",-1),N=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentTime</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentTime</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentTime</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="duration" tabindex="-1"><code>duration</code> <a class="header-anchor" href="#duration" aria-hidden="true">#</a></h2><ul><li>Type: <code>Getter</code></li></ul><p>获取视频时长</p>`,4),I=n("div",{className:"run-code"},"▶ Run Code",-1),V=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">duration</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>有的视频是没有时长的,例如直播中的视频或者没被解码完成的视频,这个时候获取的时长会是 <code>0</code></p></div><h2 id="screenshot" tabindex="-1"><code>screenshot</code> <a class="header-anchor" href="#screenshot" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>下载当前视频帧的截图</p>`,5),j=n("div",{className:"run-code"},"▶ Run Code",-1),x=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">screenshot</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="getdataurl" tabindex="-1"><code>getDataURL</code> <a class="header-anchor" href="#getdataurl" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>获取当前视频帧的截图的<code>base64</code>地址,返回的是一个 <code>Promise</code></p>`,4),G=n("div",{className:"run-code"},"▶ Run Code",-1),B=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">async</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getDataURL</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="getbloburl" tabindex="-1"><code>getBlobUrl</code> <a class="header-anchor" href="#getbloburl" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>获取当前视频帧的截图的<code>blob</code>地址,返回的是一个 <code>Promise</code></p>`,4),q=n("div",{className:"run-code"},"▶ Run Code",-1),z=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">async</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getBlobUrl</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="fullscreen" tabindex="-1"><code>fullscreen</code> <a class="header-anchor" href="#fullscreen" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>设置和获取播放器窗口全屏</p>`,4),U=n("div",{className:"run-code"},"▶ Run Code",-1),L=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">controls</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">全屏开关</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fullscreen</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fullscreen</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>由于浏览器安全机制,触发窗口全屏前,页面必须先存在交互(例如用户点击过页面)</p></div><h2 id="fullscreenweb" tabindex="-1"><code>fullscreenWeb</code> <a class="header-anchor" href="#fullscreenweb" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>设置和获取播放器网页全屏</p>`,5),O=n("div",{className:"run-code"},"▶ Run Code",-1),W=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">fullscreenWeb</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fullscreenWeb</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fullscreenWeb</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="pip" tabindex="-1"><code>pip</code> <a class="header-anchor" href="#pip" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>设置和获取播放器画中画模式</p>`,4),H=n("div",{className:"run-code"},"▶ Run Code",-1),$=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">controls</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">PIP</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">pip</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">pip</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>由于浏览器安全机制,触发画中画前,页面必须先存在交互(例如用户点击过页面)</p></div><h2 id="poster" tabindex="-1"><code>poster</code> <a class="header-anchor" href="#poster" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>设置和获取视频海报,只有在视频播放前才能看到海报效果</p>`,5),M=n("div",{className:"run-code"},"▶ Run Code",-1),Q=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">poster</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/poster.jpg</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">poster</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">poster</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/poster.jpg?t=0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">poster</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="mini" tabindex="-1"><code>mini</code> <a class="header-anchor" href="#mini" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>设置和获取播放器迷你模式</p>`,4),J=n("div",{className:"run-code"},"▶ Run Code",-1),K=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mini</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="playing" tabindex="-1"><code>playing</code> <a class="header-anchor" href="#playing" aria-hidden="true">#</a></h2><ul><li>Type: <code>Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>获取视频是否正在播放中</p>`,4),X=n("div",{className:"run-code"},"▶ Run Code",-1),Y=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">muted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">playing</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="autosize" tabindex="-1"><code>autoSize</code> <a class="header-anchor" href="#autosize" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>设置视频是否自适应尺寸,设置为 <code>true</code> 之后它会只执行一次</p>`,4),Z=n("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoSize</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoSize</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoSize</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="rect" tabindex="-1"><code>rect</code> <a class="header-anchor" href="#rect" aria-hidden="true">#</a></h2><ul><li>Type: <code>Getter</code></li></ul><p>获取播放器的尺寸和坐标信息</p>`,4),ns=n("div",{className:"run-code"},"▶ Run Code",-1),as=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">JSON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">rect</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>尺寸和坐标信息是通过 <code>getBoundingClientRect</code> 获取的</p></div><h2 id="flip" tabindex="-1"><code>flip</code> <a class="header-anchor" href="#flip" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>设置和获取播放器翻转,支持<code>normal</code>, <code>horizontal</code>, <code>vertical</code></p>`,5),ls=n("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">flip</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">flip</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">horizontal</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">flip</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="playbackrate" tabindex="-1"><code>playbackRate</code> <a class="header-anchor" href="#playbackrate" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Number</code></li></ul><p>设置和获取播放器播放速度</p>`,4),os=n("div",{className:"run-code"},"▶ Run Code",-1),es=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">playbackRate</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">playbackRate</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">playbackRate</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="aspectratio" tabindex="-1"><code>aspectRatio</code> <a class="header-anchor" href="#aspectratio" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>设置和获取播放器长宽比</p>`,4),rs=n("div",{className:"run-code"},"▶ Run Code",-1),cs=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">aspectRatio</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">aspectRatio</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">16:9</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">aspectRatio</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="loop" tabindex="-1"><code>loop</code> <a class="header-anchor" href="#loop" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Array</code></li></ul><p>设置和获取区间循序播放,单位秒</p>`,4),ts=n("div",{className:"run-code"},"▶ Run Code",-1),Ds=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loop</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loop</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> [</span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">10</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loop</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>删除区间循环播放,只需要设置 <code>loop</code> 为 <code>[]</code> 即可</p><p><code>art.loop</code> 与 <code>art.option.loop</code> 是两个不同的东西,请勿弄乱</p></div><h2 id="autoheight" tabindex="-1"><code>autoHeight</code> <a class="header-anchor" href="#autoheight" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>当容器只有宽度,该属性可以自动计算出并设置视频的高度,设置为 <code>true</code> 之后它会只执行一次</p>`,5),ys=n("div",{className:"run-code"},"▶ Run Code",-1),Fs=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoHeight</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">resize</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoHeight</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>当你的容器只有宽度,但不知道具体高度时,这个属性很有用,它能自动计算出视频的高度,但你需要确定设置这个属性的时机</p></div><h2 id="attr" tabindex="-1"><code>attr</code> <a class="header-anchor" href="#attr" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li><li>Parameter: <code>String</code></li></ul><p>动态获取和设置 video 元素的属性</p>`,5),is=n("div",{className:"run-code"},"▶ Run Code",-1),As=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">attr</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">playsInline</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">attr</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">playsInline</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">attr</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">playsInline</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="title" tabindex="-1"><code>title</code> <a class="header-anchor" href="#title" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>动态获取和设置播放器标题</p>`,4),Cs=n("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">title</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">title</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">新标题</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">title</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="type" tabindex="-1"><code>type</code> <a class="header-anchor" href="#type" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>动态获取和设置视频类型</p>`,4),us=n("div",{className:"run-code"},"▶ Run Code",-1),bs=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">type</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">type</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">m3u8</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">type</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="theme" tabindex="-1"><code>theme</code> <a class="header-anchor" href="#theme" aria-hidden="true">#</a></h2><ul><li>Type: <code>Setter/Getter</code></li><li>Parameter: <code>String</code></li></ul><p>动态获取和设置播放器主题颜色</p>`,4),hs=n("div",{className:"run-code"},"▶ Run Code",-1),ms=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">theme</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">theme</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#000</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">theme</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="airplay" tabindex="-1"><code>airplay</code> <a class="header-anchor" href="#airplay" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p>开启隔空播放</p>`,4),_s=n("div",{className:"run-code"},"▶ Run Code",-1),gs=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">controls</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">AirPlay</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">airplay</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="loaded" tabindex="-1"><code>loaded</code> <a class="header-anchor" href="#loaded" aria-hidden="true">#</a></h2><ul><li>Type: <code>Getter</code></li></ul><p>视频缓存的比例,范围是 <code>[0, 1]</code>,常配合 <code>video:timeupdate</code> 事件使用</p>`,4),vs=n("div",{className:"run-code"},"▶ Run Code",-1),Ts=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">video:timeupdate</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loaded</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="played" tabindex="-1"><code>played</code> <a class="header-anchor" href="#played" aria-hidden="true">#</a></h2><ul><li>Type: <code>Getter</code></li></ul><p>视频播放的比例,范围是 <code>[0, 1]</code>,常配合 <code>video:timeupdate</code> 事件使用</p>`,4),Es=n("div",{className:"run-code"},"▶ Run Code",-1),Ss=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">video:timeupdate</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">played</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="proxy" tabindex="-1"><code>proxy</code> <a class="header-anchor" href="#proxy" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p><code>DOM</code> 事件的代理函数,实质上代理了 <code>addEventListener</code> 和 <code>removeEventListener</code>, 当使用 <code>proxy</code> 来处理事件,播放器销毁时也会自动销毁该事件</p>`,4),ks=n("div",{className:"run-code"},"▶ Run Code",-1),fs=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> container </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> container</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">proxy</span><span style="color:#A6ACCD;">(container</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line highlighted"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>假如你需要一些 <code>DOM</code> 事件只存在于播放器的生命周期上时,强烈建议使用该函数,以避免造成内存泄漏</p></div><h2 id="query" tabindex="-1"><code>query</code> <a class="header-anchor" href="#query" aria-hidden="true">#</a></h2><ul><li>Type: <code>Function</code></li></ul><p><code>DOM</code> 的查询函数,类似 <code>document.querySelector</code>,但被查询的对象局限于当前播放器内,可以避免同类名的错误</p>`,5),ws=n("div",{className:"run-code"},"▶ Run Code",-1),Ps=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">query</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.art-video</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="video" tabindex="-1"><code>video</code> <a class="header-anchor" href="#video" aria-hidden="true">#</a></h2><ul><li>Type: <code>Element</code></li></ul><p>快捷返回播放器的 <code>video</code> 元素</p>`,4),Rs=n("div",{className:"run-code"},"▶ Run Code",-1),Ns=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">video)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div>`,1),Is=[e,r,c,t,D,y,F,i,A,C,d,u,b,h,m,_,g,v,T,E,S,k,f,w,P,R,N,I,V,j,x,G,B,q,z,U,L,O,W,H,$,M,Q,J,K,X,Y,Z,ss,ns,as,ls,ps,os,es,rs,cs,ts,Ds,ys,Fs,is,As,Cs,ds,us,bs,hs,ms,_s,gs,vs,Ts,Es,Ss,ks,fs,ws,Ps,Rs,Ns];function Vs(js,xs,Gs,Bs,qs,zs){return p(),l("div",null,Is)}const Os=a(o,[["render",Vs]]);export{Ls as __pageData,Os as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as a,c as l,o as p,a as s,b as n}from"./app.acdc77a1.js";const Ls=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[{"level":2,"title":"play","slug":"play","link":"#play","children":[]},{"level":2,"title":"pause","slug":"pause","link":"#pause","children":[]},{"level":2,"title":"toggle","slug":"toggle","link":"#toggle","children":[]},{"level":2,"title":"destroy","slug":"destroy","link":"#destroy","children":[]},{"level":2,"title":"seek","slug":"seek","link":"#seek","children":[]},{"level":2,"title":"forward","slug":"forward","link":"#forward","children":[]},{"level":2,"title":"backward","slug":"backward","link":"#backward","children":[]},{"level":2,"title":"volume","slug":"volume","link":"#volume","children":[]},{"level":2,"title":"url","slug":"url","link":"#url","children":[]},{"level":2,"title":"switchUrl","slug":"switchurl","link":"#switchurl","children":[]},{"level":2,"title":"switchQuality","slug":"switchquality","link":"#switchquality","children":[]},{"level":2,"title":"muted","slug":"muted","link":"#muted","children":[]},{"level":2,"title":"currentTime","slug":"currenttime","link":"#currenttime","children":[]},{"level":2,"title":"duration","slug":"duration","link":"#duration","children":[]},{"level":2,"title":"screenshot","slug":"screenshot","link":"#screenshot","children":[]},{"level":2,"title":"getDataURL","slug":"getdataurl","link":"#getdataurl","children":[]},{"level":2,"title":"getBlobUrl","slug":"getbloburl","link":"#getbloburl","children":[]},{"level":2,"title":"fullscreen","slug":"fullscreen","link":"#fullscreen","children":[]},{"level":2,"title":"fullscreenWeb","slug":"fullscreenweb","link":"#fullscreenweb","children":[]},{"level":2,"title":"pip","slug":"pip","link":"#pip","children":[]},{"level":2,"title":"poster","slug":"poster","link":"#poster","children":[]},{"level":2,"title":"mini","slug":"mini","link":"#mini","children":[]},{"level":2,"title":"playing","slug":"playing","link":"#playing","children":[]},{"level":2,"title":"autoSize","slug":"autosize","link":"#autosize","children":[]},{"level":2,"title":"rect","slug":"rect","link":"#rect","children":[]},{"level":2,"title":"flip","slug":"flip","link":"#flip","children":[]},{"level":2,"title":"playbackRate","slug":"playbackrate","link":"#playbackrate","children":[]},{"level":2,"title":"aspectRatio","slug":"aspectratio","link":"#aspectratio","children":[]},{"level":2,"title":"loop","slug":"loop","link":"#loop","children":[]},{"level":2,"title":"autoHeight","slug":"autoheight","link":"#autoheight","children":[]},{"level":2,"title":"attr","slug":"attr","link":"#attr","children":[]},{"level":2,"title":"title","slug":"title","link":"#title","children":[]},{"level":2,"title":"type","slug":"type","link":"#type","children":[]},{"level":2,"title":"theme","slug":"theme","link":"#theme","children":[]},{"level":2,"title":"airplay","slug":"airplay","link":"#airplay","children":[]},{"level":2,"title":"loaded","slug":"loaded","link":"#loaded","children":[]},{"level":2,"title":"played","slug":"played","link":"#played","children":[]},{"level":2,"title":"proxy","slug":"proxy","link":"#proxy","children":[]},{"level":2,"title":"query","slug":"query","link":"#query","children":[]},{"level":2,"title":"video","slug":"video","link":"#video","children":[]}],"relativePath":"advanced/property.md","lastUpdated":1673438559000}'),o={name:"advanced/property.md"},e=s("",5),r=n("div",{className:"run-code"},"▶ Run Code",-1),c=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",4),y=n("div",{className:"run-code"},"▶ Run Code",-1),F=s("",4),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s("",4),u=n("div",{className:"run-code"},"▶ Run Code",-1),b=s("",4),h=n("div",{className:"run-code"},"▶ Run Code",-1),m=s("",4),_=n("div",{className:"run-code"},"▶ Run Code",-1),g=s("",4),v=n("div",{className:"run-code"},"▶ Run Code",-1),T=s("",5),E=n("div",{className:"run-code"},"▶ Run Code",-1),S=s("",5),k=n("div",{className:"run-code"},"▶ Run Code",-1),f=s("",4),w=n("div",{className:"run-code"},"▶ Run Code",-1),P=s("",4),R=n("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),I=n("div",{className:"run-code"},"▶ Run Code",-1),V=s("",5),j=n("div",{className:"run-code"},"▶ Run Code",-1),x=s("",4),G=n("div",{className:"run-code"},"▶ Run Code",-1),B=s("",4),q=n("div",{className:"run-code"},"▶ Run Code",-1),z=s("",4),U=n("div",{className:"run-code"},"▶ Run Code",-1),L=s("",5),O=n("div",{className:"run-code"},"▶ Run Code",-1),W=s("",4),H=n("div",{className:"run-code"},"▶ Run Code",-1),$=s("",5),M=n("div",{className:"run-code"},"▶ Run Code",-1),Q=s("",4),J=n("div",{className:"run-code"},"▶ Run Code",-1),K=s("",4),X=n("div",{className:"run-code"},"▶ Run Code",-1),Y=s("",4),Z=n("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),ns=n("div",{className:"run-code"},"▶ Run Code",-1),as=s("",5),ls=n("div",{className:"run-code"},"Line truncated
|
||||
@@ -0,0 +1,8 @@
|
||||
function Qs(e,t){const n=Object.create(null),s=e.split(",");for(let o=0;o<s.length;o++)n[s[o]]=!0;return t?o=>!!n[o.toLowerCase()]:o=>!!n[o]}function ts(e){if(Q(e)){const t={};for(let n=0;n<e.length;n++){const s=e[n],o=be(s)?tl(s):ts(s);if(o)for(const i in o)t[i]=o[i]}return t}else{if(be(e))return e;if(ge(e))return e}}const Xr=/;(?![^(]*\))/g,Zr=/:([^]+)/,el=/\/\*.*?\*\//gs;function tl(e){const t={};return e.replace(el,"").split(Xr).forEach(n=>{if(n){const s=n.split(Zr);s.length>1&&(t[s[0].trim()]=s[1].trim())}}),t}function pe(e){let t="";if(be(e))t=e;else if(Q(e))for(let n=0;n<e.length;n++){const s=pe(e[n]);s&&(t+=s+" ")}else if(ge(e))for(const n in e)e[n]&&(t+=n+" ");return t.trim()}const nl="itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly",sl=Qs(nl);function Oi(e){return!!e||e===""}const ae=e=>be(e)?e:e==null?"":Q(e)||ge(e)&&(e.toString===Fi||!ne(e.toString))?JSON.stringify(e,Ni,2):String(e),Ni=(e,t)=>t&&t.__v_isRef?Ni(e,t.value):Ht(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[s,o])=>(n[`${s} =>`]=o,n),{})}:Bi(t)?{[`Set(${t.size})`]:[...t.values()]}:ge(t)&&!Q(t)&&!Di(t)?String(t):t,ve={},Bt=[],We=()=>{},ol=()=>!1,il=/^on[^a-z]/,wn=e=>il.test(e),Js=e=>e.startsWith("onUpdate:"),Pe=Object.assign,Xs=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},rl=Object.prototype.hasOwnProperty,ce=(e,t)=>rl.call(e,t),Q=Array.isArray,Ht=e=>ns(e)==="[object Map]",Bi=e=>ns(e)==="[object Set]",ne=e=>typeof e=="function",be=e=>typeof e=="string",Zs=e=>typeof e=="symbol",ge=e=>e!==null&&typeof e=="object",Hi=e=>ge(e)&&ne(e.then)&&ne(e.catch),Fi=Object.prototype.toString,ns=e=>Fi.call(e),ll=e=>ns(e).slice(8,-1),Di=e=>ns(e)==="[object Object]",eo=e=>be(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,rn=Qs(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),ss=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},cl=/-(\w)/g,st=ss(e=>e.replace(cl,(t,n)=>n?n.toUpperCase():"")),al=/\B([A-Z])/g,Yt=ss(e=>e.replace(al,"-$1").toLowerCase()),os=ss(e=>e.charAt(0).toUpperCase()+e.slice(1)),xs=ss(e=>e?`on${os(e)}`:""),pn=(e,t)=>!Object.is(e,t),Bn=(e,t)=>{for(let n=0;n<e.length;n++)e[n](t)},Rn=(e,t,n)=>{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},_n=e=>{const t=parseFloat(e);return isNaN(t)?e:t};let Mo;const ul=()=>Mo||(Mo=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});let Ne;class fl{constructor(t=!1){this.detached=t,this.active=!0,this.effects=[],this.cleanups=[],this.parent=Ne,!t&&Ne&&(this.index=(Ne.scopes||(Ne.scopes=[])).push(this)-1)}run(t){if(this.active){const n=Ne;try{return Ne=this,t()}finally{Ne=n}}}on(){Ne=this}off(){Ne=this.parent}stop(t){if(this.active){let n,s;for(n=0,s=this.effects.length;n<s;n++)this.effects[n].stop();for(n=0,s=this.cleanups.length;n<s;n++)this.cleanups[n]();if(this.scopes)for(n=0,s=this.scopes.length;n<s;n++)this.scopes[n].stop(!0);if(!this.detached&&this.parent&&!t){const o=this.parent.scopes.pop();o&&o!==this&&(this.parent.scopes[this.index]=o,o.index=this.index)}this.parent=void 0,this.active=!1}}}function dl(e,t=Ne){t&&t.active&&t.effects.push(e)}function hl(){return Ne}function pl(e){Ne&&Ne.cleanups.push(e)}const to=e=>{const t=new Set(e);return t.w=0,t.n=0,t},Ri=e=>(e.w&_t)>0,zi=e=>(e.n&_t)>0,_l=({deps:e})=>{if(e.length)for(let t=0;t<e.length;t++)e[t].w|=_t},ml=e=>{const{deps:t}=e;if(t.length){let n=0;for(let s=0;s<t.length;s++){const o=t[s];Ri(o)&&!zi(o)?o.delete(e):t[n++]=o,o.w&=~_t,o.n&=~_t}t.length=n}},Ms=new WeakMap;let on=0,_t=1;const Is=30;let qe;const Vt=Symbol(""),Os=Symbol("");class no{constructor(t,n=null,s){this.fn=t,this.scheduler=n,this.active=!0,this.deps=[],this.parent=void 0,dl(this,s)}run(){if(!this.active)return this.fn();let t=qe,n=ht;for(;t;){if(t===this)return;t=t.parent}try{return this.parent=qe,qe=this,ht=!0,_t=1<<++on,on<=Is?_l(this):Io(this),this.fn()}finally{on<=Is&&ml(this),_t=1<<--on,qe=this.parent,ht=n,this.parent=void 0,this.deferStop&&this.stop()}}stop(){qe===this?this.deferStop=!0:this.active&&(Io(this),this.onStop&&this.onStop(),this.active=!1)}}function Io(e){const{deps:t}=e;if(t.length){for(let n=0;n<t.length;n++)t[n].delete(e);t.length=0}}let ht=!0;const ji=[];function Qt(){ji.push(ht),ht=!1}function Jt(){const e=ji.pop();ht=e===void 0?!0:e}function Fe(e,t,n){if(ht&&qe){let s=Ms.get(e);s||Ms.set(e,s=new Map);let o=s.get(n);o||s.set(n,o=to()),Ui(o)}}function Ui(e,t){let n=!1;on<=Is?zi(e)||(e.n|=_t,n=!Ri(e)):n=!e.has(qe),n&&(e.add(qe),qe.deps.push(e))}function rt(e,t,n,s,o,i){const r=Ms.get(e);if(!r)return;let l=[];if(t==="clear")l=[...r.values()];else if(n==="length"&&Q(e)){const c=_n(s);r.forEach((a,f)=>{(f==="length"||f>=c)&&l.push(a)})}else switch(n!==void 0&&l.push(r.get(n)),t){case"add":Q(e)?eo(n)&&l.push(r.get("length")):(l.push(r.get(Vt)),Ht(e)&&l.push(r.get(Os)));break;case"delete":Q(e)||(l.push(r.get(Vt)),Ht(e)&&l.push(r.get(Os)));break;case"set":Line truncated
|
||||
-webkit-transition: none !important;
|
||||
-moz-transition: none !important;
|
||||
-o-transition: none !important;
|
||||
-ms-transition: none !important;
|
||||
transition: none !important;
|
||||
}`)),document.head.appendChild(m),s.value=_,l[_?"add":"remove"]("dark"),window.getComputedStyle(m).opacity,document.head.removeChild(m)}return f}return nt(s,r=>{n.value=r}),(r,l)=>(p(),ee(kd,{class:"VPSwitchAppearance","aria-label":"toggle dark mode","aria-checked":s.value,onClick:v(o)},{default:B(()=>[I(Ed,{class:"sun"}),I(Od,{class:"moon"})]),_:1},8,["aria-checked","onClick"]))}});const $o=H(Nd,[["__scopeId","data-v-481098f9"]]),Bd={key:0,class:"VPNavBarAppearance"},Hd=R({__name:"VPNavBarAppearance",setup(e){const{site:t}=ue();return(n,s)=>v(t).appearance?(p(),x("div",Bd,[I($o)])):K("",!0)}});const Fd=H(Hd,[["__scopeId","data-v-a3e7452b"]]),Dd={discord:'<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>',facebook:'<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>',github:'<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>',instagram:'<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1
Line truncated
|
||||
`),l=l.slice(0,-1),r&&(l=l.replace(/^ *(\$|>) /gm,"").trim()),b_(l).then(()=>{n.classList.add("copied"),clearTimeout(e.get(n));const c=setTimeout(()=>{n.classList.remove("copied"),n.blur(),e.delete(n)},2e3);e.set(n,c)})}})}}async function b_(e){try{return navigator.clipboard.writeText(e)}catch{const t=document.createElement("textarea"),n=document.activeElement;t.value=e,t.setAttribute("readonly",""),t.style.contain="strict",t.style.position="absolute",t.style.left="-9999px",t.style.fontSize="12pt";const s=document.getSelection(),o=s?s.rangeCount>0&&s.getRangeAt(0):null;document.body.appendChild(t),t.select(),t.selectionStart=0,t.selectionEnd=e.length,document.execCommand("copy"),document.body.removeChild(t),o&&(s.removeAllRanges(),s.addRange(o)),n&&n.focus()}}function x_(){Ee&&window.addEventListener("click",e=>{var n,s;const t=e.target;if(t.matches(".vp-code-group input")){const o=(n=t.parentElement)==null?void 0:n.parentElement,i=Array.from((o==null?void 0:o.querySelectorAll("input"))||[]).indexOf(t),r=o==null?void 0:o.querySelector('div[class*="language-"].active'),l=(s=o==null?void 0:o.querySelectorAll('div[class*="language-"]'))==null?void 0:s[i];r&&l&&r!==l&&(r.classList.remove("active"),l.classList.add("active"))}})}const Yr=Ut.NotFound||(()=>"404 Not Found"),w_=R({name:"VitePressApp",setup(){const{site:e}=ue();return Qe(()=>{nt(()=>e.value.lang,t=>{document.documentElement.lang=t},{immediate:!0})}),v_(),y_(),x_(),Ut.setup&&Ut.setup(),()=>Gn(Ut.Layout)}});function k_(){const e=P_(),t=$_();t.provide(Br,e);const n=Ka(e.route);return t.provide(Nr,n),t.provide("NotFound",Yr),t.component("Content",Qa),t.component("ClientOnly",g_),Object.defineProperty(t.config.globalProperties,"$frontmatter",{get(){return n.frontmatter.value}}),Ut.enhanceApp&&Ut.enhanceApp({app:t,router:e,siteData:Gt}),{app:t,router:e,data:n}}function $_(){return Ta(w_)}function P_(){let e=Ee,t;return Ga(n=>{let s=Or(n);return e&&(t=s),(e||t===s)&&(s=s.replace(/\.js$/,".lean.js")),Ee&&(e=!1),Ar(()=>import(s),[])},Yr)}if(Ee){const{app:e,router:t,data:n}=k_();t.go().then(()=>{u_(t.route,n.site),e.mount("#app")})}export{H as _,Dc as a,g as b,x as c,k_ as createApp,Le as d,p as o};
|
||||
@@ -0,0 +1,698 @@
|
||||
const t={map:'[{"高级属性":["0.0"],"option":["0.1","1.12","12.14"],"whitelist":["0.2","16.36"],"template":["0.3"],"events":["0.4"],"storage":["0.5"],"icons":["0.6","16.40"],"i18n":["0.7","16.44"],"notice":["0.8","1.15"],"layers":["0.9","15.1","16.29"],"controls":["0.10","15.2","16.32"],"contextmenu":["0.11","1.14","15.3","16.31"],"subtitle":["0.12","16.38"],"loading":["0.13"],"hotkey":["0.14","2.5","16.20"],"mask":["0.15"],"setting":["0.16","1.16","1.17","1.18","16.19"],"plugins":["0.17","16.35"],"静态属性":["1.0"],"instances":["1.1"],"version":["1.2"],"env":["1.3"],"build":["1.4"],"config":["1.5","12.11"],"utils":["1.6"],"scheme":["1.7"],"emitter":["1.8"],"validator":["1.9"],"kindof":["1.10"],"html":["1.11"],"debug":["1.13"],"indicator":["1.19","1.20","1.21","1.22"],"volume":["1.23","1.24","1.42","4.8","16.8"],"resize":["1.25","2.15"],"scroll":["1.26","1.27"],"auto":["1.28","1.29","1.30"],"reconnect":["1.31","1.32"],"control":["1.33"],"db":["1.34"],"mobile":["1.35","1.36","1.37"],"info":["1.38"],"fast":["1.39","1.40"],"touch":["1.41"],"seek":["1.43","2.26","4.5"],"progress":["1.44"],"playback":["1.45"],"aspect":["1.46"],"flip":["1.47","2.20","4.26","16.15"],"实例事件":["2.0"],"ready":["2.1"],"restart":["2.2"],"pause":["2.3","4.2"],"play":["2.4","4.1"],"destroy":["2.6","4.4"],"url":["2.7","4.9","16.2"],"focus":["2.8"],"blur":["2.9"],"dblclick":["2.10"],"click":["2.11"],"error":["2.12"],"hover":["2.13"],"mousemove":["2.14"],"view":["2.16"],"aspectratio":["2.17","4.28","16.17"],"autoheight":["2.18","4.30"],"autosize":["2.19","4.24","16.12"],"fullscreen":["2.21","4.18","16.23"],"fullscreenweb":["2.22","4.19","16.24"],"mini":["2.23","4.22"],"pip":["2.24","4.20","16.21"],"screenshot":["2.25","4.15","16.18"],"subtitleoffset":["2.27","16.25"],"subtitleupdate":["2.28"],"subtitleload":["2.29"],"subtitleswitch":["2.30"],"video":["2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","2.40","2.41","2.42","2.43","2.44","2.45","2.46","2.47","2.48","2.49","2.50","2.51","4.40"],"编写插件":["3.0"],"实例属性":["4.0"],"toggle":["4.3"],"forward":["4.6"],"backward":["4.7"],"switchurl":["4.10"],"switchquality":["4.11"],"muted":["4.12","16.10"],"currenttime":["4.13"],"duration":["4.14"],"getdataurl":["4.16"],"getbloburl":["4.17"],"poster":["4.21","16.5"],"playing":["4.23"],"rect":["4.25"],"playbackrate":["4.27","16.16"],"loop":["4.29","16.14"],"attr":["4.31"],"title":["4.32","16.6"],"type":["4.33","16.41"],"theme":["4.34","16.7"],"airplay":["4.35","16.49"],"loaded":["4.36"],"played":["4.37"],"proxy":["4.38"],"query":["4.39"],"wip":["5.0"],"安装使用":["6.0"],"安装":["6.1","10.2","11.2","12.2","13.2","14.3"],"cdn":["6.2","10.3","11.3","12.3","13.3","14.4"],"使用":["6.3","10.4","11.4","14.5"],"vue":["6.4"],"react":["6.5"],"语法提示":["6.6"],"dash":["7.0"],"flv":["8.0"],"hls":["9.0","13.0"],"视频广告":["10.0"],"演示":["10.1","11.1","12.1","13.1","14.2"],"控制器皮肤":["11.0"],"enable":["11.5"],"弹幕库":["12.0"],"选项":["12.4"],"使用弹幕数组":["12.5"],"使用弹幕":["12.6"],"使用异步调用":["12.7"],"hide":["12.8"],"ishide":["12.9"],"emit":["12.10"],"load":["12.12"],"reset":["12.13"],"事件":["12.15"],"iframe":["14.0","14.7"],"说明":["14.1"],"实例接口":["14.6"],"组件配置":["15.0"],"基础选项":["16.0"],"container":["16.1"],"id":["16.3"],"onready":["16.4"],"islive":["16.9"],"autoplay":["16.11"],"automini":["16.13"],"mutex":["16.22"],"miniprogressbar":["16.26"],"usessr":["16.27"],"playsinline":["16.28"],"settings":["16.30"],"quality":["16.33"],"highlight":["16.34"],"thumbnails":["16.37"],"morevideoattr":["16.39"],"customtype":["16.42"],"lang":["16.43"],"lock":["16.45"],"fastforward":["16.46"],"autoplayback":["16.47"],"autoorientation":["16.48"],"设置面板":["17.0"],"选择列表":["17.1"],"列表嵌套":["17.2"],"切换按钮":["17.3"],"范围滑块":["17.4"]},{"0":["4.36","4.37","16.8"],"1":["12.4"],"4":["15.3"],"5":["12.4","15.1"],"10":["12.4"],"13":["15.3"],"15":["3.0"],"22":["15.1"],"这里的":["0.0","1.0","4.0"],"播放器的选项":["0.1"],"div":["0.1","0.2","0.3","0.5","0.6","0.8","0.14","0.17","1.1","1.6","2.0","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.30","3.0","4.1","4.2","4.3","4.14","4.25","4.35","7.0","8.0","9.0","10.4","11.4","11.5","12.5","12.6","12.7","12.8","12.9","12.10","12.12","12.13","12.14","15.1","15.2","15.3","16.2","16.29","16.30","16.31","16.32","17.2"],"classname":["0.1","0.2","0.3","0.17","2.0","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.30","3.0","7.0","8.0","9.0","10.4","11.4","12.5","12.6","12.7","12.9","12.10","12.12","12.13","12.14","15.1","15.2","15.3","16.2","16.29","16.30","17.2"],"run":["0.1","0.3","2.0","2.2","2.6Line truncated
|
||||
`,l:"advanced/built-in.html",a:"高级属性"},"0.1":{t:"option",p:`播放器的选项
|
||||
<div className="run-code">▶ Run Code< ...`,l:"advanced/built-in.html#option",a:"option"},"0.2":{t:"whitelist",p:`管理移动设备的白名单功能,只有一个属性 state 返回是否启用播放器功能
|
||||
<div className=" ...`,l:"advanced/built-in.html#whitelist",a:"whitelist"},"0.3":{t:"template",p:`管理播放器所有的 DOM 元素
|
||||
<div className="run-code">▶ Ru ...`,l:"advanced/built-in.html#template",a:"template"},"0.4":{t:"events",p:"管理播放器所有的 DOM 事件,实质上是代理了 addEventListener 和 removeEventListener ...",l:"advanced/built-in.html#events",a:"events"},"0.5":{t:"storage",p:`管理播放器的本地存储
|
||||
|
||||
name 属性用于设置缓存的 key
|
||||
set 方法用于设置缓存
|
||||
get 方法用于获取缓存
|
||||
del 方 ...`,l:"advanced/built-in.html#storage",a:"storage"},"0.6":{t:"icons",p:`管理播放器所有的 svg 图标
|
||||
<div className="run-code">▶ Ru ...`,l:"advanced/built-in.html#icons",a:"icons"},"0.7":{t:"i18n",p:`管理播放器的 i18n
|
||||
|
||||
get 方法用于获取 i18n 的值
|
||||
update 方法用于更新 i18n 对象
|
||||
|
||||
<div ...`,l:"advanced/built-in.html#i18n",a:"i18n"},"0.8":{t:"notice",p:`管理播放器的提示语,只有一个 show 属性用于显示提示语
|
||||
<div className="run-code ...`,l:"advanced/built-in.html#notice",a:"notice"},"0.9":{t:"layers",p:`管理播放器的层
|
||||
|
||||
add 方法用于动态添加层
|
||||
show 属性用于设置是否显示全部层
|
||||
toggle 属性用于切换是否显示全部层 ...`,l:"advanced/built-in.html#layers",a:"layers"},"0.10":{t:"controls",p:`管理播放器的控制器
|
||||
|
||||
add 方法用于动态添加控制器
|
||||
show 属性用于设置是否显示全部控制器
|
||||
toggle 属性用于切换是 ...`,l:"advanced/built-in.html#controls",a:"controls"},"0.11":{t:"contextmenu",p:`管理播放器的右键菜单
|
||||
|
||||
add 方法用于动态添加菜单
|
||||
show 属性用于设置是否显示全部菜单
|
||||
toggle 属性用于切换是否 ...`,l:"advanced/built-in.html#contextmenu",a:"contextmenu"},"0.12":{t:"subtitle",p:`管理播放器的字幕功能
|
||||
|
||||
url 属性设置和返回当前字幕地址
|
||||
style 方法设置当前字幕的样式
|
||||
switch 方法设置当前字 ...`,l:"advanced/built-in.html#subtitle",a:"subtitle"},"0.13":{t:"loading",p:`管理播放器的加载层
|
||||
|
||||
show 属性用于设置是否显示加载层
|
||||
toggle 属性用于切换是否显示加载层
|
||||
|
||||
<div cl ...`,l:"advanced/built-in.html#loading",a:"loading"},"0.14":{t:"hotkey",p:`管理播放器的快捷键功能
|
||||
|
||||
add 方法用于添加快捷键
|
||||
remove 方法用于删除快捷键
|
||||
|
||||
<div className ...`,l:"advanced/built-in.html#hotkey",a:"hotkey"},"0.15":{t:"mask",p:`管理播放器的遮罩层
|
||||
|
||||
show 属性用于设置是否显示遮罩层
|
||||
toggle 属性用于切换是否显示遮罩层
|
||||
|
||||
<div cl ...`,l:"advanced/built-in.html#mask",a:"mask"},"0.16":{t:"setting",p:`管理播放器的设置面板
|
||||
|
||||
add 方法用于动态添加设置项
|
||||
show 属性用于设置是否显示全部设置项
|
||||
toggle 属性用于切换 ...`,l:"advanced/built-in.html#setting",a:"setting"},"0.17":{t:"plugins",p:`管理播放器的插件功能,只有一个方法 add 用于动态添加插件
|
||||
<div className="run-cod ...`,l:"advanced/built-in.html#plugins",a:"plugins"},"1.0":{t:"静态属性",p:`这里的 静态属性 是指挂载在 构造函数 的 一级属性,非常少使用
|
||||
:::warning 提示
|
||||
有些属性是全大写的,说明这些属 ...`,l:"advanced/class.html",a:"静态属性"},"1.1":{t:"instances",p:`返回全部播放器实例的数组,假如你想同时管理多个播放器的时候,可以用到该属性
|
||||
<div className=" ...`,l:"advanced/class.html#instances",a:"instances"},"1.2":{t:"version",p:`返回播放器的版本信息
|
||||
<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#version",a:"version"},"1.3":{t:"env",p:`返回播放器的环境变量
|
||||
<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#env",a:"env"},"1.4":{t:"build",p:`返回播放器的打包时间
|
||||
<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#build",a:"build"},"1.5":{t:"config",p:`返回视频的默认配置
|
||||
<div className="run-code">▶ Run Code ...`,l:"advanced/class.html#config",a:"config"},"1.6":{t:"utils",p:`返回播放器的工具函数集合
|
||||
<div className="run-code">▶ Run C ...`,l:"advanced/class.html#utils",a:"utils"},"1.7":{t:"scheme",p:`返回播放器选项的校验方案
|
||||
<div className="run-code">▶ Run C ...`,l:"advanced/class.html#scheme",a:"scheme"},"1.8":{t:"emitter",p:`返回事件分发器的构造函数
|
||||
<div className="run-code">▶ Run C ...`,l:"advanced/class.html#emitter",a:"emitter"},"1.9":{t:"validator",p:`返回选项的校验函数
|
||||
<div className="run-code">▶ Run Code ...`,l:"advanced/class.html#validator",a:"validator"},"1.10":{t:"kindof",p:`返回类型检测的函数工具
|
||||
<div className="run-code">▶ Run Co ...`,l:"advanced/class.html#kindof",a:"kindof"},"1.11":{t:"html",p:`返回播放器所需的 html 字符串
|
||||
<div className="run-code">▶ ...`,l:"advanced/class.html#html",a:"html"},"1.12":{t:"option",p:`返回播放器的默认选项
|
||||
<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#option",a:"option"},"1.13":{t:"debug",p:"\r",l:"advanced/class.html#debug",a:"debug"},"1.14":{t:"contextmenu",p:"\r",l:"advanced/class.html#contextmenu",a:"contextmenu"},"1.15":{t:"notice-time",p:"\r",l:"advanced/class.html#notice-time",a:"notice-time"},"1.16":{t:"setting-width",p:"\r",l:"advanced/class.html#setting-width",a:"setting-width"},"1.17":{t:"setting-item-width",p:"\r",l:"advanced/class.html#setting-item-width",a:"setting-item-width"},"1.18":{t:"setting-item-height",p:"\r",l:"advanced/class.html#setting-item-height",a:"setting-item-height"},"1.19":{t:"indicator-size",p:"\r",l:"advanced/class.html#indicator-size",a:"indicator-size"},"1.20":{t:"indicator-size-icon",p:"\r",l:"advanced/class.html#indicator-size-icon",a:"indicator-size-icon"},"1.21":{t:"indicator-size-mobile",p:"\r",l:"advanced/class.html#indicator-size-mobile",a:"indicator-size-mobile"},"1.22":{t:"indicator-size-mobile-icon",p:"\r",l:"advanced/class.html#indicator-size-mobile-icon",a:"indicator-size-mobile-icon"},"1.23":{t:"volume-panel-width",p:"\r",l:"advanced/class.html#volume-panel-width",a:"volume-panel-width"},"1.24":{t:"volume-handle-width",p:"\r",l:"advanced/class.html#volume-handle-width",a:"volume-handle-width"},"1.25":{t:"resize-time",p:"\r",l:"advanced/class.html#resize-time",a:"resize-time"},"1.26":{t:"scroll-time",p:"\r",l:"advanced/class.html#scroll-time",a:"scroll-time"},"1.27":{t:"scroll-gap",p:"\r",l:"advanced/class.html#scroll-gap",a:"scroll-gap"},"1.28":{t:"auto-playback-max",p:"\r",l:"advanced/class.html#auto-playback-max",a:"auto-playback-max"},"1.29":{t:"auto-playback-min",p:"\r",l:"advanced/class.html#auto-playback-min",a:"auto-playback-min"},"1.30":{t:"auto-playback-timeout",p:"\r",l:"advanced/class.html#auto-playback-timeout",a:"auto-playback-timeout"},"1.31":{t:"reconnect-time-max",p:"\r",l:"advanced/class.html#reconnect-time-max",a:"reconnect-time-max"},"1.32":{t:"reconnect-sleep-time",p:"\r",l:"advanced/class.html#reconnect-sleep-time",a:"reconnect-sleep-time"},"1.33":{t:"control-hide-time",p:"\r",l:"advanced/class.html#control-hide-time",a:"control-hide-time"},"1.34":{t:"db-clice-time",p:"\r",l:"advanced/class.html#db-clice-time",a:"db-clice-time"},"1.35":{t:"mobile-auto-playbackrate",p:"\r",l:"advanced/class.html#mobile-auto-playbackrate",a:"mobile-auto-playbackrate"},"1.36":{t:"mobile-auto-playbackrate-time",p:"\r",l:"advanced/class.html#mobile-auto-playbackrate-time",a:"mobile-auto-playbackrate-time"},"1.37":{t:"mobile-auto-orientation-time",p:"\r",l:"advanced/class.html#mobile-auto-orientation-time",a:"mobile-auto-orientation-time"},"1.38":{t:"info-loop-time",p:"\r",l:"advanced/class.html#info-loop-time",a:"info-loop-time"},"1.39":{t:"fast-forward-value",p:"\r",l:"advanced/class.html#fast-forward-value",a:"fast-forward-value"},"1.40":{t:"fast-forward-time",p:"\r",l:"advanced/class.html#fast-forward-time",a:"fast-forward-time"},"1.41":{t:"touch-move-ratio",p:"\r",l:"advanced/class.html#touch-move-ratio",a:"touch-move-ratio"},"1.42":{t:"volume-step",p:"\r",l:"advanced/class.html#volume-step",a:"volume-step"},"1.43":{t:"seek-step",p:"\r",l:"advanced/class.html#seek-step",a:"seek-step"},"1.44":{t:"progress-height",p:"\r",l:"advanced/class.html#progress-height",a:"progress-height"},"1.45":{t:"playback-rate",p:"\r",l:"advanced/class.html#playback-rate",a:"playback-rate"},"1.46":{t:"aspect-ratio",p:"\r",l:"advanced/class.html#aspect-ratio",a:"aspect-ratio"},"1.47":{t:"flip",p:"",l:"advanced/class.html#flip",a:"flip"},"2.0":{t:"实例事件",p:`播放器的事件分为两种,一种视频的 原生事件 (前缀 video:),另外一种是 自定义事件
|
||||
监听事件:
|
||||
<div cl ...`,l:"advanced/event.html",a:"实例事件"},"2.1":{t:"ready",p:`当播放器首次可以播放器时触发
|
||||
<div className="run-code">▶ Run ...`,l:"advanced/event.html#ready",a:"ready"},"2.2":{t:"restart",p:`当播放器切换地址后并可以播放时触发
|
||||
<div className="run-code">▶ ...`,l:"advanced/event.html#restart",a:"restart"},"2.3":{t:"pause",p:`当播放器暂停时触发
|
||||
<div className="run-code">▶ Run Code ...`,l:"advanced/event.html#pause",a:"pause"},"2.4":{t:"play",p:`当播放器播放时触发
|
||||
<div className="run-code">▶ Run Code ...`,l:"advanced/event.html#play",a:"play"},"2.5":{t:"hotkey",p:`当播放器热键被按下时触发
|
||||
<div className="run-code">▶ Run C ...`,l:"advanced/event.html#hotkey",a:"hotkey"},"2.6":{t:"destroy",p:`当播放器销毁时触发
|
||||
<div className="run-code">▶ Run Code ...`,l:"advanced/event.html#destroy",a:"destroy"},"2.7":{t:"url",p:`当视频地址变化时触发
|
||||
<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#url",a:"url"},"2.8":{t:"focus",p:`当播放器获得焦点时触发
|
||||
<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#focus",a:"focus"},"2.9":{t:"blur",p:`当播放器失去焦点时触发
|
||||
<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#blur",a:"blur"},"2.10":{t:"dblclick",p:`当播放器被双击时触发
|
||||
<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#dblclick",a:"dblclick"},"2.11":{t:"click",p:`当播放器被单击时触发
|
||||
<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#click",a:"click"},"2.12":{t:"error",p:`当播放器加载视频发生错误时触发
|
||||
<div className="run-code">▶ Ru ...`,l:"advanced/event.html#error",a:"error"},"2.13":{t:"hover",p:`当播放器被鼠标移出或者移入时触发
|
||||
<div className="run-code">▶ R ...`,l:"advanced/event.html#hover",a:"hover"},"2.14":{t:"mousemove",p:`当播放器被鼠标经过时触发
|
||||
<div className="run-code">▶ Run C ...`,l:"advanced/event.html#mousemove",a:"mousemove"},"2.15":{t:"resize",p:`当播放器尺寸变化时触发
|
||||
<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#resize",a:"resize"},"2.16":{t:"view",p:`当播放器出现在视口时触发
|
||||
<div className="run-code">▶ Run C ...`,l:"advanced/event.html#view",a:"view"},"2.17":{t:"aspectratio",p:`当播放器长宽比变化时触发
|
||||
<div className="run-code">▶ Run C ...`,l:"advanced/event.html#aspectratio",a:"aspectratio"},"2.18":{t:"autoheight",p:`当播放器自动设置高度时触发
|
||||
<div className="run-code">▶ Run ...`,l:"advanced/event.html#autoheight",a:"autoheight"},"2.19":{t:"autosize",p:`当播放器自动设置尺寸时触发
|
||||
<div className="run-code">▶ Run ...`,l:"advanced/event.html#autosize",a:"autosize"},"2.20":{t:"flip",p:`当播放器发生翻转时触发
|
||||
<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#flip",a:"flip"},"2.21":{t:"fullscreen",p:`当播放器发生窗口全屏时触发
|
||||
<div className="run-code">▶ Run ...`,l:"advanced/event.html#fullscreen",a:"fullscreen"},"2.22":{t:"fullscreenweb",p:`当播放器发生网页全屏时触发
|
||||
<div className="run-code">▶ Run ...`,l:"advanced/event.html#fullscreenweb",a:"fullscreenweb"},"2.23":{t:"mini",p:`当播放器进入迷你模式时触发
|
||||
<div className="run-code">▶ Run ...`,l:"advanced/event.html#mini",a:"mini"},"2.24":{t:"pip",p:`当播放器进入画中画时触发
|
||||
<div className="run-code">▶ Run C ...`,l:"advanced/event.html#pip",a:"pip"},"2.25":{t:"screenshot",p:`当播放器被截图时触发
|
||||
<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#screenshot",a:"screenshot"},"2.26":{t:"seek",p:`当播放器发生时间跳转时触发
|
||||
<div className="run-code">▶ Run ...`,l:"advanced/event.html#seek",a:"seek"},"2.27":{t:"subtitleoffset",p:`当播放器发生字幕偏移时触发
|
||||
<div className="run-code">▶ Run ...`,l:"advanced/event.html#subtitleoffset",a:"subtitleoffset"},"2.28":{t:"subtitleupdate",p:`当字幕更新时触发
|
||||
<div className="run-code">▶ Run Code& ...`,l:"advanced/event.html#subtitleupdate",a:"subtitleupdate"},"2.29":{t:"subtitleload",p:`当字幕加载时触发
|
||||
<div className="run-code">▶ Run Code& ...`,l:"advanced/event.html#subtitleload",a:"subtitleload"},"2.30":{t:"subtitleswitch",p:`当字幕切换时触发
|
||||
<div className="run-code">▶ Run Code& ...`,l:"advanced/event.html#subtitleswitch",a:"subtitleswitch"},"2.31":{t:"video-canplay",p:`浏览器可以播放媒体文件了,但估计没有足够的数据来支撑播放到结束,不必停下来进一步缓冲内容
|
||||
`,l:"advanced/event.html#video-canplay",a:"video-canplay"},"2.32":{t:"video-canplaythrough",p:`浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束
|
||||
`,l:"advanced/event.html#video-canplaythrough",a:"video-canplaythrough"},"2.33":{t:"video-complete",p:`OfflineAudioContext 渲染完成
|
||||
`,l:"advanced/event.html#video-complete",a:"video-complete"},"2.34":{t:"video-durationchange",p:`duration 属性的值改变时触发
|
||||
`,l:"advanced/event.html#video-durationchange",a:"video-durationchange"},"2.35":{t:"video-emptied",p:"媒体内容变为空;例如,当这个 media 已经加载完成(或者部分加载完成),则发送此事件,并调用 load() 方法重新加载 ...",l:"advanced/event.html#video-emptied",a:"video-emptied"},"2.36":{t:"video-ended",p:`视频停止播放,因为 media 已经到达结束点
|
||||
`,l:"advanced/event.html#video-ended",a:"video-ended"},"2.37":{t:"video-error",p:`获取媒体数据时出错,或者资源类型不是受支持的媒体格式
|
||||
`,l:"advanced/event.html#video-error",a:"video-error"},"2.38":{t:"video-loadeddata",p:`media 中的首帧已经完成加载
|
||||
`,l:"advanced/event.html#video-loadeddata",a:"video-loadeddata"},"2.39":{t:"video-loadedmetadata",p:`已加载元数据
|
||||
`,l:"advanced/event.html#video-loadedmetadata",a:"video-loadedmetadata"},"2.40":{t:"video-pause",p:`播放已暂停
|
||||
`,l:"advanced/event.html#video-pause",a:"video-pause"},"2.41":{t:"video-play",p:`播放已开始
|
||||
`,l:"advanced/event.html#video-play",a:"video-play"},"2.42":{t:"video-playing",p:`由于缺乏数据而暂停或延迟后,播放准备开始
|
||||
`,l:"advanced/event.html#video-playing",a:"video-playing"},"2.43":{t:"video-progress",p:`在浏览器加载资源时周期性触发
|
||||
`,l:"advanced/event.html#video-progress",a:"video-progress"},"2.44":{t:"video-ratechange",p:`播放速率发生变化
|
||||
`,l:"advanced/event.html#video-ratechange",a:"video-ratechange"},"2.45":{t:"video-seeked",p:`跳帧(seek)操作完成
|
||||
`,l:"advanced/event.html#video-seeked",a:"video-seeked"},"2.46":{t:"video-seeking",p:`跳帧(seek)操作开始
|
||||
`,l:"advanced/event.html#video-seeking",a:"video-seeking"},"2.47":{t:"video-stalled",p:`用户代理(user agent)正在尝试获取媒体数据,但数据意外未出现
|
||||
`,l:"advanced/event.html#video-stalled",a:"video-stalled"},"2.48":{t:"video-suspend",p:`媒体数据加载已暂停
|
||||
`,l:"advanced/event.html#video-suspend",a:"video-suspend"},"2.49":{t:"video-timeupdate",p:`currentTime 属性指定的时间发生变化
|
||||
`,l:"advanced/event.html#video-timeupdate",a:"video-timeupdate"},"2.50":{t:"video-volumechange",p:`音量发生变化
|
||||
`,l:"advanced/event.html#video-volumechange",a:"video-volumechange"},"2.51":{t:"video-waiting",p:`由于暂时缺少数据,播放已停止
|
||||
`,l:"advanced/event.html#video-waiting",a:"video-waiting"},"3.0":{t:"编写插件",p:`但你已经知道播放器的属性, 方法和事件后,再编写插件是非常简单的事
|
||||
可以在实例化的时候加载插件的函数
|
||||
<div cla ...`,l:"advanced/plugin.html",a:"编写插件"},"4.0":{t:"实例属性",p:`这里的 实例属性 是指挂载在 实例 的 一级属性,比较常用
|
||||
`,l:"advanced/property.html",a:"实例属性"},"4.1":{t:"play",p:`
|
||||
Type: Function
|
||||
|
||||
播放视频
|
||||
<div className="run-code"&g ...`,l:"advanced/property.html#play",a:"play"},"4.2":{t:"pause",p:`
|
||||
Type: Function
|
||||
|
||||
暂停视频
|
||||
<div className="run-code"&g ...`,l:"advanced/property.html#pause",a:"pause"},"4.3":{t:"toggle",p:`
|
||||
Type: Function
|
||||
|
||||
切换视频的播放和暂停
|
||||
<div className="run-code&q ...`,l:"advanced/property.html#toggle",a:"toggle"},"4.4":{t:"destroy",p:`
|
||||
Type: Function
|
||||
Parameter: Boolean
|
||||
|
||||
销毁播放器,接受一个参数表示是否销毁后同时移除播放器 ...`,l:"advanced/property.html#destroy",a:"destroy"},"4.5":{t:"seek",p:`
|
||||
Type: Setter
|
||||
Parameter: Number
|
||||
|
||||
视频时间跳转,单位秒
|
||||
<div className= ...`,l:"advanced/property.html#seek",a:"seek"},"4.6":{t:"forward",p:`
|
||||
Type: Setter
|
||||
Parameter: Number
|
||||
|
||||
视频时间快进,单位秒
|
||||
<div className= ...`,l:"advanced/property.html#forward",a:"forward"},"4.7":{t:"backward",p:`
|
||||
Type: Setter
|
||||
Parameter: Number
|
||||
|
||||
视频时间快退,单位秒
|
||||
<div className= ...`,l:"advanced/property.html#backward",a:"backward"},"4.8":{t:"volume",p:`
|
||||
Type: Setter/Getter
|
||||
Parameter: Number
|
||||
|
||||
设置和获取视频音量,范围在:[0, 1]
|
||||
& ...`,l:"advanced/property.html#volume",a:"volume"},"4.9":{t:"url",p:`
|
||||
Type: Setter/Getter
|
||||
Parameter: String
|
||||
|
||||
设置和获取视频地址
|
||||
<div clas ...`,l:"advanced/property.html#url",a:"url"},"4.10":{t:"switchurl",p:`
|
||||
Type: Function
|
||||
Parameter: String
|
||||
|
||||
设置视频地址,设置时和 url 类似,但会执行一些优化 ...`,l:"advanced/property.html#switchurl",a:"switchurl"},"4.11":{t:"switchquality",p:`
|
||||
Type: Function
|
||||
Parameter: String
|
||||
|
||||
设置视频画质地址,和 switchUrl 类似,但会带 ...`,l:"advanced/property.html#switchquality",a:"switchquality"},"4.12":{t:"muted",p:`
|
||||
Type: Setter/Getter
|
||||
Parameter: Boolean
|
||||
|
||||
设置和获取视频是否静音
|
||||
<div c ...`,l:"advanced/property.html#muted",a:"muted"},"4.13":{t:"currenttime",p:`
|
||||
Type: Setter/Getter
|
||||
Parameter: Number
|
||||
|
||||
设置和获取视频当前时间,设置时间时和 see ...`,l:"advanced/property.html#currenttime",a:"currenttime"},"4.14":{t:"duration",p:`
|
||||
Type: Getter
|
||||
|
||||
获取视频时长
|
||||
<div className="run-code"&g ...`,l:"advanced/property.html#duration",a:"duration"},"4.15":{t:"screenshot",p:`
|
||||
Type: Function
|
||||
|
||||
下载当前视频帧的截图
|
||||
<div className="run-code&q ...`,l:"advanced/property.html#screenshot",a:"screenshot"},"4.16":{t:"getdataurl",p:`
|
||||
Type: Function
|
||||
|
||||
获取当前视频帧的截图的base64地址,返回的是一个 Promise
|
||||
<div cl ...`,l:"advanced/property.html#getdataurl",a:"getdataurl"},"4.17":{t:"getbloburl",p:`
|
||||
Type: Function
|
||||
|
||||
获取当前视频帧的截图的blob地址,返回的是一个 Promise
|
||||
<div clas ...`,l:"advanced/property.html#getbloburl",a:"getbloburl"},"4.18":{t:"fullscreen",p:`
|
||||
Type: Setter/Getter
|
||||
Parameter: Boolean
|
||||
|
||||
设置和获取播放器窗口全屏
|
||||
<div ...`,l:"advanced/property.html#fullscreen",a:"fullscreen"},"4.19":{t:"fullscreenweb",p:`
|
||||
Type: Setter/Getter
|
||||
Parameter: Boolean
|
||||
|
||||
设置和获取播放器网页全屏
|
||||
<div ...`,l:"advanced/property.html#fullscreenweb",a:"fullscreenweb"},"4.20":{t:"pip",p:`
|
||||
Type: Setter/Getter
|
||||
Parameter: Boolean
|
||||
|
||||
设置和获取播放器画中画模式
|
||||
<div ...`,l:"advanced/property.html#pip",a:"pip"},"4.21":{t:"poster",p:`
|
||||
Type: Setter/Getter
|
||||
Parameter: String
|
||||
|
||||
设置和获取视频海报,只有在视频播放前才能看到 ...`,l:"advanced/property.html#poster",a:"poster"},"4.22":{t:"mini",p:`
|
||||
Type: Setter/Getter
|
||||
Parameter: Boolean
|
||||
|
||||
设置和获取播放器迷你模式
|
||||
<div ...`,l:"advanced/property.html#mini",a:"mini"},"4.23":{t:"playing",p:`
|
||||
Type: Getter
|
||||
Parameter: Boolean
|
||||
|
||||
获取视频是否正在播放中
|
||||
<div classNam ...`,l:"advanced/property.html#playing",a:"playing"},"4.24":{t:"autosize",p:`
|
||||
Type: Setter/Getter
|
||||
Parameter: Boolean
|
||||
|
||||
设置视频是否自适应尺寸,设置为 true ...`,l:"advanced/property.html#autosize",a:"autosize"},"4.25":{t:"rect",p:`
|
||||
Type: Getter
|
||||
|
||||
获取播放器的尺寸和坐标信息
|
||||
<div className="run-code& ...`,l:"advanced/property.html#rect",a:"rect"},"4.26":{t:"flip",p:`
|
||||
Type: Setter/Getter
|
||||
Parameter: String
|
||||
|
||||
设置和获取播放器翻转,支持normal, ...`,l:"advanced/property.html#flip",a:"flip"},"4.27":{t:"playbackrate",p:`
|
||||
Type: Setter/Getter
|
||||
Parameter: Number
|
||||
|
||||
设置和获取播放器播放速度
|
||||
<div c ...`,l:"advanced/property.html#playbackrate",a:"playbackrate"},"4.28":{t:"aspectratio",p:`
|
||||
Type: Setter/Getter
|
||||
Parameter: String
|
||||
|
||||
设置和获取播放器长宽比
|
||||
<div cl ...`,l:"advanced/property.html#aspectratio",a:"aspectratio"},"4.29":{t:"loop",p:`
|
||||
Type: Setter/Getter
|
||||
Parameter: Array
|
||||
|
||||
设置和获取区间循序播放,单位秒
|
||||
<div ...`,l:"advanced/property.html#loop",a:"loop"},"4.30":{t:"autoheight",p:`
|
||||
Type: Setter/Getter
|
||||
Parameter: Boolean
|
||||
|
||||
当容器只有宽度,该属性可以自动计算出并设置 ...`,l:"advanced/property.html#autoheight",a:"autoheight"},"4.31":{t:"attr",p:`
|
||||
Type: Function
|
||||
Parameter: String
|
||||
|
||||
动态获取和设置 video 元素的属性
|
||||
<div ...`,l:"advanced/property.html#attr",a:"attr"},"4.32":{t:"title",p:`
|
||||
Type: Setter/Getter
|
||||
Parameter: String
|
||||
|
||||
动态获取和设置播放器标题
|
||||
<div c ...`,l:"advanced/property.html#title",a:"title"},"4.33":{t:"type",p:`
|
||||
Type: Setter/Getter
|
||||
Parameter: String
|
||||
|
||||
动态获取和设置视频类型
|
||||
<div cl ...`,l:"advanced/property.html#type",a:"type"},"4.34":{t:"theme",p:`
|
||||
Type: Setter/Getter
|
||||
Parameter: String
|
||||
|
||||
动态获取和设置播放器主题颜色
|
||||
<div ...`,l:"advanced/property.html#theme",a:"theme"},"4.35":{t:"airplay",p:`
|
||||
Type: Function
|
||||
|
||||
开启隔空播放
|
||||
<div className="run-code" ...`,l:"advanced/property.html#airplay",a:"airplay"},"4.36":{t:"loaded",p:`
|
||||
Type: Getter
|
||||
|
||||
视频缓存的比例,范围是 [0, 1],常配合 video:timeupdate 事件使用
|
||||
&l ...`,l:"advanced/property.html#loaded",a:"loaded"},"4.37":{t:"played",p:`
|
||||
Type: Getter
|
||||
|
||||
视频播放的比例,范围是 [0, 1],常配合 video:timeupdate 事件使用
|
||||
&l ...`,l:"advanced/property.html#played",a:"played"},"4.38":{t:"proxy",p:`
|
||||
Type: Function
|
||||
|
||||
DOM 事件的代理函数,实质上代理了 addEventListener 和 removeE ...`,l:"advanced/property.html#proxy",a:"proxy"},"4.39":{t:"query",p:`
|
||||
Type: Function
|
||||
|
||||
DOM 的查询函数,类似 document.querySelector,但被查询的对象局限 ...`,l:"advanced/property.html#query",a:"query"},"4.40":{t:"video",p:`
|
||||
Type: Element
|
||||
|
||||
快捷返回播放器的 video 元素
|
||||
<div className="run- ...`,l:"advanced/property.html#video",a:"video"},"5.0":{t:"wip",p:"",l:"en/index.html",a:"wip"},"6.0":{t:"安装使用",p:"\r",l:"index.html",a:"安装使用"},"6.1":{t:"安装",p:`::: code-group
|
||||
npm install artplayer
|
||||
|
||||
yarn add artplayer
|
||||
|
||||
pnpm ...`,l:"index.html#安装",a:"安装"},"6.2":{t:"cdn",p:`::: code-group
|
||||
https://cdn.jsdelivr.net/npm/artplayer/dist/art ...`,l:"index.html#cdn",a:"cdn"},"6.3":{t:"使用",p:`::: code-group
|
||||
import Artplayer from 'artplayer';
|
||||
|
||||
const art = ...`,l:"index.html#使用",a:"使用"},"6.4":{t:"vue-js",p:`::: code-group
|
||||
<template>
|
||||
<div ref="artRef&quo ...`,l:"index.html#vue-js",a:"vue-js"},"6.5":{t:"react-js",p:`::: code-group
|
||||
import { useEffect, useRef } from 'react';
|
||||
impo ...`,l:"index.html#react-js",a:"react-js"},"6.6":{t:"语法提示",p:`有时你的 js 文件会丢失 TypeScript 的类型提示,这时候你可以手动导入类型
|
||||
变量:
|
||||
/**
|
||||
* @type { ...`,l:"index.html#语法提示",a:"语法提示"},"7.0":{t:"dash-js",p:`👉 https://github.com/Dash-Industry-Forum/dash.js
|
||||
<div clas ...`,l:"library/dash.html",a:"dash-js"},"8.0":{t:"flv-js",p:`👉 https://github.com/Bilibili/flv.js
|
||||
<div className=" ...`,l:"library/flv.html",a:"flv-js"},"9.0":{t:"hls-js",p:`👉 https://github.com/video-dev/hls.js
|
||||
<div className=" ...`,l:"library/hls.html",a:"hls-js"},"10.0":{t:"视频广告",p:"\r",l:"plugin/ads.html",a:"视频广告"},"10.1":{t:"演示",p:`👉 查看完整演示
|
||||
`,l:"plugin/ads.html#演示",a:"演示"},"10.2":{t:"安装",p:`::: code-group
|
||||
npm install artplayer-plugin-ads
|
||||
|
||||
yarn add artp ...`,l:"plugin/ads.html#安装",a:"安装"},"10.3":{t:"cdn",p:`::: code-group
|
||||
https://cdn.jsdelivr.net/npm/artplayer-plugin-a ...`,l:"plugin/ads.html#cdn",a:"cdn"},"10.4":{t:"使用",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/ads.html#使用",a:"使用"},"11.0":{t:"控制器皮肤",p:"\r",l:"plugin/control-ui.html",a:"控制器皮肤"},"11.1":{t:"演示",p:`👉 查看完整演示
|
||||
`,l:"plugin/control-ui.html#演示",a:"演示"},"11.2":{t:"安装",p:`::: code-group
|
||||
npm install artplayer-plugin-control
|
||||
|
||||
yarn add ...`,l:"plugin/control-ui.html#安装",a:"安装"},"11.3":{t:"cdn",p:`::: code-group
|
||||
https://cdn.jsdelivr.net/npm/artplayer-plugin-c ...`,l:"plugin/control-ui.html#cdn",a:"cdn"},"11.4":{t:"使用",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/control-ui.html#使用",a:"使用"},"11.5":{t:"enable",p:`
|
||||
Type: Getter/Setter
|
||||
Parameter: Boolean
|
||||
|
||||
是否启用新的控制器皮肤
|
||||
<div c ...`,l:"plugin/control-ui.html#enable",a:"enable"},"12.0":{t:"弹幕库",p:"\r",l:"plugin/danmuku.html",a:"弹幕库"},"12.1":{t:"演示",p:`👉 查看完整演示
|
||||
`,l:"plugin/danmuku.html#演示",a:"演示"},"12.2":{t:"安装",p:`::: code-group
|
||||
npm install artplayer-plugin-danmuku
|
||||
|
||||
yarn add ...`,l:"plugin/danmuku.html#安装",a:"安装"},"12.3":{t:"cdn",p:`::: code-group
|
||||
https://cdn.jsdelivr.net/npm/artplayer-plugin-d ...`,l:"plugin/danmuku.html#cdn",a:"cdn"},"12.4":{t:"选项",p:`{
|
||||
danmuku: [], // 弹幕库,支持数组, xml 地址, Promise返回数组
|
||||
speed: ...`,l:"plugin/danmuku.html#选项",a:"选项"},"12.5":{t:"使用弹幕数组",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/danmuku.html#使用弹幕数组",a:"使用弹幕数组"},"12.6":{t:"使用弹幕-xml",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/danmuku.html#使用弹幕-xml",a:"使用弹幕-xml"},"12.7":{t:"使用异步调用",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/danmuku.html#使用异步调用",a:"使用异步调用"},"12.8":{t:"hide-show",p:`通过方法 hide 和 show 进行隐藏或者显示弹幕
|
||||
<div className="run-code&q ...`,l:"plugin/danmuku.html#hide-show",a:"hide-show"},"12.9":{t:"ishide",p:`通过属性 isHide 判断当前弹幕是隐藏或者显示
|
||||
<div className="run-code&quo ...`,l:"plugin/danmuku.html#ishide",a:"ishide"},"12.10":{t:"emit",p:`通过方法 emit 发送一条实时弹幕
|
||||
<div className="run-code" data ...`,l:"plugin/danmuku.html#emit",a:"emit"},"12.11":{t:"config",p:`通过方法 config 实时改变弹幕配置,支持属性有:
|
||||
|
||||
danmuku
|
||||
speed
|
||||
opacity
|
||||
fontSize
|
||||
co ...`,l:"plugin/danmuku.html#config",a:"config"},"12.12":{t:"load",p:`通过 load 方法可以重载弹幕源,或者切换新弹幕
|
||||
<div className="run-code&quo ...`,l:"plugin/danmuku.html#load",a:"load"},"12.13":{t:"reset",p:`用于清空当前显示的弹幕
|
||||
<div className="run-code" data-libs=& ...`,l:"plugin/danmuku.html#reset",a:"reset"},"12.14":{t:"option",p:`用于获取当前弹幕配置
|
||||
<div className="run-code" data-libs=&q ...`,l:"plugin/danmuku.html#option",a:"option"},"12.15":{t:"事件",p:`var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
...`,l:"plugin/danmuku.html#事件",a:"事件"},"13.0":{t:"hls-画质",p:"\r",l:"plugin/hls-quality.html",a:"hls-画质"},"13.1":{t:"演示",p:`👉 查看完整演示
|
||||
`,l:"plugin/hls-quality.html#演示",a:"演示"},"13.2":{t:"安装",p:`::: code-group
|
||||
npm install artplayer-plugin-hls-quality
|
||||
|
||||
yarn ...`,l:"plugin/hls-quality.html#安装",a:"安装"},"13.3":{t:"cdn",p:`::: code-group
|
||||
https://cdn.jsdelivr.net/npm/artplayer-plugin-h ...`,l:"plugin/hls-quality.html#cdn",a:"cdn"},"14.0":{t:"iframe-控制",p:"\r",l:"plugin/iframe.html",a:"iframe-控制"},"14.1":{t:"说明",p:"通过该插件,你可以轻松在 index.html 里控制跨域 iframe.html 页面里的播放器,如在 index.htm ...",l:"plugin/iframe.html#说明",a:"说明"},"14.2":{t:"演示",p:`👉 查看完整演示
|
||||
`,l:"plugin/iframe.html#演示",a:"演示"},"14.3":{t:"安装",p:`::: code-group
|
||||
npm install artplayer-plugin-iframe
|
||||
|
||||
yarn add a ...`,l:"plugin/iframe.html#安装",a:"安装"},"14.4":{t:"cdn",p:`::: code-group
|
||||
https://cdn.jsdelivr.net/npm/artplayer-plugin-i ...`,l:"plugin/iframe.html#cdn",a:"cdn"},"14.5":{t:"使用",p:`::: code-group
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head ...`,l:"plugin/iframe.html#使用",a:"使用"},"14.6":{t:"实例接口",p:`commit
|
||||
将消息推送到 iframe,该函数将在 iframe 内部运行
|
||||
iframe.commit(() => ...`,l:"plugin/iframe.html#实例接口",a:"实例接口"},"14.7":{t:"iframe-接口",p:`:::warning 提示
|
||||
Iframe 接口 只能运行在 iframe 里
|
||||
:::
|
||||
inject
|
||||
注入脚本,接收来自实例的 ...`,l:"plugin/iframe.html#iframe-接口",a:"iframe-接口"},"15.0":{t:"组件配置",p:`这里所说的组件配置主要是指:layers , controls , contextmenu 这三个共用的配置:
|
||||
|
||||
|
||||
|
||||
属性
|
||||
...`,l:"start/component.html",a:"组件配置"},"15.1":{t:"layers",p:`实例化时添加一个层,例如可以添加 logo 或者 广告 等等
|
||||
<div className="run-cod ...`,l:"start/component.html#layers",a:"layers"},"15.2":{t:"controls",p:`实例化时添加一个控制器
|
||||
:::warning controls 还有三个额外的选项
|
||||
|
||||
position: left 和 ri ...`,l:"start/component.html#controls",a:"controls"},"15.3":{t:"contextmenu",p:`实例化时添加一个右键菜单
|
||||
<div className="run-code">▶ Run C ...`,l:"start/component.html#contextmenu",a:"contextmenu"},"16.0":{t:"基础选项",p:"\r",l:"start/option.html",a:"基础选项"},"16.1":{t:"container",p:`
|
||||
Type: String, Element
|
||||
Default: #artplayer
|
||||
|
||||
播放器挂载的 DOM 容器
|
||||
< ...`,l:"start/option.html#container",a:"container"},"16.2":{t:"url",p:`
|
||||
Type: String
|
||||
Default: ''
|
||||
|
||||
视频源地址
|
||||
<div className="run-c ...`,l:"start/option.html#url",a:"url"},"16.3":{t:"id",p:`
|
||||
Type: String
|
||||
Default: ''
|
||||
|
||||
播放器的唯一标识,目前只用于记忆播放 autoplayback
|
||||
< ...`,l:"start/option.html#id",a:"id"},"16.4":{t:"onready",p:`
|
||||
Type: Function
|
||||
Default: undefined
|
||||
|
||||
构造函数接受一个函数作为第二个参数,播放器初始化成功 ...`,l:"start/option.html#onready",a:"onready"},"16.5":{t:"poster",p:`
|
||||
Type: String
|
||||
Default: ''
|
||||
|
||||
视频的海报,只会出现在播放器初始化且未播放的状态下
|
||||
<div c ...`,l:"start/option.html#poster",a:"poster"},"16.6":{t:"title",p:`
|
||||
Type: String
|
||||
Default: ''
|
||||
|
||||
视频标题,目前会出现在 视频截图 和 迷你模式 下
|
||||
<div c ...`,l:"start/option.html#title",a:"title"},"16.7":{t:"theme",p:`
|
||||
Type: String
|
||||
Default: #f00
|
||||
|
||||
播放器主题颜色,目前作用于 进度条 和 高亮元素 上
|
||||
<di ...`,l:"start/option.html#theme",a:"theme"},"16.8":{t:"volume",p:`
|
||||
Type: Number
|
||||
Default: 0.7
|
||||
|
||||
播放器的默认音量
|
||||
<div className="r ...`,l:"start/option.html#volume",a:"volume"},"16.9":{t:"islive",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
使用直播模式,会隐藏进度条和播放时间
|
||||
<div clas ...`,l:"start/option.html#islive",a:"islive"},"16.10":{t:"muted",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
是否默认静音
|
||||
<div className=" ...`,l:"start/option.html#muted",a:"muted"},"16.11":{t:"autoplay",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
是否自动播放
|
||||
<div className=" ...`,l:"start/option.html#autoplay",a:"autoplay"},"16.12":{t:"autosize",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
播放器的尺寸默认会填充整个 container 容器尺寸,所以 ...`,l:"start/option.html#autosize",a:"autosize"},"16.13":{t:"automini",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
当播放器滚动到浏览器视口以外时,自动进入 迷你播放 模式
|
||||
&l ...`,l:"start/option.html#automini",a:"automini"},"16.14":{t:"loop",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
是否循环播放
|
||||
<div className=" ...`,l:"start/option.html#loop",a:"loop"},"16.15":{t:"flip",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
是否显示视频翻转功能,目前只出现在 设置面板 和 右键菜单 里 ...`,l:"start/option.html#flip",a:"flip"},"16.16":{t:"playbackrate",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
是否显示视频播放速度功能,会出现在 设置面板 和 右键菜单 里 ...`,l:"start/option.html#playbackrate",a:"playbackrate"},"16.17":{t:"aspectratio",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
是否显示视频长宽比功能,会出现在 设置面板 和 右键菜单 里
|
||||
...`,l:"start/option.html#aspectratio",a:"aspectratio"},"16.18":{t:"screenshot",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
是否在底部控制栏里显示 视频截图 功能
|
||||
<div cla ...`,l:"start/option.html#screenshot",a:"screenshot"},"16.19":{t:"setting",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
是否在底部控制栏里显示 设置面板 的开关按钮
|
||||
<div ...`,l:"start/option.html#setting",a:"setting"},"16.20":{t:"hotkey",p:`
|
||||
Type: Boolean
|
||||
Default: true
|
||||
|
||||
是否使用快捷键
|
||||
<div className=" ...`,l:"start/option.html#hotkey",a:"hotkey"},"16.21":{t:"pip",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
是否在底部控制栏里显示 画中画 的开关按钮
|
||||
<div c ...`,l:"start/option.html#pip",a:"pip"},"16.22":{t:"mutex",p:`
|
||||
Type: Boolean
|
||||
Default: true
|
||||
|
||||
假如页面里同时存在多个播放器,是否只能让一个播放器播放
|
||||
< ...`,l:"start/option.html#mutex",a:"mutex"},"16.23":{t:"fullscreen",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
是否在底部控制栏里显示播放器 窗口全屏 按钮
|
||||
<div ...`,l:"start/option.html#fullscreen",a:"fullscreen"},"16.24":{t:"fullscreenweb",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
是否在底部控制栏里显示播放器 网页全屏 按钮
|
||||
<div ...`,l:"start/option.html#fullscreenweb",a:"fullscreenweb"},"16.25":{t:"subtitleoffset",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
字幕时间偏移,范围在 [-5s, 5s],出现在 设置面板 里 ...`,l:"start/option.html#subtitleoffset",a:"subtitleoffset"},"16.26":{t:"miniprogressbar",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
迷你进度条,只在播放器失去焦点后且正在播放时出现
|
||||
<di ...`,l:"start/option.html#miniprogressbar",a:"miniprogressbar"},"16.27":{t:"usessr",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
是否使用 SSR 挂载模式,假如你希望在播放器挂载前,就提前渲 ...`,l:"start/option.html#usessr",a:"usessr"},"16.28":{t:"playsinline",p:`
|
||||
Type: Boolean
|
||||
Default: true
|
||||
|
||||
在移动端是否使用 playsInline 模式
|
||||
<div ...`,l:"start/option.html#playsinline",a:"playsinline"},"16.29":{t:"layers",p:`
|
||||
Type: Array
|
||||
Default: []
|
||||
|
||||
初始化自定义的 层
|
||||
<div className="ru ...`,l:"start/option.html#layers",a:"layers"},"16.30":{t:"settings",p:`
|
||||
Type: Array
|
||||
Default: []
|
||||
|
||||
初始化自定义的 设置面板
|
||||
<div className=" ...`,l:"start/option.html#settings",a:"settings"},"16.31":{t:"contextmenu",p:`
|
||||
Type: Array
|
||||
Default: []
|
||||
|
||||
初始化自定义的 右键菜单
|
||||
<div className=" ...`,l:"start/option.html#contextmenu",a:"contextmenu"},"16.32":{t:"controls",p:`
|
||||
Type: Array
|
||||
Default: []
|
||||
|
||||
初始化自定义的底部 控制栏
|
||||
<div className=&quo ...`,l:"start/option.html#controls",a:"controls"},"16.33":{t:"quality",p:`
|
||||
Type: Array
|
||||
Default: []
|
||||
|
||||
是否在底部控制栏里显示 画质选择 列表
|
||||
|
||||
|
||||
|
||||
属性
|
||||
类型
|
||||
描述
|
||||
|
||||
|
||||
|
||||
|
||||
...`,l:"start/option.html#quality",a:"quality"},"16.34":{t:"highlight",p:`
|
||||
Type: Array
|
||||
Default: []
|
||||
|
||||
在进度条上显示 高亮信息
|
||||
|
||||
|
||||
|
||||
属性
|
||||
类型
|
||||
描述
|
||||
|
||||
|
||||
|
||||
|
||||
time
|
||||
Nu ...`,l:"start/option.html#highlight",a:"highlight"},"16.35":{t:"plugins",p:`
|
||||
Type: Array
|
||||
Default: []
|
||||
|
||||
初始化自定义的 插件
|
||||
<div className="r ...`,l:"start/option.html#plugins",a:"plugins"},"16.36":{t:"whitelist",p:`
|
||||
Type: Array
|
||||
Default: []
|
||||
|
||||
因为不同的移动设备存在多种差异和限制,有时候你希望在某些移动设备上不使用 ...`,l:"start/option.html#whitelist",a:"whitelist"},"16.37":{t:"thumbnails",p:`
|
||||
Type: Object
|
||||
Default: {}
|
||||
|
||||
在进度条上设置 预览图
|
||||
|
||||
|
||||
|
||||
属性
|
||||
类型
|
||||
描述
|
||||
|
||||
|
||||
|
||||
|
||||
url
|
||||
Str ...`,l:"start/option.html#thumbnails",a:"thumbnails"},"16.38":{t:"subtitle",p:`
|
||||
Type: Object
|
||||
Default: {}
|
||||
|
||||
设置视频的字幕,支持字幕格式:vtt, srt, ass
|
||||
|
||||
|
||||
|
||||
属性
|
||||
...`,l:"start/option.html#subtitle",a:"subtitle"},"16.39":{t:"morevideoattr",p:`
|
||||
Type: Object
|
||||
Default: {'controls': false,'preload': 'metadata ...`,l:"start/option.html#morevideoattr",a:"morevideoattr"},"16.40":{t:"icons",p:`
|
||||
Type: Object
|
||||
Default: {}
|
||||
|
||||
用于替换默认图标,支持 Html 字符串和 HTMLElement
|
||||
& ...`,l:"start/option.html#icons",a:"icons"},"16.41":{t:"type",p:`
|
||||
Type: String
|
||||
Default: ''
|
||||
|
||||
用于指明视频的格式,需要配合 customType 一起使用,默认视频 ...`,l:"start/option.html#type",a:"type"},"16.42":{t:"customtype",p:`
|
||||
Type: Object
|
||||
Default: {}
|
||||
|
||||
通过视频的 type 进行匹配,把视频解码权交给第三方程序进行处理,处 ...`,l:"start/option.html#customtype",a:"customtype"},"16.43":{t:"lang",p:`
|
||||
Type: String
|
||||
Default: navigator.language.toLowerCase()
|
||||
|
||||
默认显示语 ...`,l:"start/option.html#lang",a:"lang"},"16.44":{t:"i18n",p:`
|
||||
Type: Object
|
||||
Default: {}
|
||||
|
||||
自定义 i18n 配置,该配置会和自带的 i18n 进行深度合并
|
||||
新增 ...`,l:"start/option.html#i18n",a:"i18n"},"16.45":{t:"lock",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
是否在移动端显示一个 锁定按钮 ,用于隐藏底部 控制栏
|
||||
< ...`,l:"start/option.html#lock",a:"lock"},"16.46":{t:"fastforward",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
是否在移动端添加长按视频快进功能
|
||||
<div classN ...`,l:"start/option.html#fastforward",a:"fastforward"},"16.47":{t:"autoplayback",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
是否使用自动 回放功能
|
||||
<div className=& ...`,l:"start/option.html#autoplayback",a:"autoplayback"},"16.48":{t:"autoorientation",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
是否在移动端的网页全屏时,根据视频尺寸和视口尺寸,旋转播放器
|
||||
...`,l:"start/option.html#autoorientation",a:"autoorientation"},"16.49":{t:"airplay",p:`
|
||||
Type: Boolean
|
||||
Default: false
|
||||
|
||||
是否显示 airplay 按钮,当前只有部分浏览器支持该功能
|
||||
...`,l:"start/option.html#airplay",a:"airplay"},"17.0":{t:"设置面板",p:"需先打开设置面板,播放器默认自带四个设置项:flip, playbackRate, aspectRatio, subtitl ...",l:"start/setting.html",a:"设置面板"},"17.1":{t:"选择列表",p:`
|
||||
|
||||
|
||||
属性
|
||||
类型
|
||||
描述
|
||||
|
||||
|
||||
|
||||
|
||||
html
|
||||
String, Element
|
||||
元素的 DOM 元素
|
||||
|
||||
|
||||
icon
|
||||
String, ...`,l:"start/setting.html#选择列表",a:"选择列表"},"17.2":{t:"列表嵌套",p:"<div className="run-code">▶ Run Code</div&g ...",l:"start/setting.html#列表嵌套",a:"列表嵌套"},"17.3":{t:"切换按钮",p:`
|
||||
|
||||
|
||||
属性
|
||||
类型
|
||||
描述
|
||||
|
||||
|
||||
|
||||
|
||||
html
|
||||
String, Element
|
||||
元素的 DOM 元素
|
||||
|
||||
|
||||
icon
|
||||
String, ...`,l:"start/setting.html#切换按钮",a:"切换按钮"},"17.4":{t:"范围滑块",p:`
|
||||
|
||||
|
||||
属性
|
||||
类型
|
||||
描述
|
||||
|
||||
|
||||
|
||||
|
||||
html
|
||||
String, Element
|
||||
元素的 DOM 元素
|
||||
|
||||
|
||||
icon
|
||||
String, ...`,l:"start/setting.html#范围滑块",a:"范围滑块"}},a={previewLength:62,buttonLabel:"Search",placeholder:"Search docs"},n={INDEX_DATA:t,PREVIEW_LOOKUP:e,Options:a};export{n as default};
|
||||
@@ -1 +0,0 @@
|
||||
.col,.container{padding:0 var(--ifm-spacing-horizontal);width:100%}.markdown>h2,.markdown>h3,.markdown>h4,.markdown>h5,.markdown>h6{margin-bottom:calc(var(--ifm-heading-vertical-rhythm-bottom)*var(--ifm-leading))}body,ol ol,ol ul,ul ol,ul ul{margin:0}blockquote,pre{margin:0 0 var(--ifm-spacing-vertical)}.breadcrumbs__link,.button{transition-timing-function:var(--ifm-transition-timing-default)}.button,code{vertical-align:middle}.button--outline.button--active,.button--outline:active,.button--outline:hover,:root{--ifm-button-color:var(--ifm-font-color-base-inverse)}.menu__link:hover,a{transition:color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.navbar--dark,:root{--ifm-navbar-link-hover-color:var(--ifm-color-primary)}.menu,.navbar-sidebar{overflow-x:hidden}:root,html[data-theme=dark]{--ifm-color-emphasis-500:var(--ifm-color-gray-500)}.admonition-icon svg,.alert__icon svg{fill:var(--ifm-alert-foreground-color)}.toggleButton_rCf9,html{-webkit-tap-highlight-color:transparent}.button,.dropdown__link,.searchbox,.text--truncate{white-space:nowrap}.searchbox__reset:focus,.searchbox__submit:focus,body:not(.navigation-with-keyboard) :not(input):focus{outline:0}pre,table{overflow:auto}.markdown li,body{word-wrap:break-word}:root{--ifm-color-scheme:light;--ifm-dark-value:10%;--ifm-darker-value:15%;--ifm-darkest-value:30%;--ifm-light-value:15%;--ifm-lighter-value:30%;--ifm-lightest-value:50%;--ifm-contrast-background-value:90%;--ifm-contrast-foreground-value:70%;--ifm-contrast-background-dark-value:70%;--ifm-contrast-foreground-dark-value:90%;--ifm-color-primary:#3578e5;--ifm-color-secondary:#ebedf0;--ifm-color-success:#00a400;--ifm-color-info:#54c7ec;--ifm-color-warning:#ffba00;--ifm-color-danger:#fa383e;--ifm-color-primary-dark:#306cce;--ifm-color-primary-darker:#2d66c3;--ifm-color-primary-darkest:#2554a0;--ifm-color-primary-light:#538ce9;--ifm-color-primary-lighter:#72a1ed;--ifm-color-primary-lightest:#9abcf2;--ifm-color-primary-contrast-background:#ebf2fc;--ifm-color-primary-contrast-foreground:#102445;--ifm-color-secondary-dark:#d4d5d8;--ifm-color-secondary-darker:#c8c9cc;--ifm-color-secondary-darkest:#a4a6a8;--ifm-color-secondary-light:#eef0f2;--ifm-color-secondary-lighter:#f1f2f5;--ifm-color-secondary-lightest:#f5f6f8;--ifm-color-secondary-contrast-background:#fdfdfe;--ifm-color-secondary-contrast-foreground:#474748;--ifm-color-success-dark:#009400;--ifm-color-success-darker:#008b00;--ifm-color-success-darkest:#007300;--ifm-color-success-light:#26b226;--ifm-color-success-lighter:#4dbf4d;--ifm-color-success-lightest:#80d280;--ifm-color-success-contrast-background:#e6f6e6;--ifm-color-success-contrast-foreground:#003100;--ifm-color-info-dark:#4cb3d4;--ifm-color-info-darker:#47a9c9;--ifm-color-info-darkest:#3b8ba5;--ifm-color-info-light:#6ecfef;--ifm-color-info-lighter:#87d8f2;--ifm-color-info-lightest:#aae3f6;--ifm-color-info-contrast-background:#eef9fd;--ifm-color-info-contrast-foreground:#193c47;--ifm-color-warning-dark:#e6a700;--ifm-color-warning-darker:#d99e00;--ifm-color-warning-darkest:#b38200;--ifm-color-warning-light:#ffc426;--ifm-color-warning-lighter:#ffcf4d;--ifm-color-warning-lightest:#ffdd80;--ifm-color-warning-contrast-background:#fff8e6;--ifm-color-warning-contrast-foreground:#4d3800;--ifm-color-danger-dark:#e13238;--ifm-color-danger-darker:#d53035;--ifm-color-danger-darkest:#af272b;--ifm-color-danger-light:#fb565b;--ifm-color-danger-lighter:#fb7478;--ifm-color-danger-lightest:#fd9c9f;--ifm-color-danger-contrast-background:#ffebec;--ifm-color-danger-contrast-foreground:#4b1113;--ifm-color-white:#fff;--ifm-color-black:#000;--ifm-color-gray-0:var(--ifm-color-white);--ifm-color-gray-100:#f5f6f7;--ifm-color-gray-200:#ebedf0;--ifm-color-gray-300:#dadde1;--ifm-color-gray-400:#ccd0d5;--ifm-color-gray-500:#bec3c9;--ifm-color-gray-600:#8d949e;--ifm-color-gray-700:#606770;--ifm-color-gray-800:#444950;--ifm-color-gray-900:#1c1e21;--ifm-color-gray-1000:var(--ifm-color-black);--ifm-color-emphasis-0:var(--ifm-color-gray-0);--ifm-color-emphasis-100:var(--ifm-color-gray-100);--ifm-color-emphasis-200:var(--ifm-color-gray-200);--ifm-color-emphasis-300:var(--ifm-color-gray-300);--ifm-color-emphasis-400:var(--ifm-color-gray-400);--ifm-color-emphasis-600:var(--ifm-color-gray-600);--ifm-color-emphasis-700:var(--ifm-color-gray-700);--ifm-color-emphasis-800:var(--ifm-color-gray-800);--ifm-color-emphasis-900:var(--ifm-color-gray-900);--ifm-color-emphasis-1000:var(--ifm-color-gray-1000);--ifm-color-content:var(--ifm-color-emphasis-900);--ifm-color-content-inverse:var(--ifm-color-emphasis-0);--ifm-color-content-secondary:#525860;--ifm-background-color:transparent;--ifm-background-surface-color:var(--ifm-color-content-inverse);--ifm-global-border-width:1px;--ifm-global-radius:0.4rem;--ifm-hover-overlay:rgba(0,0,0,.05);--ifm-font-color-base:var(--ifm-color-content);--ifm-font-color-base-inverse:var(--ifm-color-content-inverse);--ifm-font-color-secondary:var(--ifm-color-content-secondary);--ifm-font-family-basLine truncated
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as t,c as a,o as n,b as e,d as s}from"./app.acdc77a1.js";const x=JSON.parse('{"title":"WIP...","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","lastUpdated":1673439608000}'),r={name:"en/index.md"},d=e("h1",{id:"wip",tabindex:"-1"},[s("WIP... "),e("a",{class:"header-anchor",href:"#wip","aria-hidden":"true"},"#")],-1),o=[d];function c(i,_,p,h,l,f){return n(),a("div",null,o)}const u=t(r,[["render",c]]);export{x as __pageData,u as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as t,c as a,o as n,b as e,d as s}from"./app.acdc77a1.js";const x=JSON.parse('{"title":"WIP...","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","lastUpdated":1673439608000}'),r={name:"en/index.md"},d=e("h1",{id:"wip",tabindex:"-1"},[s("WIP... "),e("a",{class:"header-anchor",href:"#wip","aria-hidden":"true"},"#")],-1),o=[d];function c(i,_,p,h,l,f){return n(),a("div",null,o)}const u=t(r,[["render",c]]);export{x as __pageData,u as default};
|
||||
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="717px" height="276px" viewBox="0 0 717 276" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>FlexSearch</title>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Artboard" transform="translate(-442.000000, -355.000000)">
|
||||
<g id="flexsearch" transform="translate(442.820000, 435.016000)">
|
||||
<path d="M369.16,89.984 C381.362667,89.984 387.464,84.864 387.464,74.624 C387.464,69.6746667 386.674667,65.792 385.096,62.976 C383.517333,60.16 380.509333,57.8986667 376.072,56.192 L360.968,49.408 C356.104,47.5306667 353.672,44.8 353.672,41.216 L353.672,39.04 C353.672,37.3333333 354.461333,35.84 356.04,34.56 C357.618667,33.28 359.944,32.64 363.016,32.64 L382.344,32.64 C383.538667,32.64 384.136,32.0853333 384.136,30.976 L384.136,26.496 C384.136,25.3013333 383.538667,24.704 382.344,24.704 L361.352,24.704 C349.832,24.704 344.072,29.952 344.072,40.448 C344.072,44.4586667 345.010667,47.68 346.888,50.112 C348.765333,52.544 351.88,54.656 356.232,56.448 L371.336,62.848 C375.688,64.5546667 377.864,67.6693333 377.864,72.192 L377.864,74.624 C377.864,79.5733333 374.536,82.048 367.88,82.048 L346.376,82.048 C345.181333,82.048 344.584,82.6026667 344.584,83.712 L344.584,88.192 C344.584,89.3866667 345.181333,89.984 346.376,89.984 L369.16,89.984 Z M456.24,89.984 C457.434667,89.984 458.032,89.4293333 458.032,88.32 L458.032,83.712 C458.032,82.5173333 457.434667,81.92 456.24,81.92 L430.128,81.92 C422.96,81.92 419.376,78.208 419.376,70.784 L419.376,62.976 C419.376,62.208 419.802667,61.824 420.656,61.824 L456.88,61.824 C458.074667,61.824 458.672,61.184 458.672,59.904 L458.672,43.648 C458.672,37.6746667 457.008,33.024 453.68,29.696 C450.352,26.368 445.744,24.704 439.856,24.704 L429.104,24.704 C423.216,24.704 418.586667,26.368 415.216,29.696 C411.845333,33.024 410.16,37.6746667 410.16,43.648 L410.16,71.04 C410.16,77.0133333 411.845333,81.664 415.216,84.992 C418.586667,88.32 423.216,89.984 429.104,89.984 L456.24,89.984 Z M420.656,55.04 C419.802667,55.04 419.376,54.6133333 419.376,53.76 L419.376,43.904 C419.376,36.5653333 422.96,32.896 430.128,32.896 L438.832,32.896 C446,32.896 449.584,36.5653333 449.584,43.904 L449.584,53.76 C449.584,54.6133333 449.157333,55.04 448.304,55.04 L420.656,55.04 Z M507.736,89.984 C514.306667,89.984 518.658667,87.7226667 520.792,83.2 L521.304,83.2 L521.304,88.192 C521.304,89.3866667 521.901333,89.984 523.096,89.984 L528.856,89.984 C530.050667,89.984 530.648,89.3866667 530.648,88.192 L530.648,26.496 C530.648,25.3013333 530.050667,24.704 528.856,24.704 L501.08,24.704 C495.192,24.704 490.562667,26.368 487.192,29.696 C483.821333,33.024 482.136,37.6746667 482.136,43.648 L482.136,71.04 C482.136,77.0133333 483.821333,81.664 487.192,84.992 C490.562667,88.32 495.192,89.984 501.08,89.984 L507.736,89.984 Z M502.104,81.792 C495.021333,81.792 491.48,78.08 491.48,70.656 L491.48,44.032 C491.48,36.608 495.021333,32.896 502.104,32.896 L520.024,32.896 C520.877333,32.896 521.304,33.28 521.304,34.048 L521.304,70.016 C521.304,73.7706667 520.28,76.672 518.232,78.72 C516.184,80.768 513.24,81.792 509.4,81.792 L502.104,81.792 Z M564.864,89.984 C566.058667,89.984 566.656,89.3866667 566.656,88.192 L566.656,45.824 C566.656,41.8133333 567.68,38.656 569.728,36.352 C571.776,34.048 574.72,32.896 578.56,32.896 L585.472,32.896 C586.069333,32.9813333 586.496,32.8746667 586.752,32.576 C587.008,32.2773333 587.136,31.8293333 587.136,31.232 L587.136,26.496 C587.136,25.3013333 586.581333,24.704 585.472,24.704 L580.48,24.704 C577.237333,24.704 574.421333,25.3866667 572.032,26.752 C569.642667,28.1173333 568.021333,29.7386667 567.168,31.616 L566.656,31.616 L566.656,26.496 C566.656,25.3013333 566.058667,24.704 564.864,24.704 L559.104,24.704 C557.909333,24.704 557.312,25.3013333 557.312,26.496 L557.312,88.192 C557.312,89.3866667 557.909333,89.984 559.104,89.984 L564.864,89.984 Z M642.88,89.984 C644.074667,89.984 644.672,89.4293333 644.672,88.32 L644.672,83.584 C644.672,82.3893333 644.074667,81.792 642.88,81.792 L625.344,81.792 C618.261333,81.792 614.72,78.08 614.72,70.656 L614.72,44.032 C614.72,36.608 618.261333,32.896 625.344,32.896 L642.88,32.896 C644.074667,32.896 644.672,32.3413333 644.672,31.232 L644.672,26.496 C644.672,25.3013333 644.074667,24.704 642.88,24.704 L624.32,24.704 C618.432,24.704 613.802667,26.368 610.432,29.696 C607.061333,33.024 605.376,37.6746667 605.376,43.648 L605.376,71.04 C605.376,77.0133333 607.061333,81.664 610.432,84.992 C613.802667,88.32 618.432,89.984 624.32,89.984 L642.88,89.984 Z M674.28,89.984 C675.474667,89.984 676.072,89.3866667 676.072,88.192 L676.072,44.672 C676.072,40.9173333 677.096,38.016 679.144,35.968 C681.192,33.92 684.136,32.896 687.976,32.896 L695.144,32.896 C702.312,32.896 705.896,36.608 705.896,44.032 L705.896,88.192 C705.896,89.3866667 706.493333,89.984 707.688,89.984 L713.448,89.984 C714.642667,89.984 715.24,89.3866667 715.24,88.192 L715.24,43.648 C715.24,37.6746667 713.618667,33.024 710.376,29.696 C707.133333,26.368 702.610667,24.704 696.808,24.704 L689.64,24.704 C683.069333,24.704 678.717333,26.9653333 676.584,31.488 L676.072,31.488 L676.072,1.792 C676.072,0.597333333 675.474667,0 674.28,0 L668.52,0 C667.325333,0 666.728,0.597333333 666.728,1.792 L666.728,88.192 C666.728,89.3866667 667.325333,89.984 668.52,89.984 L674.28,89.984 Z" id="search" fill="#999" fill-rule="nonzero"></path>
|
||||
<path d="M43.52,7.68 C45.2266667,7.68 46.08,8.576 46.08,10.368 L46.08,10.368 L46.08,19.072 C46.08,20.864 45.2266667,21.76 43.52,21.76 L43.52,21.76 L17.792,21.76 C16.768,21.76 16.256,22.2293333 16.256,23.168 L16.256,23.168 L16.256,43.008 C16.256,44.032 16.768,44.544 17.792,44.544 L17.792,44.544 L39.68,44.544 C41.472,44.544 42.368,45.44 42.368,47.232 L42.368,47.232 L42.368,55.808 C42.368,57.6853333 41.472,58.624 39.68,58.624 L39.68,58.624 L17.792,58.624 C16.768,58.624 16.256,59.0933333 16.256,60.032 L16.256,60.032 L16.256,87.296 C16.256,89.088 15.36,89.984 13.568,89.984 L13.568,89.984 L2.688,89.984 C0.896,89.984 0,89.088 0,87.296 L0,87.296 L0,10.368 C0,8.576 0.896,7.68 2.688,7.68 L2.688,7.68 Z M81.168,7.68 C82.96,7.68 83.856,8.576 83.856,10.368 L83.856,10.368 L83.856,74.368 C83.856,75.3066667 84.368,75.776 85.392,75.776 L85.392,75.776 L112.4,75.776 C114.106667,75.776 114.96,76.7146667 114.96,78.592 L114.96,78.592 L114.96,87.296 C114.96,89.088 114.106667,89.984 112.4,89.984 L112.4,89.984 L70.288,89.984 C68.496,89.984 67.6,89.088 67.6,87.296 L67.6,87.296 L67.6,10.368 C67.6,8.576 68.496,7.68 70.288,7.68 L70.288,7.68 Z M266.984,7.68 C269.117333,7.68 270.525333,8.576 271.208,10.368 L271.208,10.368 L283.368,37.888 L283.88,37.888 L295.912,10.368 C296.765333,8.576 298.130667,7.68 300.008,7.68 L300.008,7.68 L312.552,7.68 C313.405333,7.68 314.024,8 314.408,8.64 C314.792,9.28 314.813333,9.94133333 314.472,10.624 L314.472,10.624 L295.016,47.872 L314.856,87.04 C315.282667,87.8933333 315.325333,88.5973333 314.984,89.152 C314.642667,89.7066667 314.002667,89.984 313.064,89.984 L313.064,89.984 L300.264,89.984 C298.472,89.984 297.234667,89.1306667 296.552,87.424 L296.552,87.424 L283.88,59.776 L283.368,59.776 L270.568,87.424 C269.8,89.1306667 268.52,89.984 266.728,89.984 L266.728,89.984 L254.056,89.984 C253.202667,89.984 252.605333,89.7066667 252.264,89.152 C251.922667,88.5973333 251.922667,87.936 252.264,87.168 L252.264,87.168 L272.104,47.872 L252.904,10.496 C252.562667,9.81333333 252.562667,9.17333333 252.904,8.576 C253.245333,7.97866667 253.842667,7.68 254.696,7.68 L254.696,7.68 Z" id="flex" fill="#4986FF" fill-rule="nonzero"></path>
|
||||
<path d="M229.17,75.884 C230.274569,75.884 231.17,76.7794305 231.17,77.884 L231.17,87.964 C231.17,89.0685695 230.274569,89.964 229.17,89.964 L136.07,89.964 C134.965431,89.964 134.07,89.0685695 134.07,87.964 L134.07,77.884 C134.07,76.7794305 134.965431,75.884 136.07,75.884 L229.17,75.884 Z M229.17,41.184 C230.274569,41.184 231.17,42.0794305 231.17,43.184 L231.17,53.264 C231.17,54.3685695 230.274569,55.264 229.17,55.264 L136.07,55.264 C134.965431,55.264 134.07,54.3685695 134.07,53.264 L134.07,43.184 C134.07,42.0794305 134.965431,41.184 136.07,41.184 L229.17,41.184 Z M229.17,7.684 C230.274569,7.684 231.17,8.5794305 231.17,9.684 L231.17,19.764 C231.17,20.8685695 230.274569,21.764 229.17,21.764 L136.07,21.764 C134.965431,21.764 134.07,20.8685695 134.07,19.764 L134.07,9.684 C134.07,8.5794305 134.965431,7.684 136.07,7.684 L229.17,7.684 Z" id="Shape" fill="#FF7300"></path>
|
||||
</g>
|
||||
<g id="flexsearch" transform="translate(442.820000, 355.016000)">
|
||||
<path d="M275.275454,208.024387 C277.228076,209.977008 277.228076,213.142833 275.275454,215.095454 C251.566743,238.804165 220.015227,251.739774 187.17553,251.996115 L186.175454,252 C158.267443,252 131.240582,242.84323 109.10845,225.696888 L60.3379221,274.468037 C59.5568735,275.249086 58.2905435,275.249086 57.5094949,274.468037 L49.0242136,265.982756 C48.243165,265.201707 48.243165,263.935378 49.0242136,263.154329 L97.0814271,215.096 L97.08,215.095454 L104.178542,208 L106.261974,210.083151 C127.837358,230.604849 155.981619,241.768069 185.258678,241.996425 L186.18,242 C216.751149,242 246.150834,230.07794 268.204387,208.024387 C270.157008,206.071765 273.322833,206.071765 275.275454,208.024387 Z M275.275454,36.9045456 C277.228076,38.857167 277.228076,42.0229919 275.275454,43.9756134 C273.322833,45.9282348 270.157008,45.9282348 268.204387,43.9756134 C222.903569,-1.32520446 149.456431,-1.32520446 104.155613,43.9756134 C102.202992,45.9282348 99.037167,45.9282348 97.0845456,43.9756134 C95.1319241,42.0229919 95.1319241,38.857167 97.0845456,36.9045456 C146.290606,-12.3015152 226.069394,-12.3015152 275.275454,36.9045456 Z" id="Shape" fill="#999"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.6 KiB |
@@ -0,0 +1,161 @@
|
||||
import{_ as s,c as n,o as a,a as l}from"./app.acdc77a1.js";const C=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"Vue.js","slug":"vue-js","link":"#vue-js","children":[]},{"level":2,"title":"React.js","slug":"react-js","link":"#react-js","children":[]},{"level":2,"title":"语法提示","slug":"语法提示","link":"#语法提示","children":[]}],"relativePath":"index.md","lastUpdated":1673438559000}'),p={name:"index.md"},e=l(`<h1 id="安装使用" tabindex="-1">安装使用 <a class="header-anchor" href="#安装使用" aria-hidden="true">#</a></h1><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-5dKOJ" id="tab-WYvX6HB" checked="checked"><label for="tab-WYvX6HB">npm</label><input type="radio" name="group-5dKOJ" id="tab-wvSiD2C"><label for="tab-wvSiD2C">yarn</label><input type="radio" name="group-5dKOJ" id="tab-Cxdy-7_"><label for="tab-Cxdy-7_">pnpm</label><input type="radio" name="group-5dKOJ" id="tab-8AhCFUN"><label for="tab-8AhCFUN">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">yarn</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">path/to/artplayer.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1"><code>CDN</code> <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-QXIc0" id="tab-42OT03L" checked="checked"><label for="tab-42OT03L">jsdelivr.net</label><input type="radio" name="group-QXIc0" id="tab-9qYSlYS"><label for="tab-9qYSlYS">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://unpkg.com/artplayer/dist/artplayer.js</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="使用" tabindex="-1">使用 <a class="header-anchor" href="#使用" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-uqpdv" id="tab-sqm2yNc" checked="checked"><label for="tab-sqm2yNc">index.js</label><input type="radio" name="group-uqpdv" id="tab-cTv6c1O"><label for="tab-cTv6c1O">index.html</label></div><div class="blocks"><div class="language-js active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Artplayer </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">artplayer</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">path/to/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">ArtPlayer Demo</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">UTF-8</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> <</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">artplayer-app</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">400px</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">300px</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">artplayer-app</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div></div></div><div class="warning custom-block"><p class="custom-block-title">提示</p><p>播放器的尺寸依赖于容器 <code>container</code> 的尺寸,所以你的容器 <code>container</code> 必须是有尺寸的</p></div><div class="tip custom-block"><p class="custom-block-title">以下链接可以看到更多的使用例子</p><p><a href="https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template" target="_blank" rel="noreferrer">/packages/artplayer-template</a></p></div><h2 id="vue-js" tabindex="-1"><code>Vue.js</code> <a class="header-anchor" href="#vue-js" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-drVhI" id="tab-S2_nx2I" checked="checked"><label for="tab-S2_nx2I">Artplayer.vue</label><input type="radio" name="group-drVhI" id="tab-D2zW9oW"><label for="tab-D2zW9oW">app.vue</label></div><div class="blocks"><div class="language-vue active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">ref</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">artRef</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Artplayer </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">artplayer</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> instance</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">null,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">props</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">option</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">type</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> Object</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">required</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">mounted</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...this.</span><span style="color:#A6ACCD;">option</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> container</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">$refs</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">artRef</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">$nextTick</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">$emit</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">get-instance</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">beforeUnmount</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&&</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">destroy</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">(</span><span style="color:#FF9CAC;">false</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">Artplayer</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">@get-instance</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">getInstance</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:option</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">option</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">style</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Artplayer </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">./Artplayer.vue</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> option</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> url</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">path/to/video.mp4</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> style</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> width</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">600px</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> height</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">400px</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> margin</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">60px auto 0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">components</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> Artplayer</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">methods</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">getInstance</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div></div></div><div class="warning custom-block"><p class="custom-block-title">Artplayer 非响应式:</p><p>在 <code>Vue.js</code> 里直接修改 <code>option</code> 是不会改变播放器的</p></div><h2 id="react-js" tabindex="-1"><code>React.js</code> <a class="header-anchor" href="#react-js" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group--qmXP" id="tab-zWGDaFC" checked="checked"><label for="tab-zWGDaFC">Artplayer.jsx</label><input type="radio" name="group--qmXP" id="tab-2jOCqAY"><label for="tab-2jOCqAY">app.jsx</label></div><div class="blocks"><div class="language-jsx active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useEffect</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useRef</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Artplayer </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">artplayer</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Player</span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">option</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">getInstance</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;font-style:italic;">rest</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">artRef</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useRef</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useEffect</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">option</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> container</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">artRef</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">current</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">getInstance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&&</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">typeof</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">getInstance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">function</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">getInstance</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">art</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&&</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">destroy</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">(</span><span style="color:#FF9CAC;">false</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> [])</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">ref</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">artRef</span><span style="color:#89DDFF;">} {...</span><span style="color:#A6ACCD;">rest</span><span style="color:#89DDFF;">}></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">>;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><div class="language-jsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> React </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Artplayer </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./ArtPlayer.jsx</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">App</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> (</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">Artplayer</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">option</span><span style="color:#89DDFF;">={{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">https://artplayer.org/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">={{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">600px</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">400px</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">margin</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">60px auto 0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">getInstance</span><span style="color:#89DDFF;">={(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#A6ACCD;">(art)</span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#F07178;"> )</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> App</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div></div></div><div class="warning custom-block"><p class="custom-block-title">Artplayer 非响应式:</p><p>在 <code>React.js</code> 里直接修改 <code>option</code> 是不会改变播放器的</p></div><h2 id="语法提示" tabindex="-1">语法提示 <a class="header-anchor" href="#语法提示" aria-hidden="true">#</a></h2><p>有时你的 <code>js</code> 文件会丢失 <code>TypeScript</code> 的类型提示,这时候你可以手动导入类型</p><p>变量:</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">/**</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"> * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">type</span><span style="color:#676E95;font-style:italic;"> </span><span style="color:#89DDFF;font-style:italic;">{</span><span style="color:#FFCB6B;font-style:italic;">import("artplayer")</span><span style="color:#89DDFF;font-style:italic;">}</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"> */</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">null;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>参数:</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">/**</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"> * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">param</span><span style="color:#676E95;font-style:italic;"> </span><span style="color:#89DDFF;font-style:italic;">{</span><span style="color:#FFCB6B;font-style:italic;">import("artplayer")</span><span style="color:#89DDFF;font-style:italic;">}</span><span style="color:#676E95;font-style:italic;"> </span><span style="color:#A6ACCD;font-style:italic;">art</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"> */</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getInstance</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">//</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>属性:</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">/**</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"> * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">type</span><span style="color:#676E95;font-style:italic;"> </span><span style="color:#89DDFF;font-style:italic;">{</span><span style="color:#FFCB6B;font-style:italic;">import("artplayer")</span><span style="color:#89DDFF;font-style:italic;">}</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"> */</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> art</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">null,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div>`,23),o=[e];function t(r,c,y,F,D,i){return a(),n("div",null,o)}const u=s(p,[["render",t]]);export{C as __pageData,u as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as s,c as n,o as a,a as l}from"./app.acdc77a1.js";const C=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"Vue.js","slug":"vue-js","link":"#vue-js","children":[]},{"level":2,"title":"React.js","slug":"react-js","link":"#react-js","children":[]},{"level":2,"title":"语法提示","slug":"语法提示","link":"#语法提示","children":[]}],"relativePath":"index.md","lastUpdated":1673438559000}'),p={name:"index.md"},e=l("",23),o=[e];function t(r,c,y,F,D,i){return a(),n("div",null,o)}const u=s(p,[["render",t]]);export{C as __pageData,u as default};
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1 +0,0 @@
|
||||
(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[918],{3905:function(e,t,n){"use strict";n.d(t,{Zo:function(){return u},kt:function(){return p}});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var i=a.createContext({}),s=function(e){var t=a.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},u=function(e){var t=s(e.components);return a.createElement(i.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,i=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),d=s(n),p=r,v=d["".concat(i,".").concat(p)]||d[p]||m[p]||l;return n?a.createElement(v,o(o({ref:t},u),{},{components:n})):a.createElement(v,o({ref:t},u))}));function p(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,o=new Array(l);o[0]=d;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c.mdxType="string"==typeof e?e:r,o[1]=c;for(var s=2;s<l;s++)o[s]=n[s];return a.createElement.apply(null,o)}return a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},7209:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return Ot}});var a=n(7294),r=n(6010),l=n(7462),o=n(5999),c=n(9960);function i(e){var t=e.permalink,n=e.title,l=e.subLabel,o=e.isNext;return a.createElement(c.Z,{className:(0,r.Z)("pagination-nav__link",o?"pagination-nav__link--next":"pagination-nav__link--prev"),to:t},l&&a.createElement("div",{className:"pagination-nav__sublabel"},l),a.createElement("div",{className:"pagination-nav__label"},n))}function s(e){var t=e.previous,n=e.next;return a.createElement("nav",{className:"pagination-nav docusaurus-mt-lg","aria-label":(0,o.I)({id:"theme.docs.paginator.navAriaLabel",message:"Docs pages navigation",description:"The ARIA label for the docs pagination"})},t&&a.createElement(i,(0,l.Z)({},t,{subLabel:a.createElement(o.Z,{id:"theme.docs.paginator.previous",description:"The label used to navigate to the previous doc"},"Previous")})),n&&a.createElement(i,(0,l.Z)({},n,{subLabel:a.createElement(o.Z,{id:"theme.docs.paginator.next",description:"The label used to navigate to the next doc"},"Next"),isNext:!0})))}var u=n(2263),m=n(5551),d=n(373),p=n(5281),v=n(4477);var f={unreleased:function(e){var t=e.siteTitle,n=e.versionMetadata;return a.createElement(o.Z,{id:"theme.docs.versions.unreleasedVersionLabel",description:"The label used to tell the user that he's browsing an unreleased doc version",values:{siteTitle:t,versionLabel:a.createElement("b",null,n.label)}},"This is unreleased documentation for {siteTitle} {versionLabel} version.")},unmaintained:function(e){var t=e.siteTitle,n=e.versionMetadata;return a.createElement(o.Z,{id:"theme.docs.versions.unmaintainedVersionLabel",description:"The label used to tell the user that he's browsing an unmaintained doc version",values:{siteTitle:t,versionLabel:a.createElement("b",null,n.label)}},"This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.")}};function g(e){var t=f[e.versionMetadata.banner];return a.createElement(t,e)}function h(e){var t=e.versionLabel,n=e.to,r=e.onClick;return a.createElement(o.Z,{id:"theme.docs.versions.latestVersionSuggestionLabel",description:"The label used to tell the user to check the latest version",values:{versionLabel:t,latestVersionLink:a.createElement("b",null,a.createElement(c.Z,{to:n,onClick:r},a.createElement(o.Z,{id:"theme.docs.versions.latestVersionLinkLabel",description:"The label used for the latest version suggestion link label"},"latest version")))}},"For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).")}function b(e){var t,n=e.className,l=e.versionMetadata,o=(0,u.Z)().siteConfig.title,c=(0,m.gA)({failfast:!0}).pluginId,i=(0,d.J)(c).savePreferredVersionName,s=(0,m.Jo)(c),v=s.latestDocSuggestion,fLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[514,608],{9068:function(e,t,n){n.r(t),n.d(t,{default:function(){return ye}});var a=n(7294),r=n(4608),l=n(3460),i=n(6010),o=n(5999),c=n(2466),s=n(5936);var d=n(5281),u="backToTopButton_RiI4",m="backToTopButtonShow_ssHd";function b(){var e=function(e){var t=e.threshold,n=(0,a.useState)(!1),r=n[0],l=n[1],i=(0,a.useRef)(!1),o=(0,c.Ct)(),d=o.startScroll,u=o.cancelScroll;return(0,c.RF)((function(e,n){var a=e.scrollY,r=null==n?void 0:n.scrollY;r&&(i.current?i.current=!1:a>=r?(u(),l(!1)):a<t?l(!1):a+window.innerHeight<document.documentElement.scrollHeight&&l(!0))})),(0,s.S)((function(e){e.location.hash&&(i.current=!0,l(!1))})),{shown:r,scrollToTop:function(){return d(0)}}}({threshold:300}),t=e.shown,n=e.scrollToTop;return a.createElement("button",{"aria-label":(0,o.I)({id:"theme.BackToTopButton.buttonAriaLabel",message:"Scroll back to top",description:"The ARIA label for the back to top button"}),className:(0,i.Z)("clean-btn",d.k.common.backToTopButton,u,t&&m),type:"button",onClick:n})}var p=n(7524),v=n(6668),h=n(5537),f=n(7462);function E(e){return a.createElement("svg",(0,f.Z)({width:"20",height:"20","aria-hidden":"true"},e),a.createElement("g",{fill:"#7a7a7a"},a.createElement("path",{d:"M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"}),a.createElement("path",{d:"M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"})))}var g="collapseSidebarButton_FykI",_="collapseSidebarButtonIcon_DTRl";function k(e){var t=e.onClick;return a.createElement("button",{type:"button",title:(0,o.I)({id:"theme.docs.sidebar.collapseButtonTitle",message:"Collapse sidebar",description:"The title attribute for collapse button of doc sidebar"}),"aria-label":(0,o.I)({id:"theme.docs.sidebar.collapseButtonAriaLabel",message:"Collapse sidebar",description:"The title attribute for collapse button of doc sidebar"}),className:(0,i.Z)("button button--secondary button--outline",g),onClick:t},a.createElement(E,{className:_}))}var C=n(9689),I=n(3366),N=n(9688),S=n(3791),Z=n(8596),y=n(6043),x=Symbol("EmptyContext"),T=a.createContext(x);function L(e){var t=e.children,n=(0,a.useState)(null),r=n[0],l=n[1],i=(0,a.useMemo)((function(){return{expandedItem:r,setExpandedItem:l}}),[r]);return a.createElement(T.Provider,{value:i},t)}var w=n(9960),A=n(2389),F=["item","onItemClick","activePath","level","index"];function P(e){var t=e.categoryLabel,n=e.onClick;return a.createElement("button",{"aria-label":(0,o.I)({id:"theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel",message:"Toggle the collapsible sidebar category '{label}'",description:"The ARIA label to toggle the collapsible sidebar category"},{label:t}),type:"button",className:"clean-btn menu__caret",onClick:n})}function M(e){var t=e.item,n=e.onItemClick,r=e.activePath,l=e.level,o=e.index,c=(0,I.Z)(e,F),s=t.items,u=t.label,m=t.collapsible,b=t.className,p=t.href,h=function(e){var t=(0,A.Z)();return(0,a.useMemo)((function(){return e.href?e.href:!t&&e.collapsible?(0,S.Wl)(e):void 0}),[e,t])}(t),E=(0,S._F)(t,r),g=(0,Z.Mg)(p,r),_=(0,y.u)({initialState:function(){return!!m&&(!E&&t.collapsed)}}),k=_.collapsed,C=_.setCollapsed;!function(e){var t=e.isActive,n=e.collapsed,r=e.setCollapsed,l=(0,N.D9)(t);(0,a.useEffect)((function(){t&&!l&&n&&r(!1)}),[t,l,n,r])}({isActive:E,collapsed:k,setCollapsed:C});var L=function(){var e=(0,a.useContext)(T);if(e===x)throw new N.i6("DocSidebarItemsExpandedStateProvider");return e}(),M=L.expandedItem,H=L.setExpandedItem;function B(e){void 0===e&&(e=!k),H(e?null:o),C(e)}var D=(0,v.L)().docs.sidebar.autoCollapseCategories;return(0,a.useEffect)((function(){m&&M&&M!==o&&D&&C(!0)}),[m,M,o,C,D]),a.createElement("li",{className:(0,i.Z)(d.k.docs.docSidebarItemCategory,d.k.docs.docSidebarItemCategoryLevel(l),"menu__list-item",{"menu__list-item--collapsed":k},b)},a.createElement("div",{className:(0,i.Z)("menu__list-item-collapsible",{"menu__list-item-collapsible--active":g})},a.createElement(w.Z,(0,f.Z)({className:(0,i.Z)("menu__link",{"menu__link--sublist":m,"menu__link--sublist-caret":!p&&m,"menu__link--active":E}),onClick:m?function(e){null==n||n(t),p?B(!1):(e.preventDefault(),B())}:function(){null==n||n(t)},"aria-current":g?"page":void 0,"aria-expanded":m?!k:void 0,href:m?null!=h?h:"#":h},c),u),p&&m&&a.createElement(P,{categoryLabel:u,onClick:function(e){e.preventDefault(),B()}})),a.createElement(y.z,{lazy:!0,as:"ul",className:"menu__list",collapsed:k},a.createElement(Q,{items:s,tabIndex:k?-1:0,onItemClick:n,activePath:r,level:l+1})))}var H=n(3919),B=n(541),D="menuExternalLink_KU1_",R=["item","onILine truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[784],{3905:function(e,n,t){t.d(n,{Zo:function(){return m},kt:function(){return d}});var o=t(7294);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?a(Object(t),!0).forEach((function(n){r(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function c(e,n){if(null==e)return{};var t,o,r=function(e,n){if(null==e)return{};var t,o,r={},a=Object.keys(e);for(o=0;o<a.length;o++)t=a[o],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)t=a[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var l=o.createContext({}),s=function(e){var n=o.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},m=function(e){var n=s(e.components);return o.createElement(l.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return o.createElement(o.Fragment,{},n)}},p=o.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,l=e.parentName,m=c(e,["components","mdxType","originalType","parentName"]),p=s(t),d=r,y=p["".concat(l,".").concat(d)]||p[d]||u[d]||a;return t?o.createElement(y,i(i({ref:n},m),{},{components:t})):o.createElement(y,i({ref:n},m))}));function d(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,i=new Array(a);i[0]=p;var c={};for(var l in n)hasOwnProperty.call(n,l)&&(c[l]=n[l]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var s=2;s<a;s++)i[s]=t[s];return o.createElement.apply(null,i)}return o.createElement.apply(null,t)}p.displayName="MDXCreateElement"},8414:function(e,n,t){t.r(n),t.d(n,{assets:function(){return m},contentTitle:function(){return l},default:function(){return d},frontMatter:function(){return c},metadata:function(){return s},toc:function(){return u}});var o=t(7462),r=t(3366),a=(t(7294),t(3905)),i=["components"],c={title:"Handle a single component",sidebar_position:3},l=void 0,s={unversionedId:"en/Questions/Handle_single_component",id:"en/Questions/Handle_single_component",title:"Handle a single component",description:"When we add custom components in layers, contextmenu, controls, It is best to add a name property that is used to position the DOM element of the component.",source:"@site/docs/en/Questions/Handle_single_component.mdx",sourceDirName:"en/Questions",slug:"/en/Questions/Handle_single_component",permalink:"/document/en/Questions/Handle_single_component",draft:!1,tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Handle a single component",sidebar_position:3},sidebar:"en",previous:{title:"Add button to the controls",permalink:"/document/en/Questions/Create_button_in_the_controls"},next:{title:"How to import types",permalink:"/document/en/Questions/How_to_import_types"}},m={},u=[],p={toc:u};function d(e){var n=e.components,t=(0,r.Z)(e,i);return(0,a.kt)("wrapper",(0,o.Z)({},p,t,{components:n,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"When we add custom components in ",(0,a.kt)("inlineCode",{parentName:"p"},"layers"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"contextmenu"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"controls"),", It is best to add a ",(0,a.kt)("inlineCode",{parentName:"p"},"name")," property that is used to position the DOM element of the component."),(0,a.kt)("p",null,"Here are three ways to get the DOM element of the component: component method ",(0,a.kt)("inlineCode",{parentName:"p"},"mounted"),", instance method ",(0,a.kt)("inlineCode",{parentName:"p"},"query"),", recommended through ",(0,a.kt)("inlineCode",{parentName:"p"},"name")," direct acquisition."),(0,a.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n setting: true,\n});\n\nart.on('ready', () => {\n art.layers.add({\n name: 'layer1',\n html: 'your-layer',\n mounted: function($layer1) {\n //\n }\n });\n\n art.contextmenu.add({\n name: 'contextmenu1',\n html: 'your-contextmenu',\n mounted: function($contextmenu1) {\n //\n }\n });\n\n art.controls.add({\n name: 'control1',\n html: 'your-control',\n position: 'right',\n mounted: function(
Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[615],{3905:function(e,t,n){n.d(t,{Zo:function(){return p},kt:function(){return f}});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=r.createContext({}),s=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=s(e.components);return r.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,l=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),m=s(n),f=o,d=m["".concat(l,".").concat(f)]||m[f]||u[f]||a;return n?r.createElement(d,c(c({ref:t},p),{},{components:n})):r.createElement(d,c({ref:t},p))}));function f(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,c=new Array(a);c[0]=m;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:o,c[1]=i;for(var s=2;s<a;s++)c[s]=n[s];return r.createElement.apply(null,c)}return r.createElement.apply(null,n)}m.displayName="MDXCreateElement"},6707:function(e,t,n){n.r(t),n.d(t,{assets:function(){return p},contentTitle:function(){return l},default:function(){return f},frontMatter:function(){return i},metadata:function(){return s},toc:function(){return u}});var r=n(7462),o=n(3366),a=(n(7294),n(3905)),c=["components"],i={title:"\u4e0e React Portal \u4f7f\u7528",sidebar_position:6},l=void 0,s={unversionedId:"zh-cn/Questions/Use_with_react_portal",id:"zh-cn/Questions/Use_with_react_portal",title:"\u4e0e React Portal \u4f7f\u7528",description:"\u5728 layers\u3001contextmenu\u3001controls \u91cc\u4f7f\u7528 react \u7ec4\u4ef6\u4e5f\u662f\u975e\u5e38\u5bb9\u6613\u7684\u4e8b\uff0c\u901a\u8fc7 createPortal \u5904\u7406\u66f4\u590d\u6742\u7684\u4e1a\u52a1\u903b\u8f91",source:"@site/docs/zh-cn/Questions/Use_with_react_portal.mdx",sourceDirName:"zh-cn/Questions",slug:"/zh-cn/Questions/Use_with_react_portal",permalink:"/document/zh-cn/Questions/Use_with_react_portal",draft:!1,tags:[],version:"current",sidebarPosition:6,frontMatter:{title:"\u4e0e React Portal \u4f7f\u7528",sidebar_position:6},sidebar:"zh-cn",previous:{title:"\u600e\u4e48\u6dfb\u52a0\u8bbe\u7f6e\u9762\u677f",permalink:"/document/zh-cn/Questions/How_to_add_setting_panel"}},p={},u=[],m={toc:u};function f(e){var t=e.components,n=(0,o.Z)(e,c);return(0,a.kt)("wrapper",(0,r.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"\u5728 layers\u3001contextmenu\u3001controls \u91cc\u4f7f\u7528 react \u7ec4\u4ef6\u4e5f\u662f\u975e\u5e38\u5bb9\u6613\u7684\u4e8b\uff0c\u901a\u8fc7 createPortal \u5904\u7406\u66f4\u590d\u6742\u7684\u4e1a\u52a1\u903b\u8f91"),(0,a.kt)("p",null,"\ud83d\udc49 ",(0,a.kt)("a",{parentName:"p",href:"https://codesandbox.io/s/artplayer-react-portal-5z32h"},"\u70b9\u51fb\u6253\u5f00\u5728\u7ebf\u6f14\u793a")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx"},'import React, { useState, useEffect } from "react";\nimport ReactDOM, { createPortal } from "react-dom";\nimport Artplayer from "artplayer/examples/react/Artplayer";\n\nfunction Timer({ time }) {\n return <div>{time}</div>;\n}\n\nfunction App() {\n const [art, setArt] = useState(null);\n const [time, setTime] = useState(0);\n\n useEffect(() => {\n const update = () => setTime((time) => time + 1);\n setInterval(update, 1000);\n }, []);\n\n return (\n <div>\n <Artplayer\n option={{\n url: "https://artplayer.org/assets/sample/video.mp4",\n layers: [\n {\n html: "",\n name: "portal"\n }\n ],\n controls: [\n {\n position: "right",\n name: "portal",\n html: ""\n }\n ]\n }}\n style={{\n widLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[245],{4130:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return v}});var i=n(5485),a=n.n(i),s=n(1336);s.tokenizer.separator=/[\s\-/]+/;var r=function(){function e(e,t){this.searchDocs=e,this.lunrIndex=s.Index.load(t)}var t=e.prototype;return t.getLunrResult=function(e){return this.lunrIndex.query((function(t){var n=s.tokenizer(e);t.term(n,{boost:10}),t.term(n,{wildcard:s.Query.wildcard.TRAILING})}))},t.getHit=function(e,t,n){return{hierarchy:{lvl0:e.pageTitle||e.title,lvl1:0===e.type?null:e.title},url:e.url,_snippetResult:n?{content:{value:n,matchLevel:"full"}}:null,_highlightResult:{hierarchy:{lvl0:{value:0===e.type?t||e.title:e.pageTitle},lvl1:0===e.type?null:{value:t||e.title}}}}},t.getTitleHit=function(e,t,n){var i=t[0],a=t[0]+n,s=e.title.substring(0,i)+'<span class="algolia-docsearch-suggestion--highlight">'+e.title.substring(i,a)+"</span>"+e.title.substring(a,e.title.length);return this.getHit(e,s)},t.getKeywordHit=function(e,t,n){var i=t[0],a=t[0]+n,s=e.title+"<br /><i>Keywords: "+e.keywords.substring(0,i)+'<span class="algolia-docsearch-suggestion--highlight">'+e.keywords.substring(i,a)+"</span>"+e.keywords.substring(a,e.keywords.length)+"</i>";return this.getHit(e,s)},t.getContentHit=function(e,t){for(var n=t[0],i=t[0]+t[1],a=n,s=i,r=!0,l=!0,o=0;o<3;o++){var u=e.content.lastIndexOf(" ",a-2),c=e.content.lastIndexOf(".",a-2);if(c>0&&c>u){a=c+1,r=!1;break}if(u<0){a=0,r=!1;break}a=u+1}for(var h=0;h<10;h++){var g=e.content.indexOf(" ",s+1),d=e.content.indexOf(".",s+1);if(d>0&&d<g){s=d,l=!1;break}if(g<0){s=e.content.length,l=!1;break}s=g}var p=e.content.substring(a,n);return r&&(p="... "+p),p+='<span class="algolia-docsearch-suggestion--highlight">'+e.content.substring(n,i)+"</span>",p+=e.content.substring(i,s),l&&(p+=" ..."),this.getHit(e,null,p)},t.search=function(e){var t=this;return new Promise((function(n,i){var a=t.getLunrResult(e),s=[];a.length>5&&(a.length=5),t.titleHitsRes=[],t.contentHitsRes=[],a.forEach((function(n){var i=t.searchDocs[n.ref],a=n.matchData.metadata;for(var r in a)if(a[r].title){if(!t.titleHitsRes.includes(n.ref)){var l=a[r].title.position[0];s.push(t.getTitleHit(i,l,e.length)),t.titleHitsRes.push(n.ref)}}else if(a[r].content){var o=a[r].content.position[0];s.push(t.getContentHit(i,o))}else if(a[r].keywords){var u=a[r].keywords.position[0];s.push(t.getKeywordHit(i,u,e.length)),t.titleHitsRes.push(n.ref)}})),s.length>5&&(s.length=5),n(s)}))},e}(),l=n(1639),o=n.n(l),u="algolia-docsearch",c=u+"-suggestion",h={suggestion:'\n <a class="'+c+"\n {{#isCategoryHeader}}"+c+"__main{{/isCategoryHeader}}\n {{#isSubCategoryHeader}}"+c+'__secondary{{/isSubCategoryHeader}}\n "\n aria-label="Link to the result"\n href="{{{url}}}"\n >\n <div class="'+c+'--category-header">\n <span class="'+c+'--category-header-lvl0">{{{category}}}</span>\n </div>\n <div class="'+c+'--wrapper">\n <div class="'+c+'--subcategory-column">\n <span class="'+c+'--subcategory-column-text">{{{subcategory}}}</span>\n </div>\n {{#isTextOrSubcategoryNonEmpty}}\n <div class="'+c+'--content">\n <div class="'+c+'--subcategory-inline">{{{subcategory}}}</div>\n <div class="'+c+'--title">{{{title}}}</div>\n {{#text}}<div class="'+c+'--text">{{{text}}}</div>{{/text}}\n </div>\n {{/isTextOrSubcategoryNonEmpty}}\n </div>\n </a>\n ',suggestionSimple:'\n <div class="'+c+"\n {{#isCategoryHeader}}"+c+"__main{{/isCategoryHeader}}\n {{#isSubCategoryHeader}}"+c+'__secondary{{/isSubCategoryHeader}}\n suggestion-layout-simple\n ">\n <div class="'+c+'--category-header">\n {{^isLvl0}}\n <span class="'+c+"--category-header-lvl0 "+c+'--category-header-item">{{{category}}}</span>\n {{^isLvl1}}\n {{^isLvl1EmptyOrDuplicate}}\n <span class="'+c+"--category-header-lvl1 "+c+'--category-header-item">\n {{{subcategory}}}\n </span>\n {{/isLvl1EmptyOrDuplicate}}\n {{/isLvl1}}\n {{/isLvl0}}\n <div class="'+c+"--title "+c+'--category-header-item">\n {{#isLvl2}}\n {{{title}}}\n {{/isLvl2}}\n {{#isLvl1}}\n {{{subcategory}}}\n {{/isLvl1}}\n {{#isLvl0}}\n {{{category}}}\n {{/isLvl0}}\n </div>\n </div>\n <div class="'+c+'--wrapper">\n {{#text}}\n <div class="'+c+'--content">\n <div class="'+c+'--text">{{{text}}}</div>\n </div>\n {{/text}}\n </div>\n </div>\n ',footer:'\n <div class="algolia-docsearch-footer">\n </div>\n ',empty:'\n <div class="'+c+'">\n <div class="'+c+'--wrapper">\n <div class="'+c+"--content "+c+'--no-results">\n <div class="'+c+'--title">\n <div class="'+c+'--text">\n No results found for query <b>"{{query}}"</b>\n Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[201],{3905:function(n,e,t){t.d(e,{Zo:function(){return u},kt:function(){return p}});var r=t(7294);function l(n,e,t){return e in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}function s(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.push.apply(t,r)}return t}function a(n){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?s(Object(t),!0).forEach((function(e){l(n,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):s(Object(t)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}))}return n}function i(n,e){if(null==n)return{};var t,r,l=function(n,e){if(null==n)return{};var t,r,l={},s=Object.keys(n);for(r=0;r<s.length;r++)t=s[r],e.indexOf(t)>=0||(l[t]=n[t]);return l}(n,e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(n);for(r=0;r<s.length;r++)t=s[r],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(n,t)&&(l[t]=n[t])}return l}var o=r.createContext({}),c=function(n){var e=r.useContext(o),t=e;return n&&(t="function"==typeof n?n(e):a(a({},e),n)),t},u=function(n){var e=c(n.components);return r.createElement(o.Provider,{value:e},n.children)},m={inlineCode:"code",wrapper:function(n){var e=n.children;return r.createElement(r.Fragment,{},e)}},f=r.forwardRef((function(n,e){var t=n.components,l=n.mdxType,s=n.originalType,o=n.parentName,u=i(n,["components","mdxType","originalType","parentName"]),f=c(t),p=l,h=f["".concat(o,".").concat(p)]||f[p]||m[p]||s;return t?r.createElement(h,a(a({ref:e},u),{},{components:t})):r.createElement(h,a({ref:e},u))}));function p(n,e){var t=arguments,l=e&&e.mdxType;if("string"==typeof n||l){var s=t.length,a=new Array(s);a[0]=f;var i={};for(var o in e)hasOwnProperty.call(e,o)&&(i[o]=e[o]);i.originalType=n,i.mdxType="string"==typeof n?n:l,a[1]=i;for(var c=2;c<s;c++)a[c]=t[c];return r.createElement.apply(null,a)}return r.createElement.apply(null,t)}f.displayName="MDXCreateElement"},8582:function(n,e,t){t.r(e),t.d(e,{assets:function(){return u},contentTitle:function(){return o},default:function(){return p},frontMatter:function(){return i},metadata:function(){return c},toc:function(){return m}});var r=t(7462),l=t(3366),s=(t(7294),t(3905)),a=["components"],i={title:"Add select in the controls",sidebar_position:1},o=void 0,c={unversionedId:"en/Questions/Create_selector_in_the_controls",id:"en/Questions/Create_selector_in_the_controls",title:"Add select in the controls",description:"Sometimes you need to add a list in the controls, then you can use the selector and onSelect attribute when adding controls",source:"@site/docs/en/Questions/Create_selector_in_the_controls.mdx",sourceDirName:"en/Questions",slug:"/en/Questions/Create_selector_in_the_controls",permalink:"/document/en/Questions/Create_selector_in_the_controls",draft:!1,tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"Add select in the controls",sidebar_position:1},sidebar:"en",previous:{title:"Control Plugin",permalink:"/document/en/Plugins/control"},next:{title:"Add button to the controls",permalink:"/document/en/Questions/Create_button_in_the_controls"}},u={},m=[{value:"Switch Subtitle",id:"switch-subtitle",level:3},{value:"Switch filter",id:"switch-filter",level:3}],f={toc:m};function p(n){var e=n.components,t=(0,l.Z)(n,a);return(0,s.kt)("wrapper",(0,r.Z)({},f,t,{components:e,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Sometimes you need to add a list in the controls, then you can use the ",(0,s.kt)("inlineCode",{parentName:"p"},"selector")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"onSelect")," attribute when adding controls"),(0,s.kt)("h3",{id:"switch-subtitle"},"Switch Subtitle"),(0,s.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n controls: [\n {\n position: 'right',\n html: 'Subtitle 01',\n selector: [\n {\n default: true,\n html: '<span style=\"color:red\">Subtitle 01</span>',\n url: '/assets/sample/subtitle.srt?id=1',\n },\n {\n html: '<span style=\"color:yellow\">Subtitle 02</span>',\n url: '/assets/sample/subtitle.srt?id=2',\n },\n ],\n onSelect: function (item, $dom) {\n console.info(item, $dom);\n\n art.subtitle.url = item.url;\n \n return 'You click ' + item.html;\n },\n },\n ],\n});\n")),(0,s.kt)("h3",{id:"switchLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[280],{3905:function(t,e,n){n.d(e,{Zo:function(){return m},kt:function(){return c}});var a=n(7294);function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function l(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,a)}return n}function i(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?l(Object(n),!0).forEach((function(e){r(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function o(t,e){if(null==t)return{};var n,a,r=function(t,e){if(null==t)return{};var n,a,r={},l=Object.keys(t);for(a=0;a<l.length;a++)n=l[a],e.indexOf(n)>=0||(r[n]=t[n]);return r}(t,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(a=0;a<l.length;a++)n=l[a],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(r[n]=t[n])}return r}var d=a.createContext({}),p=function(t){var e=a.useContext(d),n=e;return t&&(n="function"==typeof t?t(e):i(i({},e),t)),n},m=function(t){var e=p(t.components);return a.createElement(d.Provider,{value:e},t.children)},s={inlineCode:"code",wrapper:function(t){var e=t.children;return a.createElement(a.Fragment,{},e)}},u=a.forwardRef((function(t,e){var n=t.components,r=t.mdxType,l=t.originalType,d=t.parentName,m=o(t,["components","mdxType","originalType","parentName"]),u=p(n),c=r,g=u["".concat(d,".").concat(c)]||u[c]||s[c]||l;return n?a.createElement(g,i(i({ref:e},m),{},{components:n})):a.createElement(g,i({ref:e},m))}));function c(t,e){var n=arguments,r=e&&e.mdxType;if("string"==typeof t||r){var l=n.length,i=new Array(l);i[0]=u;var o={};for(var d in e)hasOwnProperty.call(e,d)&&(o[d]=e[d]);o.originalType=t,o.mdxType="string"==typeof t?t:r,i[1]=o;for(var p=2;p<l;p++)i[p]=n[p];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},3797:function(t,e,n){n.r(e),n.d(e,{assets:function(){return m},contentTitle:function(){return d},default:function(){return c},frontMatter:function(){return o},metadata:function(){return p},toc:function(){return s}});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),i=["components"],o={title:"How to add setting panel",sidebar_position:6},d=void 0,p={unversionedId:"en/Questions/How_to_add_setting_panel",id:"en/Questions/How_to_add_setting_panel",title:"How to add setting panel",description:"Add selector list",source:"@site/docs/en/Questions/How_to_add_setting_panel.mdx",sourceDirName:"en/Questions",slug:"/en/Questions/How_to_add_setting_panel",permalink:"/document/en/Questions/How_to_add_setting_panel",draft:!1,tags:[],version:"current",sidebarPosition:6,frontMatter:{title:"How to add setting panel",sidebar_position:6},sidebar:"en",previous:{title:"How to import types",permalink:"/document/en/Questions/How_to_import_types"},next:{title:"Use with React Portal",permalink:"/document/en/Questions/Use_with_react_portal"}},m={},s=[{value:"Add selector list",id:"add-selector-list",level:2},{value:"Add switch button",id:"add-switch-button",level:2},{value:"Add range slider",id:"add-range-slider",level:2}],u={toc:s};function c(t){var e=t.components,n=(0,r.Z)(t,i);return(0,l.kt)("wrapper",(0,a.Z)({},u,n,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"add-selector-list"},"Add selector list"),(0,l.kt)("p",null,"Settings panels are similar to a collection of list selections, and support multi-layer nested"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"Property"),(0,l.kt)("th",{parentName:"tr",align:null},"Type"),(0,l.kt)("th",{parentName:"tr",align:null},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"html")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("td",{parentName:"tr",align:null},"DOM elements of selector")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"icon")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("td",{parentName:"tr",align:null},"Icon of selector")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"selector")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"Array")),(0,l.kLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[250],{3905:function(e,t,n){n.d(t,{Zo:function(){return u},kt:function(){return s}});var a=n(7294);function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,a,l=function(e,t){if(null==e)return{};var n,a,l={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}var o=a.createContext({}),d=function(e){var t=a.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=d(e.components);return a.createElement(o.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},k=a.forwardRef((function(e,t){var n=e.components,l=e.mdxType,r=e.originalType,o=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),k=d(n),s=l,N=k["".concat(o,".").concat(s)]||k[s]||m[s]||r;return n?a.createElement(N,i(i({ref:t},u),{},{components:n})):a.createElement(N,i({ref:t},u))}));function s(e,t){var n=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var r=n.length,i=new Array(r);i[0]=k;var p={};for(var o in t)hasOwnProperty.call(t,o)&&(p[o]=t[o]);p.originalType=e,p.mdxType="string"==typeof e?e:l,i[1]=p;for(var d=2;d<r;d++)i[d]=n[d];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}k.displayName="MDXCreateElement"},4863:function(e,t,n){n.r(t),n.d(t,{assets:function(){return u},contentTitle:function(){return o},default:function(){return s},frontMatter:function(){return p},metadata:function(){return d},toc:function(){return m}});var a=n(7462),l=n(3366),r=(n(7294),n(3905)),i=["components"],p={title:"\u9ad8\u7ea7\u5c5e\u6027",sidebar_position:4,slug:"/zh-cn/advance"},o=void 0,d={unversionedId:"zh-cn/Advance",id:"zh-cn/Advance",title:"\u9ad8\u7ea7\u5c5e\u6027",description:"\u8fd9\u9875\u9762\u662f\u5bf9\u5e38\u7528\u5c5e\u6027\u7684\u4e00\u4e9b\u989d\u5916\u8865\u5145\uff0c\u9700\u8981\u6df1\u5165\u5f00\u53d1\u81ea\u5b9a\u4e49\u529f\u80fd\u65f6\u624d\u9700\u8981\u9605\u8bfb",source:"@site/docs/zh-cn/Advance.mdx",sourceDirName:"zh-cn",slug:"/zh-cn/advance",permalink:"/document/zh-cn/advance",draft:!1,tags:[],version:"current",sidebarPosition:4,frontMatter:{title:"\u9ad8\u7ea7\u5c5e\u6027",sidebar_position:4,slug:"/zh-cn/advance"},sidebar:"zh-cn",previous:{title:"\u5e38\u7528\u5c5e\u6027",permalink:"/document/zh-cn/propertie"},next:{title:"\u9759\u6001\u5c5e\u6027",permalink:"/document/zh-cn/class"}},u={},m=[{value:"id",id:"id",level:2},{value:"option",id:"option",level:2},{value:"isFocus",id:"isfocus",level:2},{value:"isInput",id:"isinput",level:2},{value:"isLock",id:"islock",level:2},{value:"isDestroy",id:"isdestroy",level:2},{value:"whitelist",id:"whitelist",level:2},{value:"template",id:"template",level:2},{value:"query",id:"query",level:3},{value:"query",id:"query-1",level:2},{value:"events",id:"events",level:2},{value:"proxy",id:"proxy",level:2},{value:"storage",id:"storage",level:2},{value:"icons",id:"icons",level:2},{value:"i18n",id:"i18n",level:2},{value:"get",id:"get",level:3},{value:"update",id:"update",level:3},{value:"player",id:"player",level:2},{value:"subtitle",id:"subtitle",level:2},{value:"show",id:"show",level:3},{value:"style",id:"style",level:3},{value:"url",id:"url",level:3},{value:"switch",id:"switch",level:3},{value:"info",id:"info",level:2},{value:"layers",id:"layers",level:2},{value:"show",id:"show-1",level:3},{value:"add",id:"add",level:3},{value:"notice",id:"notice",level:2},{value:"show",id:"show-2",level:3},{value:"controls",id:"controls",level:2},{value:"show",id:"show-3",level:3},{value:"add",id:"add-1",level:3},{value:"contextmenu",id:"contextmenu",level:2},{value:"show",id:"show-4",level:3},{value:"add",id:"add-2",level:3},{value:"loading",id:"loading",level:2},{value:"show",id:"show-5",level:3},{value:"mask",id:"mask",level:2},{value:"show",id:"show-6",level:3},{value:"hotkey",id:"hotkey",level:2},{value:"add",id:"add-3",level:3},{value:"setting",id:"setting",level:2},{value:"show",id:"show-7",level:3},{value:"plugins",id:"plugins",level:2},{value:"add",id:"add-4",level:3}],k={tocLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[343],{3343:function(e,t,u){u.r(t)}}]);
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[78],{3905:function(n,e,a){a.d(e,{Zo:function(){return s},kt:function(){return c}});var t=a(7294);function r(n,e,a){return e in n?Object.defineProperty(n,e,{value:a,enumerable:!0,configurable:!0,writable:!0}):n[e]=a,n}function l(n,e){var a=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);e&&(t=t.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),a.push.apply(a,t)}return a}function u(n){for(var e=1;e<arguments.length;e++){var a=null!=arguments[e]?arguments[e]:{};e%2?l(Object(a),!0).forEach((function(e){r(n,e,a[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(a)):l(Object(a)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(a,e))}))}return n}function i(n,e){if(null==n)return{};var a,t,r=function(n,e){if(null==n)return{};var a,t,r={},l=Object.keys(n);for(t=0;t<l.length;t++)a=l[t],e.indexOf(a)>=0||(r[a]=n[a]);return r}(n,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(n);for(t=0;t<l.length;t++)a=l[t],e.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(n,a)&&(r[a]=n[a])}return r}var p=t.createContext({}),o=function(n){var e=t.useContext(p),a=e;return n&&(a="function"==typeof n?n(e):u(u({},e),n)),a},s=function(n){var e=o(n.components);return t.createElement(p.Provider,{value:e},n.children)},m={inlineCode:"code",wrapper:function(n){var e=n.children;return t.createElement(t.Fragment,{},e)}},d=t.forwardRef((function(n,e){var a=n.components,r=n.mdxType,l=n.originalType,p=n.parentName,s=i(n,["components","mdxType","originalType","parentName"]),d=o(a),c=r,k=d["".concat(p,".").concat(c)]||d[c]||m[c]||l;return a?t.createElement(k,u(u({ref:e},s),{},{components:a})):t.createElement(k,u({ref:e},s))}));function c(n,e){var a=arguments,r=e&&e.mdxType;if("string"==typeof n||r){var l=a.length,u=new Array(l);u[0]=d;var i={};for(var p in e)hasOwnProperty.call(e,p)&&(i[p]=e[p]);i.originalType=n,i.mdxType="string"==typeof n?n:r,u[1]=i;for(var o=2;o<l;o++)u[o]=a[o];return t.createElement.apply(null,u)}return t.createElement.apply(null,a)}d.displayName="MDXCreateElement"},9489:function(n,e,a){a.r(e),a.d(e,{assets:function(){return s},contentTitle:function(){return p},default:function(){return c},frontMatter:function(){return i},metadata:function(){return o},toc:function(){return m}});var t=a(7462),r=a(3366),l=(a(7294),a(3905)),u=["components"],i={title:"\u5f39\u5e55\u5e93\u63d2\u4ef6",sidebar_position:1},p=void 0,o={unversionedId:"zh-cn/Plugins/danmuku",id:"zh-cn/Plugins/danmuku",title:"\u5f39\u5e55\u5e93\u63d2\u4ef6",description:"\u6f14\u793a",source:"@site/docs/zh-cn/Plugins/danmuku.mdx",sourceDirName:"zh-cn/Plugins",slug:"/zh-cn/Plugins/danmuku",permalink:"/document/zh-cn/Plugins/danmuku",draft:!1,tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"\u5f39\u5e55\u5e93\u63d2\u4ef6",sidebar_position:1},sidebar:"zh-cn",previous:{title:"\u7b2c\u4e09\u65b9\u5e93",permalink:"/document/zh-cn/libraries"},next:{title:"\u5e7f\u544a\u63d2\u4ef6",permalink:"/document/zh-cn/Plugins/ads"}},s={},m=[{value:"\u6f14\u793a",id:"\u6f14\u793a",level:2},{value:"\u5b89\u88c5",id:"\u5b89\u88c5",level:2},{value:"\u901a\u8fc7 <code>npm</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-npm-\u5b89\u88c5",level:3},{value:"\u901a\u8fc7 <code>yarn</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-yarn-\u5b89\u88c5",level:3},{value:"\u901a\u8fc7 <code>script</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-script-\u5b89\u88c5",level:3},{value:"\u4f7f\u7528",id:"\u4f7f\u7528",level:2},{value:"\u4f7f\u7528\u5f39\u5e55\u6570\u7ec4",id:"\u4f7f\u7528\u5f39\u5e55\u6570\u7ec4",level:3},{value:"\u4f7f\u7528\u5f39\u5e55 XML",id:"\u4f7f\u7528\u5f39\u5e55-xml",level:3},{value:"\u4f7f\u7528\u5f02\u6b65\u8c03\u7528",id:"\u4f7f\u7528\u5f02\u6b65\u8c03\u7528",level:3},{value:"\u63a5\u53e3",id:"\u63a5\u53e3",level:2},{value:"hide/show",id:"hideshow",level:3},{value:"isHide",id:"ishide",level:3},{value:"emit",id:"emit",level:3},{value:"config",id:"config",level:3},{value:"load",id:"load",level:3},{value:"reset",id:"reset",level:3},{value:"option",id:"option",level:3},{value:"\u4e8b\u4ef6",id:"\u4e8b\u4ef6",level:2}],d={toc:m};function c(n){var e=n.components,a=(0,r.Z)(n,u);return(0,l.kt)("wrapper",(0,t.Z)({},d,a,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"\u6f14\u793a"},"\u6f14\u793a"),(0,l.kt)("p",null,"\ud83d\udc49 ",(0,l.kt)("a",{parentName:"p",href:"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku"},"\u67e5\u770b\u5b8c\u6574\u6f14\u793a")),(0,l.kt)("h2",{id:"\u5b89\u88c5"},"\u5b89\u88c5"),(0,l.kt)("h3",{id:"\u901a\u8fc7-npm-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"h3"},"npm")," \u5b89\u88c5\uff1a"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"$ npm install artplayer-plugin-danmuku\n")),(0,l.kt)("h3",Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[610],{3905:function(e,t,n){n.d(t,{Zo:function(){return u},kt:function(){return d}});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var o=r.createContext({}),p=function(e){var t=r.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},u=function(e){var t=p(e.components);return r.createElement(o.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,l=e.originalType,o=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),m=p(n),d=a,h=m["".concat(o,".").concat(d)]||m[d]||c[d]||l;return n?r.createElement(h,s(s({ref:t},u),{},{components:n})):r.createElement(h,s({ref:t},u))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=n.length,s=new Array(l);s[0]=m;var i={};for(var o in t)hasOwnProperty.call(t,o)&&(i[o]=t[o]);i.originalType=e,i.mdxType="string"==typeof e?e:a,s[1]=i;for(var p=2;p<l;p++)s[p]=n[p];return r.createElement.apply(null,s)}return r.createElement.apply(null,n)}m.displayName="MDXCreateElement"},2360:function(e,t,n){n.d(t,{Z:function(){return s}});var r=n(7294),a=n(6010),l="tabItem_OmH5";function s(e){var t=e.children,n=e.hidden,s=e.className;return r.createElement("div",{role:"tabpanel",className:(0,a.Z)(l,s),hidden:n},t)}},9877:function(e,t,n){n.d(t,{Z:function(){return d}});var r=n(7462),a=n(7294),l=n(2389),s=n(7392),i=n(7094),o=n(2466),p=n(6010),u="tabList_uSqn",c="tabItem_LplD";function m(e){var t,n,l,m=e.lazy,d=e.block,h=e.defaultValue,v=e.values,y=e.groupId,f=e.className,b=a.Children.map(e.children,(function(e){if((0,a.isValidElement)(e)&&void 0!==e.props.value)return e;throw new Error("Docusaurus error: Bad <Tabs> child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.')})),g=null!=v?v:b.map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes}})),k=(0,s.l)(g,(function(e,t){return e.value===t.value}));if(k.length>0)throw new Error('Docusaurus error: Duplicate values "'+k.map((function(e){return e.value})).join(", ")+'" found in <Tabs>. Every value needs to be unique.');var N=null===h?h:null!=(t=null!=h?h:null==(n=b.find((function(e){return e.props.default})))?void 0:n.props.value)?t:null==(l=b[0])?void 0:l.props.value;if(null!==N&&!g.some((function(e){return e.value===N})))throw new Error('Docusaurus error: The <Tabs> has a defaultValue "'+N+'" but none of its children has the corresponding value. Available values are: '+g.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");var x=(0,i.U)(),j=x.tabGroupChoices,w=x.setTabGroupChoices,T=(0,a.useState)(N),A=T[0],O=T[1],Z=[],E=(0,o.o5)().blockElementScrollPositionUntilNextRender;if(null!=y){var I=j[y];null!=I&&I!==A&&g.some((function(e){return e.value===I}))&&O(I)}var P=function(e){var t=e.currentTarget,n=Z.indexOf(t),r=g[n].value;r!==A&&(E(t),O(r),null!=y&&w(y,r))},L=function(e){var t,n=null;switch(e.key){case"ArrowRight":var r=Z.indexOf(e.currentTarget)+1;n=Z[r]||Z[0];break;case"ArrowLeft":var a=Z.indexOf(e.currentTarget)-1;n=Z[a]||Z[Z.length-1]}null==(t=n)||t.focus()};return a.createElement("div",{className:(0,p.Z)("tabs-container",u)},a.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,p.Z)("tabs",{"tabs--block":d},f)},g.map((function(e){var t=e.value,n=e.label,l=e.attributes;return a.createElement("li",(0,r.Z)({role:"tab",tabIndex:A===t?0:-1,"aria-selected":A===t,key:t,ref:function(e){return Z.push(e)},onKeyDown:L,onFocus:P,onClick:P},l,{className:(0,p.Z)("tabs__item",c,null==l?void 0:l.className,{"tabs__item--active":A===t})}),null!=n?n:t)}))),m?(0,a.cloneElement)(b.filter((function(e){Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[778],{3905:function(e,n,t){t.d(n,{Zo:function(){return c},kt:function(){return m}});var r=t(7294);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function l(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?l(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):l(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function o(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)t=l[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)t=l[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=r.createContext({}),p=function(e){var n=r.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},c=function(e){var n=p(e.components);return r.createElement(s.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},d=r.forwardRef((function(e,n){var t=e.components,a=e.mdxType,l=e.originalType,s=e.parentName,c=o(e,["components","mdxType","originalType","parentName"]),d=p(t),m=a,f=d["".concat(s,".").concat(m)]||d[m]||u[m]||l;return t?r.createElement(f,i(i({ref:n},c),{},{components:t})):r.createElement(f,i({ref:n},c))}));function m(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var l=t.length,i=new Array(l);i[0]=d;var o={};for(var s in n)hasOwnProperty.call(n,s)&&(o[s]=n[s]);o.originalType=e,o.mdxType="string"==typeof e?e:a,i[1]=o;for(var p=2;p<l;p++)i[p]=t[p];return r.createElement.apply(null,i)}return r.createElement.apply(null,t)}d.displayName="MDXCreateElement"},8094:function(e,n,t){t.r(n),t.d(n,{assets:function(){return c},contentTitle:function(){return s},default:function(){return m},frontMatter:function(){return o},metadata:function(){return p},toc:function(){return u}});var r=t(7462),a=t(3366),l=(t(7294),t(3905)),i=["components"],o={title:"\u5e7f\u544a\u63d2\u4ef6",sidebar_position:2},s=void 0,p={unversionedId:"zh-cn/Plugins/ads",id:"zh-cn/Plugins/ads",title:"\u5e7f\u544a\u63d2\u4ef6",description:"\u6f14\u793a",source:"@site/docs/zh-cn/Plugins/ads.mdx",sourceDirName:"zh-cn/Plugins",slug:"/zh-cn/Plugins/ads",permalink:"/document/zh-cn/Plugins/ads",draft:!1,tags:[],version:"current",sidebarPosition:2,frontMatter:{title:"\u5e7f\u544a\u63d2\u4ef6",sidebar_position:2},sidebar:"zh-cn",previous:{title:"\u5f39\u5e55\u5e93\u63d2\u4ef6",permalink:"/document/zh-cn/Plugins/danmuku"},next:{title:"Iframe \u63d2\u4ef6",permalink:"/document/zh-cn/Plugins/iframe"}},c={},u=[{value:"\u6f14\u793a",id:"\u6f14\u793a",level:2},{value:"\u5b89\u88c5",id:"\u5b89\u88c5",level:2},{value:"\u901a\u8fc7 <code>npm</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-npm-\u5b89\u88c5",level:3},{value:"\u901a\u8fc7 <code>yarn</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-yarn-\u5b89\u88c5",level:3},{value:"\u901a\u8fc7 <code>script</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-script-\u5b89\u88c5",level:3},{value:"\u4f7f\u7528",id:"\u4f7f\u7528",level:2}],d={toc:u};function m(e){var n=e.components,t=(0,a.Z)(e,i);return(0,l.kt)("wrapper",(0,r.Z)({},d,t,{components:n,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"\u6f14\u793a"},"\u6f14\u793a"),(0,l.kt)("p",null,"\ud83d\udc49 ",(0,l.kt)("a",{parentName:"p",href:"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads"},"\u67e5\u770b\u5b8c\u6574\u6f14\u793a")),(0,l.kt)("h2",{id:"\u5b89\u88c5"},"\u5b89\u88c5"),(0,l.kt)("h3",{id:"\u901a\u8fc7-npm-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"h3"},"npm")," \u5b89\u88c5\uff1a"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"$ npm install artplayer-plugin-ads\n")),(0,l.kt)("h3",{id:"\u901a\u8fc7-yarn-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"h3"},"yarn")," \u5b89\u88c5\uff1a"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"$ yarn add artplayer-plugin-ads\n")),(0,l.kt)("h3",{id:"\u901a\u8fc7-script-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"h3"},"script")," \u5b89\u88c5\uff1a"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- \u672c\u5730 --\x3e\n<script src="path/to/artplayer-plugin-ads.js"><\/script>\n\n\x3c!-- jsdelivr --\x3e\n<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugi
Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[558],{3905:function(e,t,n){n.d(t,{Zo:function(){return m},kt:function(){return k}});var a=n(7294);function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,a,l=function(e,t){if(null==e)return{};var n,a,l={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}var o=a.createContext({}),u=function(e){var t=a.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},m=function(e){var t=u(e.components);return a.createElement(o.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},s=a.forwardRef((function(e,t){var n=e.components,l=e.mdxType,r=e.originalType,o=e.parentName,m=p(e,["components","mdxType","originalType","parentName"]),s=u(n),k=l,c=s["".concat(o,".").concat(k)]||s[k]||d[k]||r;return n?a.createElement(c,i(i({ref:t},m),{},{components:n})):a.createElement(c,i({ref:t},m))}));function k(e,t){var n=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var r=n.length,i=new Array(r);i[0]=s;var p={};for(var o in t)hasOwnProperty.call(t,o)&&(p[o]=t[o]);p.originalType=e,p.mdxType="string"==typeof e?e:l,i[1]=p;for(var u=2;u<r;u++)i[u]=n[u];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}s.displayName="MDXCreateElement"},3397:function(e,t,n){n.r(t),n.d(t,{assets:function(){return m},contentTitle:function(){return o},default:function(){return k},frontMatter:function(){return p},metadata:function(){return u},toc:function(){return d}});var a=n(7462),l=n(3366),r=(n(7294),n(3905)),i=["components"],p={title:"Basic options",sidebar_position:2,slug:"/options"},o=void 0,u={unversionedId:"en/Options",id:"en/Options",title:"Basic options",description:"container",source:"@site/docs/en/Options.mdx",sourceDirName:"en",slug:"/options",permalink:"/document/options",draft:!1,tags:[],version:"current",sidebarPosition:2,frontMatter:{title:"Basic options",sidebar_position:2,slug:"/options"},sidebar:"en",previous:{title:"Quick start",permalink:"/document/"},next:{title:"Common properties",permalink:"/document/propertie"}},m={},d=[{value:"container",id:"container",level:2},{value:"url",id:"url",level:2},{value:"Ready Callback",id:"ready-callback",level:2},{value:"poster",id:"poster",level:2},{value:"title",id:"title",level:2},{value:"theme",id:"theme",level:2},{value:"volume",id:"volume",level:2},{value:"isLive",id:"islive",level:2},{value:"muted",id:"muted",level:2},{value:"autoplay",id:"autoplay",level:2},{value:"autoSize",id:"autosize",level:2},{value:"autoMini",id:"automini",level:2},{value:"loop",id:"loop",level:2},{value:"flip",id:"flip",level:2},{value:"playbackRate",id:"playbackrate",level:2},{value:"aspectRatio",id:"aspectratio",level:2},{value:"screenshot",id:"screenshot",level:2},{value:"setting",id:"setting",level:2},{value:"hotkey",id:"hotkey",level:2},{value:"pip",id:"pip",level:2},{value:"mutex",id:"mutex",level:2},{value:"fullscreen",id:"fullscreen",level:2},{value:"fullscreenWeb",id:"fullscreenweb",level:2},{value:"subtitleOffset",id:"subtitleoffset",level:2},{value:"miniProgressBar",id:"miniprogressbar",level:2},{value:"useSSR",id:"usessr",level:2},{value:"playsInline",id:"playsinline",level:2},{value:"layers",id:"layers",level:2},{value:"settings",id:"settings",level:2},{value:"contextmenu",id:"contextmenu",level:2},{value:"controls",id:"controls",level:2},{value:"quality",id:"quality",level:2},{value:"highlight",id:"highlight",level:2},{value:"plugins",id:"plugins",level:2},{value:"whitelist",id:"whitelist",level:2},{value:"thumbnails",id:"thumbnails",level:2},{value:"subtitle",id:"subtitle",level:2},{value:"moreVideoAttr",id:"morevideoattr",level:2},{value:"icons",id:"icons",level:2},{value:"type",id:"type",level:2},{value:"customType",id:"customtype",level:2},{value:"lang",id:"lang",level:2},{value:"lock",id:"lock",level:2},{value:"fastForward",id:"fastforward",level:2},{value:"autoPlayback",id:"autoplayback",level:2},{value:"autoOrientation",id:"autoorientation",level:2},{value:"airplay",id:"airplay",level:2}],s=Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[619],{3905:function(e,n,t){t.d(n,{Zo:function(){return s},kt:function(){return d}});var r=t(7294);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?a(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function c(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var l=r.createContext({}),u=function(e){var n=r.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},s=function(e){var n=u(e.components);return r.createElement(l.Provider,{value:n},e.children)},p={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},m=r.forwardRef((function(e,n){var t=e.components,o=e.mdxType,a=e.originalType,l=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),m=u(t),d=o,y=m["".concat(l,".").concat(d)]||m[d]||p[d]||a;return t?r.createElement(y,i(i({ref:n},s),{},{components:t})):r.createElement(y,i({ref:n},s))}));function d(e,n){var t=arguments,o=n&&n.mdxType;if("string"==typeof e||o){var a=t.length,i=new Array(a);i[0]=m;var c={};for(var l in n)hasOwnProperty.call(n,l)&&(c[l]=n[l]);c.originalType=e,c.mdxType="string"==typeof e?e:o,i[1]=c;for(var u=2;u<a;u++)i[u]=t[u];return r.createElement.apply(null,i)}return r.createElement.apply(null,t)}m.displayName="MDXCreateElement"},4418:function(e,n,t){t.r(n),t.d(n,{assets:function(){return s},contentTitle:function(){return l},default:function(){return d},frontMatter:function(){return c},metadata:function(){return u},toc:function(){return p}});var r=t(7462),o=t(3366),a=(t(7294),t(3905)),i=["components"],c={title:"\u5904\u7406\u5355\u4e2a\u7ec4\u4ef6",sidebar_position:3},l=void 0,u={unversionedId:"zh-cn/Questions/Handle_single_component",id:"zh-cn/Questions/Handle_single_component",title:"\u5904\u7406\u5355\u4e2a\u7ec4\u4ef6",description:"\u5f53\u6211\u4eec\u5728layers\u3001contextmenu\u3001controls\u91cc\u6dfb\u52a0\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u65f6\uff0c\u6700\u597d\u5e26\u4e0a\u4e00\u4e2a\u552f\u4e00\u7684 name \u5c5e\u6027\uff0c\u8be5\u5c5e\u6027\u4e0d\u4f46\u4f1a\u4f5c\u4e3a\u7c7b\u540d\u6dfb\u52a0\u5230 dom \u5143\u7d20\u91cc\uff0c\u8fd8\u53ef\u4ee5\u7528\u4e8e\u5feb\u901f\u5b9a\u4f4d\u5230\u7ec4\u4ef6\u3002",source:"@site/docs/zh-cn/Questions/Handle_single_component.mdx",sourceDirName:"zh-cn/Questions",slug:"/zh-cn/Questions/Handle_single_component",permalink:"/document/zh-cn/Questions/Handle_single_component",draft:!1,tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"\u5904\u7406\u5355\u4e2a\u7ec4\u4ef6",sidebar_position:3},sidebar:"zh-cn",previous:{title:"\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u6309\u94ae",permalink:"/document/zh-cn/Questions/Create_button_in_the_controls"},next:{title:"\u5982\u4f55\u5bfc\u5165\u7c7b\u578b",permalink:"/document/zh-cn/Questions/How_to_import_types"}},s={},p=[],m={toc:p};function d(e){var n=e.components,t=(0,o.Z)(e,i);return(0,a.kt)("wrapper",(0,r.Z)({},m,t,{components:n,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"\u5f53\u6211\u4eec\u5728",(0,a.kt)("inlineCode",{parentName:"p"},"layers"),"\u3001",(0,a.kt)("inlineCode",{parentName:"p"},"contextmenu"),"\u3001",(0,a.kt)("inlineCode",{parentName:"p"},"controls"),"\u91cc\u6dfb\u52a0\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u65f6\uff0c\u6700\u597d\u5e26\u4e0a\u4e00\u4e2a\u552f\u4e00\u7684 ",(0,a.kt)("inlineCode",{parentName:"p"},"name")," \u5c5e\u6027\uff0c\u8be5\u5c5e\u6027\u4e0d\u4f46\u4f1a\u4f5c\u4e3a\u7c7b\u540d\u6dfb\u52a0\u5230 dom \u5143\u7d20\u91cc\uff0c\u8fd8\u53ef\u4ee5\u7528\u4e8e\u5feb\u901f\u5b9a\u4f4d\u5230\u7ec4\u4ef6\u3002"),(0,a.kt)("p",null,"\u8fd9\u91cc\u6709\u4e09\u79cd\u65b9\u6cd5\u83b7\u53d6\u7ec4\u4ef6\u7684dom\u5143\u7d20\uff1a\u7ec4\u4ef6\u65b9\u6cd5 ",(0,a.kt)("inlineCode",{parentName:"p"},"mounted"),"\u3001\u5b9e\u4f8b\u65b9\u6cd5 ",(0,a.kt)("inlineCode",{parentName:"p"},"query"),"\u3001\u63a8\u8350\u901a\u8fc7 ",(0,a.kt)("inlineCode",{parentName:"p"},"name")," \u76f4\u63a5\u83b7\u53d6"),(0,a.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"languagLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[645],{3905:function(e,t,n){n.d(t,{Zo:function(){return p},kt:function(){return f}});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=r.createContext({}),s=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=s(e.components);return r.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,l=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),m=s(n),f=o,d=m["".concat(l,".").concat(f)]||m[f]||u[f]||a;return n?r.createElement(d,i(i({ref:t},p),{},{components:n})):r.createElement(d,i({ref:t},p))}));function f(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,i=new Array(a);i[0]=m;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:o,i[1]=c;for(var s=2;s<a;s++)i[s]=n[s];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}m.displayName="MDXCreateElement"},8999:function(e,t,n){n.r(t),n.d(t,{assets:function(){return p},contentTitle:function(){return l},default:function(){return f},frontMatter:function(){return c},metadata:function(){return s},toc:function(){return u}});var r=n(7462),o=n(3366),a=(n(7294),n(3905)),i=["components"],c={title:"Use with React Portal",sidebar_position:6},l=void 0,s={unversionedId:"en/Questions/Use_with_react_portal",id:"en/Questions/Use_with_react_portal",title:"Use with React Portal",description:"It is also very easy to use React Components in layers, contextmenu, controls. Handle more complex logic through ReactDOM.createPortal.",source:"@site/docs/en/Questions/Use_with_react_portal.mdx",sourceDirName:"en/Questions",slug:"/en/Questions/Use_with_react_portal",permalink:"/document/en/Questions/Use_with_react_portal",draft:!1,tags:[],version:"current",sidebarPosition:6,frontMatter:{title:"Use with React Portal",sidebar_position:6},sidebar:"en",previous:{title:"How to add setting panel",permalink:"/document/en/Questions/How_to_add_setting_panel"}},p={},u=[],m={toc:u};function f(e){var t=e.components,n=(0,o.Z)(e,i);return(0,a.kt)("wrapper",(0,r.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"It is also very easy to use ",(0,a.kt)("inlineCode",{parentName:"p"},"React Components")," in ",(0,a.kt)("inlineCode",{parentName:"p"},"layers"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"contextmenu"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"controls"),". Handle more complex logic through ",(0,a.kt)("inlineCode",{parentName:"p"},"ReactDOM.createPortal"),"."),(0,a.kt)("p",null,"\ud83d\udc49 ",(0,a.kt)("a",{parentName:"p",href:"https://codesandbox.io/s/artplayer-react-portal-5z32h"},"Click to open an online demo")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx"},'import React, { useState, useEffect } from "react";\nimport ReactDOM, { createPortal } from "react-dom";\nimport Artplayer from "artplayer/examples/react/Artplayer";\n\nfunction Timer({ time }) {\n return <div>{time}</div>;\n}\n\nfunction App() {\n const [art, setArt] = useState(null);\n const [time, setTime] = useState(0);\n\n useEffect(() => {\n const update = () => setTime((time) => time + 1);\n setInterval(update, 1000);\n }, []);\n\n return (\n <div>\n <Artplayer\n option={{\n url: "https://artplayer.org/assets/sample/video.mp4",\n layers: [\n {\n html: "",\n name: "portal"\n }\n ],\n controls: [\n {\n position: "right",\n name: "portal",\n html: ""\n }\n ]\n }}\n style={{\n width: "600px",\n height: "400px",\n
Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[28],{3905:function(n,e,t){t.d(e,{Zo:function(){return m},kt:function(){return f}});var r=t(7294);function l(n,e,t){return e in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}function s(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.push.apply(t,r)}return t}function a(n){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?s(Object(t),!0).forEach((function(e){l(n,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):s(Object(t)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}))}return n}function i(n,e){if(null==n)return{};var t,r,l=function(n,e){if(null==n)return{};var t,r,l={},s=Object.keys(n);for(r=0;r<s.length;r++)t=s[r],e.indexOf(t)>=0||(l[t]=n[t]);return l}(n,e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(n);for(r=0;r<s.length;r++)t=s[r],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(n,t)&&(l[t]=n[t])}return l}var o=r.createContext({}),c=function(n){var e=r.useContext(o),t=e;return n&&(t="function"==typeof n?n(e):a(a({},e),n)),t},m=function(n){var e=c(n.components);return r.createElement(o.Provider,{value:e},n.children)},u={inlineCode:"code",wrapper:function(n){var e=n.children;return r.createElement(r.Fragment,{},e)}},p=r.forwardRef((function(n,e){var t=n.components,l=n.mdxType,s=n.originalType,o=n.parentName,m=i(n,["components","mdxType","originalType","parentName"]),p=c(t),f=l,h=p["".concat(o,".").concat(f)]||p[f]||u[f]||s;return t?r.createElement(h,a(a({ref:e},m),{},{components:t})):r.createElement(h,a({ref:e},m))}));function f(n,e){var t=arguments,l=e&&e.mdxType;if("string"==typeof n||l){var s=t.length,a=new Array(s);a[0]=p;var i={};for(var o in e)hasOwnProperty.call(e,o)&&(i[o]=e[o]);i.originalType=n,i.mdxType="string"==typeof n?n:l,a[1]=i;for(var c=2;c<s;c++)a[c]=t[c];return r.createElement.apply(null,a)}return r.createElement.apply(null,t)}p.displayName="MDXCreateElement"},9450:function(n,e,t){t.r(e),t.d(e,{assets:function(){return m},contentTitle:function(){return o},default:function(){return f},frontMatter:function(){return i},metadata:function(){return c},toc:function(){return u}});var r=t(7462),l=t(3366),s=(t(7294),t(3905)),a=["components"],i={title:"\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u5217\u8868",sidebar_position:1},o=void 0,c={unversionedId:"zh-cn/Questions/Create_selector_in_the_controls",id:"zh-cn/Questions/Create_selector_in_the_controls",title:"\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u5217\u8868",description:"\u6709\u65f6\u4f60\u9700\u8981\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u5217\u8868\uff0c\u90a3\u4e48\u4f60\u53ef\u4ee5\u5728\u6dfb\u52a0\u63a7\u4ef6\u7684\u65f6\u5019\u4f7f\u7528 selector \u548c onSelect \u5c5e\u6027",source:"@site/docs/zh-cn/Questions/Create_selector_in_the_controls.mdx",sourceDirName:"zh-cn/Questions",slug:"/zh-cn/Questions/Create_selector_in_the_controls",permalink:"/document/zh-cn/Questions/Create_selector_in_the_controls",draft:!1,tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u5217\u8868",sidebar_position:1},sidebar:"zh-cn",previous:{title:"\u63a7\u5236\u5668\u63d2\u4ef6",permalink:"/document/zh-cn/Plugins/control"},next:{title:"\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u6309\u94ae",permalink:"/document/zh-cn/Questions/Create_button_in_the_controls"}},m={},u=[{value:"\u5207\u6362\u5b57\u5e55",id:"\u5207\u6362\u5b57\u5e55",level:3},{value:"\u5207\u6362\u6ee4\u955c",id:"\u5207\u6362\u6ee4\u955c",level:3}],p={toc:u};function f(n){var e=n.components,t=(0,l.Z)(n,a);return(0,s.kt)("wrapper",(0,r.Z)({},p,t,{components:e,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"\u6709\u65f6\u4f60\u9700\u8981\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u5217\u8868\uff0c\u90a3\u4e48\u4f60\u53ef\u4ee5\u5728\u6dfb\u52a0\u63a7\u4ef6\u7684\u65f6\u5019\u4f7f\u7528 ",(0,s.kt)("inlineCode",{parentName:"p"},"selector")," \u548c ",(0,s.kt)("inlineCode",{parentName:"p"},"onSelect")," \u5c5e\u6027"),(0,s.kt)("h3",{id:"\u5207\u6362\u5b57\u5e55"},"\u5207\u6362\u5b57\u5e55"),(0,s.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n controls: [\n {\n position: 'right',\n html: 'Subtitle 01',\n selector: [\n {\n default: true,\n html: '<span style=\"color:red\">Subtitle 01</span>',\n url: '/assets/sample/subtitle.srt?id=1',\n },\n {\n html: '<span style=\"color:yellow\">Subtitle 02</span>',\n Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[220],{3905:function(e,t,a){a.d(t,{Zo:function(){return s},kt:function(){return c}});var n=a(7294);function r(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function l(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function o(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?l(Object(a),!0).forEach((function(t){r(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):l(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function i(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},l=Object.keys(e);for(n=0;n<l.length;n++)a=l[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)a=l[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var d=n.createContext({}),p=function(e){var t=n.useContext(d),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},s=function(e){var t=p(e.components);return n.createElement(d.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var a=e.components,r=e.mdxType,l=e.originalType,d=e.parentName,s=i(e,["components","mdxType","originalType","parentName"]),m=p(a),c=r,k=m["".concat(d,".").concat(c)]||m[c]||u[c]||l;return a?n.createElement(k,o(o({ref:t},s),{},{components:a})):n.createElement(k,o({ref:t},s))}));function c(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=a.length,o=new Array(l);o[0]=m;var i={};for(var d in t)hasOwnProperty.call(t,d)&&(i[d]=t[d]);i.originalType=e,i.mdxType="string"==typeof e?e:r,o[1]=i;for(var p=2;p<l;p++)o[p]=a[p];return n.createElement.apply(null,o)}return n.createElement.apply(null,a)}m.displayName="MDXCreateElement"},6641:function(e,t,a){a.r(t),a.d(t,{assets:function(){return s},contentTitle:function(){return d},default:function(){return c},frontMatter:function(){return i},metadata:function(){return p},toc:function(){return u}});var n=a(7462),r=a(3366),l=(a(7294),a(3905)),o=["components"],i={title:"\u5b9e\u4f8b\u4e8b\u4ef6",sidebar_position:6,slug:"/zh-cn/events"},d=void 0,p={unversionedId:"zh-cn/Events",id:"zh-cn/Events",title:"\u5b9e\u4f8b\u4e8b\u4ef6",description:"\u64ad\u653e\u5668\u7684\u4e8b\u4ef6\u5206\u4e3a\u4e24\u79cd\uff0c\u4e00\u79cd\u89c6\u9891\u7684\u539f\u751f\u4e8b\u4ef6\uff0c\u53e6\u5916\u4e00\u79cd\u662f\u81ea\u5b9a\u4e49\u7684\u4e8b\u4ef6\u3002\u539f\u751f\u4e8b\u4ef6\u6765\u81ea video \u5143\u7d20\uff0c\u662f\u76f4\u63a5\u76d1\u542cvideo\u5143\u7d20\u7684\u539f\u59cb\u4e8b\u4ef6\uff0c\u4e3a\u4e86\u8ba9\u5b83\u548c\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u533a\u5206\uff0c\u539f\u751f\u4e8b\u4ef6\u6dfb\u52a0\u4e86\u524d\u7f00 video:",source:"@site/docs/zh-cn/Events.mdx",sourceDirName:"zh-cn",slug:"/zh-cn/events",permalink:"/document/zh-cn/events",draft:!1,tags:[],version:"current",sidebarPosition:6,frontMatter:{title:"\u5b9e\u4f8b\u4e8b\u4ef6",sidebar_position:6,slug:"/zh-cn/events"},sidebar:"zh-cn",previous:{title:"\u9759\u6001\u5c5e\u6027",permalink:"/document/zh-cn/class"},next:{title:"\u7b2c\u4e09\u65b9\u5e93",permalink:"/document/zh-cn/libraries"}},s={},u=[{value:"\u539f\u751f\u4e8b\u4ef6",id:"\u539f\u751f\u4e8b\u4ef6",level:2},{value:"\u81ea\u5b9a\u4e49\u4e8b\u4ef6",id:"\u81ea\u5b9a\u4e49\u4e8b\u4ef6",level:2},{value:"ready",id:"ready",level:3},{value:"play",id:"play",level:3},{value:"pause",id:"pause",level:3},{value:"seek",id:"seek",level:3},{value:"volume",id:"volume",level:3},{value:"destroy",id:"destroy",level:3},{value:"focus",id:"focus",level:3},{value:"blur",id:"blur",level:3},{value:"hover",id:"hover",level:3},{value:"resize",id:"resize",level:3},{value:"mousemove",id:"mousemove",level:3},{value:"url",id:"url",level:3},{value:"fullscreen",id:"fullscreen",level:3},{value:"fullscreenWeb",id:"fullscreenweb",level:3},{value:"hotkey",id:"hotkey",level:3}],m={toc:u};function c(e){var t=e.components,a=(0,r.Z)(e,o);return(0,l.kt)("wrapper",(0,n.Z)({},m,a,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("p",null,"\u64ad\u653e\u5668\u7684\u4e8b\u4ef6\u5206\u4e3a\u4e24\u79cd\uff0c\u4e00\u79cd\u89c6\u9891\u7684\u539f\u751f\u4e8b\u4ef6\uff0c\u53e6\u5916\u4e00\u79cd\u662f\u81ea\u5b9a\u4e49\u7684\u4e8b\u4ef6\u3002\u539f\u751f\u4e8b\u4ef6\u6765\u81ea ",(0,l.kt)("inlineCode",{parentName:"p"},"video")," \u5143\u7d20\uff0c\u662f\u76f4\u63a5\u76d1\u542c",(0,l.kt)("inlineCode",{parentName:"p"},"video"),"\u5143\u7d20\u7684\u539f\u59cb\u4e8b\u4ef6\uff0c\u4e3a\u4e86\u8ba9\u5b83\u548c\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u5Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[608],{4608:function(e,t,n){n.r(t),n.d(t,{default:function(){return c}});var a=n(7294),l=n(3460),o=n(5999),r=n(1944);function c(){return a.createElement(a.Fragment,null,a.createElement(r.d,{title:(0,o.I)({id:"theme.NotFound.title",message:"Page Not Found"})}),a.createElement(l.Z,null,a.createElement("main",{className:"container margin-vert--xl"},a.createElement("div",{className:"row"},a.createElement("div",{className:"col col--6 col--offset-3"},a.createElement("h1",{className:"hero__title"},a.createElement(o.Z,{id:"theme.NotFound.title",description:"The title of the 404 page"},"Page Not Found")),a.createElement("p",null,a.createElement(o.Z,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page"},"We could not find what you were looking for.")),a.createElement("p",null,a.createElement(o.Z,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page"},"Please contact the owner of the site that linked you to the original URL and let them know their link is broken.")))))))}}}]);
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[48],{3905:function(e,n,t){t.d(n,{Zo:function(){return u},kt:function(){return c}});var a=t(7294);function l(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function r(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?r(Object(t),!0).forEach((function(n){l(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):r(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function p(e,n){if(null==e)return{};var t,a,l=function(e,n){if(null==e)return{};var t,a,l={},r=Object.keys(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||(l[t]=e[t]);return l}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(l[t]=e[t])}return l}var o=a.createContext({}),s=function(e){var n=a.useContext(o),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},u=function(e){var n=s(e.components);return a.createElement(o.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return a.createElement(a.Fragment,{},n)}},m=a.forwardRef((function(e,n){var t=e.components,l=e.mdxType,r=e.originalType,o=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),m=s(t),c=l,k=m["".concat(o,".").concat(c)]||m[c]||d[c]||r;return t?a.createElement(k,i(i({ref:n},u),{},{components:t})):a.createElement(k,i({ref:n},u))}));function c(e,n){var t=arguments,l=n&&n.mdxType;if("string"==typeof e||l){var r=t.length,i=new Array(r);i[0]=m;var p={};for(var o in n)hasOwnProperty.call(n,o)&&(p[o]=n[o]);p.originalType=e,p.mdxType="string"==typeof e?e:l,i[1]=p;for(var s=2;s<r;s++)i[s]=t[s];return a.createElement.apply(null,i)}return a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},4387:function(e,n,t){t.r(n),t.d(n,{assets:function(){return u},contentTitle:function(){return o},default:function(){return c},frontMatter:function(){return p},metadata:function(){return s},toc:function(){return d}});var a=t(7462),l=t(3366),r=(t(7294),t(3905)),i=["components"],p={title:"\u5e38\u7528\u5c5e\u6027",sidebar_position:3,slug:"/zh-cn/propertie"},o=void 0,s={unversionedId:"zh-cn/Properties",id:"zh-cn/Properties",title:"\u5e38\u7528\u5c5e\u6027",description:"play",source:"@site/docs/zh-cn/Properties.mdx",sourceDirName:"zh-cn",slug:"/zh-cn/propertie",permalink:"/document/zh-cn/propertie",draft:!1,tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"\u5e38\u7528\u5c5e\u6027",sidebar_position:3,slug:"/zh-cn/propertie"},sidebar:"zh-cn",previous:{title:"\u57fa\u7840\u53c2\u6570",permalink:"/document/zh-cn/options"},next:{title:"\u9ad8\u7ea7\u5c5e\u6027",permalink:"/document/zh-cn/advance"}},u={},d=[{value:"play",id:"play",level:2},{value:"pause",id:"pause",level:2},{value:"toggle",id:"toggle",level:2},{value:"seek",id:"seek",level:2},{value:"forward",id:"forward",level:2},{value:"backward",id:"backward",level:2},{value:"volume",id:"volume",level:2},{value:"url",id:"url",level:2},{value:"switchUrl",id:"switchurl",level:2},{value:"switchQuality",id:"switchquality",level:2},{value:"muted",id:"muted",level:2},{value:"currentTime",id:"currenttime",level:2},{value:"duration",id:"duration",level:2},{value:"screenshot",id:"screenshot",level:2},{value:"getDataURL",id:"getdataurl",level:2},{value:"getBlobUrl",id:"getbloburl",level:2},{value:"fullscreen",id:"fullscreen",level:2},{value:"fullscreenWeb",id:"fullscreenweb",level:2},{value:"pip",id:"pip",level:2},{value:"poster",id:"poster",level:2},{value:"mini",id:"mini",level:2},{value:"playing",id:"playing",level:2},{value:"autoSize",id:"autosize",level:2},{value:"rect",id:"rect",level:2},{value:"flip",id:"flip",level:2},{value:"playbackRate",id:"playbackrate",level:2},{value:"aspectRatio",id:"aspectratio",level:2},{value:"loop",id:"loop",level:2},{value:"autoHeight",id:"autoheight",level:2},{value:"attr",id:"attr",level:2},{value:"title",id:"title",level:2},{value:"type",id:"type",level:2},{value:"theme",id:"theme",level:2},{value:"airplay",id:"airplay",level:2},{value:"destroy",id:"destroy",level:2}],m={toc:d};function c(e){var n=e.components,t=(0,l.Z)(e,i);return(0,r.kt)("wrapper",(0,a.Z)({},m,t,{components:n,mdxType:"MDXLayout"}),(0,r.kt)("h2",{id:"play"},"play"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,r.kt)("inlineCode",{parentName:"li"},"Function"))),(0,r.kt)("p",null,"\u64ad\u653e\u89c6\u9891"),(0,r.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",classLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[342],{3905:function(e,t,n){n.d(t,{Zo:function(){return p},kt:function(){return d}});var r=n(7294);function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,r,l=function(e,t){if(null==e)return{};var n,r,l={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}var u=r.createContext({}),s=function(e){var t=r.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=s(e.components);return r.createElement(u.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,l=e.mdxType,a=e.originalType,u=e.parentName,p=o(e,["components","mdxType","originalType","parentName"]),m=s(n),d=l,f=m["".concat(u,".").concat(d)]||m[d]||c[d]||a;return n?r.createElement(f,i(i({ref:t},p),{},{components:n})):r.createElement(f,i({ref:t},p))}));function d(e,t){var n=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var a=n.length,i=new Array(a);i[0]=m;var o={};for(var u in t)hasOwnProperty.call(t,u)&&(o[u]=t[u]);o.originalType=e,o.mdxType="string"==typeof e?e:l,i[1]=o;for(var s=2;s<a;s++)i[s]=n[s];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}m.displayName="MDXCreateElement"},4531:function(e,t,n){n.r(t),n.d(t,{assets:function(){return p},contentTitle:function(){return u},default:function(){return d},frontMatter:function(){return o},metadata:function(){return s},toc:function(){return c}});var r=n(7462),l=n(3366),a=(n(7294),n(3905)),i=["components"],o={title:"Hls Quality Plugin",sidebar_position:4},u=void 0,s={unversionedId:"en/Plugins/hls-quality",id:"en/Plugins/hls-quality",title:"Hls Quality Plugin",description:"Overview",source:"@site/docs/en/Plugins/hls-quality.mdx",sourceDirName:"en/Plugins",slug:"/en/Plugins/hls-quality",permalink:"/document/en/Plugins/hls-quality",draft:!1,tags:[],version:"current",sidebarPosition:4,frontMatter:{title:"Hls Quality Plugin",sidebar_position:4},sidebar:"en",previous:{title:"Iframe Plugin",permalink:"/document/en/Plugins/iframe"},next:{title:"Control Plugin",permalink:"/document/en/Plugins/control"}},p={},c=[{value:"Overview",id:"overview",level:2},{value:"Demo",id:"demo",level:2},{value:"Install",id:"install",level:2},{value:"Install from <code>npm</code>:",id:"install-from-npm",level:3},{value:"Install from <code>yarn</code>:",id:"install-from-yarn",level:3},{value:"Install from <code>script</code>:",id:"install-from-script",level:3}],m={toc:c};function d(e){var t=e.components,n=(0,l.Z)(e,i);return(0,a.kt)("wrapper",(0,r.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h2",{id:"overview"},"Overview"),(0,a.kt)("p",null,"With this plugin, you can add the ",(0,a.kt)("inlineCode",{parentName:"p"},"Hls")," video quality list to the control or the settings panel"),(0,a.kt)("h2",{id:"demo"},"Demo"),(0,a.kt)("p",null,"\ud83d\udc49 ",(0,a.kt)("a",{parentName:"p",href:"https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-quality/index.js&example=hls.quality"},"View Demo")),(0,a.kt)("h2",{id:"install"},"Install"),(0,a.kt)("h3",{id:"install-from-npm"},"Install from ",(0,a.kt)("inlineCode",{parentName:"h3"},"npm"),":"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-bash"},"$ npm install artplayer-plugin-hls-quality\n")),(0,a.kt)("h3",{id:"install-from-yarn"},"Install from ",(0,a.kt)("inlineCode",{parentName:"h3"},"yarn"),":"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-bash"},"$ yarn add artplayer-plugin-hls-quality\n")),(0,a.kt)("h3",{id:"install-from-script"},"Install from ",(0,a.kt)("inlineCode",{parentName:"h3"},"script"),":"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- local --\x3e\n<script src="path/to/artplayer-plugin-hls-quality.js"><\/script>\n\n\x3c!-- jsdelivr --\x3e\n<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/art
Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[359],{3905:function(e,t,n){n.d(t,{Zo:function(){return u},kt:function(){return c}});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=a.createContext({}),s=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=s(e.components);return a.createElement(p.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,p=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),m=s(n),c=r,k=m["".concat(p,".").concat(c)]||m[c]||d[c]||l;return n?a.createElement(k,i(i({ref:t},u),{},{components:n})):a.createElement(k,i({ref:t},u))}));function c(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,i=new Array(l);i[0]=m;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:r,i[1]=o;for(var s=2;s<l;s++)i[s]=n[s];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},5883:function(e,t,n){n.r(t),n.d(t,{assets:function(){return u},contentTitle:function(){return p},default:function(){return c},frontMatter:function(){return o},metadata:function(){return s},toc:function(){return d}});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),i=["components"],o={title:"Common properties",sidebar_position:3,slug:"/propertie"},p=void 0,s={unversionedId:"en/Properties",id:"en/Properties",title:"Common properties",description:"play",source:"@site/docs/en/Properties.mdx",sourceDirName:"en",slug:"/propertie",permalink:"/document/propertie",draft:!1,tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Common properties",sidebar_position:3,slug:"/propertie"},sidebar:"en",previous:{title:"Basic options",permalink:"/document/options"},next:{title:"Advanced propertys",permalink:"/document/advance"}},u={},d=[{value:"play",id:"play",level:2},{value:"pause",id:"pause",level:2},{value:"toggle",id:"toggle",level:2},{value:"seek",id:"seek",level:2},{value:"forward",id:"forward",level:2},{value:"backward",id:"backward",level:2},{value:"volume",id:"volume",level:2},{value:"url",id:"url",level:2},{value:"switchUrl",id:"switchurl",level:2},{value:"switchQuality",id:"switchquality",level:2},{value:"muted",id:"muted",level:2},{value:"currentTime",id:"currenttime",level:2},{value:"duration",id:"duration",level:2},{value:"screenshot",id:"screenshot",level:2},{value:"getDataURL",id:"getdataurl",level:2},{value:"getBlobUrl",id:"getbloburl",level:2},{value:"fullscreen",id:"fullscreen",level:2},{value:"fullscreenWeb",id:"fullscreenweb",level:2},{value:"pip",id:"pip",level:2},{value:"poster",id:"poster",level:2},{value:"mini",id:"mini",level:2},{value:"playing",id:"playing",level:2},{value:"autoSize",id:"autosize",level:2},{value:"rect",id:"rect",level:2},{value:"flip",id:"flip",level:2},{value:"playbackRate",id:"playbackrate",level:2},{value:"aspectRatio",id:"aspectratio",level:2},{value:"loop",id:"loop",level:2},{value:"autoHeight",id:"autoheight",level:2},{value:"attr",id:"attr",level:2},{value:"title",id:"title",level:2},{value:"type",id:"type",level:2},{value:"theme",id:"theme",level:2},{value:"airplay",id:"airplay",level:2},{value:"destroy",id:"destroy",level:2}],m={toc:d};function c(e){var t=e.components,n=(0,r.Z)(e,i);return(0,l.kt)("wrapper",(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"play"},"play"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Function"))),(0,l.kt)("p",null,"Play video"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/vidLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[601],{3905:function(e,t,n){n.d(t,{Zo:function(){return u},kt:function(){return m}});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var c=r.createContext({}),s=function(e){var t=r.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=s(e.components);return r.createElement(c.Provider,{value:t},e.children)},l={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},y=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,c=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),y=s(n),m=o,f=y["".concat(c,".").concat(m)]||y[m]||l[m]||a;return n?r.createElement(f,i(i({ref:t},u),{},{components:n})):r.createElement(f,i({ref:t},u))}));function m(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,i=new Array(a);i[0]=y;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:o,i[1]=p;for(var s=2;s<a;s++)i[s]=n[s];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}y.displayName="MDXCreateElement"},7702:function(e,t,n){n.r(t),n.d(t,{assets:function(){return u},contentTitle:function(){return c},default:function(){return m},frontMatter:function(){return p},metadata:function(){return s},toc:function(){return l}});var r=n(7462),o=n(3366),a=(n(7294),n(3905)),i=["components"],p={title:"How to import types",sidebar_position:4},c=void 0,s={unversionedId:"en/Questions/How_to_import_types",id:"en/Questions/How_to_import_types",title:"How to import types",description:"Sometimes you lose TypeScript syntax prompt, then you can import types manually",source:"@site/docs/en/Questions/How_to_import_types.mdx",sourceDirName:"en/Questions",slug:"/en/Questions/How_to_import_types",permalink:"/document/en/Questions/How_to_import_types",draft:!1,tags:[],version:"current",sidebarPosition:4,frontMatter:{title:"How to import types",sidebar_position:4},sidebar:"en",previous:{title:"Handle a single component",permalink:"/document/en/Questions/Handle_single_component"},next:{title:"How to add setting panel",permalink:"/document/en/Questions/How_to_add_setting_panel"}},u={},l=[],y={toc:l};function m(e){var t=e.components,n=(0,o.Z)(e,i);return(0,a.kt)("wrapper",(0,r.Z)({},y,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Sometimes you lose ",(0,a.kt)("inlineCode",{parentName:"p"},"TypeScript")," syntax prompt, then you can import types manually"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'/**\n * @typedef { import("artplayer/types/artplayer") } Artplayer\n */\n\n/**\n * @type {Artplayer} - An Artplayer instance.\n */\nconst art1 = {};\n\n/**\n * @param {Artplayer} art2 - An Artplayer instance.\n */\nfunction getInstance(art2) {\n //\n}\n')))}m.isMDXComponent=!0}}]);
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[667],{3905:function(e,n,t){t.d(n,{Zo:function(){return p},kt:function(){return d}});var r=t(7294);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?o(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function u(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=r.createContext({}),l=function(e){var n=r.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=l(e.components);return r.createElement(c.Provider,{value:n},e.children)},s={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},m=r.forwardRef((function(e,n){var t=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,p=u(e,["components","mdxType","originalType","parentName"]),m=l(t),d=a,f=m["".concat(c,".").concat(d)]||m[d]||s[d]||o;return t?r.createElement(f,i(i({ref:n},p),{},{components:t})):r.createElement(f,i({ref:n},p))}));function d(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var o=t.length,i=new Array(o);i[0]=m;var u={};for(var c in n)hasOwnProperty.call(n,c)&&(u[c]=n[c]);u.originalType=e,u.mdxType="string"==typeof e?e:a,i[1]=u;for(var l=2;l<o;l++)i[l]=t[l];return r.createElement.apply(null,i)}return r.createElement.apply(null,t)}m.displayName="MDXCreateElement"},1856:function(e,n,t){t.r(n),t.d(n,{assets:function(){return p},contentTitle:function(){return c},default:function(){return d},frontMatter:function(){return u},metadata:function(){return l},toc:function(){return s}});var r=t(7462),a=t(3366),o=(t(7294),t(3905)),i=["components"],u={title:"Danmuku plugin",sidebar_position:1},c=void 0,l={unversionedId:"en/Plugins/danmuku",id:"en/Plugins/danmuku",title:"Danmuku plugin",description:"The documentation of the current danmaku library plug-in, only the Chinese version",source:"@site/docs/en/Plugins/danmuku.mdx",sourceDirName:"en/Plugins",slug:"/en/Plugins/danmuku",permalink:"/document/en/Plugins/danmuku",draft:!1,tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"Danmuku plugin",sidebar_position:1},sidebar:"en",previous:{title:"Third party librarys",permalink:"/document/libraries"},next:{title:"Ads Plugin",permalink:"/document/en/Plugins/ads"}},p={},s=[],m={toc:s};function d(e){var n=e.components,t=(0,a.Z)(e,i);return(0,o.kt)("wrapper",(0,r.Z)({},m,t,{components:n,mdxType:"MDXLayout"}),(0,o.kt)("div",{className:"admonition admonition-danger alert alert--danger"},(0,o.kt)("div",{parentName:"div",className:"admonition-heading"},(0,o.kt)("h5",{parentName:"div"},(0,o.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,o.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,o.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"}))),"Tip")),(0,o.kt)("div",{parentName:"div",className:"admonition-content"},(0,o.kt)("p",{parentName:"div"},"The documentation of the current danmaku library plug-in, only the Chinese version"))),(0,o.kt)("p",null,"\ud83d\udc49 ",(0,o.kt)("a",{parentName:"p",href:"https://artplayer.org/document/zh-cn/Plugins/danmuku/"},"https://artplayer.org/document/zh-cn/Plugins/danmuku/")))}d.isMDXComponent=!0}}]);
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[12],{3905:function(e,n,t){t.d(n,{Zo:function(){return u},kt:function(){return m}});var r=t(7294);function l(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function o(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?a(Object(t),!0).forEach((function(n){l(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function i(e,n){if(null==e)return{};var t,r,l=function(e,n){if(null==e)return{};var t,r,l={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(l[t]=e[t]);return l}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(l[t]=e[t])}return l}var p=r.createContext({}),c=function(e){var n=r.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},u=function(e){var n=c(e.components);return r.createElement(p.Provider,{value:n},e.children)},s={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},d=r.forwardRef((function(e,n){var t=e.components,l=e.mdxType,a=e.originalType,p=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),d=c(t),m=l,f=d["".concat(p,".").concat(m)]||d[m]||s[m]||a;return t?r.createElement(f,o(o({ref:n},u),{},{components:t})):r.createElement(f,o({ref:n},u))}));function m(e,n){var t=arguments,l=n&&n.mdxType;if("string"==typeof e||l){var a=t.length,o=new Array(a);o[0]=d;var i={};for(var p in n)hasOwnProperty.call(n,p)&&(i[p]=n[p]);i.originalType=e,i.mdxType="string"==typeof e?e:l,o[1]=i;for(var c=2;c<a;c++)o[c]=t[c];return r.createElement.apply(null,o)}return r.createElement.apply(null,t)}d.displayName="MDXCreateElement"},9711:function(e,n,t){t.r(n),t.d(n,{assets:function(){return u},contentTitle:function(){return p},default:function(){return m},frontMatter:function(){return i},metadata:function(){return c},toc:function(){return s}});var r=t(7462),l=t(3366),a=(t(7294),t(3905)),o=["components"],i={title:"Control Plugin",sidebar_position:5},p=void 0,c={unversionedId:"en/Plugins/control",id:"en/Plugins/control",title:"Control Plugin",description:"Demo",source:"@site/docs/en/Plugins/control.mdx",sourceDirName:"en/Plugins",slug:"/en/Plugins/control",permalink:"/document/en/Plugins/control",draft:!1,tags:[],version:"current",sidebarPosition:5,frontMatter:{title:"Control Plugin",sidebar_position:5},sidebar:"en",previous:{title:"Hls Quality Plugin",permalink:"/document/en/Plugins/hls-quality"},next:{title:"Add select in the controls",permalink:"/document/en/Questions/Create_selector_in_the_controls"}},u={},s=[{value:"Demo",id:"demo",level:2},{value:"Install",id:"install",level:2},{value:"Install from <code>npm</code>:",id:"install-from-npm",level:3},{value:"Install from <code>yarn</code>:",id:"install-from-yarn",level:3},{value:"Install from <code>script</code>:",id:"install-from-script",level:3},{value:"Use",id:"use",level:2},{value:"Api",id:"api",level:2},{value:"enable",id:"enable",level:3}],d={toc:s};function m(e){var n=e.components,t=(0,l.Z)(e,o);return(0,a.kt)("wrapper",(0,r.Z)({},d,t,{components:n,mdxType:"MDXLayout"}),(0,a.kt)("h2",{id:"demo"},"Demo"),(0,a.kt)("p",null,"\ud83d\udc49 ",(0,a.kt)("a",{parentName:"p",href:"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-control/index.js&example=control"},"View Demo")),(0,a.kt)("h2",{id:"install"},"Install"),(0,a.kt)("h3",{id:"install-from-npm"},"Install from ",(0,a.kt)("inlineCode",{parentName:"h3"},"npm"),":"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-bash"},"$ npm install artplayer-plugin-control\n")),(0,a.kt)("h3",{id:"install-from-yarn"},"Install from ",(0,a.kt)("inlineCode",{parentName:"h3"},"yarn"),":"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-bash"},"$ yarn add artplayer-plugin-control\n")),(0,a.kt)("h3",{id:"install-from-script"},"Install from ",(0,a.kt)("inlineCode",{parentName:"h3"},"script"),":"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- local --\x3e\n<script src="path/to/artplayer-plugin-control.js"><\/script>\n\n\x3c!-- jsdelivr --\x3e\n<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-control/dist/artplayer-plugin-control.js"><\/script>\n\n\x3c!-- unpkg --\x3e\n<script src="https://unpkg.com/artplayer-plugin-control/dist/artplayer-plugin-control.js"><\/script>\n')),(0,a.kt)("p",null,"Then you can access the plugin function thrLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[745],{3905:function(e,n,t){t.d(n,{Zo:function(){return u},kt:function(){return m}});var r=t(7294);function l(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function o(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?a(Object(t),!0).forEach((function(n){l(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function i(e,n){if(null==e)return{};var t,r,l=function(e,n){if(null==e)return{};var t,r,l={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(l[t]=e[t]);return l}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(l[t]=e[t])}return l}var c=r.createContext({}),p=function(e){var n=r.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},u=function(e){var n=p(e.components);return r.createElement(c.Provider,{value:n},e.children)},s={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},d=r.forwardRef((function(e,n){var t=e.components,l=e.mdxType,a=e.originalType,c=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),d=p(t),m=l,y=d["".concat(c,".").concat(m)]||d[m]||s[m]||a;return t?r.createElement(y,o(o({ref:n},u),{},{components:t})):r.createElement(y,o({ref:n},u))}));function m(e,n){var t=arguments,l=n&&n.mdxType;if("string"==typeof e||l){var a=t.length,o=new Array(a);o[0]=d;var i={};for(var c in n)hasOwnProperty.call(n,c)&&(i[c]=n[c]);i.originalType=e,i.mdxType="string"==typeof e?e:l,o[1]=i;for(var p=2;p<a;p++)o[p]=t[p];return r.createElement.apply(null,o)}return r.createElement.apply(null,t)}d.displayName="MDXCreateElement"},2837:function(e,n,t){t.r(n),t.d(n,{assets:function(){return u},contentTitle:function(){return c},default:function(){return m},frontMatter:function(){return i},metadata:function(){return p},toc:function(){return s}});var r=t(7462),l=t(3366),a=(t(7294),t(3905)),o=["components"],i={title:"\u63a7\u5236\u5668\u63d2\u4ef6",sidebar_position:5},c=void 0,p={unversionedId:"zh-cn/Plugins/control",id:"zh-cn/Plugins/control",title:"\u63a7\u5236\u5668\u63d2\u4ef6",description:"\u6f14\u793a",source:"@site/docs/zh-cn/Plugins/control.mdx",sourceDirName:"zh-cn/Plugins",slug:"/zh-cn/Plugins/control",permalink:"/document/zh-cn/Plugins/control",draft:!1,tags:[],version:"current",sidebarPosition:5,frontMatter:{title:"\u63a7\u5236\u5668\u63d2\u4ef6",sidebar_position:5},sidebar:"zh-cn",previous:{title:"Hls \u753b\u8d28\u63d2\u4ef6",permalink:"/document/zh-cn/Plugins/hls-quality"},next:{title:"\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u5217\u8868",permalink:"/document/zh-cn/Questions/Create_selector_in_the_controls"}},u={},s=[{value:"\u6f14\u793a",id:"\u6f14\u793a",level:2},{value:"\u5b89\u88c5",id:"\u5b89\u88c5",level:2},{value:"\u901a\u8fc7 <code>npm</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-npm-\u5b89\u88c5",level:3},{value:"\u901a\u8fc7 <code>yarn</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-yarn-\u5b89\u88c5",level:3},{value:"\u901a\u8fc7 <code>script</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-script-\u5b89\u88c5",level:3},{value:"\u4f7f\u7528",id:"\u4f7f\u7528",level:2},{value:"\u63a5\u53e3",id:"\u63a5\u53e3",level:2},{value:"enable",id:"enable",level:3}],d={toc:s};function m(e){var n=e.components,t=(0,l.Z)(e,o);return(0,a.kt)("wrapper",(0,r.Z)({},d,t,{components:n,mdxType:"MDXLayout"}),(0,a.kt)("h2",{id:"\u6f14\u793a"},"\u6f14\u793a"),(0,a.kt)("p",null,"\ud83d\udc49 ",(0,a.kt)("a",{parentName:"p",href:"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-control/index.js&example=control"},"\u67e5\u770b\u5b8c\u6574\u6f14\u793a")),(0,a.kt)("h2",{id:"\u5b89\u88c5"},"\u5b89\u88c5"),(0,a.kt)("h3",{id:"\u901a\u8fc7-npm-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,a.kt)("inlineCode",{parentName:"h3"},"npm")," \u5b89\u88c5\uff1a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-bash"},"$ npm install artplayer-plugin-control\n")),(0,a.kt)("h3",{id:"\u901a\u8fc7-yarn-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,a.kt)("inlineCode",{parentName:"h3"},"yarn")," \u5b89\u88c5\uff1a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-bash"},"$ yarn add artplayer-plugin-control\n")),(0,a.kt)("h3",{id:"\u901a\u8fc7-script-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,a.kt)("inlineCode",{parentName:"h3"},"script")," \u5b89\u88c5\uff1a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-html"},Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[167],{3905:function(e,t,n){n.d(t,{Zo:function(){return s},kt:function(){return y}});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=r.createContext({}),u=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},s=function(e){var t=u(e.components);return r.createElement(p.Provider,{value:t},e.children)},l={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,i=e.originalType,p=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),f=u(n),y=o,m=f["".concat(p,".").concat(y)]||f[y]||l[y]||i;return n?r.createElement(m,a(a({ref:t},s),{},{components:n})):r.createElement(m,a({ref:t},s))}));function y(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=n.length,a=new Array(i);a[0]=f;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:o,a[1]=c;for(var u=2;u<i;u++)a[u]=n[u];return r.createElement.apply(null,a)}return r.createElement.apply(null,n)}f.displayName="MDXCreateElement"},1288:function(e,t,n){n.r(t),n.d(t,{assets:function(){return s},contentTitle:function(){return p},default:function(){return y},frontMatter:function(){return c},metadata:function(){return u},toc:function(){return l}});var r=n(7462),o=n(3366),i=(n(7294),n(3905)),a=["components"],c={title:"\u5982\u4f55\u5bfc\u5165\u7c7b\u578b",sidebar_position:4},p=void 0,u={unversionedId:"zh-cn/Questions/How_to_import_types",id:"zh-cn/Questions/How_to_import_types",title:"\u5982\u4f55\u5bfc\u5165\u7c7b\u578b",description:"\u6709\u65f6\u4f60\u4f1a\u4e22\u5931 TypeScript \u7684\u8bed\u6cd5\u63d0\u793a\uff0c\u8fd9\u65f6\u5019\u4f60\u53ef\u4ee5\u624b\u52a8\u5bfc\u5165\u7c7b\u578b",source:"@site/docs/zh-cn/Questions/How_to_import_types.mdx",sourceDirName:"zh-cn/Questions",slug:"/zh-cn/Questions/How_to_import_types",permalink:"/document/zh-cn/Questions/How_to_import_types",draft:!1,tags:[],version:"current",sidebarPosition:4,frontMatter:{title:"\u5982\u4f55\u5bfc\u5165\u7c7b\u578b",sidebar_position:4},sidebar:"zh-cn",previous:{title:"\u5904\u7406\u5355\u4e2a\u7ec4\u4ef6",permalink:"/document/zh-cn/Questions/Handle_single_component"},next:{title:"\u600e\u4e48\u6dfb\u52a0\u8bbe\u7f6e\u9762\u677f",permalink:"/document/zh-cn/Questions/How_to_add_setting_panel"}},s={},l=[],f={toc:l};function y(e){var t=e.components,n=(0,o.Z)(e,a);return(0,i.kt)("wrapper",(0,r.Z)({},f,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,"\u6709\u65f6\u4f60\u4f1a\u4e22\u5931 ",(0,i.kt)("inlineCode",{parentName:"p"},"TypeScript")," \u7684\u8bed\u6cd5\u63d0\u793a\uff0c\u8fd9\u65f6\u5019\u4f60\u53ef\u4ee5\u624b\u52a8\u5bfc\u5165\u7c7b\u578b "),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},'/**\n * @typedef { import("artplayer/types/artplayer") } Artplayer\n */\n\n/**\n * @type {Artplayer} - \u4e00\u4e2a Artplayer \u5b9e\u4f8b\n */\nconst art1 = {};\n\n/**\n * @param {Artplayer} art2 - \u4e00\u4e2a Artplayer \u5b9e\u4f8b\n */\nfunction getInstance(art2) {\n //\n}\n')))}y.isMDXComponent=!0}}]);
|
||||
@@ -1,2 +0,0 @@
|
||||
/*! For license information please see 878.0f9d5667.js.LICENSE.txt */
|
||||
(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[878],{1639:function(e,t,n){"use strict";e.exports=n(9281)},7114:function(e,t,n){"use strict";var i=n(5670),r={wrapper:{position:"relative",display:"inline-block"},hint:{position:"absolute",top:"0",left:"0",borderColor:"transparent",boxShadow:"none",opacity:"1"},input:{position:"relative",verticalAlign:"top",backgroundColor:"transparent"},inputWithNoHint:{position:"relative",verticalAlign:"top"},dropdown:{position:"absolute",top:"100%",left:"0",zIndex:"100",display:"none"},suggestions:{display:"block"},suggestion:{whiteSpace:"nowrap",cursor:"pointer"},suggestionChild:{whiteSpace:"normal"},ltr:{left:"0",right:"auto"},rtl:{left:"auto",right:"0"},defaultClasses:{root:"algolia-autocomplete",prefix:"aa",noPrefix:!1,dropdownMenu:"dropdown-menu",input:"input",hint:"hint",suggestions:"suggestions",suggestion:"suggestion",cursor:"cursor",dataset:"dataset",empty:"empty"},appendTo:{wrapper:{position:"absolute",zIndex:"100",display:"none"},input:{},inputWithNoHint:{},dropdown:{display:"block"}}};i.isMsie()&&i.mixin(r.input,{backgroundImage:"url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)"}),i.isMsie()&&i.isMsie()<=7&&i.mixin(r.input,{marginTop:"-1px"}),e.exports=r},3312:function(e,t,n){"use strict";var i="aaDataset",r="aaValue",s="aaDatum",o=n(5670),a=n(3855),u=n(6619),c=n(7114),l=n(6823);function h(e){var t;(e=e||{}).templates=e.templates||{},e.source||o.error("missing source"),e.name&&(t=e.name,!/^[_a-zA-Z0-9-]+$/.test(t))&&o.error("invalid dataset name: "+e.name),this.query=null,this._isEmpty=!0,this.highlight=!!e.highlight,this.name=void 0===e.name||null===e.name?o.getUniqueId():e.name,this.source=e.source,this.displayFn=function(e){return e=e||"value",o.isFunction(e)?e:t;function t(t){return t[e]}}(e.display||e.displayKey),this.debounce=e.debounce,this.cache=!1!==e.cache,this.templates=function(e,t){return{empty:e.empty&&o.templatify(e.empty),header:e.header&&o.templatify(e.header),footer:e.footer&&o.templatify(e.footer),suggestion:e.suggestion||n};function n(e){return"<p>"+t(e)+"</p>"}}(e.templates,this.displayFn),this.css=o.mixin({},c,e.appendTo?c.appendTo:{}),this.cssClasses=e.cssClasses=o.mixin({},c.defaultClasses,e.cssClasses||{}),this.cssClasses.prefix=e.cssClasses.formattedPrefix||o.formatPrefix(this.cssClasses.prefix,this.cssClasses.noPrefix);var n=o.className(this.cssClasses.prefix,this.cssClasses.dataset);this.$el=e.$menu&&e.$menu.find(n+"-"+this.name).length>0?a.element(e.$menu.find(n+"-"+this.name)[0]):a.element(u.dataset.replace("%CLASS%",this.name).replace("%PREFIX%",this.cssClasses.prefix).replace("%DATASET%",this.cssClasses.dataset)),this.$menu=e.$menu,this.clearCachedSuggestions()}h.extractDatasetName=function(e){return a.element(e).data(i)},h.extractValue=function(e){return a.element(e).data(r)},h.extractDatum=function(e){var t=a.element(e).data(s);return"string"==typeof t&&(t=JSON.parse(t)),t},o.mixin(h.prototype,l,{_render:function(e,t){if(this.$el){var n,c=this,l=[].slice.call(arguments,2);if(this.$el.empty(),n=t&&t.length,this._isEmpty=!n,!n&&this.templates.empty)this.$el.html(h.apply(this,l)).prepend(c.templates.header?f.apply(this,l):null).append(c.templates.footer?d.apply(this,l):null);else if(n)this.$el.html(p.apply(this,l)).prepend(c.templates.header?f.apply(this,l):null).append(c.templates.footer?d.apply(this,l):null);else if(t&&!Array.isArray(t))throw new TypeError("suggestions must be an array");this.$menu&&this.$menu.addClass(this.cssClasses.prefix+(n?"with":"without")+"-"+this.name).removeClass(this.cssClasses.prefix+(n?"without":"with")+"-"+this.name),this.trigger("rendered",e)}function h(){var t=[].slice.call(arguments,0);return t=[{query:e,isEmpty:!0}].concat(t),c.templates.empty.apply(this,t)}function p(){var e,n,l=[].slice.call(arguments,0),h=this,p=u.suggestions.replace("%PREFIX%",this.cssClasses.prefix).replace("%SUGGESTIONS%",this.cssClasses.suggestions);return e=a.element(p).css(this.css.suggestions),n=o.map(t,f),e.append.apply(e,n),e;function f(e){var t,n=u.suggestion.replace("%PREFIX%",h.cssClasses.prefix).replace("%SUGGESTION%",h.cssClasses.suggestion);return(t=a.element(n).attr({role:"option",id:["option",Math.floor(1e8*Math.random())].join("-")}).append(c.templates.suggestion.apply(this,[e].concat(l)))).data(i,c.name),t.data(r,c.displayFn(e)||void 0),t.data(s,JSON.stringify(e)),t.children().each((function(){a.element(this).css(h.css.suggestionChild)})),t}}function f(){var t=[].slice.call(arguments,0);return t=[{query:e,isEmpty:!n}].concat(t),c.templates.header.apply(this,t)}function d(){var t=[].slice.call(arguments,0);return t=[{query:e,isEmpty:!n}].concat(t),c.templates.footer.apply(this,t)}},getRoot:function(){return this.$el},update:function(e){function t(t){if(!this.canceled&&e===this.query){var n=[].slice.call(arguments,1);this.cacheSuggestions(e,t,n),this._render.apply(this,[e,t].concat(n))}}if(this.query=e,this.canceled=!1,this.shouldFetchFroLine truncated
|
||||
@@ -1,61 +0,0 @@
|
||||
/*!
|
||||
* lunr.Builder
|
||||
* Copyright (C) 2020 Oliver Nightingale
|
||||
*/
|
||||
|
||||
/*!
|
||||
* lunr.Index
|
||||
* Copyright (C) 2020 Oliver Nightingale
|
||||
*/
|
||||
|
||||
/*!
|
||||
* lunr.Pipeline
|
||||
* Copyright (C) 2020 Oliver Nightingale
|
||||
*/
|
||||
|
||||
/*!
|
||||
* lunr.Set
|
||||
* Copyright (C) 2020 Oliver Nightingale
|
||||
*/
|
||||
|
||||
/*!
|
||||
* lunr.TokenSet
|
||||
* Copyright (C) 2020 Oliver Nightingale
|
||||
*/
|
||||
|
||||
/*!
|
||||
* lunr.Vector
|
||||
* Copyright (C) 2020 Oliver Nightingale
|
||||
*/
|
||||
|
||||
/*!
|
||||
* lunr.stemmer
|
||||
* Copyright (C) 2020 Oliver Nightingale
|
||||
* Includes code from - http://tartarus.org/~martin/PorterStemmer/js.txt
|
||||
*/
|
||||
|
||||
/*!
|
||||
* lunr.stopWordFilter
|
||||
* Copyright (C) 2020 Oliver Nightingale
|
||||
*/
|
||||
|
||||
/*!
|
||||
* lunr.tokenizer
|
||||
* Copyright (C) 2020 Oliver Nightingale
|
||||
*/
|
||||
|
||||
/*!
|
||||
* lunr.trimmer
|
||||
* Copyright (C) 2020 Oliver Nightingale
|
||||
*/
|
||||
|
||||
/*!
|
||||
* lunr.utils
|
||||
* Copyright (C) 2020 Oliver Nightingale
|
||||
*/
|
||||
|
||||
/**
|
||||
* lunr - http://lunrjs.com - A bit like Solr, but much smaller and not as bright - 2.3.9
|
||||
* Copyright (C) 2020 Oliver Nightingale
|
||||
* @license MIT
|
||||
*/
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[283],{3905:function(e,t,n){n.d(t,{Zo:function(){return c},kt:function(){return m}});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=a.createContext({}),p=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=p(e.components);return a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,s=e.parentName,c=o(e,["components","mdxType","originalType","parentName"]),d=p(n),m=r,k=d["".concat(s,".").concat(m)]||d[m]||u[m]||l;return n?a.createElement(k,i(i({ref:t},c),{},{components:n})):a.createElement(k,i({ref:t},c))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,i=new Array(l);i[0]=d;var o={};for(var s in t)hasOwnProperty.call(t,s)&&(o[s]=t[s]);o.originalType=e,o.mdxType="string"==typeof e?e:r,i[1]=o;for(var p=2;p<l;p++)i[p]=n[p];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},2606:function(e,t,n){n.r(t),n.d(t,{assets:function(){return c},contentTitle:function(){return s},default:function(){return m},frontMatter:function(){return o},metadata:function(){return p},toc:function(){return u}});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),i=["components"],o={title:"Static propertys",sidebar_position:5,slug:"/class"},s=void 0,p={unversionedId:"en/Class",id:"en/Class",title:"Static propertys",description:"Static attributes exist in the constructor artplayer, and the player instance is not directly associated",source:"@site/docs/en/Class.mdx",sourceDirName:"en",slug:"/class",permalink:"/document/class",draft:!1,tags:[],version:"current",sidebarPosition:5,frontMatter:{title:"Static propertys",sidebar_position:5,slug:"/class"},sidebar:"en",previous:{title:"Advanced propertys",permalink:"/document/advance"},next:{title:"Common events",permalink:"/document/events"}},c={},u=[{value:"instances",id:"instances",level:2},{value:"version",id:"version",level:2},{value:"env",id:"env",level:2},{value:"utils",id:"utils",level:2},{value:"config",id:"config",level:2},{value:"scheme",id:"scheme",level:2},{value:"validator",id:"validator",level:2},{value:"option",id:"option",level:2},{value:"html",id:"html",level:2},{value:"kindOf",id:"kindof",level:2}],d={toc:u};function m(e){var t=e.components,n=(0,r.Z)(e,i);return(0,l.kt)("wrapper",(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("div",{className:"admonition admonition-tip alert alert--success"},(0,l.kt)("div",{parentName:"div",className:"admonition-heading"},(0,l.kt)("h5",{parentName:"div"},(0,l.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,l.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,l.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"Tip")),(0,l.kt)("div",{parentName:"div",className:"admonition-content"},(0,l.kt)("p",{parentName:"div"},"Static attributes exist in the constructor artplayer, and the player instance is not directly associated"))),(0,l.kt)("h2",{id:"instances"},"instances"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Array"))),(0,l.kt)("p",null,"A array that saves all player instances, and can manage multiple instances through this
Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[53],{1109:function(e){e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"en":[{"type":"link","label":"Quick start","href":"/document/","docId":"en/Overview"},{"type":"link","label":"Basic options","href":"/document/options","docId":"en/Options"},{"type":"link","label":"Common properties","href":"/document/propertie","docId":"en/Properties"},{"type":"link","label":"Advanced propertys","href":"/document/advance","docId":"en/Advance"},{"type":"link","label":"Static propertys","href":"/document/class","docId":"en/Class"},{"type":"link","label":"Common events","href":"/document/events","docId":"en/Events"},{"type":"link","label":"Third party librarys","href":"/document/libraries","docId":"en/Libraries"},{"type":"category","label":"Official plugins","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Danmuku plugin","href":"/document/en/Plugins/danmuku","docId":"en/Plugins/danmuku"},{"type":"link","label":"Ads Plugin","href":"/document/en/Plugins/ads","docId":"en/Plugins/ads"},{"type":"link","label":"Iframe Plugin","href":"/document/en/Plugins/iframe","docId":"en/Plugins/iframe"},{"type":"link","label":"Hls Quality Plugin","href":"/document/en/Plugins/hls-quality","docId":"en/Plugins/hls-quality"},{"type":"link","label":"Control Plugin","href":"/document/en/Plugins/control","docId":"en/Plugins/control"}]},{"type":"category","label":"Common problems","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Add select in the controls","href":"/document/en/Questions/Create_selector_in_the_controls","docId":"en/Questions/Create_selector_in_the_controls"},{"type":"link","label":"Add button to the controls","href":"/document/en/Questions/Create_button_in_the_controls","docId":"en/Questions/Create_button_in_the_controls"},{"type":"link","label":"Handle a single component","href":"/document/en/Questions/Handle_single_component","docId":"en/Questions/Handle_single_component"},{"type":"link","label":"How to import types","href":"/document/en/Questions/How_to_import_types","docId":"en/Questions/How_to_import_types"},{"type":"link","label":"How to add setting panel","href":"/document/en/Questions/How_to_add_setting_panel","docId":"en/Questions/How_to_add_setting_panel"},{"type":"link","label":"Use with React Portal","href":"/document/en/Questions/Use_with_react_portal","docId":"en/Questions/Use_with_react_portal"}]}],"zh-cn":[{"type":"link","label":"\u5feb\u901f\u4e0a\u624b","href":"/document/zh-cn","docId":"zh-cn/Overview"},{"type":"link","label":"\u57fa\u7840\u53c2\u6570","href":"/document/zh-cn/options","docId":"zh-cn/Options"},{"type":"link","label":"\u5e38\u7528\u5c5e\u6027","href":"/document/zh-cn/propertie","docId":"zh-cn/Properties"},{"type":"link","label":"\u9ad8\u7ea7\u5c5e\u6027","href":"/document/zh-cn/advance","docId":"zh-cn/Advance"},{"type":"link","label":"\u9759\u6001\u5c5e\u6027","href":"/document/zh-cn/class","docId":"zh-cn/Class"},{"type":"link","label":"\u5b9e\u4f8b\u4e8b\u4ef6","href":"/document/zh-cn/events","docId":"zh-cn/Events"},{"type":"link","label":"\u7b2c\u4e09\u65b9\u5e93","href":"/document/zh-cn/libraries","docId":"zh-cn/Libraries"},{"type":"category","label":"\u5b98\u65b9\u63d2\u4ef6","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"\u5f39\u5e55\u5e93\u63d2\u4ef6","href":"/document/zh-cn/Plugins/danmuku","docId":"zh-cn/Plugins/danmuku"},{"type":"link","label":"\u5e7f\u544a\u63d2\u4ef6","href":"/document/zh-cn/Plugins/ads","docId":"zh-cn/Plugins/ads"},{"type":"link","label":"Iframe \u63d2\u4ef6","href":"/document/zh-cn/Plugins/iframe","docId":"zh-cn/Plugins/iframe"},{"type":"link","label":"Hls \u753b\u8d28\u63d2\u4ef6","href":"/document/zh-cn/Plugins/hls-quality","docId":"zh-cn/Plugins/hls-quality"},{"type":"link","label":"\u63a7\u5236\u5668\u63d2\u4ef6","href":"/document/zh-cn/Plugins/control","docId":"zh-cn/Plugins/control"}]},{"type":"category","label":"\u5e38\u89c1\u95ee\u9898","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u5217\u8868","href":"/document/zh-cn/Questions/Create_selector_in_the_controls","docId":"zh-cn/Questions/Create_selector_in_the_controls"},{"type":"link","label":"\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u6309\u94ae","href":"/document/zh-cn/Questions/Create_button_in_the_controls","docId":"zh-cn/Questions/Create_button_in_the_controls"},{"type":"link","label":"\u5904\u7406\u5355\u4e2a\u7ec4\u4ef6","href":"/document/zh-cn/Questions/Handle_single_component","docId":"zh-cn/Questions/Handle_single_component"},{"type":"link","label":"\u5982\u4f55\u5bfc\u5165\u7c7b\u578b","href":"/document/zh-cn/Questions/How_to_import_types","docId":"zh-cn/Questions/How_to_import_types"},{"type":"link","label":"\u600e\u4e48\u6dfb\u52a0\u8bbe\u7f6e\u9762\u677f","href":"/docuLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[146],{3905:function(e,t,n){n.d(t,{Zo:function(){return l},kt:function(){return m}});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function a(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=r.createContext({}),s=function(e){var t=r.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},l=function(e){var t=s(e.components);return r.createElement(u.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,i=e.originalType,u=e.parentName,l=a(e,["components","mdxType","originalType","parentName"]),f=s(n),m=o,d=f["".concat(u,".").concat(m)]||f[m]||p[m]||i;return n?r.createElement(d,c(c({ref:t},l),{},{components:n})):r.createElement(d,c({ref:t},l))}));function m(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=n.length,c=new Array(i);c[0]=f;var a={};for(var u in t)hasOwnProperty.call(t,u)&&(a[u]=t[u]);a.originalType=e,a.mdxType="string"==typeof e?e:o,c[1]=a;for(var s=2;s<i;s++)c[s]=n[s];return r.createElement.apply(null,c)}return r.createElement.apply(null,n)}f.displayName="MDXCreateElement"},998:function(e,t,n){n.r(t),n.d(t,{assets:function(){return l},contentTitle:function(){return u},default:function(){return m},frontMatter:function(){return a},metadata:function(){return s},toc:function(){return p}});var r=n(7462),o=n(3366),i=(n(7294),n(3905)),c=["components"],a={title:"\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u6309\u94ae",sidebar_position:2},u=void 0,s={unversionedId:"zh-cn/Questions/Create_button_in_the_controls",id:"zh-cn/Questions/Create_button_in_the_controls",title:"\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u6309\u94ae",description:"\u6709\u65f6\u4f60\u9700\u8981\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u6309\u94ae\uff0c\u5982\u5f00\u5173\u6309\u94ae\u6216\u8005\u5355\u9009\u6309\u94ae\u7b49\u7b49\uff0c\u4f60\u751a\u81f3\u53ef\u4ee5\u4f7f\u7528\u7b2c\u4e09\u65b9\u7684\u6837\u5f0f\u5e93\u5982 bootstrap",source:"@site/docs/zh-cn/Questions/Create_button_in_the_controls.mdx",sourceDirName:"zh-cn/Questions",slug:"/zh-cn/Questions/Create_button_in_the_controls",permalink:"/document/zh-cn/Questions/Create_button_in_the_controls",draft:!1,tags:[],version:"current",sidebarPosition:2,frontMatter:{title:"\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u6309\u94ae",sidebar_position:2},sidebar:"zh-cn",previous:{title:"\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u5217\u8868",permalink:"/document/zh-cn/Questions/Create_selector_in_the_controls"},next:{title:"\u5904\u7406\u5355\u4e2a\u7ec4\u4ef6",permalink:"/document/zh-cn/Questions/Handle_single_component"}},l={},p=[],f={toc:p};function m(e){var t=e.components,n=(0,o.Z)(e,c);return(0,i.kt)("wrapper",(0,r.Z)({},f,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,"\u6709\u65f6\u4f60\u9700\u8981\u5728\u63a7\u5236\u680f\u6dfb\u52a0\u6309\u94ae\uff0c\u5982\u5f00\u5173\u6309\u94ae\u6216\u8005\u5355\u9009\u6309\u94ae\u7b49\u7b49\uff0c\u4f60\u751a\u81f3\u53ef\u4ee5\u4f7f\u7528\u7b2c\u4e09\u65b9\u7684\u6837\u5f0f\u5e93\u5982 ",(0,i.kt)("inlineCode",{parentName:"p"},"bootstrap")),(0,i.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"var time = 0;\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n controls: [\n {\n position: 'right',\n html: '<button type=\"button\">Click Me!</button>',\n click: function (_, event) {\n // \u7b2c\u4e8c\u4e2a\u53c2\u6570\u662f\u4e8b\u4ef6\u5bf9\u8c61\n time += 1;\n event.target.innerText = 'You Click ' + time;\n },\n },\n ],\n});\n")))}m.isMDXComponent=!0}}]);
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[178],{3769:function(e){e.exports=JSON.parse('{"name":"docusaurus-plugin-content-docs","id":"default"}')}}]);
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[87],{3905:function(e,t,n){n.d(t,{Zo:function(){return u},kt:function(){return m}});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var i=a.createContext({}),p=function(e){var t=a.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},u=function(e){var t=p(e.components);return a.createElement(i.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,i=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),d=p(n),m=r,h=d["".concat(i,".").concat(m)]||d[m]||c[m]||l;return n?a.createElement(h,s(s({ref:t},u),{},{components:n})):a.createElement(h,s({ref:t},u))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,s=new Array(l);s[0]=d;var o={};for(var i in t)hasOwnProperty.call(t,i)&&(o[i]=t[i]);o.originalType=e,o.mdxType="string"==typeof e?e:r,s[1]=o;for(var p=2;p<l;p++)s[p]=n[p];return a.createElement.apply(null,s)}return a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},9713:function(e,t,n){n.r(t),n.d(t,{assets:function(){return u},contentTitle:function(){return i},default:function(){return m},frontMatter:function(){return o},metadata:function(){return p},toc:function(){return c}});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),s=["components"],o={title:"\u7b2c\u4e09\u65b9\u5e93",sidebar_position:7,slug:"/zh-cn/libraries"},i=void 0,p={unversionedId:"zh-cn/Libraries",id:"zh-cn/Libraries",title:"\u7b2c\u4e09\u65b9\u5e93",description:"\u7b80\u4ecb",source:"@site/docs/zh-cn/Libraries.mdx",sourceDirName:"zh-cn",slug:"/zh-cn/libraries",permalink:"/document/zh-cn/libraries",draft:!1,tags:[],version:"current",sidebarPosition:7,frontMatter:{title:"\u7b2c\u4e09\u65b9\u5e93",sidebar_position:7,slug:"/zh-cn/libraries"},sidebar:"zh-cn",previous:{title:"\u5b9e\u4f8b\u4e8b\u4ef6",permalink:"/document/zh-cn/events"},next:{title:"\u5f39\u5e55\u5e93\u63d2\u4ef6",permalink:"/document/zh-cn/Plugins/danmuku"}},u={},c=[{value:"\u7b80\u4ecb",id:"\u7b80\u4ecb",level:2},{value:"flv.js",id:"flvjs",level:2},{value:"hls.js",id:"hlsjs",level:2},{value:"dash.js",id:"dashjs",level:2},{value:"shaka-player",id:"shaka-player",level:2},{value:"webtorrent",id:"webtorrent",level:2}],d={toc:c};function m(e){var t=e.components,n=(0,r.Z)(e,s);return(0,l.kt)("wrapper",(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"\u7b80\u4ecb"},"\u7b80\u4ecb"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},"\u901a\u8fc7\u9009\u9879 ",(0,l.kt)("inlineCode",{parentName:"p"},"customType")," \u53ef\u4ee5\u5f88\u5bb9\u6613\u7684\u96c6\u6210\u7b2c\u4e09\u65b9\u7684\u89c6\u9891\u89e3\u7801\u5e93\uff0c\u5b58\u5728\u591a\u4e2a\u89e3\u7801\u5668\u65f6\uff0c\u4f60\u53ef\u4ee5\u628a\u4ed6\u4eec\u90fd\u6dfb\u52a0\u5230 ",(0,l.kt)("inlineCode",{parentName:"p"},"customType")," \u91cc\uff0c\u89e3\u7801\u5e93\u592a\u5927\u65f6\uff0c\u4f60\u8fd8\u53ef\u4ee5\u4f7f\u7528 ",(0,l.kt)("inlineCode",{parentName:"p"},"js")," \u52a8\u6001\u5bfc\u5165")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},"\u64ad\u653e\u5668\u9ed8\u8ba4\u4f1a\u89e3\u6790\u51fa ",(0,l.kt)("inlineCode",{parentName:"p"},"url")," \u9009\u9879\u7684\u89c6\u9891\u7c7b\u578b\uff08\u5982 ",(0,l.kt)("inlineCode",{parentName:"p"},"m3u8"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"flv"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"mpd"),"\uff09, \u5047\u5982\u65e0\u6cd5\u89e3\u6790\u51fa\u6b63\u786e\u7684\u89c6\u9891\u7c7b\u578b\u65f6\uff0c\u4f60\u53ef\u4ee5\u6dfb\u52a0 ",(0,l.kt)("inlineCode",{parentName:"p"},"type")," \u9009\u9879\u6307\u660e\u89c6\u9891\u7c7b\u578b"))),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"// \u73b0\u5728\u8fd9\u4e2a\u64ad\u653e\u5668\u53ef\u4ee5\
Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[235],{3905:function(e,n,t){t.d(n,{Zo:function(){return s},kt:function(){return m}});var l=t(7294);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function r(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);n&&(l=l.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,l)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?r(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):r(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function o(e,n){if(null==e)return{};var t,l,a=function(e,n){if(null==e)return{};var t,l,a={},r=Object.keys(e);for(l=0;l<r.length;l++)t=r[l],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(l=0;l<r.length;l++)t=r[l],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=l.createContext({}),u=function(e){var n=l.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},s=function(e){var n=u(e.components);return l.createElement(c.Provider,{value:n},e.children)},p={inlineCode:"code",wrapper:function(e){var n=e.children;return l.createElement(l.Fragment,{},n)}},d=l.forwardRef((function(e,n){var t=e.components,a=e.mdxType,r=e.originalType,c=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),d=u(t),m=a,k=d["".concat(c,".").concat(m)]||d[m]||p[m]||r;return t?l.createElement(k,i(i({ref:n},s),{},{components:t})):l.createElement(k,i({ref:n},s))}));function m(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var r=t.length,i=new Array(r);i[0]=d;var o={};for(var c in n)hasOwnProperty.call(n,c)&&(o[c]=n[c]);o.originalType=e,o.mdxType="string"==typeof e?e:a,i[1]=o;for(var u=2;u<r;u++)i[u]=t[u];return l.createElement.apply(null,i)}return l.createElement.apply(null,t)}d.displayName="MDXCreateElement"},287:function(e,n,t){t.r(n),t.d(n,{assets:function(){return s},contentTitle:function(){return c},default:function(){return m},frontMatter:function(){return o},metadata:function(){return u},toc:function(){return p}});var l=t(7462),a=t(3366),r=(t(7294),t(3905)),i=["components"],o={title:"\u9759\u6001\u5c5e\u6027",sidebar_position:5,slug:"/zh-cn/class"},c=void 0,u={unversionedId:"zh-cn/Class",id:"zh-cn/Class",title:"\u9759\u6001\u5c5e\u6027",description:"\u9759\u6001\u5c5e\u6027\u5b58\u5728\u4e8e\u6784\u9020\u51fd\u6570 Artplayer \u4e0a\uff0c\u548c\u64ad\u653e\u5668\u5b9e\u4f8b\u6ca1\u6709\u76f4\u63a5\u5173\u8054",source:"@site/docs/zh-cn/Class.mdx",sourceDirName:"zh-cn",slug:"/zh-cn/class",permalink:"/document/zh-cn/class",draft:!1,tags:[],version:"current",sidebarPosition:5,frontMatter:{title:"\u9759\u6001\u5c5e\u6027",sidebar_position:5,slug:"/zh-cn/class"},sidebar:"zh-cn",previous:{title:"\u9ad8\u7ea7\u5c5e\u6027",permalink:"/document/zh-cn/advance"},next:{title:"\u5b9e\u4f8b\u4e8b\u4ef6",permalink:"/document/zh-cn/events"}},s={},p=[{value:"instances",id:"instances",level:2},{value:"version",id:"version",level:2},{value:"env",id:"env",level:2},{value:"utils",id:"utils",level:2},{value:"config",id:"config",level:2},{value:"scheme",id:"scheme",level:2},{value:"validator",id:"validator",level:2},{value:"option",id:"option",level:2},{value:"html",id:"html",level:2},{value:"kindOf",id:"kindof",level:2}],d={toc:p};function m(e){var n=e.components,t=(0,a.Z)(e,i);return(0,r.kt)("wrapper",(0,l.Z)({},d,t,{components:n,mdxType:"MDXLayout"}),(0,r.kt)("div",{className:"admonition admonition-tip alert alert--success"},(0,r.kt)("div",{parentName:"div",className:"admonition-heading"},(0,r.kt)("h5",{parentName:"div"},(0,r.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,r.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,r.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"\u63d0\u793a")),(0,r.kt)("div",{parentName:"div",className:"admonition-content"},(0,r.kt)("p",{parentName:"div"},"\u9759\u6001\u5c5e\u6027\u5b58\u5728\u4e8e\u6784\u9020\u51fd\u6570 ",(0,r.kt)("inlineCode",{parentName:"p"},"Artplayer")," \u4e0a\uff0c\u548c\u64ad\u653e\u5668\u5b9e\u4f8b\u6ca1\u6709\u76f4\u63a5\u5173\u8054"))),(0Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[228],{3905:function(e,t,n){n.d(t,{Zo:function(){return d},kt:function(){return s}});var a=n(7294);function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,a,l=function(e,t){if(null==e)return{};var n,a,l={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}var m=a.createContext({}),o=function(e){var t=a.useContext(m),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=o(e.components);return a.createElement(m.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},k=a.forwardRef((function(e,t){var n=e.components,l=e.mdxType,r=e.originalType,m=e.parentName,d=p(e,["components","mdxType","originalType","parentName"]),k=o(n),s=l,N=k["".concat(m,".").concat(s)]||k[s]||u[s]||r;return n?a.createElement(N,i(i({ref:t},d),{},{components:n})):a.createElement(N,i({ref:t},d))}));function s(e,t){var n=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var r=n.length,i=new Array(r);i[0]=k;var p={};for(var m in t)hasOwnProperty.call(t,m)&&(p[m]=t[m]);p.originalType=e,p.mdxType="string"==typeof e?e:l,i[1]=p;for(var o=2;o<r;o++)i[o]=n[o];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}k.displayName="MDXCreateElement"},2623:function(e,t,n){n.r(t),n.d(t,{assets:function(){return d},contentTitle:function(){return m},default:function(){return s},frontMatter:function(){return p},metadata:function(){return o},toc:function(){return u}});var a=n(7462),l=n(3366),r=(n(7294),n(3905)),i=["components"],p={title:"\u57fa\u7840\u53c2\u6570",sidebar_position:2,slug:"/zh-cn/options"},m=void 0,o={unversionedId:"zh-cn/Options",id:"zh-cn/Options",title:"\u57fa\u7840\u53c2\u6570",description:"container",source:"@site/docs/zh-cn/Options.mdx",sourceDirName:"zh-cn",slug:"/zh-cn/options",permalink:"/document/zh-cn/options",draft:!1,tags:[],version:"current",sidebarPosition:2,frontMatter:{title:"\u57fa\u7840\u53c2\u6570",sidebar_position:2,slug:"/zh-cn/options"},sidebar:"zh-cn",previous:{title:"\u5feb\u901f\u4e0a\u624b",permalink:"/document/zh-cn"},next:{title:"\u5e38\u7528\u5c5e\u6027",permalink:"/document/zh-cn/propertie"}},d={},u=[{value:"container",id:"container",level:2},{value:"url",id:"url",level:2},{value:"Ready Callback",id:"ready-callback",level:2},{value:"poster",id:"poster",level:2},{value:"title",id:"title",level:2},{value:"theme",id:"theme",level:2},{value:"volume",id:"volume",level:2},{value:"isLive",id:"islive",level:2},{value:"muted",id:"muted",level:2},{value:"autoplay",id:"autoplay",level:2},{value:"autoSize",id:"autosize",level:2},{value:"autoMini",id:"automini",level:2},{value:"loop",id:"loop",level:2},{value:"flip",id:"flip",level:2},{value:"playbackRate",id:"playbackrate",level:2},{value:"aspectRatio",id:"aspectratio",level:2},{value:"screenshot",id:"screenshot",level:2},{value:"setting",id:"setting",level:2},{value:"hotkey",id:"hotkey",level:2},{value:"pip",id:"pip",level:2},{value:"mutex",id:"mutex",level:2},{value:"fullscreen",id:"fullscreen",level:2},{value:"fullscreenWeb",id:"fullscreenweb",level:2},{value:"subtitleOffset",id:"subtitleoffset",level:2},{value:"miniProgressBar",id:"miniprogressbar",level:2},{value:"useSSR",id:"usessr",level:2},{value:"playsInline",id:"playsinline",level:2},{value:"layers",id:"layers",level:2},{value:"settings",id:"settings",level:2},{value:"contextmenu",id:"contextmenu",level:2},{value:"controls",id:"controls",level:2},{value:"quality",id:"quality",level:2},{value:"highlight",id:"highlight",level:2},{value:"plugins",id:"plugins",level:2},{value:"whitelist",id:"whitelist",level:2},{value:"thumbnails",id:"thumbnails",level:2},{value:"subtitle",id:"subtitle",level:2},{value:"moreVideoAttr",id:"morevideoattr",level:2},{value:"icons",id:"icons",level:2},{value:"type",id:"type",level:2},{value:"customType",id:"customtype",level:2},{value:"lang",id:"lang",level:2},{value:"lock",id:"lock",level:2},{value:"fastForward",id:"fastforward",level:2},{value:"autoPlayback",id:"autoplayback",levLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[204],{3905:function(e,t,n){n.d(t,{Zo:function(){return u},kt:function(){return m}});var r=n(7294);function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,r,l=function(e,t){if(null==e)return{};var n,r,l={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}var c=r.createContext({}),p=function(e){var t=r.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=p(e.components);return r.createElement(c.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,l=e.mdxType,a=e.originalType,c=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),d=p(n),m=l,y=d["".concat(c,".").concat(m)]||d[m]||s[m]||a;return n?r.createElement(y,i(i({ref:t},u),{},{components:n})):r.createElement(y,i({ref:t},u))}));function m(e,t){var n=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var a=n.length,i=new Array(a);i[0]=d;var o={};for(var c in t)hasOwnProperty.call(t,c)&&(o[c]=t[c]);o.originalType=e,o.mdxType="string"==typeof e?e:l,i[1]=o;for(var p=2;p<a;p++)i[p]=n[p];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}d.displayName="MDXCreateElement"},191:function(e,t,n){n.r(t),n.d(t,{assets:function(){return u},contentTitle:function(){return c},default:function(){return m},frontMatter:function(){return o},metadata:function(){return p},toc:function(){return s}});var r=n(7462),l=n(3366),a=(n(7294),n(3905)),i=["components"],o={title:"Hls \u753b\u8d28\u63d2\u4ef6",sidebar_position:4},c=void 0,p={unversionedId:"zh-cn/Plugins/hls-quality",id:"zh-cn/Plugins/hls-quality",title:"Hls \u753b\u8d28\u63d2\u4ef6",description:"\u8bf4\u660e",source:"@site/docs/zh-cn/Plugins/hls-quality.mdx",sourceDirName:"zh-cn/Plugins",slug:"/zh-cn/Plugins/hls-quality",permalink:"/document/zh-cn/Plugins/hls-quality",draft:!1,tags:[],version:"current",sidebarPosition:4,frontMatter:{title:"Hls \u753b\u8d28\u63d2\u4ef6",sidebar_position:4},sidebar:"zh-cn",previous:{title:"Iframe \u63d2\u4ef6",permalink:"/document/zh-cn/Plugins/iframe"},next:{title:"\u63a7\u5236\u5668\u63d2\u4ef6",permalink:"/document/zh-cn/Plugins/control"}},u={},s=[{value:"\u8bf4\u660e",id:"\u8bf4\u660e",level:2},{value:"\u6f14\u793a",id:"\u6f14\u793a",level:2},{value:"\u5b89\u88c5",id:"\u5b89\u88c5",level:2},{value:"\u901a\u8fc7 <code>npm</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-npm-\u5b89\u88c5",level:3},{value:"\u901a\u8fc7 <code>yarn</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-yarn-\u5b89\u88c5",level:3},{value:"\u901a\u8fc7 <code>script</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-script-\u5b89\u88c5",level:3}],d={toc:s};function m(e){var t=e.components,n=(0,l.Z)(e,i);return(0,a.kt)("wrapper",(0,r.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h2",{id:"\u8bf4\u660e"},"\u8bf4\u660e"),(0,a.kt)("p",null,"\u901a\u8fc7\u8be5\u63d2\u4ef6\uff0c\u53ef\u4ee5\u6dfb\u52a0 ",(0,a.kt)("inlineCode",{parentName:"p"},"Hls")," \u753b\u8d28\u5217\u8868\u5230\u63a7\u5236\u680f\u6216\u8005\u8bbe\u7f6e\u9762\u677f\u91cc"),(0,a.kt)("h2",{id:"\u6f14\u793a"},"\u6f14\u793a"),(0,a.kt)("p",null,"\ud83d\udc49 ",(0,a.kt)("a",{parentName:"p",href:"https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-quality/index.js&example=hls.quality"},"\u67e5\u770b\u5b8c\u6574\u6f14\u793a")),(0,a.kt)("h2",{id:"\u5b89\u88c5"},"\u5b89\u88c5"),(0,a.kt)("h3",{id:"\u901a\u8fc7-npm-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,a.kt)("inlineCode",{parentName:"h3"},"npm")," \u5b89\u88c5\uff1a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-bash"},"$ npm install artplayer-plugin-hls-quality\n")),(0,a.kt)("h3",{id:"\u901a\u8fc7-yarn-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,a.kt)("inlineCode",{parentName:"h3"},"yarn")," \u5b89\u88c5\uff1a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-bash"},"$ yarn add artplayer-plugin-hls-qualityLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[467],{3905:function(e,n,t){t.d(n,{Zo:function(){return s},kt:function(){return d}});var r=t(7294);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function i(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function l(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function m(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=r.createContext({}),o=function(e){var n=r.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):l(l({},n),e)),t},s=function(e){var n=o(e.components);return r.createElement(p.Provider,{value:n},e.children)},c={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},u=r.forwardRef((function(e,n){var t=e.components,a=e.mdxType,i=e.originalType,p=e.parentName,s=m(e,["components","mdxType","originalType","parentName"]),u=o(t),d=a,f=u["".concat(p,".").concat(d)]||u[d]||c[d]||i;return t?r.createElement(f,l(l({ref:n},s),{},{components:t})):r.createElement(f,l({ref:n},s))}));function d(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var i=t.length,l=new Array(i);l[0]=u;var m={};for(var p in n)hasOwnProperty.call(n,p)&&(m[p]=n[p]);m.originalType=e,m.mdxType="string"==typeof e?e:a,l[1]=m;for(var o=2;o<i;o++)l[o]=t[o];return r.createElement.apply(null,l)}return r.createElement.apply(null,t)}u.displayName="MDXCreateElement"},534:function(e,n,t){t.r(n),t.d(n,{assets:function(){return s},contentTitle:function(){return p},default:function(){return d},frontMatter:function(){return m},metadata:function(){return o},toc:function(){return c}});var r=t(7462),a=t(3366),i=(t(7294),t(3905)),l=["components"],m={title:"Iframe \u63d2\u4ef6",sidebar_position:3},p=void 0,o={unversionedId:"zh-cn/Plugins/iframe",id:"zh-cn/Plugins/iframe",title:"Iframe \u63d2\u4ef6",description:"\u8bf4\u660e",source:"@site/docs/zh-cn/Plugins/iframe.mdx",sourceDirName:"zh-cn/Plugins",slug:"/zh-cn/Plugins/iframe",permalink:"/document/zh-cn/Plugins/iframe",draft:!1,tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Iframe \u63d2\u4ef6",sidebar_position:3},sidebar:"zh-cn",previous:{title:"\u5e7f\u544a\u63d2\u4ef6",permalink:"/document/zh-cn/Plugins/ads"},next:{title:"Hls \u753b\u8d28\u63d2\u4ef6",permalink:"/document/zh-cn/Plugins/hls-quality"}},s={},c=[{value:"\u8bf4\u660e",id:"\u8bf4\u660e",level:2},{value:"\u6f14\u793a",id:"\u6f14\u793a",level:2},{value:"\u5b89\u88c5",id:"\u5b89\u88c5",level:2},{value:"\u901a\u8fc7 <code>npm</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-npm-\u5b89\u88c5",level:3},{value:"\u901a\u8fc7 <code>yarn</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-yarn-\u5b89\u88c5",level:3},{value:"\u901a\u8fc7 <code>script</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-script-\u5b89\u88c5",level:3},{value:"\u4f7f\u7528",id:"\u4f7f\u7528",level:2},{value:"index.html",id:"indexhtml",level:3},{value:"iframe.html",id:"iframehtml",level:3},{value:"\u5b9e\u4f8b\u63a5\u53e3",id:"\u5b9e\u4f8b\u63a5\u53e3",level:2},{value:"commit",id:"commit",level:3},{value:"message",id:"message",level:3},{value:"destroy",id:"destroy",level:3},{value:"Iframe \u63a5\u53e3",id:"iframe-\u63a5\u53e3",level:2},{value:"inject",id:"inject",level:3},{value:"postMessage",id:"postmessage",level:3}],u={toc:c};function d(e){var n=e.components,t=(0,a.Z)(e,l);return(0,i.kt)("wrapper",(0,r.Z)({},u,t,{components:n,mdxType:"MDXLayout"}),(0,i.kt)("h2",{id:"\u8bf4\u660e"},"\u8bf4\u660e"),(0,i.kt)("p",null,"\u901a\u8fc7\u8be5\u63d2\u4ef6\uff0c\u4f60\u53ef\u4ee5\u8f7b\u677e\u5728 ",(0,i.kt)("inlineCode",{parentName:"p"},"\u4e3b\u9875\u9762")," \u91cc\u63a7\u5236 ",(0,i.kt)("inlineCode",{parentName:"p"},"iframe")," \u9875\u9762\u91cc\u7684\u64ad\u653e\u5668\u3002"),(0,i.kt)("p",null,"\u5982\u5728 ",(0,i.kt)("inlineCode",{parentName:"p"},"\u4e3b\u9875\u9762")," \u91cc\u901a\u8fc7\u4ee3\u7801\u63a7\u5236 ",(0,i.kt)("inlineCode",{parentName:"p"},"iframe")," \u64ad\u653e\u5668\u7684\u529f\u80fd\uff0c\u6216\u8005\u83b7\u53d6 ",(0,i.kt)("inlineCode",{parentName:"p"},"iframe")," \u64ad\u653e\u5668\u7684\u503c\u7b49\u7b49"),(0,i.kt)("h2",{id:"\u6f14\u793a"},"\u6f14\u793a"),(0,i.kt)("p",null,"Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[696],{3905:function(e,t,n){n.d(t,{Zo:function(){return u},kt:function(){return k}});var a=n(7294);function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,a,l=function(e,t){if(null==e)return{};var n,a,l={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}var p=a.createContext({}),d=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=d(e.components);return a.createElement(p.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,l=e.mdxType,r=e.originalType,p=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),m=d(n),k=l,c=m["".concat(p,".").concat(k)]||m[k]||s[k]||r;return n?a.createElement(c,i(i({ref:t},u),{},{components:n})):a.createElement(c,i({ref:t},u))}));function k(e,t){var n=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var r=n.length,i=new Array(r);i[0]=m;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:l,i[1]=o;for(var d=2;d<r;d++)i[d]=n[d];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},8761:function(e,t,n){n.r(t),n.d(t,{assets:function(){return u},contentTitle:function(){return p},default:function(){return k},frontMatter:function(){return o},metadata:function(){return d},toc:function(){return s}});var a=n(7462),l=n(3366),r=(n(7294),n(3905)),i=["components"],o={title:"Advanced propertys",sidebar_position:4,slug:"/advance"},p=void 0,d={unversionedId:"en/Advance",id:"en/Advance",title:"Advanced propertys",description:"This page is some additional supplements to the commonly used properties, you need to read in depth to develop custom functions.",source:"@site/docs/en/Advance.mdx",sourceDirName:"en",slug:"/advance",permalink:"/document/advance",draft:!1,tags:[],version:"current",sidebarPosition:4,frontMatter:{title:"Advanced propertys",sidebar_position:4,slug:"/advance"},sidebar:"en",previous:{title:"Common properties",permalink:"/document/propertie"},next:{title:"Static propertys",permalink:"/document/class"}},u={},s=[{value:"id",id:"id",level:2},{value:"option",id:"option",level:2},{value:"isFocus",id:"isfocus",level:2},{value:"isInput",id:"isinput",level:2},{value:"isLock",id:"islock",level:2},{value:"isDestroy",id:"isdestroy",level:2},{value:"whitelist",id:"whitelist",level:2},{value:"template",id:"template",level:2},{value:"query",id:"query",level:3},{value:"query",id:"query-1",level:2},{value:"events",id:"events",level:2},{value:"proxy",id:"proxy",level:2},{value:"storage",id:"storage",level:2},{value:"icons",id:"icons",level:2},{value:"i18n",id:"i18n",level:2},{value:"get",id:"get",level:3},{value:"update",id:"update",level:3},{value:"player",id:"player",level:2},{value:"subtitle",id:"subtitle",level:2},{value:"show",id:"show",level:3},{value:"style",id:"style",level:3},{value:"url",id:"url",level:3},{value:"switch",id:"switch",level:3},{value:"info",id:"info",level:2},{value:"layers",id:"layers",level:2},{value:"show",id:"show-1",level:3},{value:"add",id:"add",level:3},{value:"notice",id:"notice",level:2},{value:"show",id:"show-2",level:3},{value:"controls",id:"controls",level:2},{value:"show",id:"show-3",level:3},{value:"add",id:"add-1",level:3},{value:"contextmenu",id:"contextmenu",level:2},{value:"show",id:"show-4",level:3},{value:"add",id:"add-2",level:3},{value:"loading",id:"loading",level:2},{value:"show",id:"show-5",level:3},{value:"mask",id:"mask",level:2},{value:"show",id:"show-6",level:3},{value:"hotkey",id:"hotkey",level:2},{value:"add",id:"add-3",level:3},{value:"setting",id:"setting",level:2},{value:"show",id:"show-7",level:3},{value:"plugins",id:"plugins",level:2},{value:"add",id:"add-4",level:3}],m={toc:s};function k(e){var t=e.components,n=(0,l.Z)(e,i);return(0,r.kt)("wrapper",(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("div",{className:"admonLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[122],{3905:function(e,t,n){n.d(t,{Zo:function(){return u},kt:function(){return d}});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var o=r.createContext({}),p=function(e){var t=r.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},u=function(e){var t=p(e.components);return r.createElement(o.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,l=e.originalType,o=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),m=p(n),d=a,y=m["".concat(o,".").concat(d)]||m[d]||c[d]||l;return n?r.createElement(y,s(s({ref:t},u),{},{components:n})):r.createElement(y,s({ref:t},u))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=n.length,s=new Array(l);s[0]=m;var i={};for(var o in t)hasOwnProperty.call(t,o)&&(i[o]=t[o]);i.originalType=e,i.mdxType="string"==typeof e?e:a,s[1]=i;for(var p=2;p<l;p++)s[p]=n[p];return r.createElement.apply(null,s)}return r.createElement.apply(null,n)}m.displayName="MDXCreateElement"},2360:function(e,t,n){n.d(t,{Z:function(){return s}});var r=n(7294),a=n(6010),l="tabItem_OmH5";function s(e){var t=e.children,n=e.hidden,s=e.className;return r.createElement("div",{role:"tabpanel",className:(0,a.Z)(l,s),hidden:n},t)}},9877:function(e,t,n){n.d(t,{Z:function(){return d}});var r=n(7462),a=n(7294),l=n(2389),s=n(7392),i=n(7094),o=n(2466),p=n(6010),u="tabList_uSqn",c="tabItem_LplD";function m(e){var t,n,l,m=e.lazy,d=e.block,y=e.defaultValue,v=e.values,f=e.groupId,h=e.className,b=a.Children.map(e.children,(function(e){if((0,a.isValidElement)(e)&&void 0!==e.props.value)return e;throw new Error("Docusaurus error: Bad <Tabs> child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.')})),g=null!=v?v:b.map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes}})),k=(0,s.l)(g,(function(e,t){return e.value===t.value}));if(k.length>0)throw new Error('Docusaurus error: Duplicate values "'+k.map((function(e){return e.value})).join(", ")+'" found in <Tabs>. Every value needs to be unique.');var N=null===y?y:null!=(t=null!=y?y:null==(n=b.find((function(e){return e.props.default})))?void 0:n.props.value)?t:null==(l=b[0])?void 0:l.props.value;if(null!==N&&!g.some((function(e){return e.value===N})))throw new Error('Docusaurus error: The <Tabs> has a defaultValue "'+N+'" but none of its children has the corresponding value. Available values are: '+g.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");var x=(0,i.U)(),j=x.tabGroupChoices,w=x.setTabGroupChoices,T=(0,a.useState)(N),A=T[0],O=T[1],I=[],Z=(0,o.o5)().blockElementScrollPositionUntilNextRender;if(null!=f){var E=j[f];null!=E&&E!==A&&g.some((function(e){return e.value===E}))&&O(E)}var P=function(e){var t=e.currentTarget,n=I.indexOf(t),r=g[n].value;r!==A&&(Z(t),O(r),null!=f&&w(f,r))},L=function(e){var t,n=null;switch(e.key){case"ArrowRight":var r=I.indexOf(e.currentTarget)+1;n=I[r]||I[0];break;case"ArrowLeft":var a=I.indexOf(e.currentTarget)-1;n=I[a]||I[I.length-1]}null==(t=n)||t.focus()};return a.createElement("div",{className:(0,p.Z)("tabs-container",u)},a.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,p.Z)("tabs",{"tabs--block":d},h)},g.map((function(e){var t=e.value,n=e.label,l=e.attributes;return a.createElement("li",(0,r.Z)({role:"tab",tabIndex:A===t?0:-1,"aria-selected":A===t,key:t,ref:function(e){return I.push(e)},onKeyDown:L,onFocus:P,onClick:P},l,{className:(0,p.Z)("tabs__item",c,null==l?void 0:l.className,{"tabs__item--active":A===t})}),null!=n?n:t)}))),m?(0,a.cloneElement)(b.filter((function(e){Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[489],{3905:function(e,t,n){n.d(t,{Zo:function(){return p},kt:function(){return d}});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function m(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var o=r.createContext({}),s=function(e){var t=r.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=s(e.components);return r.createElement(o.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},u=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,p=m(e,["components","mdxType","originalType","parentName"]),u=s(n),d=a,f=u["".concat(o,".").concat(d)]||u[d]||c[d]||i;return n?r.createElement(f,l(l({ref:t},p),{},{components:n})):r.createElement(f,l({ref:t},p))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,l=new Array(i);l[0]=u;var m={};for(var o in t)hasOwnProperty.call(t,o)&&(m[o]=t[o]);m.originalType=e,m.mdxType="string"==typeof e?e:a,l[1]=m;for(var s=2;s<i;s++)l[s]=n[s];return r.createElement.apply(null,l)}return r.createElement.apply(null,n)}u.displayName="MDXCreateElement"},1648:function(e,t,n){n.r(t),n.d(t,{assets:function(){return p},contentTitle:function(){return o},default:function(){return d},frontMatter:function(){return m},metadata:function(){return s},toc:function(){return c}});var r=n(7462),a=n(3366),i=(n(7294),n(3905)),l=["components"],m={title:"Iframe Plugin",sidebar_position:3},o=void 0,s={unversionedId:"en/Plugins/iframe",id:"en/Plugins/iframe",title:"Iframe Plugin",description:"Overview",source:"@site/docs/en/Plugins/iframe.mdx",sourceDirName:"en/Plugins",slug:"/en/Plugins/iframe",permalink:"/document/en/Plugins/iframe",draft:!1,tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Iframe Plugin",sidebar_position:3},sidebar:"en",previous:{title:"Ads Plugin",permalink:"/document/en/Plugins/ads"},next:{title:"Hls Quality Plugin",permalink:"/document/en/Plugins/hls-quality"}},p={},c=[{value:"Overview",id:"overview",level:2},{value:"Demo",id:"demo",level:2},{value:"Install",id:"install",level:2},{value:"Install from <code>npm</code>:",id:"install-from-npm",level:3},{value:"Install from <code>yarn</code>:",id:"install-from-yarn",level:3},{value:"Install from <code>script</code>:",id:"install-from-script",level:3},{value:"Use",id:"use",level:2},{value:"index.html",id:"indexhtml",level:3},{value:"iframe.html",id:"iframehtml",level:3},{value:"Instance Api",id:"instance-api",level:2},{value:"commit",id:"commit",level:3},{value:"message",id:"message",level:3},{value:"destroy",id:"destroy",level:3},{value:"Iframe Api",id:"iframe-api",level:2},{value:"inject",id:"inject",level:3},{value:"postMessage",id:"postmessage",level:3}],u={toc:c};function d(e){var t=e.components,n=(0,a.Z)(e,l);return(0,i.kt)("wrapper",(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h2",{id:"overview"},"Overview"),(0,i.kt)("p",null,"With this plugin, you can easily control the player in the ",(0,i.kt)("inlineCode",{parentName:"p"},"iframe")," page in the ",(0,i.kt)("inlineCode",{parentName:"p"},"main page"),"."),(0,i.kt)("p",null,"For example, you can control the functions of the ",(0,i.kt)("inlineCode",{parentName:"p"},"iframe")," player through code in the ",(0,i.kt)("inlineCode",{parentName:"p"},"main page"),", or get the value of the ",(0,i.kt)("inlineCode",{parentName:"p"},"iframe")," player."),(0,i.kt)("h2",{id:"demo"},"Demo"),(0,i.kt)("p",null,"\ud83d\udc49 ",(0,i.kt)("a",{parentName:"p",href:"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-iframe/index.js&example=iframe"},"View Demo")),(0,i.kt)("h2",{id:"install"},"Install"),(0,i.kt)("h3",{id:"install-from-npm"},"Install from ",(0,i.kt)("inlineCode",{parentName:"h3"},"npm"),":"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-bash"},"$ npm install artplayer-plugin-iframe\n")),Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[881],{3905:function(e,t,n){n.d(t,{Zo:function(){return l},kt:function(){return d}});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=r.createContext({}),s=function(e){var t=r.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},l=function(e){var t=s(e.components);return r.createElement(u.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,i=e.originalType,u=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),f=s(n),d=o,m=f["".concat(u,".").concat(d)]||f[d]||p[d]||i;return n?r.createElement(m,a(a({ref:t},l),{},{components:n})):r.createElement(m,a({ref:t},l))}));function d(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=n.length,a=new Array(i);a[0]=f;var c={};for(var u in t)hasOwnProperty.call(t,u)&&(c[u]=t[u]);c.originalType=e,c.mdxType="string"==typeof e?e:o,a[1]=c;for(var s=2;s<i;s++)a[s]=n[s];return r.createElement.apply(null,a)}return r.createElement.apply(null,n)}f.displayName="MDXCreateElement"},7224:function(e,t,n){n.r(t),n.d(t,{assets:function(){return l},contentTitle:function(){return u},default:function(){return d},frontMatter:function(){return c},metadata:function(){return s},toc:function(){return p}});var r=n(7462),o=n(3366),i=(n(7294),n(3905)),a=["components"],c={title:"Add button to the controls",sidebar_position:2},u=void 0,s={unversionedId:"en/Questions/Create_button_in_the_controls",id:"en/Questions/Create_button_in_the_controls",title:"Add button to the controls",description:"\u25b6 Run Code",source:"@site/docs/en/Questions/Create_button_in_the_controls.mdx",sourceDirName:"en/Questions",slug:"/en/Questions/Create_button_in_the_controls",permalink:"/document/en/Questions/Create_button_in_the_controls",draft:!1,tags:[],version:"current",sidebarPosition:2,frontMatter:{title:"Add button to the controls",sidebar_position:2},sidebar:"en",previous:{title:"Add select in the controls",permalink:"/document/en/Questions/Create_selector_in_the_controls"},next:{title:"Handle a single component",permalink:"/document/en/Questions/Handle_single_component"}},l={},p=[],f={toc:p};function d(e){var t=e.components,n=(0,o.Z)(e,a);return(0,i.kt)("wrapper",(0,r.Z)({},f,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"var time = 0;\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n controls: [\n {\n position: 'right',\n html: '<button type=\"button\">Click Me!</button>',\n click: function (_, event) {\n // The second parameter is an event object\n time += 1;\n event.target.innerText = 'You Click ' + time;\n },\n },\n ],\n});\n")))}d.isMDXComponent=!0}}]);
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[740],{3905:function(t,n,e){e.d(n,{Zo:function(){return d},kt:function(){return c}});var a=e(7294);function r(t,n,e){return n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e,t}function l(t,n){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(t,n).enumerable}))),e.push.apply(e,a)}return e}function i(t){for(var n=1;n<arguments.length;n++){var e=null!=arguments[n]?arguments[n]:{};n%2?l(Object(e),!0).forEach((function(n){r(t,n,e[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):l(Object(e)).forEach((function(n){Object.defineProperty(t,n,Object.getOwnPropertyDescriptor(e,n))}))}return t}function o(t,n){if(null==t)return{};var e,a,r=function(t,n){if(null==t)return{};var e,a,r={},l=Object.keys(t);for(a=0;a<l.length;a++)e=l[a],n.indexOf(e)>=0||(r[e]=t[e]);return r}(t,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(a=0;a<l.length;a++)e=l[a],n.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(t,e)&&(r[e]=t[e])}return r}var m=a.createContext({}),p=function(t){var n=a.useContext(m),e=n;return t&&(e="function"==typeof t?t(n):i(i({},n),t)),e},d=function(t){var n=p(t.components);return a.createElement(m.Provider,{value:n},t.children)},u={inlineCode:"code",wrapper:function(t){var n=t.children;return a.createElement(a.Fragment,{},n)}},s=a.forwardRef((function(t,n){var e=t.components,r=t.mdxType,l=t.originalType,m=t.parentName,d=o(t,["components","mdxType","originalType","parentName"]),s=p(e),c=r,k=s["".concat(m,".").concat(c)]||s[c]||u[c]||l;return e?a.createElement(k,i(i({ref:n},d),{},{components:e})):a.createElement(k,i({ref:n},d))}));function c(t,n){var e=arguments,r=n&&n.mdxType;if("string"==typeof t||r){var l=e.length,i=new Array(l);i[0]=s;var o={};for(var m in n)hasOwnProperty.call(n,m)&&(o[m]=n[m]);o.originalType=t,o.mdxType="string"==typeof t?t:r,i[1]=o;for(var p=2;p<l;p++)i[p]=e[p];return a.createElement.apply(null,i)}return a.createElement.apply(null,e)}s.displayName="MDXCreateElement"},4043:function(t,n,e){e.r(n),e.d(n,{assets:function(){return d},contentTitle:function(){return m},default:function(){return c},frontMatter:function(){return o},metadata:function(){return p},toc:function(){return u}});var a=e(7462),r=e(3366),l=(e(7294),e(3905)),i=["components"],o={title:"\u600e\u4e48\u6dfb\u52a0\u8bbe\u7f6e\u9762\u677f",sidebar_position:6},m=void 0,p={unversionedId:"zh-cn/Questions/How_to_add_setting_panel",id:"zh-cn/Questions/How_to_add_setting_panel",title:"\u600e\u4e48\u6dfb\u52a0\u8bbe\u7f6e\u9762\u677f",description:"\u6dfb\u52a0\u9009\u62e9\u5217\u8868",source:"@site/docs/zh-cn/Questions/How_to_add_setting_panel.mdx",sourceDirName:"zh-cn/Questions",slug:"/zh-cn/Questions/How_to_add_setting_panel",permalink:"/document/zh-cn/Questions/How_to_add_setting_panel",draft:!1,tags:[],version:"current",sidebarPosition:6,frontMatter:{title:"\u600e\u4e48\u6dfb\u52a0\u8bbe\u7f6e\u9762\u677f",sidebar_position:6},sidebar:"zh-cn",previous:{title:"\u5982\u4f55\u5bfc\u5165\u7c7b\u578b",permalink:"/document/zh-cn/Questions/How_to_import_types"},next:{title:"\u4e0e React Portal \u4f7f\u7528",permalink:"/document/zh-cn/Questions/Use_with_react_portal"}},d={},u=[{value:"\u6dfb\u52a0\u9009\u62e9\u5217\u8868",id:"\u6dfb\u52a0\u9009\u62e9\u5217\u8868",level:2},{value:"\u6dfb\u52a0\u5207\u6362\u6309\u94ae",id:"\u6dfb\u52a0\u5207\u6362\u6309\u94ae",level:2},{value:"\u6dfb\u52a0\u8303\u56f4\u6ed1\u52a8",id:"\u6dfb\u52a0\u8303\u56f4\u6ed1\u52a8",level:2}],s={toc:u};function c(t){var n=t.components,e=(0,r.Z)(t,i);return(0,l.kt)("wrapper",(0,a.Z)({},s,e,{components:n,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"\u6dfb\u52a0\u9009\u62e9\u5217\u8868"},"\u6dfb\u52a0\u9009\u62e9\u5217\u8868"),(0,l.kt)("p",null,"\u8bbe\u7f6e\u9762\u677f\u7c7b\u4f3c\u4e8e\u5217\u8868\u9009\u62e9\u7684\u96c6\u5408\uff0c\u800c\u4e14\u652f\u6301\u591a\u5c42\u5d4c\u5957"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"\u5c5e\u6027"),(0,l.kt)("th",{parentName:"tr",align:null},"\u7c7b\u578b"),(0,l.kt)("th",{parentName:"tr",align:null},"\u63cf\u8ff0"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"html")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"String"),"\u3001",(0,l.kt)("inlineCode",{parentName:"td"},"Element")),(0,l.kt)("td",{parentName:"tr",align:null},"\u5143\u7d20\u7684 DOM \u5143\u7d20")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"icon")),(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"tdLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[591],{3905:function(e,t,n){n.d(t,{Zo:function(){return u},kt:function(){return m}});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var i=a.createContext({}),p=function(e){var t=a.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},u=function(e){var t=p(e.components);return a.createElement(i.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),d=p(n),m=r,h=d["".concat(i,".").concat(m)]||d[m]||c[m]||l;return n?a.createElement(h,o(o({ref:t},u),{},{components:n})):a.createElement(h,o({ref:t},u))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,o=new Array(l);o[0]=d;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s.mdxType="string"==typeof e?e:r,o[1]=s;for(var p=2;p<l;p++)o[p]=n[p];return a.createElement.apply(null,o)}return a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},6165:function(e,t,n){n.r(t),n.d(t,{assets:function(){return u},contentTitle:function(){return i},default:function(){return m},frontMatter:function(){return s},metadata:function(){return p},toc:function(){return c}});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),o=["components"],s={title:"Third party librarys",sidebar_position:7,slug:"/libraries"},i=void 0,p={unversionedId:"en/Libraries",id:"en/Libraries",title:"Third party librarys",description:"Overview",source:"@site/docs/en/Libraries.mdx",sourceDirName:"en",slug:"/libraries",permalink:"/document/libraries",draft:!1,tags:[],version:"current",sidebarPosition:7,frontMatter:{title:"Third party librarys",sidebar_position:7,slug:"/libraries"},sidebar:"en",previous:{title:"Common events",permalink:"/document/events"},next:{title:"Danmuku plugin",permalink:"/document/en/Plugins/danmuku"}},u={},c=[{value:"Overview",id:"overview",level:2},{value:"flv.js",id:"flvjs",level:2},{value:"hls.js",id:"hlsjs",level:2},{value:"dash.js",id:"dashjs",level:2},{value:"shaka-player",id:"shaka-player",level:2},{value:"webtorrent",id:"webtorrent",level:2}],d={toc:c};function m(e){var t=e.components,n=(0,r.Z)(e,o);return(0,l.kt)("wrapper",(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"overview"},"Overview"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},"With the option ",(0,l.kt)("inlineCode",{parentName:"p"},"customType"),", it is easy to integrate third-party video decoding libraries.\nWhen there are multiple decoders, you can add them to ",(0,l.kt)("inlineCode",{parentName:"p"},"customType"),". When the decoding library is too large, you can also use ",(0,l.kt)("inlineCode",{parentName:"p"},"js")," to dynamically import")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},"By default, the player will parse the video type of the ",(0,l.kt)("inlineCode",{parentName:"p"},"url")," option (such as ",(0,l.kt)("inlineCode",{parentName:"p"},"m3u8"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"flv"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"mpd"),").\nIf the correct video type cannot be parsed, you can add the ",(0,l.kt)("inlineCode",{parentName:"p"},"type")," option to indicate the video type"))),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"// Now this player can play: m3u8, flv, mpd\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.m3u8',\n type: 'm3u8', // Optional, but it is better to fill in\n customType: {\n m3u8: async function (video, url) {\n const { default: Hls } = await import('hls.js');\n },\n flv: async function (video, url) {\n const { default: flvjs } = await import
Line truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[509],{3905:function(e,n,t){t.d(n,{Zo:function(){return p},kt:function(){return m}});var r=t(7294);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function l(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?l(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):l(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function s(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)t=l[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)t=l[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var o=r.createContext({}),u=function(e){var n=r.useContext(o),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},p=function(e){var n=u(e.components);return r.createElement(o.Provider,{value:n},e.children)},c={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},d=r.forwardRef((function(e,n){var t=e.components,a=e.mdxType,l=e.originalType,o=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),d=u(t),m=a,f=d["".concat(o,".").concat(m)]||d[m]||c[m]||l;return t?r.createElement(f,i(i({ref:n},p),{},{components:t})):r.createElement(f,i({ref:n},p))}));function m(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var l=t.length,i=new Array(l);i[0]=d;var s={};for(var o in n)hasOwnProperty.call(n,o)&&(s[o]=n[o]);s.originalType=e,s.mdxType="string"==typeof e?e:a,i[1]=s;for(var u=2;u<l;u++)i[u]=t[u];return r.createElement.apply(null,i)}return r.createElement.apply(null,t)}d.displayName="MDXCreateElement"},2126:function(e,n,t){t.r(n),t.d(n,{assets:function(){return p},contentTitle:function(){return o},default:function(){return m},frontMatter:function(){return s},metadata:function(){return u},toc:function(){return c}});var r=t(7462),a=t(3366),l=(t(7294),t(3905)),i=["components"],s={title:"Ads Plugin",sidebar_position:2},o=void 0,u={unversionedId:"en/Plugins/ads",id:"en/Plugins/ads",title:"Ads Plugin",description:"Demo",source:"@site/docs/en/Plugins/ads.mdx",sourceDirName:"en/Plugins",slug:"/en/Plugins/ads",permalink:"/document/en/Plugins/ads",draft:!1,tags:[],version:"current",sidebarPosition:2,frontMatter:{title:"Ads Plugin",sidebar_position:2},sidebar:"en",previous:{title:"Danmuku plugin",permalink:"/document/en/Plugins/danmuku"},next:{title:"Iframe Plugin",permalink:"/document/en/Plugins/iframe"}},p={},c=[{value:"Demo",id:"demo",level:2},{value:"Install",id:"install",level:2},{value:"Install from <code>npm</code>:",id:"install-from-npm",level:3},{value:"Install from <code>yarn</code>:",id:"install-from-yarn",level:3},{value:"Install from <code>script</code>:",id:"install-from-script",level:3},{value:"Use",id:"use",level:2}],d={toc:c};function m(e){var n=e.components,t=(0,a.Z)(e,i);return(0,l.kt)("wrapper",(0,r.Z)({},d,t,{components:n,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"demo"},"Demo"),(0,l.kt)("p",null,"\ud83d\udc49 ",(0,l.kt)("a",{parentName:"p",href:"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads"},"View Demo")),(0,l.kt)("h2",{id:"install"},"Install"),(0,l.kt)("h3",{id:"install-from-npm"},"Install from ",(0,l.kt)("inlineCode",{parentName:"h3"},"npm"),":"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"$ npm install artplayer-plugin-ads\n")),(0,l.kt)("h3",{id:"install-from-yarn"},"Install from ",(0,l.kt)("inlineCode",{parentName:"h3"},"yarn"),":"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"$ yarn add artplayer-plugin-ads\n")),(0,l.kt)("h3",{id:"install-from-script"},"Install from ",(0,l.kt)("inlineCode",{parentName:"h3"},"script"),":"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- local --\x3e\n<script src="path/to/artplayer-plugin-ads.js"><\/script>\n\n\x3c!-- jsdelivr --\x3e\n<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js"><\/script>\n\n\x3c!-- unpkg --\x3e\n<script src="https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js"><\/script>\n')),(0,l.kt)("p",null,"Then you can access the plugin function through ",(0,l.kt)("inlineCode",{parentName:"p"},"window.artplayerPluginAds")),(0,l.kt)("h2",{id:"use"},"Use"),(0,l.kt)("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plLine truncated
|
||||
@@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[14],{3905:function(e,t,n){n.d(t,{Zo:function(){return p},kt:function(){return c}});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var d=a.createContext({}),s=function(e){var t=a.useContext(d),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},p=function(e){var t=s(e.components);return a.createElement(d.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,d=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),m=s(n),c=r,v=m["".concat(d,".").concat(c)]||m[c]||u[c]||l;return n?a.createElement(v,o(o({ref:t},p),{},{components:n})):a.createElement(v,o({ref:t},p))}));function c(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,o=new Array(l);o[0]=m;var i={};for(var d in t)hasOwnProperty.call(t,d)&&(i[d]=t[d]);i.originalType=e,i.mdxType="string"==typeof e?e:r,o[1]=i;for(var s=2;s<l;s++)o[s]=n[s];return a.createElement.apply(null,o)}return a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},7733:function(e,t,n){n.r(t),n.d(t,{assets:function(){return p},contentTitle:function(){return d},default:function(){return c},frontMatter:function(){return i},metadata:function(){return s},toc:function(){return u}});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),o=["components"],i={title:"Common events",sidebar_position:6,slug:"/events"},d=void 0,s={unversionedId:"en/Events",id:"en/Events",title:"Common events",description:"The event of the player is divided into two, a native event of a video, and another is a custom event. The native event comes from Video Elements, is the original event of the Video Element, in order to distinguish it and custom events, the native event adds a prefix video:",source:"@site/docs/en/Events.mdx",sourceDirName:"en",slug:"/events",permalink:"/document/events",draft:!1,tags:[],version:"current",sidebarPosition:6,frontMatter:{title:"Common events",sidebar_position:6,slug:"/events"},sidebar:"en",previous:{title:"Static propertys",permalink:"/document/class"},next:{title:"Third party librarys",permalink:"/document/libraries"}},p={},u=[{value:"Native event",id:"native-event",level:2},{value:"Custom event",id:"custom-event",level:2},{value:"ready",id:"ready",level:3},{value:"play",id:"play",level:3},{value:"pause",id:"pause",level:3},{value:"seek",id:"seek",level:3},{value:"volume",id:"volume",level:3},{value:"destroy",id:"destroy",level:3},{value:"focus",id:"focus",level:3},{value:"blur",id:"blur",level:3},{value:"hover",id:"hover",level:3},{value:"resize",id:"resize",level:3},{value:"mousemove",id:"mousemove",level:3},{value:"url",id:"url",level:3},{value:"fullscreen",id:"fullscreen",level:3},{value:"fullscreenWeb",id:"fullscreenweb",level:3},{value:"hotkey",id:"hotkey",level:3}],m={toc:u};function c(e){var t=e.components,n=(0,r.Z)(e,o);return(0,l.kt)("wrapper",(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("p",null,"The event of the player is divided into two, a ",(0,l.kt)("inlineCode",{parentName:"p"},"native event")," of a video, and another is a ",(0,l.kt)("inlineCode",{parentName:"p"},"custom event"),". The ",(0,l.kt)("inlineCode",{parentName:"p"},"native event")," comes from ",(0,l.kt)("inlineCode",{parentName:"p"},"Video Elements"),", is the original event of the ",(0,l.kt)("inlineCode",{parentName:"p"},"Video Element"),", in order to distinguish it and ",(0,l.kt)("inlineCode",{parentName:"p"},"custom events"),", the native event adds a prefix ",(0,l.kt)("inlineCode",{parentName:"p"},"video:")),(0,l.kt)("h2",{id:"native-event"},"Native event"),(0,l.kt)("p",null,"For more information, please read ",(0,l.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#events"},"Mozilla Video Events")),(0,l.kt)("table",null,(0,l.Line truncated
|
||||
@@ -1,2 +0,0 @@
|
||||
/*! For license information please see main.a3e4ef08.js.LICENSE.txt */
|
||||
(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[179],{9782:function(e,t){"use strict";t.Z={title:"Artplayer.js",tagline:"Public Product Api Document",url:"https://artplayer.org",baseUrl:"/document/",onBrokenLinks:"ignore",onBrokenMarkdownLinks:"ignore",organizationName:"zhw2590582",projectName:"Artplayer",favicon:"img/favicon.ico",clientModules:["/Users/zhaohaiwei/Desktop/github/ArtPlayer/packages/artplayer-document/src/script/main.js"],themeConfig:{docs:{sidebar:{hideable:!0,autoCollapseCategories:!1},versionPersistence:"localStorage"},navbar:{title:"Artplayer.js",logo:{alt:"Artplayer.js",src:"img/logo.png",href:"https://artplayer.org/document",target:"_self",width:28,height:28},items:[{href:"https://artplayer.org",position:"left",label:"Online Editor"},{href:"https://github.com/zhw2590582/ArtPlayer",position:"left",label:"Github"},{href:"#",label:"QQ\u7fa4: 320881312",position:"right"},{label:"English",position:"right",items:[{label:"English",href:"/"},{label:"\u4e2d\u6587",href:"/zh-cn/"}]}],hideOnScroll:!1},footer:{style:"dark",copyright:"Copyright \xa9 2023 Artplayer.js, Inc. Built with Docusaurus.",links:[]},prism:{theme:{plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]},darkTheme:{plain:{color:"#F8F8F2",backgroundColor:"#282A36"},styles:[{types:["prolog","constant","builtin"],style:{color:"rgb(189, 147, 249)"}},{types:["inserted","function"],style:{color:"rgb(80, 250, 123)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["changed"],style:{color:"rgb(255, 184, 108)"}},{types:["punctuation","symbol"],style:{color:"rgb(248, 248, 242)"}},{types:["string","char","tag","selector"],style:{color:"rgb(255, 121, 198)"}},{types:["keyword","variable"],style:{color:"rgb(189, 147, 249)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(98, 114, 164)"}},{types:["attr-name"],style:{color:"rgb(241, 250, 140)"}}]},additionalLanguages:[],magicComments:[{className:"theme-code-block-highlighted-line",line:"highlight-next-line",block:{start:"highlight-start",end:"highlight-end"}}]},colorMode:{defaultMode:"light",disableSwitch:!1,respectPrefersColorScheme:!1},metadata:[],tableOfContents:{minHeadingLevel:2,maxHeadingLevel:3}},plugins:["/Users/zhaohaiwei/Desktop/github/ArtPlayer/packages/artplayer-document/node_modules/docusaurus-lunr-search/src/index.js"],presets:[["@docusaurus/preset-classic",{docs:{path:"./docs",routeBasePath:"/",sidebarPath:"/Users/zhaohaiwei/Desktop/github/ArtPlayer/packages/artplayer-document/sidebars.js"},blog:!1,theme:{customCss:"/Users/zhaohaiwei/Desktop/github/ArtPlayer/packages/artplayer-document/src/css/custom.css"}}]],baseUrlIssueBanner:!0,i18n:{defaultLocale:"en",locales:["en"],localeConfigs:{}},onDuplicateRoutes:"warn",staticDirectories:["static"],customFields:{},themes:[],scripts:[],stylesheets:[],titleDelimiter:"|",noIndex:!1}},723:function(e,t,n){"use strict";n.d(t,{Z:function(){return p}});var r=n(7294),a=n(7462),o=n(8356),i=n.n(o);function l(e){var t=e.error,n=e.retry,a=e.pastDelay;return t?r.createElement("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"}},r.createElement("p",null,t.message),r.createElement("div",null,r.createElement("button",{type:"button",onClick:n},"Retry"))):a?r.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"}},r.createElement("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb"},r.createElement("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2"},r.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},r.createElement("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),r.createElement("circle",{cx:"22",cy:"2Line truncated
|
||||
@@ -1,59 +0,0 @@
|
||||
/*
|
||||
object-assign
|
||||
(c) Sindre Sorhus
|
||||
@license MIT
|
||||
*/
|
||||
|
||||
/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
|
||||
* @license MIT */
|
||||
|
||||
/*!
|
||||
Copyright (c) 2018 Jed Watson.
|
||||
Licensed under the MIT License (MIT), see
|
||||
http://jedwatson.github.io/classnames
|
||||
*/
|
||||
|
||||
/**
|
||||
* Prism: Lightweight, robust, elegant syntax highlighting
|
||||
*
|
||||
* @license MIT <https://opensource.org/licenses/MIT>
|
||||
* @author Lea Verou <https://lea.verou.me>
|
||||
* @namespace
|
||||
* @public
|
||||
*/
|
||||
|
||||
/** @license React v0.20.2
|
||||
* scheduler.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/** @license React v16.13.1
|
||||
* react-is.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/** @license React v17.0.2
|
||||
* react-dom.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/** @license React v17.0.2
|
||||
* react.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
@@ -1 +0,0 @@
|
||||
!function(){"use strict";var e,t,n,r,f,a={},o={};function c(e){var t=o[e];if(void 0!==t)return t.exports;var n=o[e]={id:e,loaded:!1,exports:{}};return a[e].call(n.exports,n,n.exports,c),n.loaded=!0,n.exports}c.m=a,c.c=o,e=[],c.O=function(t,n,r,f){if(!n){var a=1/0;for(i=0;i<e.length;i++){n=e[i][0],r=e[i][1],f=e[i][2];for(var o=!0,d=0;d<n.length;d++)(!1&f||a>=f)&&Object.keys(c.O).every((function(e){return c.O[e](n[d])}))?n.splice(d--,1):(o=!1,f<a&&(a=f));if(o){e.splice(i--,1);var u=r();void 0!==u&&(t=u)}}return t}f=f||0;for(var i=e.length;i>0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[n,r,f]},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},c.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var f=Object.create(null);c.r(f);var a={};t=t||[null,n({}),n([]),n(n)];for(var o=2&r&&e;"object"==typeof o&&!~t.indexOf(o);o=n(o))Object.getOwnPropertyNames(o).forEach((function(t){a[t]=function(){return e[t]}}));return a.default=function(){return e},c.d(f,a),f},c.d=function(e,t){for(var n in t)c.o(t,n)&&!c.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},c.f={},c.e=function(e){return Promise.all(Object.keys(c.f).reduce((function(t,n){return c.f[n](e,t),t}),[]))},c.u=function(e){return"assets/js/"+({12:"70e6f481",14:"faf6497a",28:"58e1c627",48:"60b6f9d9",53:"935f2afb",78:"3bed75f7",87:"a5cb9b40",122:"bd0361f4",146:"9bc5160c",167:"8707c5fa",178:"a2b05b94",201:"289862a0",204:"a9eda2a6",220:"5d64abea",228:"a94f89e4",235:"a87a33e0",250:"3295c742",280:"3242b9a0",283:"8aff36b5",342:"6119d6c4",359:"6d693eaf",467:"af55b7da",489:"e13a9a46",509:"f94d3623",514:"1be78505",558:"41890f3a",591:"f4b604e6",601:"6edbf6fb",610:"3c6a0f85",615:"1fd37a74",619:"55c4a126",645:"571421b9",667:"701cf4af",696:"ba9533a1",740:"f1478c6c",745:"7d9cd416",778:"40f8650c",784:"1cbc9196",881:"e434372a",918:"17896441"}[e]||e)+"."+{12:"17cd57d2",14:"23a683fd",28:"ba9f1c82",48:"31b703fe",53:"3c7d3d9b",78:"2c811683",87:"9c4a8e8c",122:"4c1211ba",146:"7239afe4",167:"ccddce42",178:"2a8252df",201:"3d56e027",204:"8068d5c6",220:"b47b08b8",228:"7c36c862",235:"b7afa659",245:"dd7e9f1f",250:"c0eb89ee",280:"aec979a9",283:"ec084d59",342:"57a8b8fb",343:"e9b08a58",359:"3c94df1b",467:"8a27d66f",489:"37f0defe",509:"94488281",514:"b9120311",558:"ac4728fa",591:"e9a8373b",601:"9f8c00bc",608:"1d321a91",610:"417259b8",615:"d6a451a2",619:"943e022d",645:"bd81ea31",667:"8ef5a7aa",696:"7e3769fb",740:"d97369bf",745:"5b9dc239",778:"a52304ab",784:"2dd1fd8d",878:"0f9d5667",881:"c02b87d1",918:"8d80cfd5"}[e]+".js"},c.miniCssF=function(e){},c.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r={},f="artplayer-document:",c.l=function(e,t,n,a){if(r[e])r[e].push(t);else{var o,d;if(void 0!==n)for(var u=document.getElementsByTagName("script"),i=0;i<u.length;i++){var b=u[i];if(b.getAttribute("src")==e||b.getAttribute("data-webpack")==f+n){o=b;break}}o||(d=!0,(o=document.createElement("script")).charset="utf-8",o.timeout=120,c.nc&&o.setAttribute("nonce",c.nc),o.setAttribute("data-webpack",f+n),o.src=e),r[e]=[t];var l=function(t,n){o.onerror=o.onload=null,clearTimeout(s);var f=r[e];if(delete r[e],o.parentNode&&o.parentNode.removeChild(o),f&&f.forEach((function(e){return e(n)})),t)return t(n)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:o}),12e4);o.onerror=l.bind(null,o.onerror),o.onload=l.bind(null,o.onload),d&&document.head.appendChild(o)}},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.p="/document/",c.gca=function(e){return e={17896441:"918","70e6f481":"12",faf6497a:"14","58e1c627":"28","60b6f9d9":"48","935f2afb":"53","3bed75f7":"78",a5cb9b40:"87",bd0361f4:"122","9bc5160c":"146","8707c5fa":"167",a2b05b94:"178","289862a0":"201",a9eda2a6:"204","5d64abea":"220",a94f89e4:"228",a87a33e0:"235","3295c742":"250","3242b9a0":"280","8aff36b5":"283","6119d6c4":"342","6d693eaf":"359",af55b7da:"467",e13a9a46:"489",f94d3623:"509","1be78505":"514","41890f3a":"558",f4b604e6:"591","6edbf6fb":"601","3c6a0f85":"610","1fd37a74":"615","55c4a126":"619","571421b9":"645","701cf4af":"667",ba9533a1:"696",f1478c6c:"740","7d9cd416":"745","40f8650c":"778","1cbc9196":"784",e434372a:"881"}[e]||e,c.p+c.u(e)},function(){var e={303:0,532:0};c.f.j=function(t,n){var r=c.o(e,t)?e[t]:void 0;if(0!==r)if(r)n.push(r[2]);else if(/^(303|532)$/.test(t))e[t]=0;else{var f=new Promise((function(n,f){r=e[t]=[n,f]}));n.push(r[2]=f);var a=c.p+c.u(t),o=new Error;c.l(a,(function(n){if(c.o(e,t)&&(0!==(r=e[t])&&(e[t]=void 0),r)){var f=n&&("load"===n.type?"missing":n.type),a=Line truncated
|
||||
@@ -0,0 +1,27 @@
|
||||
import{_ as n,c as l,o as p,b as s,d as a,a as o}from"./app.acdc77a1.js";const m=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/dash.md","lastUpdated":1673438559000}'),e={name:"library/dash.md"},r=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),F=o(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">playMpd</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">video</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">dashjs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">supportsMediaSource</span><span style="color:#F07178;">()) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">dash</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">dashjs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">MediaPlayer</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">create</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">dash</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">initialize</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">video</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">option</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">autoplay</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// optional</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">dash</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">dash</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">once</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">url</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">dash</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">())</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">once</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">destroy</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">dash</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">())</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">notice</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Unsupported playback format: mpd</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">type</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">mpd</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">customType</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">mpd</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> playMpd</span></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">dash</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div>`,1),y=[r,t,c,F];function D(i,A,C,d,h,b){return p(),l("div",null,y)}const _=n(e,[["render",D]]);export{m as __pageData,_ as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as n,c as l,o as p,b as s,d as a,a as o}from"./app.acdc77a1.js";const m=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/dash.md","lastUpdated":1673438559000}'),e={name:"library/dash.md"},r=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(i,A,C,d,h,b){return p(),l("div",null,y)}const _=n(e,[["render",D]]);export{m as __pageData,_ as default};
|
||||
@@ -0,0 +1,28 @@
|
||||
import{_ as a,c as l,o as p,b as s,d as n,a as o}from"./app.acdc77a1.js";const f=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/flv.md","lastUpdated":1673438559000}'),e={name:"library/flv.md"},r=s("h1",{id:"flv-js",tabindex:"-1"},[n("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),F=o(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">playFlv</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">video</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">flvjs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">isSupported</span><span style="color:#F07178;">()) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">flv</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">flvjs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createPlayer</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> type</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">flv</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">flv</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">attachMediaElement</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">video</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">flv</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">load</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// optional</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">flv</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">flv</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">once</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">url</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">flv</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">())</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">once</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">destroy</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">flv</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">())</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">notice</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Unsupported playback format: flv</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.flv</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">type</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">flv</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">customType</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">flv</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> playFlv</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">flv</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div>`,1),y=[r,t,c,F];function D(i,A,C,b,d,u){return p(),l("div",null,y)}const h=a(e,[["render",D]]);export{f as __pageData,h as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as a,c as l,o as p,b as s,d as n,a as o}from"./app.acdc77a1.js";const f=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/flv.md","lastUpdated":1673438559000}'),e={name:"library/flv.md"},r=s("h1",{id:"flv-js",tabindex:"-1"},[n("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(i,A,C,b,d,u){return p(),l("div",null,y)}const h=a(e,[["render",D]]);export{f as __pageData,h as default};
|
||||
@@ -0,0 +1,30 @@
|
||||
import{_ as a,c as l,o as p,b as s,d as n,a as o}from"./app.acdc77a1.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/hls.md","lastUpdated":1673438559000}'),e={name:"library/hls.md"},r=s("h1",{id:"hls-js",tabindex:"-1"},[n("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),F=o(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">playM3u8</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">video</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">art</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">Hls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">isSupported</span><span style="color:#F07178;">()) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hls</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Hls</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">loadSource</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">attachMedia</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">video</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// optional</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">hls</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hls</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">once</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">url</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">())</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">once</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">destroy</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">hls</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">())</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">video</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">canPlayType</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">application/vnd.apple.mpegurl</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">video</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">src</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">notice</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">show</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Unsupported playback format: m3u8</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">type</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">m3u8</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">customType</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">m3u8</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> playM3u8</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">hls</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div>`,1),y=[r,t,c,F];function D(i,A,C,b,d,h){return p(),l("div",null,y)}const _=a(e,[["render",D]]);export{m as __pageData,_ as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as a,c as l,o as p,b as s,d as n,a as o}from"./app.acdc77a1.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/hls.md","lastUpdated":1673438559000}'),e={name:"library/hls.md"},r=s("h1",{id:"hls-js",tabindex:"-1"},[n("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-hidden":"true"},"#")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(i,A,C,b,d,h){return p(),l("div",null,y)}const _=a(e,[["render",D]]);export{m as __pageData,_ as default};
|
||||
@@ -0,0 +1,55 @@
|
||||
import{_ as a,c as n,o as l,a as s,b as p}from"./app.acdc77a1.js";const u=JSON.parse('{"title":"视频广告","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]}],"relativePath":"plugin/ads.md","lastUpdated":1673438559000}'),e={name:"plugin/ads.md"},o=s(`<h1 id="视频广告" tabindex="-1">视频广告 <a class="header-anchor" href="#视频广告" aria-hidden="true">#</a></h1><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-hidden="true">#</a></h2><p>👉 <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads" target="_blank" rel="noreferrer">查看完整演示</a></p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-_pRhF" id="tab-vuAQgrP" checked="checked"><label for="tab-vuAQgrP">npm</label><input type="radio" name="group-_pRhF" id="tab-NcOVHtD"><label for="tab-NcOVHtD">yarn</label><input type="radio" name="group-_pRhF" id="tab-BFucP9H"><label for="tab-BFucP9H">pnpm</label><input type="radio" name="group-_pRhF" id="tab-kmQznDv"><label for="tab-kmQznDv">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-ads</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">yarn</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-ads</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-ads</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">path/to/artplayer-plugin-ads.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-pQgRd" id="tab-ZqCaVbu" checked="checked"><label for="tab-ZqCaVbu">jsdelivr.net</label><input type="radio" name="group-pQgRd" id="tab-6mB2HyQ"><label for="tab-6mB2HyQ">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="使用" tabindex="-1">使用 <a class="header-anchor" href="#使用" aria-hidden="true">#</a></h2>`,8),r=p("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),c=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">autoSize</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">fullscreen</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">fullscreenWeb</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">artplayerPluginAds</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// html广告,假如是视频广告则忽略该值</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;"><img src="/assets/sample/poster.jpg"></span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 视频广告的地址</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">video</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/test1.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 广告跳转网址,为空则不跳转</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">http://artplayer.org</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 必须观看的时长,期间不能被跳过,单位为秒</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 当该值大于或等于totalDuration时,不能提前关闭广告</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 当该值等于或小于0时,则随时都可以关闭广告</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">playDuration</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 广告总时长,单位为秒</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">totalDuration</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 视频广告是否默认静音</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">muted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 多语言支持</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">i18n</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">close</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">关闭广告</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">countdown</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">%s秒</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">detail</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">查看详情</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">canBeClosed</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">%s秒后可关闭广告</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// ad is clicked</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">artplayerPluginAds:click</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">ads</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">ads</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// Ad skipped</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">artplayerPluginAds:skip</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">ads</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">ads</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br></div></div>`,1),t=[o,r,c];function i(y,D,F,C,d,b){return l(),n("div",null,t)}const m=a(e,[["render",i]]);export{u as __pageData,m as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as a,c as n,o as l,a as s,b as p}from"./app.acdc77a1.js";const u=JSON.parse('{"title":"视频广告","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]}],"relativePath":"plugin/ads.md","lastUpdated":1673438559000}'),e={name:"plugin/ads.md"},o=s("",8),r=p("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),c=s("",1),t=[o,r,c];function i(y,D,F,C,d,b){return l(),n("div",null,t)}const m=a(e,[["render",i]]);export{u as __pageData,m as default};
|
||||
@@ -0,0 +1,35 @@
|
||||
import{_ as n,c as l,o as p,a as s,b as a}from"./app.acdc77a1.js";const m=JSON.parse('{"title":"控制器皮肤","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"enable","slug":"enable","link":"#enable","children":[]}],"relativePath":"plugin/control-ui.md","lastUpdated":1673438559000}'),e={name:"plugin/control-ui.md"},o=s(`<h1 id="控制器皮肤" tabindex="-1">控制器皮肤 <a class="header-anchor" href="#控制器皮肤" aria-hidden="true">#</a></h1><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-hidden="true">#</a></h2><p>👉 <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-control/index.js&example=control" target="_blank" rel="noreferrer">查看完整演示</a></p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-5JoNJ" id="tab-hr-gZJn" checked="checked"><label for="tab-hr-gZJn">npm</label><input type="radio" name="group-5JoNJ" id="tab-HnUGBAa"><label for="tab-HnUGBAa">yarn</label><input type="radio" name="group-5JoNJ" id="tab-KKkl58l"><label for="tab-KKkl58l">pnpm</label><input type="radio" name="group-5JoNJ" id="tab-X7sesaB"><label for="tab-X7sesaB">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-control</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">yarn</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-control</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-control</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">path/to/artplayer-plugin-control.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-athLH" id="tab-761ATps" checked="checked"><label for="tab-761ATps">jsdelivr.net</label><input type="radio" name="group-athLH" id="tab-q1w7YTU"><label for="tab-q1w7YTU">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer-plugin-control/dist/artplayer-plugin-control.js</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://unpkg.com/artplayer-plugin-control/dist/artplayer-plugin-control.js</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="使用" tabindex="-1">使用 <a class="header-anchor" href="#使用" aria-hidden="true">#</a></h2>`,8),r=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),t=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight has-highlighted-lines"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">fullscreen</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">fullscreenWeb</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">artplayerPluginControl</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="enable" tabindex="-1"><code>enable</code> <a class="header-anchor" href="#enable" aria-hidden="true">#</a></h2><ul><li>Type: <code>Getter/Setter</code></li><li>Parameter: <code>Boolean</code></li></ul><p>是否启用新的控制器皮肤</p>`,4),c=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),i=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">fullscreen</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">fullscreenWeb</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">controls</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;"><button type="button">Switch UI</button></span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">enable</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">artplayerPluginControl</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">artplayerPluginControl</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">enable</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">enable</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">artplayerPluginControl</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div>`,1),y=[o,r,t,c,i];function D(F,d,C,u,b,A){return p(),l("div",null,y)}const g=n(e,[["render",D]]);export{m as __pageData,g as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as n,c as l,o as p,a as s,b as a}from"./app.acdc77a1.js";const m=JSON.parse('{"title":"控制器皮肤","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[]},{"level":2,"title":"enable","slug":"enable","link":"#enable","children":[]}],"relativePath":"plugin/control-ui.md","lastUpdated":1673438559000}'),e={name:"plugin/control-ui.md"},o=s("",8),r=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),t=s("",4),c=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),i=s("",1),y=[o,r,t,c,i];function D(F,d,C,u,b,A){return p(),l("div",null,y)}const g=n(e,[["render",D]]);export{m as __pageData,g as default};
|
||||
@@ -0,0 +1,301 @@
|
||||
import{_ as a,c as l,o as p,a as s,b as n}from"./app.acdc77a1.js";const V=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"选项","slug":"选项","link":"#选项","children":[]},{"level":2,"title":"使用弹幕数组","slug":"使用弹幕数组","link":"#使用弹幕数组","children":[]},{"level":2,"title":"使用弹幕 XML","slug":"使用弹幕-xml","link":"#使用弹幕-xml","children":[]},{"level":2,"title":"使用异步调用","slug":"使用异步调用","link":"#使用异步调用","children":[]},{"level":2,"title":"hide/show","slug":"hide-show","link":"#hide-show","children":[]},{"level":2,"title":"isHide","slug":"ishide","link":"#ishide","children":[]},{"level":2,"title":"emit","slug":"emit","link":"#emit","children":[]},{"level":2,"title":"config","slug":"config","link":"#config","children":[]},{"level":2,"title":"load","slug":"load","link":"#load","children":[]},{"level":2,"title":"reset","slug":"reset","link":"#reset","children":[]},{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"事件","slug":"事件","link":"#事件","children":[]}],"relativePath":"plugin/danmuku.md","lastUpdated":1673438559000}'),o={name:"plugin/danmuku.md"},e=s(`<h1 id="弹幕库" tabindex="-1">弹幕库 <a class="header-anchor" href="#弹幕库" aria-hidden="true">#</a></h1><h2 id="演示" tabindex="-1">演示 <a class="header-anchor" href="#演示" aria-hidden="true">#</a></h2><p>👉 <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku" target="_blank" rel="noreferrer">查看完整演示</a></p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-salSz" id="tab-3MIkDI7" checked="checked"><label for="tab-3MIkDI7">npm</label><input type="radio" name="group-salSz" id="tab-UAXBY-7"><label for="tab-UAXBY-7">yarn</label><input type="radio" name="group-salSz" id="tab-Ahxx_mu"><label for="tab-Ahxx_mu">pnpm</label><input type="radio" name="group-salSz" id="tab-WgXUzSd"><label for="tab-WgXUzSd">script</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-danmuku</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">yarn</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-danmuku</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">artplayer-plugin-danmuku</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">path/to/artplayer-plugin-danmuku.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-hidden="true">#</a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-Dtrhr" id="tab-oTlyz8A" checked="checked"><label for="tab-oTlyz8A">jsdelivr.net</label><input type="radio" name="group-Dtrhr" id="tab-yyfV3BD"><label for="tab-yyfV3BD">unpkg.com</label></div><div class="blocks"><div class="language-bash active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#FFCB6B;">https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="选项" tabindex="-1">选项 <a class="header-anchor" href="#选项" aria-hidden="true">#</a></h2><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">danmuku</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> []</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 弹幕库,支持数组, xml 地址, Promise返回数组</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">speed</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 弹幕持续时间,单位秒,范围在[1 ~ 10]</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">opacity</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 弹幕透明度,范围在[0 ~ 1]</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">fontSize</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">25</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 字体大小,支持数字和百分比</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">color</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#FFFFFF</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 默认字体颜色</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">mode</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 默认模式,0-滚动,1-静止</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">margin</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">25%</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 弹幕上下边距,支持数字和百分比</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">antiOverlap</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 是否防重叠</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">useWorker</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 是否使用 web worker</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">synchronousPlayback</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 是否同步到播放速度</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">filter</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">danmu</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">danmu</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">text</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">50</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 弹幕过滤函数,返回 true 则可以发送</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">lockTime</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 输入框锁定时间,单位秒,范围在[1 ~ 60]</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">maxLength</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 输入框最大可输入的字数,范围在[0 ~ 500]</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">minWidth</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">200</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 输入框最小宽度,范围在[0 ~ 500],填 0 则为无限制</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">maxWidth</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">400</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 输入框最大宽度,范围在[0 ~ Infinity],填 0 则为 100% 宽度</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">dark</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 输入框自定义挂载时的主题色,默认为 dark,可以选填亮色 light</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">beforeEmit</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">danmu</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!!</span><span style="color:#A6ACCD;">danmu</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">text</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">trim</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 发送弹幕前的自定义校验,返回 true 则可以发送</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 通过 mount 选项可以自定义输入框挂载的位置,默认挂载于播放器底部,仅在当宽度小于最小值时生效</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">mount</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-danmuku</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></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></div></div><h2 id="使用弹幕数组" tabindex="-1">使用弹幕数组 <a class="header-anchor" href="#使用弹幕数组" aria-hidden="true">#</a></h2>`,10),r=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),c=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">artplayerPluginDanmuku</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 弹幕数组</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">danmuku</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">text</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">111</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 弹幕文本</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">time</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 发送时间,单位秒</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#fff</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 弹幕局部颜色</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">border</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 是否显示描边</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">mode</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 弹幕模式: 0表示滚动, 1静止</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">text</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">222</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">time</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">red</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">border</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">mode</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">text</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">333</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">time</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">green</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">border</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">mode</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="使用弹幕-xml" tabindex="-1">使用弹幕 XML <a class="header-anchor" href="#使用弹幕-xml" aria-hidden="true">#</a></h2>`,2),t=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),D=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">artplayerPluginDanmuku</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 弹幕 XML 文件,和 Bilibili 网站的弹幕格式一致</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">danmuku</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/danmuku.xml</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="使用异步调用" tabindex="-1">使用异步调用 <a class="header-anchor" href="#使用异步调用" aria-hidden="true">#</a></h2>`,2),F=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),y=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">artplayerPluginDanmuku</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 使用 Promise 异步返回</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">danmuku</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">resovle</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">resovle</span><span style="color:#F07178;">([</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> text</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">111</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> time</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> text</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">222</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> time</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> text</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">333</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> time</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> ])</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="hide-show" tabindex="-1"><code>hide/show</code> <a class="header-anchor" href="#hide-show" aria-hidden="true">#</a></h2><p>通过方法 <code>hide</code> 和 <code>show</code> 进行隐藏或者显示弹幕</p>`,3),i=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),C=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">artplayerPluginDanmuku</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">danmuku</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/danmuku.xml</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">controls</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">隐藏弹幕</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">artplayerPluginDanmuku</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">hide</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">显示弹幕</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">artplayerPluginDanmuku</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">show</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h2 id="ishide" tabindex="-1"><code>isHide</code> <a class="header-anchor" href="#ishide" aria-hidden="true">#</a></h2><p>通过属性 <code>isHide</code> 判断当前弹幕是隐藏或者显示</p>`,3),A=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),u=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">artplayerPluginDanmuku</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">danmuku</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/danmuku.xml</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">controls</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">隐藏弹幕</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">_</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">artplayerPluginDanmuku</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">isHide</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">artplayerPluginDanmuku</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">show</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">innerText</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">隐藏弹幕</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">artplayerPluginDanmuku</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">hide</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">innerText</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">显示弹幕</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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="emit" tabindex="-1"><code>emit</code> <a class="header-anchor" href="#emit" aria-hidden="true">#</a></h2><p>通过方法 <code>emit</code> 发送一条实时弹幕</p>`,3),b=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),m=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">artplayerPluginDanmuku</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">danmuku</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/danmuku.xml</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">controls</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">发送弹幕</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">text</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">prompt</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">请输入弹幕文本</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">弹幕测试文本</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">text</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">text</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">trim</span><span style="color:#F07178;">()) </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">color</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Math</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">floor</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">Math</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">random</span><span style="color:#F07178;">() </span><span style="color:#89DDFF;">*</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0xffffff</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toString</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">16</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">artplayerPluginDanmuku</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">emit</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> text</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">text</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> color</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">color</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> border</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h2 id="config" tabindex="-1"><code>config</code> <a class="header-anchor" href="#config" aria-hidden="true">#</a></h2><p>通过方法 <code>config</code> 实时改变弹幕配置,支持属性有:</p><ul><li><code>danmuku</code></li><li><code>speed</code></li><li><code>opacity</code></li><li><code>fontSize</code></li><li><code>color</code></li><li><code>mode</code></li><li><code>margin</code></li><li><code>antiOverlap</code></li><li><code>synchronousPlayback</code></li><li><code>filter</code></li><li><code>lockTime</code></li><li><code>beforeEmit</code></li></ul>`,4),d=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),h=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">artplayerPluginDanmuku</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">danmuku</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/danmuku.xml</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">controls</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">弹幕大小:<input type="range" min="12" max="50" step="1" value="25"></span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">flex</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">alignItems</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">center</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">mounted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">$setting</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">$range</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">$setting</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">input[type=range]</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">$range</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">change</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">artplayerPluginDanmuku</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">config</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> fontSize</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Number</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">$range</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="load" tabindex="-1"><code>load</code> <a class="header-anchor" href="#load" aria-hidden="true">#</a></h2><p>通过 load 方法可以重载弹幕源,或者切换新弹幕</p>`,3),g=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),_=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">artplayerPluginDanmuku</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">danmuku</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/danmuku.xml</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">controls</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">重载弹幕</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">artplayerPluginDanmuku</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">load</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">切换弹幕</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">click</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">artplayerPluginDanmuku</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">config</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> danmuku</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/danmuku-v2.xml</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">artplayerPluginDanmuku</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">load</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="reset" tabindex="-1"><code>reset</code> <a class="header-anchor" href="#reset" aria-hidden="true">#</a></h2><p>用于清空当前显示的弹幕</p>`,3),E=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),v=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">artplayerPluginDanmuku</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">danmuku</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/danmuku.xml</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">resize</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">artplayerPluginDanmuku</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">reset</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="option" tabindex="-1"><code>option</code> <a class="header-anchor" href="#option" aria-hidden="true">#</a></h2><p>用于获取当前弹幕配置</p>`,3),k=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),f=s(`<div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">artplayerPluginDanmuku</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">danmuku</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/danmuku.xml</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ready</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">artplayerPluginDanmuku</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">option</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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></div></div><h2 id="事件" tabindex="-1">事件 <a class="header-anchor" href="#事件" aria-hidden="true">#</a></h2><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> art </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Artplayer</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">.artplayer-app</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">url</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/video.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setting</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">artplayerPluginDanmuku</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">danmuku</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/assets/sample/danmuku.xml</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">artplayerPluginDanmuku:emit</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">danmu</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">新增弹幕</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">danmu</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">artplayerPluginDanmuku:loaded</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">danmus</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">加载弹幕</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">danmus</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">artplayerPluginDanmuku:error</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">error</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">加载错误</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">error</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">artplayerPluginDanmuku:config</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">option</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">配置变化</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">option</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">artplayerPluginDanmuku:stop</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">弹幕停止</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">artplayerPluginDanmuku:start</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">弹幕开始</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">artplayerPluginDanmuku:hide</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">弹幕隐藏</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">artplayerPluginDanmuku:show</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">弹幕显示</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">art</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">artplayerPluginDanmuku:destroy</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">info</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">弹幕销毁</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></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><span class="line-number">45</span><br><span class="line-number">46</span><br></div></div>`,3),T=[e,r,c,t,D,F,y,i,C,A,u,b,m,d,h,g,_,E,v,k,f];function x(P,B,S,w,j,I){return p(),l("div",null,T)}const R=a(o,[["render",x]]);export{V as __pageData,R as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{_ as a,c as l,o as p,a as s,b as n}from"./app.acdc77a1.js";const V=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[{"level":2,"title":"演示","slug":"演示","link":"#演示","children":[]},{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"CDN","slug":"cdn","link":"#cdn","children":[]},{"level":2,"title":"选项","slug":"选项","link":"#选项","children":[]},{"level":2,"title":"使用弹幕数组","slug":"使用弹幕数组","link":"#使用弹幕数组","children":[]},{"level":2,"title":"使用弹幕 XML","slug":"使用弹幕-xml","link":"#使用弹幕-xml","children":[]},{"level":2,"title":"使用异步调用","slug":"使用异步调用","link":"#使用异步调用","children":[]},{"level":2,"title":"hide/show","slug":"hide-show","link":"#hide-show","children":[]},{"level":2,"title":"isHide","slug":"ishide","link":"#ishide","children":[]},{"level":2,"title":"emit","slug":"emit","link":"#emit","children":[]},{"level":2,"title":"config","slug":"config","link":"#config","children":[]},{"level":2,"title":"load","slug":"load","link":"#load","children":[]},{"level":2,"title":"reset","slug":"reset","link":"#reset","children":[]},{"level":2,"title":"option","slug":"option","link":"#option","children":[]},{"level":2,"title":"事件","slug":"事件","link":"#事件","children":[]}],"relativePath":"plugin/danmuku.md","lastUpdated":1673438559000}'),o={name:"plugin/danmuku.md"},e=s("",10),r=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),c=s("",2),t=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),D=s("",2),F=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),y=s("",3),i=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),C=s("",3),A=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),u=s("",3),b=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),m=s("",4),d=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),h=s("",3),g=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),_=s("",3),E=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),v=s("",3),k=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),f=s("",3),T=[e,r,c,t,D,F,y,i,C,A,u,b,m,d,h,g,_,E,v,k,f];function x(P,B,S,w,j,I){return p(),l("div",null,T)}const R=a(o,[["render",x]]);export{V as __pageData,R as default};
|
||||
Loaded 100 of 295 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user