Files
ArtPlayer/docs/document/plugin/danmuku-mask.html

64 lines
56 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>弹幕遮罩 | Artplayer.js</title>
<meta name="description" content="ArtPlayer.js is a modern and full featured HTML5 video player">
<meta name="generator" content="VitePress v1.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.CVqqgDvz.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.BNnkd4s0.js">
<link rel="modulepreload" href="/document/assets/chunks/framework.xxfEszSJ.js">
<link rel="modulepreload" href="/document/assets/plugin_danmuku-mask.md.DuAZXCsK.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" 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>6.0.0 (unreleased)</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>开始</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/" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>安装使用</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/start/option.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>基础选项</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/start/i18n.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>语言设置</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>组件</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/component/layers.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>业务层</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/component/controls.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>控制器</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/component/contextmenu.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>右键菜单</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/component/setting.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>设置面板</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>高级</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/advanced/property.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>实例属性</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/advanced/built-in.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>高级属性</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/advanced/class.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>静态属性</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/advanced/global.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>全局属性</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/advanced/event.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>实例事件</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/advanced/plugin.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>编写插件</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>插件</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/plugin/danmuku.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>🎉 弹幕库</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/plugin/danmuku-mask.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>弹幕遮罩</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/plugin/ads.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>视频广告</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/plugin/hls-control.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>HLS 控制</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/plugin/dash-control.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>DASH 控制</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/plugin/vtt-thumbnail.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>VTT 缩略图</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/plugin/auto-thumbnail.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>自动缩略图</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/plugin/multiple-subtitles.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>多重字幕</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/plugin/jassub.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>ASS 字幕 - 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 link" href="/document/plugin/chromecast.html" 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 link" href="/document/plugin/vast.html" 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 link" href="/document/plugin/chapter.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>视频章节</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/plugin/ambilight.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>视频背光</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/plugin/document-pip.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>文档画中画</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/plugin/asr.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>音频采集与识别字幕</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/plugin/audio-track.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>独立音轨</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>工具</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/tool/iframe.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>Iframe 控制</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/tool/thumbnail.html" data-v-2e0476bc><!--[--><p class="text" data-v-2e0476bc>本地视频缩略图</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>第三方库</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>代理</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/proxy/canvas.html" 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 link" href="/document/proxy/mediabunny.html" 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_plugin_danmuku-mask" data-v-ef3a4dda><div><h1 id="弹幕遮罩" tabindex="-1">弹幕遮罩 <a class="header-anchor" href="#弹幕遮罩" aria-label="Permalink to &quot;弹幕遮罩&quot;">​</a></h1><p><a href="./../en/plugin/danmuku-mask.html">English</a></p><p>通过人体分割结果生成 CSS 遮罩,让弹幕避开视频中的人物区域。插件处理核心的 <code>.art-danmuku</code> 层,不修改弹幕队列、条目或视频画面。本页描述未发布重构分支,不将在线示例或导航验证视为模型效果验收。</p><h2 id="安装和示例" tabindex="-1">安装和示例 <a class="header-anchor" href="#安装和示例" aria-label="Permalink to &quot;安装和示例&quot;">​</a></h2><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 style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-danmuku-mask</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></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;">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;"> artplayerPluginDanmuku </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;artplayer-plugin-danmuku&#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;"> artplayerPluginDanmukuMask </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;artplayer-plugin-danmuku-mask&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>script 用法先加载核心及两个插件的 dist 文件,全局名分别为 <code>artplayerPluginDanmuku</code>、<code>artplayerPluginDanmukuMask</code>。<a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js%0A./uncompiled/artplayer-plugin-danmuku-mask/index.js&amp;example=danmuku.mask" target="_blank" rel="noreferrer">原在线示例</a>按此顺序注册,并从站点自己的路径加载 MediaPipe 资源:</p><div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js
./uncompiled/artplayer-plugin-danmuku-mask/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:#6A737D;--shiki-dark:#6A737D;">// npm i artplayer-plugin-danmuku-mask</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import artplayerPluginDanmukuMask from &#39;artplayer-plugin-danmuku-mask&#39;;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i @mediapipe/selfie_segmentation</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 把 node_modules/@mediapipe/selfie_segmentation 目录复制到你的项目下</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;"> 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/steve-jobs.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> autoSize: </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;"> fullscreen: </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;"> 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;"> autoOrientation: </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>
<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: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/danmuku.xml&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }),</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> artplayerPluginDanmukuMask</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> solutionPath: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/@mediapipe/selfie_segmentation&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><p>部署时确保 solutionPath 下有匹配的 MediaPipe 资源。复制目录本身不证明所有脚本、模型、WASM、网络策略和浏览器能力都可用。</p><h2 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to &quot;配置&quot;">​</a></h2><p>配置可省略,注册时读取并保存这些值:</p><table tabindex="0"><thead><tr><th>字段</th><th>类型 / 默认值</th><th>实际用途</th></tr></thead><tbody><tr><td><code>solutionPath</code></td><td><code>string</code></td><td>SDK 资源根路径;默认 CDN 未固定版本</td></tr><tr><td><code>modelSelection</code></td><td><code>number</code> / <code>1</code></td><td>历史转发字段,不能据此认为当前模型已切换</td></tr><tr><td><code>smoothSegmentation</code></td><td><code>boolean</code> / <code>true</code></td><td>历史转发字段,显式 false 保留</td></tr><tr><td><code>minDetectionConfidence</code></td><td><code>number</code> / <code>0.5</code></td><td>历史转发字段</td></tr><tr><td><code>minTrackingConfidence</code></td><td><code>number</code> / <code>0.5</code></td><td>历史转发字段</td></tr><tr><td><code>selfieMode</code></td><td><code>boolean</code> / <code>false</code></td><td>历史转发字段</td></tr><tr><td><code>drawContour</code></td><td><code>boolean</code> / <code>false</code></td><td>传给二值遮罩转换</td></tr><tr><td><code>foregroundThreshold</code></td><td><code>number</code> / <code>0.5</code></td><td>传给前景阈值转换</td></tr><tr><td><code>opacity</code></td><td><code>number</code> / <code>1</code></td><td>传给 SDK drawMask,不是直接设置弹幕层 opacity</td></tr><tr><td><code>maskBlurAmount</code></td><td><code>number</code> / <code>3</code></td><td>传给 SDK drawMask 的模糊量</td></tr></tbody></table><p>solutionPath 默认指向未固定版本的 <a href="https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation" target="_blank" rel="noreferrer">jsDelivr MediaPipe 资源根目录</a>。</p><p>除 smoothSegmentation 的 undefined 判断外,默认值沿用 <code>value || default</code>。例如 modelSelection、opacity、threshold、blur 的 0 会回退默认值,不能用于关闭功能;停止遮罩使用 stop。</p><p>当前固定选择 <code>runtime: &#39;mediapipe&#39;</code> 和 <code>modelType: &#39;general&#39;</code>。已安装的 adapter 把 general 映射为 modelSelection 0,并忽略部分额外转发字段;保留参数不是承诺这些字段都会改变推理。TensorFlow 后端先尝试 webgl,只有拒绝时才尝试 cpu;这也不能证明 MediaPipe 实际使用哪种推理后端。</p><h2 id="start、stop-与失败" tabindex="-1">start、stop 与失败 <a class="header-anchor" href="#start、stop-与失败" aria-label="Permalink to &quot;start、stop 与失败&quot;">​</a></h2><p>注册同步返回 <code>{ name: &#39;artplayerPluginDanmukuMask&#39;, start, stop }</code>,可从 <code>art.plugins.artplayerPluginDanmukuMask</code> 访问。ready 自动启动;如果在 ready 之后安装,需要自行调用 start。</p><table tabindex="0"><thead><tr><th>方法</th><th>行为</th></tr></thead><tbody><tr><td><code>start()</code></td><td>返回 <code>Promise&lt;void&gt;</code>;初始化并启动调度,不等待第一张完整遮罩</td></tr><tr><td><code>stop()</code></td><td>同步返回 undefined;取消当前调度并立刻将层的 maskImage 设为 none</td></tr></tbody></table><p>重复 start 不创建重叠推理循环。stop 可在初始化过程中调用,使公共 start 及时结算;不可取消的 SDK 工作仍被观察,迟到结果不再写入遮罩。之后 start 等待旧任务和释放过程结束再重新初始化,不以多个模型并行掩盖停止问题。</p><p>模型创建失败会记录错误且 start 可正常结算,但没有可用模型;可显式再次 start 重试。后端或必要 DOM/Canvas 初始化失败仍可能拒绝 start。自动 ready 启动会记录拒绝。推理或像素读取失败记录错误并继续下一次调度,保留上一张可用遮罩。</p><p>只在视频播放、未结束且有有效尺寸时执行分割。结果经二值遮罩、drawMask 和 Canvas 像素转换生成 PNG data URL,写入整层 maskImage。没有人物结果时保留之前的遮罩;遮罩精度、性能和跨域像素访问需要实际视频验证。</p><h2 id="生命周期和类型" tabindex="-1">生命周期和类型 <a class="header-anchor" href="#生命周期和类型" aria-label="Permalink to &quot;生命周期和类型&quot;">​</a></h2><p>播放器销毁停止运行并移除 ready/destroy 监听器。私有画布归插件所有,SDK 工作完成后重置其尺寸并释放模型。stop 不是 GPU 内存回收完成的 Promise;SDK 的私有资源实际释放完成仍需独立证据。插件不提供公开 destroy、update 或新事件,也不接管其他应用的全局 TensorFlow 生命周期。</p><p>根和 <code>/legacy</code> 保留历史声明:可选配置、同步注册、异步 start 和同步 stop;没有 <code>/runtime</code> 子路径。Option/Result 是声明内部类型,可通过工厂提取。下面仅展示 NodeNext ESM 下的类型提取,不执行 <code>.default</code> 调用:</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:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MaskModule </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;artplayer-plugin-danmuku-mask&#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;">type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MaskFactory</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> typeof</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MaskModule.default;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MaskOptions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Parameters</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">MaskFactory</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MaskResult</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ReturnType</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">ReturnType</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">MaskFactory</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&gt;;</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;"> options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MaskOptions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { solutionPath: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/@mediapipe/selfie_segmentation&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></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;"> restartMask</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">mask</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MaskResult</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt; {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> mask.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">stop</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;"> mask.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">start</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>保留的 NodeNext 根类型有模块命名空间行为;这不代表当前运行时工厂有 <code>.default</code> 属性。当前 CommonJS 工厂直接调用,ESM 运行时使用默认导出;不要从类型命名空间推断运行时别名。旧版导出形状、模型真实运行和真机性能各自独立验证。</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/plugin/danmuku-mask.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-15T19:37: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/plugin/danmuku.html" data-v-07d71ff1><!--[--><span class="desc" data-v-07d71ff1>Previous page</span><span class="title" data-v-07d71ff1>🎉 弹幕库</span><!--]--></a></div><div class="pager" data-v-07d71ff1><a class="VPLink link pager-link next" href="/document/plugin/ads.html" data-v-07d71ff1><!--[--><span class="desc" data-v-07d71ff1>Next page</span><span class="title" data-v-07d71ff1>视频广告</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"advanced_built-in.md\":\"C21J11LW\",\"advanced_class.md\":\"D2pZ5HR2\",\"advanced_event.md\":\"7BJRbghf\",\"advanced_global.md\":\"7lzYspte\",\"advanced_plugin.md\":\"CMpg85CT\",\"advanced_property.md\":\"DThbIwPo\",\"component_contextmenu.md\":\"q3CUq7tf\",\"component_controls.md\":\"rXlEfqlM\",\"component_layers.md\":\"ng2y5lRx\",\"component_setting.md\":\"DzSNRgF2\",\"en_advanced_built-in.md\":\"CEhu35vH\",\"en_advanced_class.md\":\"t5pe4-Hy\",\"en_advanced_event.md\":\"BOHBlG_Y\",\"en_advanced_global.md\":\"OawZ0vlZ\",\"en_advanced_plugin.md\":\"dG7U736p\",\"en_advanced_property.md\":\"CwqZcLuG\",\"en_component_contextmenu.md\":\"m0FODHh_\",\"en_component_controls.md\":\"CDH42Jtc\",\"en_component_layers.md\":\"DnWSTBIg\",\"en_component_setting.md\":\"DFfOVhnI\",\"en_index.md\":\"BBeGRjus\",\"en_plugin_ads.md\":\"BWhlqED9\",\"en_plugin_ambilight.md\":\"BIiOdZed\",\"en_plugin_asr.md\":\"DRBadoM6\",\"en_plugin_audio-track.md\":\"D4sy3hjB\",\"en_plugin_auto-thumbnail.md\":\"B4xf1kbN\",\"en_plugin_chapter.md\":\"Cj9k0GUZ\",\"en_plugin_chromecast.md\":\"f3zGiPeh\",\"en_plugin_danmuku-mask.md\":\"BlOM0Hxl\",\"en_plugin_danmuku.md\":\"CoPuwRfR\",\"en_plugin_dash-control.md\":\"By5hBqnJ\",\"en_plugin_document-pip.md\":\"Dk7dXmtu\",\"en_plugin_hls-control.md\":\"DI6n1NXK\",\"en_plugin_jassub.md\":\"B3qYHOri\",\"en_plugin_multiple-subtitles.md\":\"D13skM4m\",\"en_plugin_vast.md\":\"DY-xXj0Z\",\"en_plugin_vtt-thumbnail.md\":\"Y25-LZK8\",\"en_proxy_canvas.md\":\"DEZ3Qm1R\",\"en_proxy_mediabunny.md\":\"6_ZAU5hs\",\"en_start_i18n.md\":\"DxgNQ6qb\",\"en_start_option.md\":\"DcpaFLzR\",\"en_tool_iframe.md\":\"vqKTz6Jn\",\"en_tool_thumbnail.md\":\"CYSRU7kz\",\"index.md\":\"CvYUO2aO\",\"plugin_ads.md\":\"CSyEjgn0\",\"plugin_ambilight.md\":\"ChmjnhB2\",\"plugin_asr.md\":\"B1LNTxu0\",\"plugin_audio-track.md\":\"xXnVbPG8\",\"plugin_auto-thumbnail.md\":\"uVTSXyks\",\"plugin_chapter.md\":\"B_wxldhK\",\"plugin_chromecast.md\":\"COBfYOhI\",\"plugin_danmuku-mask.md\":\"DuAZXCsK\",\"plugin_danmuku.md\":\"CknGHRRA\",\"plugin_dash-control.md\":\"DGIVabzn\",\"plugin_document-pip.md\":\"DmibV5MD\",\"plugin_hls-control.md\":\"_mbfRiWn\",\"plugin_jassub.md\":\"plPiOu52\",\"plugin_multiple-subtitles.md\":\"B7ssJkhA\",\"plugin_vast.md\":\"DXoWKK9-\",\"plugin_vtt-thumbnail.md\":\"SpQ1vygQ\",\"proxy_canvas.md\":\"DZ3KjhXs\",\"proxy_mediabunny.md\":\"8OVtZiO-\",\"start_i18n.md\":\"D_Yw7TSy\",\"start_option.md\":\"CuBDvz6i\",\"tool_iframe.md\":\"gaYYO6Ds\",\"tool_thumbnail.md\":\"Bpybkc36\"}");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\":\"6.0.0 (unreleased)\",\"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\":\"/plugin/danmuku-mask\"},{\"text\":\"视频广告\",\"link\":\"/plugin/ads\"},{\"text\":\"HLS 控制\",\"link\":\"/plugin/hls-control\"},{\"text\":\"DASH 控制\",\"link\":\"/plugin/dash-control\"},{\"text\":\"VTT 缩略图\",\"link\":\"/plugin/vtt-thumbnail\"},{\"text\":\"自动缩略图\",\"link\":\"/plugin/auto-thumbnail\"},{\"text\":\"多重字幕\",\"link\":\"/plugin/multiple-subtitles\"},{\"text\":\"ASS 字幕 - JASSUB\",\"link\":\"/plugin/jassub\"},{\"text\":\"Chromecast\",\"link\":\"/plugin/chromecast\"},{\"text\":\"VAST 广告\",\"link\":\"/plugin/vast\"},{\"text\":\"视频章节\",\"link\":\"/plugin/chapter\"},{\"text\":\"视频背光\",\"link\":\"/plugin/ambilight\"},{\"text\":\"文档画中画\",\"link\":\"/plugin/document-pip\"},{\"text\":\"音频采集与识别字幕\",\"link\":\"/plugin/asr\"},{\"text\":\"独立音轨\",\"link\":\"/plugin/audio-track\"}]},{\"text\":\"工具\",\"collapsible\":true,\"items\":[{\"text\":\"Iframe 控制\",\"link\":\"/tool/iframe\"},{\"text\":\"本地视频缩略图\",\"link\":\"/tool/thumbnail\"}]},{\"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\":\"/proxy/canvas\"},{\"text\":\"Mediabunny\",\"link\":\"/proxy/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\":\"Danmuku Mask\",\"link\":\"/en/plugin/danmuku-mask\"},{\"text\":\"Advertise\",\"link\":\"/en/plugin/ads\"},{\"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\":\"Automatic Thumbnails\",\"link\":\"/en/plugin/auto-thumbnail\"},{\"text\":\"Multiple Subtitles\",\"link\":\"/en/plugin/multiple-subtitles\"},{\"text\":\"ASS Subtitle - JASSUB\",\"link\":\"/en/plugin/jassub\"},{\"text\":\"Chromecast\",\"link\":\"/en/plugin/chromecast\"},{\"text\":\"VAST\",\"link\":\"/en/plugin/vast\"},{\"text\":\"Video Chapters\",\"link\":\"/en/plugin/chapter\"},{\"text\":\"Video Ambilight\",\"link\":\"/en/plugin/ambilight\"},{\"text\":\"Document PIP\",\"link\":\"/en/plugin/document-pip\"},{\"text\":\"Audio Capture and Subtitles\",\"link\":\"/en/plugin/asr\"},{\"text\":\"Audio Track\",\"link\":\"/en/plugin/audio-track\"}]},{\"text\":\"Tools\",\"collapsible\":true,\"items\":[{\"text\":\"Iframe Control\",\"link\":\"/en/tool/iframe\"},{\"text\":\"Local Video Thumbnails\",\"link\":\"/en/tool/thumbnail\"}]},{\"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\":\"Proxies\",\"collapsible\":true,\"items\":[{\"text\":\"Canvas\",\"link\":\"/en/proxy/canvas\"},{\"text\":\"Mediabunny\",\"link\":\"/en/proxy/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>