Files
ArtPlayer/docs/document/en/plugin/danmuku.html
T

131 lines
96 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Danmuku | Artplayer.js</title>
<meta name="description" content="ArtPlayer.js is a modern and full featured HTML5 video player">
<meta name="generator" content="VitePress v1.6.3">
<link rel="preload stylesheet" href="/document/assets/style.BFaiTuR6.css" as="style">
<link rel="preload stylesheet" href="/document/vp-icons.css" as="style">
<script type="module" src="/document/assets/app.4GViTicL.js"></script>
<link rel="preload" href="/document/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/document/assets/chunks/theme.C_GnqzU2.js">
<link rel="modulepreload" href="/document/assets/chunks/framework.xxfEszSJ.js">
<link rel="modulepreload" href="/document/assets/en_plugin_danmuku.md.BA2ZgDal.lean.js">
<script src="/document/main.js"></script>
<link rel="stylesheet" href="/document/style.css">
<link rel="shortcut icon" href="/document/favicon.ico">
<meta name="google-adsense-account" content="ca-pub-8579453810848662">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8579453810848662" crossorigin="anonymous"></script>
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"dark",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-c4daae71><!--[--><!--]--><!--[--><span tabindex="-1" data-v-17ad389b></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-17ad389b>Skip to content</a><!--]--><!----><header class="VPNav" data-v-c4daae71 data-v-a46e73f0><div class="VPNavBar" data-v-a46e73f0 data-v-bb7529ee><div class="wrapper" data-v-bb7529ee><div class="container" data-v-bb7529ee><div class="title" data-v-bb7529ee><div class="VPNavBarTitle has-sidebar" data-v-bb7529ee data-v-5622a072><a class="title" href="/document/" data-v-5622a072><!--[--><!--]--><!--[--><img class="VPImage logo" src="/document/logo.png" alt data-v-4d414b82><!--]--><span data-v-5622a072>Artplayer.js</span><!--[--><!--]--></a></div></div><div class="content" data-v-bb7529ee><div class="content-body" data-v-bb7529ee><!--[--><!--]--><div class="VPNavBarSearch search" data-v-bb7529ee><!----><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-bb7529ee data-v-5bacfe89><span id="main-nav-aria-label" class="visually-hidden" data-v-5bacfe89> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/document/" tabindex="0" data-v-5bacfe89 data-v-8dbce4d0><!--[--><span data-v-8dbce4d0>中文版</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/document/en/" tabindex="0" data-v-5bacfe89 data-v-8dbce4d0><!--[--><span data-v-8dbce4d0>English Docs</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://artplayer.org" target="_blank" rel="noreferrer" tabindex="0" data-v-5bacfe89 data-v-8dbce4d0><!--[--><span data-v-8dbce4d0>Online Editor</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://artplayer.org/llms.txt" target="_blank" rel="noreferrer" tabindex="0" data-v-5bacfe89 data-v-8dbce4d0><!--[--><span data-v-8dbce4d0>🤖LLMs</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-5bacfe89 data-v-40e55da0><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-40e55da0><span class="text" data-v-40e55da0><!----><span data-v-40e55da0>5.3.x</span><span class="vpi-chevron-down text-icon" data-v-40e55da0></span></span></button><div class="menu" data-v-40e55da0><div class="VPMenu" data-v-40e55da0 data-v-39eca401><div class="items" data-v-39eca401><!--[--><!--[--><div class="VPMenuLink" data-v-39eca401 data-v-65e4a6b1><a class="VPLink link vp-external-link-icon" href="https://github.com/zhw2590582/ArtPlayer/blob/master/CHANGELOG.md" target="_blank" rel="noreferrer" data-v-65e4a6b1><!--[--><span data-v-65e4a6b1>Changelog</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-39eca401 data-v-65e4a6b1><a class="VPLink link vp-external-link-icon" href="https://github.com/zhw2590582/ArtPlayer#donations" target="_blank" rel="noreferrer" data-v-65e4a6b1><!--[--><span data-v-65e4a6b1>Donation</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-bb7529ee data-v-123fcb2f><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="true" data-v-123fcb2f data-v-fa1daf57 data-v-7012e5dd><span class="check" data-v-7012e5dd><span class="icon" data-v-7012e5dd><!--[--><span class="vpi-sun sun" data-v-fa1daf57></span><span class="vpi-moon moon" data-v-fa1daf57></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-bb7529ee data-v-08b35e6f data-v-f2234a39><!--[--><a class="VPSocialLink no-icon" href="https://github.com/zhw2590582/ArtPlayer" aria-label="github" target="_blank" rel="noopener" data-v-f2234a39 data-v-fbf39218><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-bb7529ee data-v-0c845e5d data-v-40e55da0><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-40e55da0><span class="vpi-more-horizontal icon" data-v-40e55da0></span></button><div class="menu" data-v-40e55da0><div class="VPMenu" data-v-40e55da0 data-v-39eca401><!----><!--[--><!--[--><!----><div class="group" data-v-0c845e5d><div class="item appearance" data-v-0c845e5d><p class="label" data-v-0c845e5d>Appearance</p><div class="appearance-action" data-v-0c845e5d><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="true" data-v-0c845e5d data-v-fa1daf57 data-v-7012e5dd><span class="check" data-v-7012e5dd><span class="icon" data-v-7012e5dd><!--[--><span class="vpi-sun sun" data-v-fa1daf57></span><span class="vpi-moon moon" data-v-fa1daf57></span><!--]--></span></span></button></div></div></div><div class="group" data-v-0c845e5d><div class="item social-links" data-v-0c845e5d><div class="VPSocialLinks social-links-list" data-v-0c845e5d data-v-f2234a39><!--[--><a class="VPSocialLink no-icon" href="https://github.com/zhw2590582/ArtPlayer" aria-label="github" target="_blank" rel="noopener" data-v-f2234a39 data-v-fbf39218><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-bb7529ee data-v-670493dd><span class="container" data-v-670493dd><span class="top" data-v-670493dd></span><span class="middle" data-v-670493dd></span><span class="bottom" data-v-670493dd></span></span></button></div></div></div></div><div class="divider" data-v-bb7529ee><div class="divider-line" data-v-bb7529ee></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-c4daae71 data-v-9d8129cc><div class="container" data-v-9d8129cc><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-9d8129cc><span class="vpi-align-left menu-icon" data-v-9d8129cc></span><span class="menu-text" data-v-9d8129cc>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-9d8129cc data-v-d61422fe><button data-v-d61422fe>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-c4daae71 data-v-12a40e3d><div class="curtain" data-v-12a40e3d></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-12a40e3d><span class="visually-hidden" id="sidebar-aria-label" data-v-12a40e3d> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-ec086cd5><section class="VPSidebarItem level-0" data-v-ec086cd5 data-v-2e0476bc><div class="item" role="button" tabindex="0" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><h2 class="text" data-v-2e0476bc>Quick start</h2><!----></div><div class="items" data-v-2e0476bc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link link" href="/document/en/" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Install</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link link" href="/document/en/start/option.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Option</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link link" href="/document/en/start/i18n.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Language</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-ec086cd5><section class="VPSidebarItem level-0" data-v-ec086cd5 data-v-2e0476bc><div class="item" role="button" tabindex="0" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><h2 class="text" data-v-2e0476bc>Component</h2><!----></div><div class="items" data-v-2e0476bc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link link" href="/document/en/component/layers.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Layers</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link link" href="/document/en/component/controls.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Controls</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link link" href="/document/en/component/contextmenu.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Contextmenu</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link link" href="/document/en/component/setting.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Setting</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-ec086cd5><section class="VPSidebarItem level-0" data-v-ec086cd5 data-v-2e0476bc><div class="item" role="button" tabindex="0" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><h2 class="text" data-v-2e0476bc>Advanced</h2><!----></div><div class="items" data-v-2e0476bc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link link" href="/document/en/advanced/property.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Instance Property</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link link" href="/document/en/advanced/built-in.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Advanced Property</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link link" href="/document/en/advanced/class.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Static Property</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link link" href="/document/en/advanced/global.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Global Property</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link link" href="/document/en/advanced/event.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Instance Event</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link link" href="/document/en/advanced/plugin.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Writing Plugin</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-ec086cd5><section class="VPSidebarItem level-0 has-active" data-v-ec086cd5 data-v-2e0476bc><div class="item" role="button" tabindex="0" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><h2 class="text" data-v-2e0476bc>Plugins</h2><!----></div><div class="items" data-v-2e0476bc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link link" href="/document/en/plugin/danmuku.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Danmuku</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link vp-external-link-icon link" href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&amp;example=ads" target="_blank" rel="noreferrer" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Advertise</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link vp-external-link-icon link" href="https://artplayer.org/?libs=./uncompiled/artplayer-tool-iframe/index.js&amp;example=iframe" target="_blank" rel="noreferrer" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Iframe Control</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link link" href="/document/en/plugin/hls-control.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>HLS Control</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link link" href="/document/en/plugin/dash-control.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>DASH Control</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link link" href="/document/en/plugin/vtt-thumbnail.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>VTT Thumbnail</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link vp-external-link-icon link" href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-multiple-subtitles/index.js&amp;example=multiple.subtitles" target="_blank" rel="noreferrer" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Multiple Subtitles</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link vp-external-link-icon link" href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-jassub/index.js&amp;example=jassub" target="_blank" rel="noreferrer" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>ASS Subtitle - JASSUB</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link vp-external-link-icon link" href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chromecast/index.js&amp;example=chromecast" target="_blank" rel="noreferrer" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Chromecast</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link vp-external-link-icon link" href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vast/index.js&amp;example=vast" target="_blank" rel="noreferrer" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>VAST</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link vp-external-link-icon link" href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chapter/index.js&amp;example=chapter" target="_blank" rel="noreferrer" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Video Chapters</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link vp-external-link-icon link" href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ambilight/index.js&amp;example=ambilight" target="_blank" rel="noreferrer" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Video Ambilight</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link vp-external-link-icon link" href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-document-pip/index.js&amp;example=document.pip" target="_blank" rel="noreferrer" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Document PIP</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link link" href="/document/en/plugin/audio-track.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Audio Track</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-ec086cd5><section class="VPSidebarItem level-0" data-v-ec086cd5 data-v-2e0476bc><div class="item" role="button" tabindex="0" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><h2 class="text" data-v-2e0476bc>Libraries</h2><!----></div><div class="items" data-v-2e0476bc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link vp-external-link-icon link" href="https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js&amp;example=hls" target="_blank" rel="noreferrer" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>hls.js</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link vp-external-link-icon link" href="https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js&amp;example=flv" target="_blank" rel="noreferrer" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>flv.js</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link vp-external-link-icon link" href="https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js&amp;example=dash" target="_blank" rel="noreferrer" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>dash.js</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link vp-external-link-icon link" href="https://artplayer.org/?libs=https://cdn.jsdelivr.net/npm/mpegts.js@1.7.3/dist/mpegts.min.js&amp;example=mpegts" target="_blank" rel="noreferrer" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>mpegts.js</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link vp-external-link-icon link" href="https://artplayer.org/?libs=https://cdn.jsdelivr.net/npm/webtorrent@1/webtorrent.min.js&amp;example=webtorrent" target="_blank" rel="noreferrer" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>webtorrent.js</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-ec086cd5><section class="VPSidebarItem level-0" data-v-ec086cd5 data-v-2e0476bc><div class="item" role="button" tabindex="0" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><h2 class="text" data-v-2e0476bc>Proxys</h2><!----></div><div class="items" data-v-2e0476bc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link vp-external-link-icon link" href="https://artplayer.org/?libs=./uncompiled/artplayer-proxy-canvas/index.js&amp;example=canvas" target="_blank" rel="noreferrer" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Canvas</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-2e0476bc data-v-2e0476bc><div class="item" data-v-2e0476bc><div class="indicator" data-v-2e0476bc></div><a class="VPLink link vp-external-link-icon link" href="https://artplayer.org/?libs=./uncompiled/artplayer-proxy-mediabunny/index.js&amp;example=mediabunny" target="_blank" rel="noreferrer" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Mediabunny</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-c4daae71 data-v-d2aef184><div class="VPDoc has-sidebar has-aside" data-v-d2aef184 data-v-ef3a4dda><!--[--><!--]--><div class="container" data-v-ef3a4dda><div class="aside" data-v-ef3a4dda><div class="aside-curtain" data-v-ef3a4dda></div><div class="aside-container" data-v-ef3a4dda><div class="aside-content" data-v-ef3a4dda><div class="VPDocAside" data-v-ef3a4dda data-v-79cae1a0><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-79cae1a0 data-v-dfbd9fb8><div class="content" data-v-dfbd9fb8><div class="outline-marker" data-v-dfbd9fb8></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-dfbd9fb8>On this page</div><ul class="VPDocOutlineItem root" data-v-dfbd9fb8 data-v-da421f78><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-79cae1a0></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-ef3a4dda><div class="content-container" data-v-ef3a4dda><!--[--><!--]--><main class="main" data-v-ef3a4dda><div style="position:relative;" class="vp-doc _document_en_plugin_danmuku" data-v-ef3a4dda><div><h1 id="danmuku" tabindex="-1">Danmuku <a class="header-anchor" href="#danmuku" aria-label="Permalink to &quot;Danmuku&quot;">​</a></h1><p><a href="./../../plugin/danmuku.html">中文说明</a></p><p>Display timed comments over the video, with an input panel, display settings and an optional heatmap. This guide describes the current refactor branch. The <code>/runtime</code> entrypoint and refactor fixes have not yet been published to npm; unversioned CDN links still load the published release.</p><h2 id="demo" tabindex="-1">Demo <a class="header-anchor" href="#demo" aria-label="Permalink to &quot;Demo&quot;">​</a></h2><p><a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&amp;example=danmuku" target="_blank" rel="noreferrer">Open the full example</a>. Run Code examples below use the site&#39;s local plugin build and sample media. In your application, use your own container and media URLs.</p><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to &quot;Installation&quot;">​</a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-0" checked><label data-title="npm" for="tab-artplayer-6327997d12cc7405-0">npm</label><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-1"><label data-title="yarn" for="tab-artplayer-6327997d12cc7405-1">yarn</label><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-2"><label data-title="pnpm" for="tab-artplayer-6327997d12cc7405-2">pnpm</label><input type="radio" name="group-artplayer-6327997d12cc7405" id="tab-artplayer-6327997d12cc7405-3"><label data-title="script" for="tab-artplayer-6327997d12cc7405-3">script</label></div><div class="blocks"><div class="language-sh vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-html vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;path/to/artplayer.js&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;path/to/artplayer-plugin-danmuku.js&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></div></div><p>JavaScript projects can import the default factory from <code>artplayer-plugin-danmuku</code>. Script builds expose <code>artplayerPluginDanmuku</code>; pass its result to the player&#39;s <code>plugins</code> array.</p><h2 id="cdn" tabindex="-1">CDN <a class="header-anchor" href="#cdn" aria-label="Permalink to &quot;CDN&quot;">​</a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-artplayer-0590ccaac58bc27a" id="tab-artplayer-0590ccaac58bc27a-0" checked><label data-title="jsDelivr" for="tab-artplayer-0590ccaac58bc27a-0">jsDelivr</label><input type="radio" name="group-artplayer-0590ccaac58bc27a" id="tab-artplayer-0590ccaac58bc27a-1"><label data-title="unpkg" for="tab-artplayer-0590ccaac58bc27a-1">unpkg</label></div><div class="blocks"><div class="language-text vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><h2 id="comment-structure" tabindex="-1">Comment structure <a class="header-anchor" href="#comment-structure" aria-label="Permalink to &quot;Comment structure&quot;">​</a></h2><p>Only <code>text</code> is required. Leading and trailing whitespace is removed; empty comments are ignored.</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Hello!&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> time: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Seconds; omitted time defaults to currentTime + 0.5</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> mode: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 0: scrolling, 1: top, 2: bottom; defaults to option.mode</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#FFFFFF&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Defaults to option.color</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> border: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> style: {}, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// CSS properties for this comment</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>Explicit <code>time: 0</code> is preserved. Negative times are clamped to zero. Other than 0, 1 and 2, comment modes are ignored.</p><h2 id="all-options" tabindex="-1">All options <a class="header-anchor" href="#all-options" aria-label="Permalink to &quot;All options&quot;">​</a></h2><p>Pass an option object to the factory. At runtime, <code>{}</code> is valid and all fields have defaults. The historical root declarations still require <code>danmuku</code>; existing TypeScript projects can keep providing it. See <a href="#typescript">TypeScript</a> for accurate declarations.</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> danmuku: [], </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Array, XML URL, Promise of an array, or function returning an array/Promise</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> speed: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Display duration in seconds, clamped to 1–10</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> margin: [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;25%&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Top/bottom spacing: pixels or percentages</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> opacity: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Clamped to 0–1</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#FFFFFF&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Default comment color</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> mode: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Default comment mode</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> modes: [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Visible modes</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fontSize: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">25</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Pixels or a percentage of player height</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> antiOverlap: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> synchronousPlayback: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Follow video playbackRate when enabled</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> mount: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">undefined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Defaults to the center of the player controls</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> heatmap: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Enable at construction: true or a heatmap options object</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">512</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Below this width, the default input panel moves below the player</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> points: [], </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Stored option; use the points event to draw custom data</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> filter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Synchronous; do not return a Promise</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> beforeEmit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Input-panel submissions only; may return a Promise</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> beforeVisible</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Called before display; may return a Promise</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> visible: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> emitter: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Show the input panel&#39;s sending UI</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> maxLength: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Input length, clamped to 1–1000</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> lockTime: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Seconds between input-panel submissions, clamped to 1–60</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;dark&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// &#39;dark&#39; or &#39;light&#39; for an external mount</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> OPACITY: {},</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> FONT_SIZE: {},</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MARGIN: {},</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> SPEED: {},</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> COLOR: [],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><p><code>OPACITY</code>, <code>FONT_SIZE</code>, <code>MARGIN</code> and <code>SPEED</code> override slider definitions with <code>min</code>, <code>max</code> and <code>steps</code>. Each step can contain <code>name</code>, <code>value</code>, <code>hide</code> and <code>show</code>; margin values are pairs such as <code>[10, &#39;50%&#39;]</code>. <code>COLOR</code> replaces the palette with an array of CSS color strings; an empty array uses the built-in palette.</p><h2 id="array-xml-and-asynchronous-input" tabindex="-1">Array, XML and asynchronous input <a class="header-anchor" href="#array-xml-and-asynchronous-input" aria-label="Permalink to &quot;Array, XML and asynchronous input&quot;">​</a></h2><p>XML input uses Bilibili&#39;s comment format. Fetching a cross-origin XML URL requires that server to allow browser access. An input function runs without the option object as its receiver. It may return an array directly or asynchronously.</p><div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js"> ▶ Run Code </div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugins: [</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> artplayerPluginDanmuku</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> danmuku: [{ text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Hello from an array&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, time: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }],</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Alternatives:</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // danmuku: &#39;/assets/sample/danmuku.xml&#39;,</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // danmuku: Promise.resolve([{ text: &#39;From a Promise&#39;, time: 1 }]),</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // danmuku: async () =&gt; [{ text: &#39;From a function&#39;, time: 1 }],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><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="lifecycle-callbacks" tabindex="-1">Lifecycle callbacks <a class="header-anchor" href="#lifecycle-callbacks" aria-label="Permalink to &quot;Lifecycle callbacks&quot;">​</a></h2><p>Input-panel submissions run <code>beforeEmit → filter → beforeVisible → artplayerPluginDanmuku:visible</code>. Loaded comments and direct <code>emit</code> calls run <code>filter → beforeVisible → artplayerPluginDanmuku:visible</code>. This describes accepted comments; callbacks can reject them, and scheduling still requires playback and an available track.</p><table tabindex="0"><thead><tr><th>Callback</th><th>Input</th><th>Acceptance</th></tr></thead><tbody><tr><td><code>beforeEmit</code></td><td>Input-panel comment</td><td>Only strict <code>true</code>, or a Promise resolving to <code>true</code>, sends it</td></tr><tr><td><code>filter</code></td><td>Comment with time, mode, color and style filled in</td><td>A synchronous truthy result adds it to the queue</td></tr><tr><td><code>beforeVisible</code></td><td>Queue item</td><td>A truthy result, including an awaited result, permits display</td></tr></tbody></table><p>Normal functions receive the current option object as <code>this</code> for all three callbacks. Arrow functions retain their lexical <code>this</code>. <code>emit()</code> does not call <code>beforeEmit</code>: perform application validation before calling it when needed. <code>beforeEmit</code> failures are logged in the console and leave the input available for another attempt.</p><p>An asynchronous <code>beforeVisible</code> rejection emits <code>artplayerPluginDanmuku:error</code> once for that item in the current run; other items continue. Pause/resume, reset or replacing the callback permits a retry if the item is still eligible by time. Pausing, seeking, hiding, resetting or destroying cancels unfinished visibility preparation.</p><h2 id="methods-and-state" tabindex="-1">Methods and state <a class="header-anchor" href="#methods-and-state" aria-label="Permalink to &quot;Methods and state&quot;">​</a></h2><p>The registered plugin is available synchronously as <code>art.plugins.artplayerPluginDanmuku</code>.</p><table tabindex="0"><thead><tr><th>Member</th><th>Behavior and return value</th></tr></thead><tbody><tr><td><code>emit(comment)</code></td><td>Processes one comment for the queue; returns a Promise</td></tr><tr><td><code>load()</code></td><td>Reads <code>option.danmuku</code> and replaces the queue; returns a Promise</td></tr><tr><td><code>load(input)</code></td><td>Appends comments from the input; returns a Promise</td></tr><tr><td><code>config(partialOption)</code></td><td>Synchronously merges configuration</td></tr><tr><td><code>hide()</code> / <code>show()</code></td><td>Synchronously hides or shows the comment layer</td></tr><tr><td><code>reset()</code></td><td>Clears displayed comments and returns queue items to waiting; does not delete the queue</td></tr><tr><td><code>mount(target)</code></td><td>Moves the panel to an existing element or selector; returns <code>undefined</code></td></tr><tr><td><code>option</code></td><td>Live current configuration; use <code>config()</code> for validated updates</td></tr><tr><td><code>isHide</code></td><td>Read-only live visibility state: <code>true</code> when hidden</td></tr><tr><td><code>isStop</code></td><td>Read-only live stopped state; distinct from visibility and not a media-readiness signal</td></tr></tbody></table><p><code>emit/load</code> Promises resolve to the internal Danmuku owner. <code>config/hide/show/reset</code> return that same owner synchronously. The owner is <strong>different from the registered plugin facade</strong>. Keep using the registered facade for subsequent commands. Awaiting <code>emit()</code> means queue processing has finished, not that the comment has appeared.</p><h3 id="loading-and-configuration" tabindex="-1">Loading and configuration <a class="header-anchor" href="#loading-and-configuration" aria-label="Permalink to &quot;Loading and configuration&quot;">​</a></h3><p>Changing <code>config({ danmuku: input })</code> does not load the new input. Follow it with <code>load()</code> to replace the queue. Input-read failures leave the existing queue intact; failures while filtering individual rows do not guarantee an atomic rollback of the entire batch. Independent append operations do not cancel one another. A newer replacement cancels an unfinished older replacement. Destroy cancels pending loads. Cancelled Promises resolve to the owner without a late <code>loaded</code> or <code>error</code> event.</p><p>Fetch and response-text failures emit <code>artplayerPluginDanmuku:error</code> and reject the corresponding public <code>load()</code> Promise. Handle rejection with <code>await</code>/<code>try...catch</code> or <code>.catch(...)</code>. Initial automatic loading observes rejection and logs a warning. Invalid configuration leaves the current option intact. Use <code>mount(target)</code> to move the panel; changing <code>option.mount</code> through <code>config()</code> does not perform a mount. Enable heatmap when constructing the plugin; <code>config({ heatmap: true })</code> does not create it later.</p><div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js"> ▶ Run Code </div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugins: [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">artplayerPluginDanmuku</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ danmuku: [], emitter: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">async</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> updateComments</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugin </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.plugins.artplayerPluginDanmuku;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugin.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">config</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ danmuku: [{ text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Replacement&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, time: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }] });</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugin.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">load</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugin.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">load</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([{ text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Appended&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, time: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }]);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugin.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">emit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Scheduled from the current time&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugin.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">hide</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Hidden:&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, plugin.isHide);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugin.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugin.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">reset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">updateComments</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">catch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(console.error);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h2 id="external-mount" tabindex="-1">External mount <a class="header-anchor" href="#external-mount" aria-label="Permalink to &quot;External mount&quot;">​</a></h2><p>Create a separate mount element before constructing the plugin. The panel moves into the controls during player fullscreen or web fullscreen and returns to its configured mount on exit. Use <code>theme: &#39;light&#39;</code> on a light background. The live <code>mount(target)</code> method requires a valid target; omitting its argument does not select the default. Destroy releases the plugin panel; the application owns any container it created.</p><div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js"> ▶ Run Code </div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $danmu </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;div&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">querySelector</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">after</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">($danmu);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fullscreenWeb: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugins: [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">artplayerPluginDanmuku</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> danmuku: [{ text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;External input panel&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, time: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> mount: $danmu,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;dark&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;destroy&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $danmu.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">remove</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">());</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Move it later with art.plugins.artplayerPluginDanmuku.mount(otherElement).</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="heatmap" tabindex="-1">Heatmap <a class="header-anchor" href="#heatmap" aria-label="Permalink to &quot;Heatmap&quot;">​</a></h2><p>Set <code>heatmap: true</code> at construction to sample the queue automatically. A live stream does not draw a heatmap. Dense automatic curves now fit in the bottom quarter of the chart instead of covering the video (issue #958). Explicit finite <code>yMin</code> or <code>yMax</code> and custom points retain their coordinate mapping.</p><p>An object can set <code>xMin</code>, <code>xMax</code>, <code>yMin</code>, <code>yMax</code>, <code>scale</code>, <code>opacity</code>, <code>minHeight</code>, <code>sampling</code>, <code>smoothing</code> and <code>flattening</code>. Defaults are <code>xMin: 0</code>, <code>xMax: chartWidth</code>, <code>yMin: 0</code>, <code>yMax: 128</code>, <code>scale: 0.25</code>, <code>opacity: 0.2</code>, <code>minHeight: floor(chartHeight * 0.05)</code>, <code>sampling: max(1, floor(chartWidth / 100))</code>, <code>smoothing: 0.2</code>, <code>flattening: 0.2</code>.</p><p>Send <code>art.emit(&#39;artplayerPluginDanmuku:points&#39;, points)</code> to draw custom <code>[x, value]</code> pairs. The default x-axis uses chart pixels, not seconds. Set <code>xMin/xMax</code> explicitly if supplying another coordinate range. Rendering mutates the inner point arrays for historical compatibility: copy each pair if reusing the original data. The stored <code>points</code> option does not draw custom data. A resize or successful load redraws the automatic curve, so resend custom data after those events when needed.</p><div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js"> ▶ Run Code </div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugins: [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">artplayerPluginDanmuku</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> danmuku: [{ text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Heatmap example&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, time: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> heatmap: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> points </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.25</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">12</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.75</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]];</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> drawPoints</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.controls.heatmap.offsetWidth;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">emit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;artplayerPluginDanmuku:points&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, points.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(([</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">ratio</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [ratio </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">*</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width, value]));</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;ready&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, drawPoints);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;resize&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, drawPoints);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;artplayerPluginDanmuku:loaded&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, drawPoints);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h2><p>Subscribe with <code>art.on(name, callback)</code> and remove subscriptions with <code>art.off(name, callback)</code>.</p><table tabindex="0"><thead><tr><th>Event</th><th>Payload / meaning</th></tr></thead><tbody><tr><td><code>artplayerPluginDanmuku:visible</code></td><td>Queue item; its <code>$ref</code> is the displayed element</td></tr><tr><td><code>artplayerPluginDanmuku:loaded</code></td><td>Current full queue after a successful load, including appends</td></tr><tr><td><code>artplayerPluginDanmuku:error</code></td><td>Original error from loading or scheduling; handle public Promise rejections separately</td></tr><tr><td><code>artplayerPluginDanmuku:config</code></td><td>Current configuration</td></tr><tr><td><code>artplayerPluginDanmuku:start</code></td><td>No payload; scheduling starts</td></tr><tr><td><code>artplayerPluginDanmuku:stop</code></td><td>No payload; scheduling stops</td></tr><tr><td><code>artplayerPluginDanmuku:hide</code></td><td>No payload; layer hidden</td></tr><tr><td><code>artplayerPluginDanmuku:show</code></td><td>No payload; layer shown</td></tr><tr><td><code>artplayerPluginDanmuku:reset</code></td><td>No payload; displayed items reset</td></tr><tr><td><code>artplayerPluginDanmuku:destroy</code></td><td>No payload; plugin destroyed</td></tr><tr><td><code>artplayerPluginDanmuku:points</code></td><td>Application-sent custom points for the heatmap</td></tr></tbody></table><p>Events are not replayed to later listeners. In particular, an initially empty array can finish loading during construction. Subscribe before invoking a later <code>load()</code> if you need to observe its completion event. Use <code>$ref.textContent</code> when adding text in a <code>visible</code> handler.</p><h2 id="typescript" tabindex="-1">TypeScript <a class="header-anchor" href="#typescript" aria-label="Permalink to &quot;TypeScript&quot;">​</a></h2><p>The root and <code>/legacy</code> entrypoints keep the npm 5.3.0 declaration shapes for compatibility, including historical inaccuracies about return values. The current branch adds <code>/runtime</code> for accurate types while loading the same runtime factory:</p><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;artplayer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> danmuku </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;artplayer-plugin-danmuku/runtime&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { RuntimeOption, Point, EventMap } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;artplayer-plugin-danmuku/runtime&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> option</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> RuntimeOption</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { danmuku: [], heatmap: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> points</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Point</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]];</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> onError</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[error]: EventMap[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;artplayerPluginDanmuku:error&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(error);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#player&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, plugins: [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">danmuku</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(option)] });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;artplayerPluginDanmuku:error&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, onError);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>The explicit <code>EventMap</code> describes payloads; it does not augment the core&#39;s historical event declarations automatically. The factory also exposes the existing <code>icons</code> object for customization. Package <code>README.md</code> and <code>ARCHITECTURE.md</code> describe module ownership, maintenance commands and remaining device/combination validation.</p></div></div></main><footer class="VPDocFooter" data-v-ef3a4dda data-v-07d71ff1><!--[--><!--]--><div class="edit-info" data-v-07d71ff1><div class="edit-link" data-v-07d71ff1><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-vitepress/docs/en/plugin/danmuku.md" target="_blank" rel="noreferrer" data-v-07d71ff1><!--[--><span class="vpi-square-pen edit-link-icon" data-v-07d71ff1></span> Edit this page on GitHub<!--]--></a></div><div class="last-updated" data-v-07d71ff1><p class="VPLastUpdated" data-v-07d71ff1 data-v-e95db471>Last updated: <time datetime="2026-09-15T08:45:35.000Z" data-v-e95db471></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-07d71ff1><span class="visually-hidden" id="doc-footer-aria-label" data-v-07d71ff1>Pager</span><div class="pager" data-v-07d71ff1><a class="VPLink link pager-link prev" href="/document/en/advanced/plugin.html" data-v-07d71ff1><!--[--><span class="desc" data-v-07d71ff1>Previous page</span><span class="title" data-v-07d71ff1>Writing Plugin</span><!--]--></a></div><div class="pager" data-v-07d71ff1><a class="VPLink link vp-external-link-icon pager-link next" href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&amp;example=ads" target="_blank" rel="noreferrer" data-v-07d71ff1><!--[--><span class="desc" data-v-07d71ff1>Next page</span><span class="title" data-v-07d71ff1>Advertise</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"advanced_built-in.md\":\"DbXkhR8l\",\"advanced_class.md\":\"BE9Wp7q6\",\"advanced_event.md\":\"DoIgqIU9\",\"advanced_global.md\":\"Db4VcykV\",\"advanced_plugin.md\":\"CVp3Oe2x\",\"advanced_property.md\":\"C_nOKniE\",\"component_contextmenu.md\":\"lsIURdc3\",\"component_controls.md\":\"CKAl0l5Z\",\"component_layers.md\":\"D34Y4OkH\",\"component_setting.md\":\"BwCpY3NU\",\"en_advanced_built-in.md\":\"yQHjIPvf\",\"en_advanced_class.md\":\"DklNHOdd\",\"en_advanced_event.md\":\"opkwpdYa\",\"en_advanced_global.md\":\"C8Y_RPho\",\"en_advanced_plugin.md\":\"C22jhoxt\",\"en_advanced_property.md\":\"BBsrm5xX\",\"en_component_contextmenu.md\":\"BZMIBA5Z\",\"en_component_controls.md\":\"CzJX3V-W\",\"en_component_layers.md\":\"CMe9ljjt\",\"en_component_setting.md\":\"BEB18u4V\",\"en_index.md\":\"BBeGRjus\",\"en_plugin_audio-track.md\":\"Xma2a2v1\",\"en_plugin_danmuku.md\":\"BA2ZgDal\",\"en_plugin_dash-control.md\":\"CbDDZFkI\",\"en_plugin_hls-control.md\":\"D-g42K7T\",\"en_plugin_vtt-thumbnail.md\":\"D4KIZyUV\",\"en_start_i18n.md\":\"DxgNQ6qb\",\"en_start_option.md\":\"CTPFIwzU\",\"index.md\":\"CvYUO2aO\",\"plugin_audio-track.md\":\"KDB-Z6pp\",\"plugin_danmuku.md\":\"NvAEp3Xn\",\"plugin_dash-control.md\":\"zyZmCxY4\",\"plugin_hls-control.md\":\"IVFa-2v4\",\"plugin_vtt-thumbnail.md\":\"DCY21cNd\",\"start_i18n.md\":\"D_Yw7TSy\",\"start_option.md\":\"DRwrMHeQ\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Artplayer.js\",\"description\":\"ArtPlayer.js is a modern and full featured HTML5 video player\",\"base\":\"/document/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":\"dark\",\"themeConfig\":{\"siteTitle\":\"Artplayer.js\",\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"中文版\",\"link\":\"/\"},{\"text\":\"English Docs\",\"link\":\"/en/\",\"activeMatch\":\"/en/\"},{\"text\":\"Online Editor\",\"link\":\"https://artplayer.org\"},{\"text\":\"🤖LLMs\",\"link\":\"https://artplayer.org/llms.txt\"},{\"text\":\"5.3.x\",\"items\":[{\"text\":\"Changelog\",\"link\":\"https://github.com/zhw2590582/ArtPlayer/blob/master/CHANGELOG.md\"},{\"text\":\"Donation\",\"link\":\"https://github.com/zhw2590582/ArtPlayer#donations\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/zhw2590582/ArtPlayer\"}],\"sidebar\":{\"/\":[{\"text\":\"开始\",\"collapsible\":true,\"items\":[{\"text\":\"安装使用\",\"link\":\"/\"},{\"text\":\"基础选项\",\"link\":\"/start/option\"},{\"text\":\"语言设置\",\"link\":\"/start/i18n\"}]},{\"text\":\"组件\",\"collapsible\":true,\"items\":[{\"text\":\"业务层\",\"link\":\"/component/layers\"},{\"text\":\"控制器\",\"link\":\"/component/controls\"},{\"text\":\"右键菜单\",\"link\":\"/component/contextmenu\"},{\"text\":\"设置面板\",\"link\":\"/component/setting\"}]},{\"text\":\"高级\",\"collapsible\":true,\"items\":[{\"text\":\"实例属性\",\"link\":\"/advanced/property\"},{\"text\":\"高级属性\",\"link\":\"/advanced/built-in\"},{\"text\":\"静态属性\",\"link\":\"/advanced/class\"},{\"text\":\"全局属性\",\"link\":\"/advanced/global\"},{\"text\":\"实例事件\",\"link\":\"/advanced/event\"},{\"text\":\"编写插件\",\"link\":\"/advanced/plugin\"}]},{\"text\":\"插件\",\"collapsible\":true,\"items\":[{\"text\":\"🎉 弹幕库\",\"link\":\"/plugin/danmuku\"},{\"text\":\"弹幕遮罩\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js%0A./uncompiled/artplayer-plugin-danmuku-mask/index.js&example=danmuku.mask\"},{\"text\":\"视频广告\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads\"},{\"text\":\"Iframe 控制\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-tool-iframe/index.js&example=iframe\"},{\"text\":\"HLS 控制\",\"link\":\"/plugin/hls-control\"},{\"text\":\"DASH 控制\",\"link\":\"/plugin/dash-control\"},{\"text\":\"VTT 缩略图\",\"link\":\"/plugin/vtt-thumbnail\"},{\"text\":\"多重字幕\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-multiple-subtitles/index.js&example=multiple.subtitles\"},{\"text\":\"ASS 字幕 - JASSUB\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-jassub/index.js&example=jassub\"},{\"text\":\"Chromecast\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chromecast/index.js&example=chromecast\"},{\"text\":\"VAST 广告\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vast/index.js&example=vast\"},{\"text\":\"视频章节\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chapter/index.js&example=chapter\"},{\"text\":\"视频背光\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ambilight/index.js&example=ambilight\"},{\"text\":\"文档画中画\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-document-pip/index.js&example=document.pip\"},{\"text\":\"独立音轨\",\"link\":\"/plugin/audio-track\"}]},{\"text\":\"第三方库\",\"collapsible\":true,\"items\":[{\"text\":\"hls.js\",\"link\":\"https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js&example=hls\"},{\"text\":\"flv.js\",\"link\":\"https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js&example=flv\"},{\"text\":\"dash.js\",\"link\":\"https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js&example=dash\"},{\"text\":\"mpegts.js\",\"link\":\"https://artplayer.org/?libs=https://cdn.jsdelivr.net/npm/mpegts.js@1.7.3/dist/mpegts.min.js&example=mpegts\"},{\"text\":\"webtorrent.js\",\"link\":\"https://artplayer.org/?libs=https://cdn.jsdelivr.net/npm/webtorrent@1/webtorrent.min.js&example=webtorrent\"}]},{\"text\":\"代理\",\"collapsible\":true,\"items\":[{\"text\":\"Canvas\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-proxy-canvas/index.js&example=canvas\"},{\"text\":\"Mediabunny\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-proxy-mediabunny/index.js&example=mediabunny\"}]}],\"/en/\":[{\"text\":\"Quick start\",\"collapsible\":true,\"items\":[{\"text\":\"Install\",\"link\":\"/en/\"},{\"text\":\"Option\",\"link\":\"/en/start/option\"},{\"text\":\"Language\",\"link\":\"/en/start/i18n\"}]},{\"text\":\"Component\",\"collapsible\":true,\"items\":[{\"text\":\"Layers\",\"link\":\"/en/component/layers\"},{\"text\":\"Controls\",\"link\":\"/en/component/controls\"},{\"text\":\"Contextmenu\",\"link\":\"/en/component/contextmenu\"},{\"text\":\"Setting\",\"link\":\"/en/component/setting\"}]},{\"text\":\"Advanced\",\"collapsible\":true,\"items\":[{\"text\":\"Instance Property\",\"link\":\"/en/advanced/property\"},{\"text\":\"Advanced Property\",\"link\":\"/en/advanced/built-in\"},{\"text\":\"Static Property\",\"link\":\"/en/advanced/class\"},{\"text\":\"Global Property\",\"link\":\"/en/advanced/global\"},{\"text\":\"Instance Event\",\"link\":\"/en/advanced/event\"},{\"text\":\"Writing Plugin\",\"link\":\"/en/advanced/plugin\"}]},{\"text\":\"Plugins\",\"collapsible\":true,\"items\":[{\"text\":\"Danmuku\",\"link\":\"/en/plugin/danmuku\"},{\"text\":\"Advertise\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads\"},{\"text\":\"Iframe Control\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-tool-iframe/index.js&example=iframe\"},{\"text\":\"HLS Control\",\"link\":\"/en/plugin/hls-control\"},{\"text\":\"DASH Control\",\"link\":\"/en/plugin/dash-control\"},{\"text\":\"VTT Thumbnail\",\"link\":\"/en/plugin/vtt-thumbnail\"},{\"text\":\"Multiple Subtitles\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-multiple-subtitles/index.js&example=multiple.subtitles\"},{\"text\":\"ASS Subtitle - JASSUB\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-jassub/index.js&example=jassub\"},{\"text\":\"Chromecast\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chromecast/index.js&example=chromecast\"},{\"text\":\"VAST\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vast/index.js&example=vast\"},{\"text\":\"Video Chapters\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chapter/index.js&example=chapter\"},{\"text\":\"Video Ambilight\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ambilight/index.js&example=ambilight\"},{\"text\":\"Document PIP\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-document-pip/index.js&example=document.pip\"},{\"text\":\"Audio Track\",\"link\":\"/en/plugin/audio-track\"}]},{\"text\":\"Libraries\",\"collapsible\":true,\"items\":[{\"text\":\"hls.js\",\"link\":\"https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js&example=hls\"},{\"text\":\"flv.js\",\"link\":\"https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js&example=flv\"},{\"text\":\"dash.js\",\"link\":\"https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js&example=dash\"},{\"text\":\"mpegts.js\",\"link\":\"https://artplayer.org/?libs=https://cdn.jsdelivr.net/npm/mpegts.js@1.7.3/dist/mpegts.min.js&example=mpegts\"},{\"text\":\"webtorrent.js\",\"link\":\"https://artplayer.org/?libs=https://cdn.jsdelivr.net/npm/webtorrent@1/webtorrent.min.js&example=webtorrent\"}]},{\"text\":\"Proxys\",\"collapsible\":true,\"items\":[{\"text\":\"Canvas\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-proxy-canvas/index.js&example=canvas\"},{\"text\":\"Mediabunny\",\"link\":\"https://artplayer.org/?libs=./uncompiled/artplayer-proxy-mediabunny/index.js&example=mediabunny\"}]}]},\"editLink\":{\"pattern\":\"https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-vitepress/docs/:path\",\"text\":\"Edit this page on GitHub\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>