mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-12 15:26:16 -08:00
docs(core): [SITE-04] document component lifecycle and selector contracts
This commit is contained in:
Harvey Zhao committed
1 parent
5910c3f179
commit
bb2fec8dd1
110 files changed
+4745
-2334
No files matched your search
@@ -9,9 +9,9 @@
|
||||
<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.DegObb7J.js"></script>
|
||||
<script type="module" src="/document/assets/app.Ctb74BQE.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.BntI3HKS.js">
|
||||
<link rel="modulepreload" href="/document/assets/chunks/theme.DG4k2lxH.js">
|
||||
<link rel="modulepreload" href="/document/assets/chunks/framework.xxfEszSJ.js">
|
||||
<link rel="modulepreload" href="/document/assets/advanced_event.md.DoIgqIU9.lean.js">
|
||||
<script src="/document/main.js"></script>
|
||||
@@ -385,7 +385,7 @@
|
||||
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">art.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'keydown'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(event.code);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="video-canplay" tabindex="-1"><code>video:canplay</code> <a class="header-anchor" href="#video-canplay" aria-label="Permalink to "`video:canplay`""></a></h2><p>浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容</p><h2 id="video-canplaythrough" tabindex="-1"><code>video:canplaythrough</code> <a class="header-anchor" href="#video-canplaythrough" aria-label="Permalink to "`video:canplaythrough`""></a></h2><p>浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束</p><h2 id="video-complete" tabindex="-1"><code>video:complete</code> <a class="header-anchor" href="#video-complete" aria-label="Permalink to "`video:complete`""></a></h2><p>OfflineAudioContext 渲染完成</p><h2 id="video-durationchange" tabindex="-1"><code>video:durationchange</code> <a class="header-anchor" href="#video-durationchange" aria-label="Permalink to "`video:durationchange`""></a></h2><p>duration 属性的值改变时触发</p><h2 id="video-emptied" tabindex="-1"><code>video:emptied</code> <a class="header-anchor" href="#video-emptied" aria-label="Permalink to "`video:emptied`""></a></h2><p>媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它</p><h2 id="video-ended" tabindex="-1"><code>video:ended</code> <a class="header-anchor" href="#video-ended" aria-label="Permalink to "`video:ended`""></a></h2><p>视频停止播放，因为 media 已经到达结束点</p><h2 id="video-error" tabindex="-1"><code>video:error</code> <a class="header-anchor" href="#video-error" aria-label="Permalink to "`video:error`""></a></h2><p>获取媒体数据时出错，或者资源类型不是受支持的媒体格式</p><h2 id="video-loadeddata" tabindex="-1"><code>video:loadeddata</code> <a class="header-anchor" href="#video-loadeddata" aria-label="Permalink to "`video:loadeddata`""></a></h2><p>media 中的首帧已经完成加载</p><h2 id="video-loadedmetadata" tabindex="-1"><code>video:loadedmetadata</code> <a class="header-anchor" href="#video-loadedmetadata" aria-label="Permalink to "`video:loadedmetadata`""></a></h2><p>已加载元数据</p><h2 id="video-pause" tabindex="-1"><code>video:pause</code> <a class="header-anchor" href="#video-pause" aria-label="Permalink to "`video:pause`""></a></h2><p>播放已暂停</p><h2 id="video-play" tabindex="-1"><code>video:play</code> <a class="header-anchor" href="#video-play" aria-label="Permalink to "`video:play`""></a></h2><p>播放已开始</p><h2 id="video-playing" tabindex="-1"><code>video:playing</code> <a class="header-anchor" href="#video-playing" aria-label="Permalink to "`video:playing`""></a></h2><p>由于缺乏数据而暂停或延迟后，播放准备开始</p><h2 id="video-progress" tabindex="-1"><code>video:progress</code> <a class="header-anchor" href="#video-progress" aria-label="Permalink to "`video:progress`""></a></h2><p>在浏览器加载资源时周期性触发</p><h2 id="video-ratechange" tabindex="-1"><code>video:ratechange</code> <a class="header-anchor" href="#video-ratechange" aria-label="Permalink to "`video:ratechange`""></a></h2><p>播放速率发生变化</p><h2 id="video-seeked" tabindex="-1"><code>video:seeked</code> <a class="header-anchor" href="#video-seeked" aria-label="Permalink to "`video:seeked`""></a></h2><p>跳帧（seek）操作完成</p><h2 id="video-seeking" tabindex="-1"><code>video:seeking</code> <a class="header-anchor" href="#video-seeking" aria-label="Permalink to "`video:seeking`""></a></h2><p>跳帧（seek）操作开始</p><h2 id="video-stalled" tabindex="-1"><code>video:stalled</code> <a class="header-anchor" href="#video-stalled" aria-label="Permalink to "`video:stalled`""></a></h2><p>用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现</p><h2 id="video-suspend" tabindex="-1"><code>video:suspend</code> <a class="header-anchor" href="#video-suspend" aria-label="Permalink to "`video:suspend`""></a></h2><p>媒体数据加载已暂停</p><h2 id="video-timeupdate" tabindex="-1"><code>video:timeupdate</code> <a class="header-anchor" href="#video-timeupdate" aria-label="Permalink to "`video:timeupdate`""><Line truncated
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"advanced_built-in.md\":\"CIVjKsYJ\",\"advanced_class.md\":\"mFaHMUbz\",\"advanced_event.md\":\"DoIgqIU9\",\"advanced_global.md\":\"Db4VcykV\",\"advanced_plugin.md\":\"CVp3Oe2x\",\"advanced_property.md\":\"C_nOKniE\",\"component_contextmenu.md\":\"lsIURdc3\",\"component_controls.md\":\"CKAl0l5Z\",\"component_layers.md\":\"D34Y4OkH\",\"component_setting.md\":\"BwCpY3NU\",\"en_advanced_built-in.md\":\"txnk9ZNg\",\"en_advanced_class.md\":\"B6lEFdN-\",\"en_advanced_event.md\":\"opkwpdYa\",\"en_advanced_global.md\":\"C8Y_RPho\",\"en_advanced_plugin.md\":\"C22jhoxt\",\"en_advanced_property.md\":\"BBsrm5xX\",\"en_component_contextmenu.md\":\"BZMIBA5Z\",\"en_component_controls.md\":\"CzJX3V-W\",\"en_component_layers.md\":\"CMe9ljjt\",\"en_component_setting.md\":\"BEB18u4V\",\"en_index.md\":\"BBeGRjus\",\"en_plugin_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\":\"CTPFIwzU\",\"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\":\"DRwrMHeQ\",\"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\":\"/pLine truncated
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"advanced_built-in.md\":\"CU84dfbv\",\"advanced_class.md\":\"BUBeask0\",\"advanced_event.md\":\"DoIgqIU9\",\"advanced_global.md\":\"Db4VcykV\",\"advanced_plugin.md\":\"CVp3Oe2x\",\"advanced_property.md\":\"C_nOKniE\",\"component_contextmenu.md\":\"Dupw0uKO\",\"component_controls.md\":\"BY4uBGkV\",\"component_layers.md\":\"C-F9ukEQ\",\"component_setting.md\":\"BwCpY3NU\",\"en_advanced_built-in.md\":\"Dh2Z3cEE\",\"en_advanced_class.md\":\"Et00Qeu5\",\"en_advanced_event.md\":\"opkwpdYa\",\"en_advanced_global.md\":\"C8Y_RPho\",\"en_advanced_plugin.md\":\"C22jhoxt\",\"en_advanced_property.md\":\"BBsrm5xX\",\"en_component_contextmenu.md\":\"DTrtp2qD\",\"en_component_controls.md\":\"DO2Cekd6\",\"en_component_layers.md\":\"H1rUk-1l\",\"en_component_setting.md\":\"BEB18u4V\",\"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\":\"CTPFIwzU\",\"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\":\"DRwrMHeQ\",\"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\":\"/pLine truncated
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user