Files
ArtPlayer/docs/document/plugin/auto-thumbnail.html
T

50 lines
52 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>自动缩略图 | 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.CghJeLiW.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.gKBuAxio.js">
<link rel="modulepreload" href="/document/assets/chunks/framework.xxfEszSJ.js">
<link rel="modulepreload" href="/document/assets/plugin_auto-thumbnail.md.uVTSXyks.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_auto-thumbnail" 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/auto-thumbnail.html">English</a></p><p>使用独立视频元素读取画面,在浏览器内逐步生成 JPEG 雪碧图,并更新播放器进度条的缩略图配置。本页描述未发布的重构分支;在线示例及未固定版本的 npm/CDN 包不等于当前候选。</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-auto-thumbnail</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;"> artplayerPluginAutoThumbnail </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;artplayer-plugin-auto-thumbnail&#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></div></div><p>使用 script 时先加载 ArtPlayer,再加载 <code>dist/artplayer-plugin-auto-thumbnail.js</code>,全局名为 <code>artplayerPluginAutoThumbnail</code>。以下代码保留<a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-auto-thumbnail/index.js&amp;example=auto.thumbnail" target="_blank" rel="noreferrer">原在线示例</a>。工厂参数对象必填,使用 <code>{}</code> 选择默认值。</p><div className="run-code" data-libs="./uncompiled/artplayer-plugin-auto-thumbnail/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-auto-thumbnail</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import artplayerPluginAutoThumbnail from &#39;artplayer-plugin-auto-thumbnail&#39;;</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/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;"> artplayerPluginAutoThumbnail</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> //</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></div></div><h2 id="配置与生成方式" tabindex="-1">配置与生成方式 <a class="header-anchor" href="#配置与生成方式" aria-label="Permalink to &quot;配置与生成方式&quot;">​</a></h2><table tabindex="0"><thead><tr><th>字段</th><th>类型</th><th>默认值</th><th>含义</th></tr></thead><tbody><tr><td><code>url</code></td><td><code>string</code></td><td>当前 <code>art.option.url</code></td><td>独立解码器读取的媒体地址;显式非空地址优先</td></tr><tr><td><code>width</code></td><td><code>number</code></td><td><code>160</code></td><td>每格缩略图宽度,单位像素</td></tr><tr><td><code>number</code></td><td><code>number</code></td><td><code>100</code></td><td>目标采样数量,通常使用正整数</td></tr><tr><td><code>scale</code></td><td><code>number</code></td><td><code>1</code></td><td>传给播放器的预览显示缩放,不降低生成画布尺寸</td></tr><tr><td><code>height</code></td><td><code>number</code></td><td>按视频宽高比计算</td><td>历史参数,实际忽略;精确 runtime 类型接受它</td></tr></tbody></table><p>这些默认值沿用 <code>value || default</code> 规则,例如 <code>width: 0</code> 回退为 160。width 和 number 回退后需要为可转换成有限正数的值;旧 JavaScript 数值字符串和小数计数行为保留,但类型示例使用数字与正整数。生成高度为 <code>Math.floor(width * videoHeight / videoWidth)</code>,每行固定十列。媒体必须有有限的正时长和尺寸,不适用于直播无限时长。</p><p>采样时刻为 <code>duration * index / number</code>,从 index 0 开始,不包含媒体终点。时长与画布尺寸在独立视频 metadata 时固定;每次画出一格后编码整张 JPEG,再发布新的 <code>art.thumbnails</code> 配置。因此生成期间后面的格子可能尚未填充,并不是所有缩略图同时就绪。</p><p>较大的 width 和 number 会增加画布、解码和反复编码成本;尺寸校验不是浏览器内存预算保证。选择适合视频长度和目标设备的配置,或使用预先制作的 <a href="./vtt-thumbnail.html">VTT 缩略图</a>。</p><h2 id="注册、切源和清理" tabindex="-1">注册、切源和清理 <a class="header-anchor" href="#注册、切源和清理" aria-label="Permalink to &quot;注册、切源和清理&quot;">​</a></h2><p>工厂返回异步注册函数,结果仅包含 <code>name: &#39;artplayerPluginAutoThumbnail&#39;</code>。注册 Promise 在安装播放器事件后完成,不等待缩略图生成,也不表示媒体已成功读取。没有公开的进度、生成完成、update、stop 或 destroy 方法。</p><p>每次 <code>video:loadedmetadata</code> 启动新一轮提取,并重新读取原配置对象;之后修改原对象会影响下一轮。插件不补发安装之前已经过去的 metadata 事件。<code>restart</code> 取消旧提取,后续 metadata 才启动新任务。旧的异步帧和编码回调不能覆盖新任务。</p><p>独立解码器的 metadata、每帧就绪和每次 JPEG 编码各有 30 秒等待上限,不是整个任务的总时限。媒体、画布或编码失败会清理当前任务,通过 <code>console.warn</code> 报告,并保留最后一张可用预览;已完成的注册 Promise 不会因此重新拒绝。</p><p>完成或取消后释放独立视频与画布;最后的图片 URL 保留至被新的可用图替换或播放器销毁。只撤销插件生成的 URL,不撤销应用自己的外部缩略图地址。销毁同时移除监听器;直接调用已保留的注册函数且播放器已销毁时,只返回名称,不分配解码器,这不改变核心 <code>plugins.add()</code> 的销毁检查。</p><h2 id="媒体访问和浏览器边界" tabindex="-1">媒体访问和浏览器边界 <a class="header-anchor" href="#媒体访问和浏览器边界" aria-label="Permalink to &quot;媒体访问和浏览器边界&quot;">​</a></h2><p>独立视频固定使用 <code>crossOrigin = &#39;anonymous&#39;</code>,静音且不主动播放。媒体必须允许浏览器原生读取和 Canvas 像素访问,跨域服务需要正确的 CORS 响应。播放器的自定义加载器、SDK、请求头或代理不会自动安装到这个独立解码器;必要时用 <code>url</code> 提供它能直接读取的媒体。</p><p>独立视频会以隐藏但具有渲染尺寸的节点挂到文档中;这不表示新增可见播放器。真实解码和首帧正确性仍依赖浏览器。当前 Windows WebKit 首帧问题尚未完成验收,不能把类型、导航或其它浏览器通过当作该问题已解决,也不代表真实 Safari/手机已验证。</p><h2 id="typescript-兼容入口" tabindex="-1">TypeScript 兼容入口 <a class="header-anchor" href="#typescript-兼容入口" aria-label="Permalink to &quot;TypeScript 兼容入口&quot;">​</a></h2><p>根入口和 <code>/legacy</code> 保留 npm 1.1.0 的同步结果声明,工厂对象必填,根 Option 没有 height。需要实际 Promise、旧 height 参数或 <code>.default</code> 自引用类型时,使用同一实现的 <code>/runtime</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;"> 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;"> autoThumbnail </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;artplayer-plugin-auto-thumbnail/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;"> { Option, Result } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;artplayer-plugin-auto-thumbnail/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;"> options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Option</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">160</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, number: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, scale: </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>
<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;"> registerThumbnails</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</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:#6F42C1;--shiki-dark:#B392F0;">Result</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt; {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> autoThumbnail</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(options)(art); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Registration only, not extraction completion.</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></div></div><p>runtime 导出 <code>Option</code>、<code>Result</code>、<code>Factory</code>、<code>RuntimeFactory</code>;Factory 是普通异步工厂,RuntimeFactory 还描述可写的 <code>.default</code> 自引用。实际 CommonJS 支持直接调用及 <code>.default(...)</code>。更早 1.0.x 的 <code>export =</code> 和 height 声明与 1.1.0 不同,需要旧导入形式时可迁到 runtime 的 <code>import = require</code>。根 NodeNext 模块形状保留,准确的可调用默认导入使用 runtime;经典 Node10 默认导入需要 <code>esModuleInterop</code>。</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/auto-thumbnail.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-15T18:57:15.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/vtt-thumbnail.html" data-v-07d71ff1><!--[--><span class="desc" data-v-07d71ff1>Previous page</span><span class="title" data-v-07d71ff1>VTT 缩略图</span><!--]--></a></div><div class="pager" data-v-07d71ff1><a class="VPLink link pager-link next" href="/document/plugin/multiple-subtitles.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\":\"D-_T2vMZ\",\"advanced_event.md\":\"7BJRbghf\",\"advanced_global.md\":\"7lzYspte\",\"advanced_plugin.md\":\"CMpg85CT\",\"advanced_property.md\":\"CMGtDSgL\",\"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\":\"DgtAHptq\",\"en_advanced_event.md\":\"BOHBlG_Y\",\"en_advanced_global.md\":\"OawZ0vlZ\",\"en_advanced_plugin.md\":\"dG7U736p\",\"en_advanced_property.md\":\"Dirol4Du\",\"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>